Webデザイナー向けに役立ちそうなリソースをまとめている・「Neede Design Resources」
Neede Design Resources Neede Design ResourcesはWebデザイナーやUI、UXデザイナーなどデザイナー向けのリソースを大量にまとめているキュレーションサイトです。ブランディングやカラー...
Resource - Webデザイン補助
大学の学生や教授が共同で作った3000以上の絵文字を公開するオープンソースのemojiプロジェクト・「OpenMoji」
OpenMoji OpenMojiは学生53人と2人の教授が共同で進めているオープンソースの絵文字プロジェクトです。現在3000以上ものSVGアイコンが本プロジェクトのスタイルガイドに従い、一貫したスタイルで作成、公開されてお...
コンテキストメニューからドラッグ中のテキストのフォント情報を調査出来るオープンソースのChrome拡張・「Fontanello」
Fontanello Fontanelloは右クリックで表示されるコンテキストメニューからドラッグしているテキストのフォントの情報を調べられるChromeエクステンションです。従来のエクステンションのようにわざわざ起動したりブックマー...
プロトタイピングツールのFigmaで使えるBootstrap 4用のUIキット・「Figma Bootstrap 4 GUI Components」
Figma Bootstrap 4 GUI Components Figma Bootstrap 4 GUI ComponentsはプロトタイピングツールのFigmaで使えるBootstrap 4用のUIコンポーネント集です。話題のF...
SVGアイコンを好みのカラーパレットに変更、ダウンロードできる・「SVG Colorizer」
SVG Colorizer SVG Colorizerは任意のSVGアイコンを好みのカラーパレットで色を変更、ダウンロードできるWebアプリです。アプリ側で用意したアイコンの他、任意のSVGファイルをアップロードすると自動で解析し、カ...
任意の画像から美しいカラーパレットを自動生成、エクスポートできる・「ColorKitty」
ColorKitty ColorKittyは任意の画像から美しいカラーパレットを自動生成、PNGやJSON、SCSS、HEXなどでエクスポートできるWebアプリです。自動生成されますが、自己調整も可能で、画像上のカラーピッカーの役割の...
ログインページや値段表、コンタクトフォームなどのUI/UXをより良くするためのチェックリスト・「Checklist Design」
Checklist Design Checklist Designは様々なUI/UXのベストプラクティスをチェックする為のリスト集です。例えばログインページならロゴは使われているか、ユーザーに何をさせたいかが明示されているか、どこにど...
アクセシビリティツールやデザインバージョン管理、モックアップや3Dモデリングなど、様々なデザイナーに役立ちそうなツールやリソースのまとめ・「Awesome Design Tools」
Awesome Design Tools Awesome Design Toolsは様々なデザイナー向けのツールやリソースを収集しているキュレーションサイトです。フィードバックツールを展開するFlawlessのスタッフが作成しているキ...
サンプルのUIを確認しながらカラースキームを作成、様々なコードでエクスポートできる・「Geenes」
Geenes GeenesはサンプルのUIを確認しながらカラースキームを作成、様々なコードにエクスポートできるWebアプリです。サンプルとして用意されたUI集のカラーが、色を変更する事でインタラクティブに変化するのでリアルタイムに確認...
色とアクセシビリティの関係について、インタラクティブな操作で体感しながら学べる・「Color.review」
Color.review Color.reviewは色とアクセシビリティに関してインタラクティブな操作で体感しながら学べるWebアプリです。用意されたカラーピッカー上には3本のラインがあり、色を変更する事で場所が移動します。このライン...
任意のカラーの組み合わせのアクセシビリティをチェックしてくれる・「Accessible Brand Colors」
Accessible Brand Colors Accessible Brand Colorsは任意のカラー同士の組み合わせのアクセシビリティチェックを行ってくれるツールです。2つ、あるいは複数のカラーを選択すると、そのカラー同士のア...
多機能なカラーピッカーを使えるChromeエクステンション・「Color by Fardos」
Color by Fardos Color by Fardosは多機能なカラーピッカーを使えるChrome拡張です。通常のカラーピッカーやカラー検索ツール、グラデーションツール、スポイトツールをコンパクトなエリアで使える、というもの。...
シンプルで見やすいフローチャートやワイヤーフレームを簡単に作成できる・「Whimsical」
Whimsical Whimsicalはシンプルで見やすいフローチャートやワイヤーフレームを作成、DLしたりシェアできるWebアプリです。よくあるやつですが最低限の機能を揃えつつも使いやすく分かりやすいUIという印象です。現在はフロー...
デザイナー向けのリソースを収集、公開しているプロジェクト・「DesignBase」
DesignBase DesignBaseはアプリやWebなどのデザイナー向けのリソースを収集しているプロジェクトサイトです。色やフォント、UI、モックアップからインスピレーション、ストックフォトなどなど様々なリソースがまとめられてい...
プロトタイプやフレームワークの為の落書きフォント・「Scribble Font」
Scribble Font Scribble Fontはプロトタイプやフレームワーク作成時用に作られた落書きタイプのフォントです。上図のような適当に書いたフォントをタイプできるようになります。同じ用途のフォントも既に開発されていますの...
InVisionがフリーで配布するPhotoshop/Skechのワイヤーフレームキット・「Form」
Form Formはプロトタイピングツールを展開するInVisionがフリーで配布しているワイヤーフレームキットです。Photoshop用とSkech用が配布されています。PC向け、スマフォ向け、タブレット向けがそれぞれ用意されており...
イージングに使われるペジェ曲線に合わせた法則でカラースキームを作り出す・「ColorBox」
ColorBox ColorBoxはイージングアニメーションの法則に沿って新たなカラースキームを作り出すプロジェクトサイトです。イージングの詳細は「イージングの基本 | Web | Google Developers」をご参照...
ダウンロード可能なさまざまなカラースキームを大量に保管している・「SchemeColor」
SchemeColor SchemeColorはさまざまなカラースキームを超大量に保管しているWebサイトです。ダウンロードや編集も可能です。基本的にはシンプルな機能ですが、量が非常に多く、ざっと数えただけでも1万ほどあるようです。ま...
美しいカラーパレットを手動収集している・「Trendy Palettes」
Trendy Palettes Trendy Palettesは美しいカラーパレットを手動収集しているパレットキュレーションサイトです。本ツールのユーザーや開発者が世間で人気の配色を収集しているそうです。本ツールはGradient H...
器や絵画、ポスター等、歴史的に利用されてきた美術品に利用されている色をパレットにした・「Color Leap」
Color Leap Color Leapは器や棺などの歴史的出土品やポスター、絵画など、今まで利用されてきた色をタイムライン上でカラーパレットとして確認できるプロジェクトサイトです。多くはなく、色の美しい美術品を厳選しているようで数...
ポスターとして印刷するために作られたPhotoshopのショートカットチートシート・「Photoshop Shortcuts And Commands Poster」
Photoshop Shortcuts And Commands Poster Photoshop Shortcuts And Commands PosterはPSのショートカットをポスター用に作成された高解像度のチートシートです。キ...
スマフォやタブレット向けのプロトタイピングツール・「MockingBot」
MockingBot MockingBotはスマフォやタブレット向けのプロトタイピングツールです。使いやすさに拘って開発したそうで、頭痛がおきない使い勝手の良さが特長だそうです。触った感想は、頭痛が起きるかどうかは個人によりけりでしょ...