kulerで気軽にカラーコーディネイト

第2回 kulerを触る:色理論を知らずとも,色理論にのっかる

この記事を読むのに必要な時間:およそ 3 分

kulerの配色ルールを知ろう。

kulerでは,画面左上のSelect Ruleから配色ルールを選択することで,7つのルールのどれか1つを選び,配色をつくることができます。理論を知らなくとも活用できる理由のひとつとしてあげられるのは,カラーホイールのポインタがそれぞれの配色ルールに従って連動しているからなのです。以下のそれぞれの配色ルールをみていきましょう。

Analogous:類似色

類似色とは,ベースカラーを基本として左右2つまでの配色をさしています。お互いに似ている要素を持ちますので,バランスのいい配色が得られます。

使う色の色相の幅を広くするとカラフルな色になり,派手な印象になりますね。逆に色相の幅を狭くすると,落ち着いた印象になります。

図9 Analogousを利用すれば,バランスのいい配色が得られる

図9 Analogousを利用すれば,バランスのいい配色が得られる

Monochromatic:モノクロ,単色

その名のとおりの,単色です。ベースカラーを基本として,1本のバーでつながっています。同じ色から,明度を変えることで配色パターンをつくりあげます。

単色だけだとメリハリがない感じになりますが,いくつかの彩度で組み合わせることによって上品な印象をもつことができます。

図10 Monochromaticを利用すれば,上品な印象をもつ配色が得られる

図10 Monochromaticを利用すれば,上品な印象をもつ配色が得られる

Triad:トライアッド

音楽理論をご存知の方にはなじみのある単語だと思います。三和音の完全な音の一致をさします。まさしく色では,3色のトライアングルで,色相の正三角形の調和です。

この3点の各頂点による配色がトライアッド。3色調和ともいいます。

図11 Triad。3色のトライアングルをつくることができる

図11 Triadの画面。

Complementary:補色(反対色),余色

向かい合う色を補色といいます。色の性格がまったく反対なので,反対色ともいいます。補色同士を組み合わせると,派手で力強い印象になります。

これは混合させると間色になり,印象は薄くなります。

図12 Complementaryを利用すれば,派手で力強い印象の配色が得られる

図12 Complementaryを利用すれば,派手で力強い印象の配色が得られる

Compound:間色,中間色

原色と原色の間に位置する色で,原色を混ぜ合わせてつくりだす色です。全体的に暖かみのある色に仕上がります。現代の配色パターンでよく見かけますので,とくにこの配色ルールで作ると,今風でそれなりに素敵な配色が得られます。

図13 Compoundを利用すれば,温かみのある配色が得られる

図13 Compoundを利用すれば,温かみのある配色が得られる

Shades:濃淡

ベースになる1色を基準に濃淡を決めるものです。単色との使い方の違いは,彩度をそれぞれに変えることができません。ちなみに,色の濃淡の変化を階調(グラデーション)といいます。

図14 Shades。1色を基準に濃淡を指定できる

図14 Shades。1色を基準に濃淡を指定できる

Custom:カスタマイズ

こちらは,その名のとおり配色のルールを決めずに,好きなように自分で配色を組み合わせることが可能です。例えば,kulerで見つけた配色テーマをもとに変更する際に活用できます。

図15 Custom。自由に配色を組み合わせることができる

図15 Custom。自由に配色を組み合わせることができる

著者プロフィール

吉田コマキ(よしだこまき)

ブロッコ・デリ・アーキテクツ有限会社 取締役 デザイナー/アートディレクター。販促企画を経て,1996年にweb業界へ足を踏み入れてしまい,そのまま現在に至る。主にWebデザイン,インタラクションデザイン,グラフィックデザインに関わる。毎日情報設計ばかりしているので,たまの休みに絵を描くことで文字情報から離れている。

日本グラフィックデザイナー協会(JAGDA)正会員/沖縄大学マルチメディア教育研究センター研究員。

URL:http://www.blocco-deli.co.jp/