![](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)
さまざまな色の知識を学べる・「Colors – Canva’s Design Wiki」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Google Web Fontsのフォントの表示確認が出来る・「Archetype」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
AndroidやiPhone、iPad等でのデバイスで表示確認が出来る・「Sizzy」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意の画像をアップロードするとその画像を元にカラーパレットを作成してくれる・「Pictones」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
パターン素材を表示確認しながら探せる・「Lisbon Azulejos」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
モックアップ作成用に作られたSILライセンスの棒状フォント・「MockFlowFont」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意の色の組合せでアクセシビリティチェック出来る・「Hex Naw」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
accessibleなカラーパレットの作成をサポートしてくれる・「Accessible color palette builder」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
美しいグラデーションを大量に収集、CSSをコピーできる・「WebGradients」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
データの可視化に関するツールや知識、リソースをまとめている・「dataviz.tools」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意のWordPressのテーマのスタイルをチェックできるテスト用データ・「WP Test」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
さまざまなタイプのチャートの特徴や用途、目的など、使い方を解説してくれる・「Chartopedia」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
WCAGのガイドラインに沿ったカラーコントラストを複数まとめて確認出来るコントラストテスター・「Colorable Matrix」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Photoshopのツールやリソースを公開する・「UberPlugins」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
複数のストックフォトサイトやフォント、モックアップ、動画の配布サイトをその場で探せる・「TheStocks」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
ブラウザで使える、Framer.jsを使ったプロトタイプのインタラクションテストツール・「Prototyp」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意のカラーを任意の名前で登録、クリップボードにコピーできるシンプルなカラーツール・「HexCandy」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンション・「tachyons-x-ray」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
Webデザイナー向けのリソースを目的別にまとめている・「Freestack」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)
画像をアップロードすると、その画像内で使われているフォント名を割り出してくれる・「Matcherator」
![](https://kachibito.net/wp-content/themes/cocoon-master/images/no-image-320.png)