Webデザインの色の組み合わせで迷ったときに役立つツールまとめ

藤田


Webデザインの色の組み合わせで迷ったときに役立つツールまとめ

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

配色支援ツール

Adobe Kuler

img01

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

 

使い方

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

img02

 

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

img03

 

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

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

img04

 

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

img05

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

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

Color Scheme Designer 3

img06

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

使い方

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

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

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

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

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

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

img07

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

 

color hailpixel

img08

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

使い方

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

img09

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

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

HUE/360

img10

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

使い方

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

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

おまけ

ColorZilla

img11

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

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

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

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

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

「Webデザインの参考になるギャラリーサイトまとめ33選」には、上記の例以外にも多数のギャラリーサイトが載っております。

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

まとめ

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

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

藤田
この記事を書いた人
藤田

デザイナー

関連記事

こちらもおすすめ

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

  • 著者秋元 英輔,安藤 真衣子,五十嵐 亮太,稲葉 聡,大串 肇,小見 祐介,日下部 忠之,倉持 友喜,小杉 厚太,後藤 寛一,シオミユタカ,菅原 のびすけ,清野 奨,高遠 和也,高橋 としゆき,中村 大騎,羽野 めぐみ,肥田 真紀子,松本 奈央,miccweb,宮崎 優太郎,森崎 嘉友
  • 出版日2015/08/18
  • 商品ランキング15,314位
  • Kindle版ページ
  • 出版社エムディエヌコーポレーション(MdN)