1行のコードで使えるJavaScriptユーティリティのまとめ・「1loc」
1loc 1locは1行のコードで使えるJavaScriptユーティリティをまとめているプロジェクトサイトです。名前は1行のLOC (line of code)という意味のようです スニペットのまとめページ、みたいなもの。配列や...
Resource - Webデザイナー向け
地域別に任意のカラーで色付けてラベル名を設定し地図チャートを作れる・「MapChart」
MapChart MapChartは地域別に任意のカラーで色付けてラベル名を設定し地図チャートを作れるWebアプリです 天気予報とか花粉情報なんかで日本でもよく見かけるアレを作れる、みたいなやつです 見た方が早いと...
Windows98を再現できるCSS・「98.css」
98.css See the Pen GRpWyyz by kachibito (@kachibito) on CodePen. 98.cssはWindows98のUIを再現できるCSSです。基本的にはフォーム回りやダ...
様々なタイプのCSS製の背景パターンを作成出来るスタイルシート・「pattern.css」
pattern.css pattern.cssはCSSだけで作れる様々な背景パターンを手軽に作れるスタイルシートです ドットや縦線、横線、斜めなどのストライプ、ジグザグなどを作成可能で、色やサイズも手軽に変更できるようになってい...
2色を選択するだけで関連するカラーパレットを1万以上提案してくれる・「Palette List」
Palette List Palette Listは2色を選択するだけで関連するカラーパレットを1万以上提案してくれるカラーアプリです 用意された12色から選択すれば自動生成されます。パレットはSVGやSASS、CSSなどでダウ...
任意のWebサイトのURLを入力するだけでダークモード用のCSSを自動で作成してくれる・「Night Eye」
Night Eye Night Eyeは任意のWebサイトのダークモード用CSSを自動生成してくれるジェネレーターです 使い方も簡単でURLを入力するだけ。自動で解析し、ダークモードに対応したCSSを生成してくれます あと...
CC0で配布される150以上のコンポーネントが含まれたモバイル向けプロトタイプ用のワイヤーフレームキット・「Contra」
Contra ContraはCC0で配布される150以上のコンポーネントが含まれたモバイル向けプロトタイプ用のワイヤーフレームキットです 配布されるファイルはFigma、Sketch、Adobe XD、Invision Stud...
任意のWebサイトのスクリーンショットを取得するOSS・「Webshot」
Webshot Webshot任意のWebサイトのスクリーンショットを取得するWebアプリです ドメイン+対象URL+パラメーターだけで取得できるシンプルな仕様となっています。パラメーターはいろいろ用意されてました ...
UIデザイナーが3年間、スキルアップのためにデザインした1000以上のファイルをCC0で公開するプロジェクト・「UI Design Daily」
UI Design Daily UI Design DailyはノルウェーのUIデザイナーがスキルアップのために3年間デザインした1000以上のファイルをCC0で公開するプロジェクトです SkechやPS、Figma、XDやIn...
あらゆる画面サイズに対応できるよう設計されたモバイルファーストなscssフレームワーク・「Honeycomb」
Honeycomb Honeycombはあらゆる画面サイズに対応できるよう設計されたモバイルファーストなscssフレームワークです フォントやレイアウトなど、どんなサイズのモニタでも見栄えがよく分かりやすいUIを提供してくれると...
説明的なネーミングを施された実験的なカラーパレットを紹介する・「colors.lol」
colors.lol colors.lolは説明的なネーミングを施された実験的なカラーパレットを紹介するプロジェクトサイトです 色の名前の無いものに説明的な名前を付けてパレットを作る、みたいなプロジェクトみたいです。名前にはちょ...
CSS製の円グラフを手軽に作れるWebアプリ・「CSS Pie Chart Generator」
CSS Pie Chart Generator CSS Pie Chart GeneratorCSS製の円グラフを手軽に作れるシンプルなWebアプリです 画像だと管理が面倒だしCSSだとコード書くのが面倒な円グラフなので地味に需...
開発者向けの様々なチェックリストを公開している・「Checklist」
Checklist Checklistは開発者向けの様々なチェックリストを公開しているプロジェクトサイトです どこかで公開されているチェックリストを引っ張ってきているのではなく、こちらを公開しているAtölye15が社内で共有し...
unsplashの写真を比較してダウンロード数が多い方を当てるゲーム・「TopShot」
TopShot TopShotはunsplashの写真を比較してダウンロード数が多い方を当てるゲームアプリです CC0でクオリティの高い写真を提供するunsplashの写真で2つの写真を比較、DL数が多い方を選べたら次へ、間違え...
シンプルで汎用的な、オープンソースで提供される300以上のSVGアイコンセット・「Tabler Icons」
Tabler Icons Tabler Iconsはシンプルで使いやすい、オープンソースで提供される汎用的な300以上のSVGアイコンセットです TablerはOSSのシンプルなダッシュボードを提供するプロジェクトで、その一環で...
ユーティリティに焦点を当てた、インタラクティブなUI開発をサポートするCSSフレームワーク・「Shorthand」
Shorthand Shorthandはユーティリティに焦点を当てたモダンなCSSフレームワークです。インタラクティブなUI開発をサポートしてくれそう いわゆるプロパティの一括指定(ショートハンド)に関するものではなく、単純に開...
スミソニアン博物館に保管されている美術品など280万点をデジタル化、データをダウンロードできる・「Smithsonian Open Access」
Smithsonian Open Access Smithsonian Open Accessはアメリカにあるスミソニアン博物館に保管されている美術品など280万点をデジタル化、データをダウンロードできるオープンプロジェクトです ...
SVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリ・「Iconset」
Iconset IconsetはSVGアイコンを一か所でまとめて整理、管理できるデスクトップアプリです MacアプリのIconJarと似たような感じでしょうか。フォルダを作ってセットで管理しつつ、アイコン単体にタグ付けす...
Webデザイナー向けに収集されたカラーとフォントのツールやリソースをまとめている・「Colors & Fonts」
Colors & Fonts Colors & FontsはWebデザイナー向けに収集されたカラーとフォントのツールやリソースをまとめているWebサイトです よくあるキュレーションサイトのように様々なアプリや記事をたんたんと纏め...
CC0で配布されている、髪型や顔などのパーツの組み換え可能な人物イラストを配布するプロジェクト・「Open Peeps」
Open Peeps Open Peepsは髪型や顔などのパーツの組み換え可能な人物イラストを配布するプロジェクトです CC0で配布されており、商用でも個人でも無料で自由にクレジット不要で利用する事が出来ます イラストは全...
プレビューを見ながら任意の平面充填を描画できるユニークなタイリング専用ドローツール・「EscherSketch」
EscherSketch EscherSketchはプレビューを見ながら任意の平面充填を描画できるドローツールです いわゆるタイリングを、結果を見ながら作成可能で、作ったタイル絵はタイル単位で保存したり描画する様子をSVGで保存...
Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」
GuideChimp GuideChimpはWebページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプトです 使い方も手軽で簡単、既存のWebページにも組み込む事が出来ます。nextはカーソルキーにも対応してあり...