104

Category

4配色のセオリー

Design Theory Point of Design

配色しやすい色のセオリー色を良く理解すると、適切な色使いが見えてくる

モニタ画面で確認するWebでは光の三原色（RGB）が基本だ。この３原色から光の波長（スペクトル）が含む主な色である12 色が表現できる。この赤から紫までの12 色で構成した円を色相環と呼ぶ。R（赤）とG（緑）を混ぜればその中間にある黄色（２次色）ができ、黄色と赤を混ぜるとその中間のオレンジ（３次色）ができるという補完関係を持つ。色相環はこうした３つの色の関係性を含んでいる。ある１色を基準として隣り合った色同士で、自然界にある色に似た調和をもたらす関係性が類似色だ。補色は色相環の対角線上に位置する関係で、互いを最も引き立てる色合いになる。等色相差は色相環で三角形を構成する色の関係で、緊張感の高い配色をもたらす。この色相環から派生した３相が配色の基礎となる。

03

類似色による配色はマッチする色の基本だ。オレンジや赤などキーカラーを１つ定めてその両隣の色相関係からバリエーションを作る。ただし光の性質上もっとも良く見えるために色数が多い緑系は、類似色同士に見かけ上の差があまり感じられない。黄色を中心としたオレンジとの配色に含むとバリエーションとまとまりが同時に感じられる。

Point 1

類似色

補色は印刷物では目を引く配色として用いられるケースも多いが、モニタ上では異なる色同士の境目にハレーション現象が起きて見えにくい配色になる。補色関係の色を混ぜ合わせると無彩色（モニタ上ではグレー）になるという性質上、境目に影が感じられる現象で、眼精疲労にもつながる。Webでは禁じ手だが色の性質を把握するには知っておきたい関係性だ。

Point 2

等色相差は補色ほど強力に相反せず、適度な緊張感を表現できる配色だ。類似色による配色にポイントとして目立つ箇所を作りたい場合、この関係性から色を選択すると効果がある。

Point 3

P097-122_Category4.indd 104 05.11.1 11:30:32 PM

105

Category

4

Theory of C

olor Scheme

Basic of Design Design Samples

色相環に含まれる２相

　色には寒色と暖色の２相がある。寒色は冷静さや落ち着きをもたらす配色で、見る人と色の間に距離を感じさせる 01。そのためPCのデスクトップ上の背景色などに広範囲で使われることが多い。暖色系はエネルギーや活発さをもたらす色で、逆に画面から突出して見える 02。色はこうして陰と陽の相に２分できる。

色のバリエーションを拡張するトーン

　色は色そのものの違いである色相の他、同一の色相だけでも明度、彩度の差で豊富なバリエーションを作ることができる 03 04。明度と彩度は合わせてトーンとも呼ばれ、同じ色による別トーンでのバリエーションは美しい配色を構成できる手段のひとつだ。また

トーンは色の印象を変更する手段にもなる。原色の類似色によるカラーバリエーションに子供っぽい印象が出てしまえばトーンを下げてシックにまとめるといった調整を加えることができる。

色を使わないという選択もある

　有彩色と無彩色のバリエーションも美しい配色の１つである。色味を感じる有彩色に、白から黒までの中間色を利用した無彩色を合わせる 05。特に配色に慣れていない入門者に最適で、まとまりのある色合いを簡単に作ることができる。ただし黒は色の中でも支配力が強いので、バランスを考えて使用しないとまとまらない場合もある。50％程度のグレーが配色もしやすく、可読性や可視性も高く使い勝手が良い。

ヨハネス・イッテン

スイスの造形作家であり、ドイツの造形学校、バウハウス初期のマイスターであったヨハネス・イッテン（1888-1967）は、色を12色環という図に置き換え、色彩学を体系化したことで有名だ。色に補色の関係があることを指摘し、明度や彩度差で異なる印象の配色が構成できることに言及している。特に面積や色の関係性で印象が異なるという色の性質を明らかにしたことは、絵画が中心だった色彩探求のフィールドを家具や建築などすべての製品に押し広げた。色の機能を利用しながら製品の価値を高める現代のプロダクトデザインに影響を与え続けている。

Column of Design

アールシステム株式会社http://www.nimius.net/

同一の色相から異なるトーンのバリエーションを配色に使用した例

広告効果測定システム『アド・エビス』http://www.ebis.ne.jp/

明度を押さえた色相差のバリエーションをグレーで抱き込んでまとめている

Cor Unumhttp://www.corunum.nl/

等色相差に近い配色ながら、トーンを押さえた設定で品を出している

01 02

0403

05

P097-122_Category4.indd 105 05.11.1 11:30:36 PM