こんにちは、デザイナーの藤田です。「人生は選択の連続である」とは、かのシェークスピアの名言です。とはいえ、選択とはなかなか難しいもの。
今回の記事では、人生の選択をお助けできなくても、WEBデザインを行う上で配色の選択をお助けをしてくれるツールについてまとめました。

配色支援ツール

Adobe Kuler

https://kuler.adobe.com/create/color-wheel/

「Adobe Kuler」では、さまざまな色の組み合わせを作成・保存し、それらを公開、さらにPhotoshopやIllustratorのスウォッチに取り込むことができます。
また、ほかの人が作った配色パターンも見ることができます。

使い方

使い方はいたってシンプルです。AdobeのソフトがCS4以降なら「ウインドウ」メニューから「エクステンション」→「Kuler」を選択すると、Kulerパネルが開きます。

「参照」タブを押した後、配色の検索キーワードを入力し（今回はpastelと入力）、検索結果から気に入った配色を選んだ後、以下の赤枠内のボタンを押すと、配色がスウォッチに登録されます。

また「作成」タブを押すと、自分で配色パターンを作成することも可能です。カラーパレットや明度・RGB・カラーコードで基本カラーを選ぶと、選択した「ルール」に基づいてサブカラーが変化します。

「ルール」を「カスタム」にすると個別に色を選ぶことができます。

作成した配色パターンはWEB上に保存しましょう（Adobe IDが必要）。
ここでは他の人が作った配色パターンをダウンロードすることもできます。

WEB版のAdobe Kulerの使用方法としては以下の記事が参考になりました。

参考：「Adobe Kuler を使い倒す！カラーテーマ作成から配色のテストまでの作業工程」

http://unguis.cre8or.jp/design/1044

Color Scheme Designer 3

http://colorschemedesigner.com/

直感的に操作ができ、メインカラーと使用したい色数や組み合わせ方を選ぶだけで、相性の良い配色を作成してくれるツールです。
 

使い方

とてもシンプルなので説明を読み飛ばしても大丈夫かとは思いますが、以下のように使用いたします。

1. 左のサークル上の使用したい系統の色を選びます。（この時点ではざっくり）
2. 選んだ色の上の6つ並んだサークルで、色の組み合わせをどのようにするか、以下のように選びます。

• 「mono」 単色
• 「complement」 反対色
• 「triad」 三色調和
• 「tetrad」 四色調和
• 「analogic」 類似色
• 「accented analogic」 類似色 + アクセント色

3. 左のサークル下のタブの「Adjust scheme」で、彩度・明度を調節。「preset」から大まかな調整も行えます。

上記の手順で作成した、配色パターンのパレットの下にあるタブより、選んだ配色を使用したWEBサイトのサンプルを以下のように見ることができます。

• 「Light page example」 背景を明るく設定した場合のサンプルページ
• 「Dark page expamle」 背景を暗く設定した場合のサンプルページ

サンプルがイメージ通りだったら、「Adjust scheme」の隣にある「colorlist」から選んだ配色のカラーコードを確認することができます。

color hailpixel

http://color.hailpixel.com/

こちらも使い方はいたってシンプル！マウスを動かすだけで配色パターンを作れます。

使い方

最初は以下のような画面ですが、

• マウスを左右に動かすと、色相が変更されます。
• マウスを上下に動かすと、明度が変更されます。
• 上下にスクロールすると、彩度が変更されます。

画面をクリックしていくと相性の良い色を選んでいくことができます。

HUE/360

http://hue360.herokuapp.com/

上記で紹介した「color hailpixel」より更にシンプルです。メインカラーを決めると自動で相性の良い色を選んでくれます。
 

使い方

まず「Brightness」で明るさを選びます。次にメインカラーを1つ選ぶと、自動でメインカラーと合わない色を消してくれるので、残りの色はどれを選んでもサブカラーとして相性の良い色となります。

選んでいった色は画面下に表示されていき、「Print　User　Color」をクリックすると選んだ配色のカラーコードを確認することができます。

おまけ

ColorZilla

https://addons.mozilla.org/ja/firefox/addon/colorzilla/

Firefoxのアドオンで、ページ内の色をスポイトで選んでカラーピッカーから使用色の数値をコピーすることができます。

シンプルな機能ですが、ギャラリーサイトを閲覧している際にはかなり重宝します。

使用色ごとにソート機能を持ったギャラリーサイト

• 参考：S5-Style

  http://bm.s5-style.com/

• 参考：I/O 3000

  http://io3000.com/

• 参考：MUUUUU.ORG

  http://muuuuu.org/

• 参考：straightline bookmar

  http://bm.straightline.jp/

• 参考：イケサイ ウェブデザイナーのWEBデザインデータベース

  http://www.ikesai.com/

• 参考：WEBデザインの見本帳

  http://www.web-mihon.com/

特にカラー別にソートすることを意識して作成されたギャラリーサイト

• 参考：Colorgorize the Web

  http://www.colorgorize.com/

• 参考：CSSclip

  http://cssclip.com/

（改めて見ると、大体のギャラリーサイトは色別にソートできますね。）

LIGブログの過去記事「プロが選ぶ、ウェブデザインのまとめサイト35選！」を見てみると、上記の例以外にも多数のギャラリーサイトが載っております。

また、WEB DESIGN COLOR TESTERは選んだ配色をWEBデザインに反映すると、どのようなイメージになるかを、簡単に再現できるサービスなのでこちらも便利です。

まとめ

いかがでしたか？どれも便利なツールばかりでしたね。今回紹介したツールを使用すれば、誰でも簡単に配色を作成できますが、やはり基本的な色の知識は身に付けておきたいものです。

私も支援ツールや感覚に頼らず、配色のロジカル的な部分の勉強が必要なので、近々そちらについての記事も執筆します。重ねてよろしくお願いいたします。