Webデザイン補助

さまざまな色の知識を学べる・「Colors – Canva’s Design Wiki」

Google Web Fontsのフォントの表示確認が出来る・「Archetype」

AndroidやiPhone、iPad等でのデバイスで表示確認が出来る・「Sizzy」

Ads

任意の画像をアップロードするとその画像を元にカラーパレットを作成してくれる・「Pictones」

パターン素材を表示確認しながら探せる・「Lisbon Azulejos」

モックアップ作成用に作られたSILライセンスの棒状フォント・「MockFlowFont」

任意の色の組合せでアクセシビリティチェック出来る・「Hex Naw」

accessibleなカラーパレットの作成をサポートしてくれる・「Accessible color palette builder」

美しいグラデーションを大量に収集、CSSをコピーできる・「WebGradients」

データの可視化に関するツールや知識、リソースをまとめている・「dataviz.tools」

任意のWordPressのテーマのスタイルをチェックできるテスト用データ・「WP Test」

さまざまなタイプのチャートの特徴や用途、目的など、使い方を解説してくれる・「Chartopedia」

WCAGのガイドラインに沿ったカラーコントラストを複数まとめて確認出来るコントラストテスター・「Colorable Matrix」

Photoshopのツールやリソースを公開する・「UberPlugins」

複数のストックフォトサイトやフォント、モックアップ、動画の配布サイトをその場で探せる・「TheStocks」

ブラウザで使える、Framer.jsを使ったプロトタイプのインタラクションテストツール・「Prototyp」

任意のカラーを任意の名前で登録、クリップボードにコピーできるシンプルなカラーツール・「HexCandy」

任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンション・「tachyons-x-ray」

Webデザイナー向けのリソースを目的別にまとめている・「Freestack」

画像をアップロードすると、その画像内で使われているフォント名を割り出してくれる・「Matcherator」

Web制作に役立つツールやリソースを厳選してまとめている・「StockJo」

DribbbleやBehanceでフリーで公開されているデザインリソースをまとめている・「DBFreebies」