ツールやグラデーション、パレットやブランドカラーサンプルなど、色に関する様々な大量のリソースを集約した・「Colorsinspo」
Colorsinspo Colorsinspoは色に関する様々な大量のリソースを集約しているプロジェクトサイトです グラデーションやカラーツール、パレットサンプルやブランドカラーサンプル、インスピレーションの為の情報など、色に関...
Resource - Webデザイン補助
コントラストをベースに作れるOSSのカラージェネレーター・「Leonardo」
Leonardo Leonardoは子トラストベースのカラージェネレーターです。設定したキーカラーを元にコントラストを調整する事でカラースキームを生成する、というもの コントラストで調整する事で当方のブログのようにアクセシビリテ...
モックアップ等でダミーテキストを表現する為のSVGを作成出来る・「Wireframer」
Wireframer Wireframerはモックアップ等でダミーテキストを表現する為のSVGを作成できるシンプルなWebアプリです たまにインフィニティスクロールのローディング時での採用も見かけますね。テキストが表示されますよ...
レスポンシブWebデザイン表示一括確認Chromeエクステンション・「ResponsiveViewer」
ResponsiveViewer ResponsiveViewerはレスポンシブWebデザインの表示をさまざまなサイズで一括確認出来るChrome拡張です 各デバイスはモニタサイズとUAが設定されており、任意のモニタサイズおよび...
100日間書き続けた様々なイラストをオープンソースとして配布する・「illlustrations」
illlustrations illlustrationsはデザイナーのvijay vermaさんが行った100日チャレンジで100日間書き続けたイラストをOSSとして公開したイラスト集です 多種多様な100個のイラストがMIT...
SketchやAdobe XD、Figmaなどのプラグインを大量に収集している・「Awesome Design Plugins」
Awesome Design Plugins Awesome Design PluginsはSketchやAdobe XD、Figmaなどのプラグインを大量に収集しているキュレーションサイトです 各プラグインはそれぞれアクセスビ...
SVGやPNGで出来た5000以上のタータンチェックなパターン素材を配布する・「Tartanify.com」
Tartanify.com Tartanify.comはSVGやPNGで出来た5000以上ものタータンチェックのパターン素材を配布するプロジェクトサイトです。右側にインデックスがあり、そこから各タータンのページに移動できます こ...
URLを入力すると、そのWebページの全体スクリーンショットを撮ってくれる・「Fullpagescreencapture.com」
Fullpagescreencapture.com Fullpagescreencapture.comはURLを指定すると、そのWebページの全体のスクショを撮ってくれるWebアプリです 普通に撮るだけならDevtoolsでいい...
unsplashの写真から自動でカラーパレットを作成している・「ImageHues」
ImageHues ImageHuesはunsplashの写真を元に自動でカラーパレットを作成しているプロジェクトサイトです Favorite機能以外、特に特別な機能は無いシンプルな仕様ですが個人的には割と好きでしたので備忘録と...
実際に使用した風のUIを確認できるカラーパレットジェネレーター・「Muzli Colors」
Muzli Colors Muzli Colorsは実際に使用した風のUIを確認しながらカラーパレットを作成できるカラースキームジェネレーターです。写真をアップロードしてカラーパレットを自動生成する事も可能です。 以前ご...
任意のSVGのstrokeやfillをアニメーションさせるWebアプリ・「SVG Artista」
SVG Artista SVG Artistaは任意のSVGにアニメーションエフェクトを付与するWebアプリです。 SVGのコードを貼るか、読み込ませると、コードを解析してCSSを作成、アニメーションさせてくれる、というもの。 ...
任意のベースカラーを設定すると、WarningやSuccessなどの最適なアラート用カラーを自動で選出してくれる・「Eva Deep learning color generator」
Eva Deep learning color generator Eva Deep learning color generatorは任意のベースカラーを元に、最適なアラート用カラーを選出してくれるカラーアプリです。名前の通り、ディ...
カラーコードの文字に焦点を当てた実験的なカラーツール・「#c0ffee is the color」
#c0ffee is the color #c0ffee is the colorはカラーコードの文字に焦点を当てた実験的なカラーツールです。ABCDEFのいずれかを含む文字且つ、6文字か3文字の単語を辞書から抽出し、該当するカラーコ...
Webデザイナー向けに役立ちそうなリソースをまとめている・「Neede Design Resources」
Neede Design Resources Neede Design ResourcesはWebデザイナーやUI、UXデザイナーなどデザイナー向けのリソースを大量にまとめているキュレーションサイトです。ブランディングやカラー...
大学の学生や教授が共同で作った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集のカラーが、色を変更する事でインタラクティブに変化するのでリアルタイムに確認...