Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス

Webデザイン関連(RSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。

Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス

color
Webサイトの制作時にいつも
時間がかかるのがカラー選定
で、少し困っているのでもう少し
時間を短縮したいと思い、使って
いるツールも含めていろいろご紹介。

いろいろ有りすぎるので使いやすいと思ったサービスに厳選しています。順不同。使いやすさとか好みもあると思うので参考程度に。。。ネタ帳さんのwebサイト作成時にサイトカラーを決められない人の為のwebサービスいくつかという記事も凄く参考になりますよ。

原色大辞典

color-tool00
色のリファレンス国内サイト。国内にも同じようなサイトは沢山ありますが個人的にここが一番見やすくて使いやすいです。

原色大辞典

colr.org

color-tool01
写真からスキームを作成してくれます。手持ちの画像をアップロードしてスキーム作成も可能ですが、flickrからランダムで呼び出したり、ピッカー機能があったり、タグ付け出来たりと多機能ですが、UIがシンプルで使いやすい。動作も軽いので重宝します。FirefoxユーザーならColorSuckrというアドオンで画像からカラースキームを作成できます。

colr.org

ColorJack: Sphere

color-tool02
こちらもカラースキームジェネレーター。破綻しない配色を作り出してくれます。サークル内のどこをクリックしても相性のいいカラーを抽出してくれるのでお手軽です。上記のとこちらの両方とも合わないようならまだまだあるカラーツールいろいろという記事をご参照下さい。

ColorJack: Sphere

Color of Book

color-tool03
以前も記事でご紹介した国産ツール。ファッション雑誌などセンスある配色例を参考に出来る。Amazonから雑誌を引っ張ってその画像に使われているカラーを出してくれます。

Color of Book

COLOURlovers™

color-tool04
配色のトレンドや例、配色をうまく使ったパターンの紹介など色の総合サイトです。何より日本語化を頑張ってくれているのが嬉しいですね。完全ではありませんが、英語が苦手でもハードルが凄く低くなるのでは無いかと思います。リンクは日本語版にしていますが、英語版に戻したければ右下の国旗をクリックしてください。

COLOURlovers™

Flickr Color Selectr

color-tool05
Flickrからクリエイティブコモンズライセンスの画像をカラーで探す事が出来ます。色を決めると自動で写真を抽出してくれるので楽です。いい写真が多いのでこういう写真を使えば良さそう、など参考になります。フッターが気になるんですが・・・

Flickr Color Selectr

ColorZilla

color-tool06
Firefoxのアドオンで、見てるページ内のどこでもピッカーを使え、カラーコードを取得、コピー出来ます。シンプルな機能ですがかなり重宝しています。導入すると左下にスポイトが現れるのでクリックして取りたい色の上でクリックすれば取得できます。後はスポイトの上で右クリックでコピーしたり確認したり。Fxユーザーでない場合はフリーソフト（例えばColorPicとか）を使うと良さそうです。

ColorZilla

cssclip

color-tool07
ギャラリーです。ギャラリーは沢山ありますが、ここはカラー別に見れるのと、1ページの表示数の多さ、日本サイトも入ってる、ギャラリーにしてはサイトが重くない等の理由でよく見ています。サムネイルが小さいですが、マウスオーバーで大きな画像が表示されます。

cssclip

pattern8

color-tool08
背景で困った時に。ここもカラーでギャラリー形式に見れるので使わなくてもインスピレーション向上になったり。

pattern8

Google画像検索

color-tool09
お馴染みのGoogleの画像検索ですが、オプションで検索した画像に検索ツール→カラーフィルタをかける事が出来ます。Google画像検索は検索オプションでライセンスフィルタを掛けられるので素材に困った時に見るのもいいかもしれません。※著作権は注意した方がいいです

Google画像検索

CheckMyColours

color-tool10
サイトに使われているカラーのコントラストチェックが出来るWebサービスです。視覚障害の方用の配色も可能。項目は左から「コントラスト」「明暗」「色彩（たぶん）」です

CheckMyColours

色のバリアフリーに配慮した色見本

color-tool11
色覚に障害がある方でも見分けられるカラーの見本です。以前僕も黒背景に赤は見えないとご指摘頂きましたのでこの辺は確認しておきたいところです。

色のバリアフリーに配慮した色見本

IROUSE

color-tool12
Webではありませんが、ファッションで使われる色彩などの情報サイト。例えば女性がターゲットのサイトなら女性が好む色彩を調べる、など参考になります。心理に基づいた配色、色が与える印象なども見るといいヒントになるかも。配色に関してはよりよいWebデザインにするための配色のセオリーという記事も合わせて読んでおきたい。

IROUSE

おまけ：配色見本ハンドブック

color-tool14
　カラーチャートのリファレンス的な書籍。

　　小さいので持ち運びも手軽に出来るので
　　通勤中に見るだけでもインスピレーション向上
　　しそうです。

　　サンプルもあるので見やすいかとおもいました。
　　この本に限りませんが本は持ち運べる単行本の
　　サイズがかさばらないし個人的にお勧めです。

キーカラーで選べる配色見本ハンドブック (MdN BOOKS)

以上、色で困ったときのサイトまとめでした。個人的に参考にしてるサイトですのでお役に立てないかもしれませんが。カラー選定は時間がかかりやすいのでサクッと決められるとWeb制作の大幅な時間短縮になりそうですね。

頂いたコメント
トラックバック
お読み下さい

【Web制作時に色（カラー選定）で困った際に役立ちそうな13のツールやサービス】へのコメント 9

原色大辞典

このたびは、当サイト「原色大辞典」をご紹介頂き、ありがとうございました。

引用

09-12-09 » 2:32 AM »
シロ

＞原色大辞典さん

おおー！コメント有難う御座います！

こちらこそ素晴らしいサイトで助かっております

引用

09-12-19 » 10:48 AM »