![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Webデザイン補助
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
ツールやグラデーション、パレットやブランドカラーサンプルなど、色に関する様々な大量のリソースを集約した・「Colorsinspo」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
コントラストをベースに作れるOSSのカラージェネレーター・「Leonardo」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
モックアップ等でダミーテキストを表現する為のSVGを作成出来る・「Wireframer」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
レスポンシブWebデザイン表示一括確認Chromeエクステンション・「ResponsiveViewer」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
100日間書き続けた様々なイラストをオープンソースとして配布する・「illlustrations」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
SketchやAdobe XD、Figmaなどのプラグインを大量に収集している・「Awesome Design Plugins」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
SVGやPNGで出来た5000以上のタータンチェックなパターン素材を配布する・「Tartanify.com」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
URLを入力すると、そのWebページの全体スクリーンショットを撮ってくれる・「Fullpagescreencapture.com」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
unsplashの写真から自動でカラーパレットを作成している・「ImageHues」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
実際に使用した風のUIを確認できるカラーパレットジェネレーター・「Muzli Colors」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意のSVGのstrokeやfillをアニメーションさせるWebアプリ・「SVG Artista」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意のベースカラーを設定すると、WarningやSuccessなどの最適なアラート用カラーを自動で選出してくれる・「Eva Deep learning color generator」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
カラーコードの文字に焦点を当てた実験的なカラーツール・「#c0ffee is the color」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Webデザイナー向けに役立ちそうなリソースをまとめている・「Neede Design Resources」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
大学の学生や教授が共同で作った3000以上の絵文字を公開するオープンソースのemojiプロジェクト・「OpenMoji」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
コンテキストメニューからドラッグ中のテキストのフォント情報を調査出来るオープンソースのChrome拡張・「Fontanello」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
プロトタイピングツールのFigmaで使えるBootstrap 4用のUIキット・「Figma Bootstrap 4 GUI Components」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
SVGアイコンを好みのカラーパレットに変更、ダウンロードできる・「SVG Colorizer」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意の画像から美しいカラーパレットを自動生成、エクスポートできる・「ColorKitty」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
ログインページや値段表、コンタクトフォームなどのUI/UXをより良くするためのチェックリスト・「Checklist Design」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)