色相環と配色理論

ねらい

前のクエストで、どんな色も三本の物差し――色相（色味の種類）・明度（明るさ）・彩度（鮮やかさ）――で言い表せると学んだ。今回は、そのうちの一本「色相」だけを取り出して、ぐるりと円に並べる。これが**色相環（しきそうかん）**だ。

なぜわざわざ円にするのか。地図にするためだ。色をバラバラに置くと、「この色とこの色、合うかな？」は毎回カンになる。でも円に並べると、隣どうし・正反対・三角といった「位置の関係」で配色を選べる。カンが、地図上の操作に変わる。

このクエストのねらいは一つ。円のどこを取るかで配色の型が決まる――その仕組みを、理由ごと身につけることだ。なぜ正反対の色（補色）は目を引き、隣の色（類似色）はまとまるのか。そこまで分かれば、配色は「センス」ではなく「狙って選ぶもの」になる。

なぜ円なのか —— ニュートンが「端」を「つなげた」

話はまたアイザック・ニュートンから始まる。前章で、彼がプリズムで白い光を虹の七色に分けたのを見た。虹は一本の帯だ。赤・橙・黄・緑・青・藍・紫と、左から右へ一直線に並ぶ。

ここでニュートンは不思議なことに気づいた。帯のいちばん端の赤と、反対の端の紫。波長の数字だけ見れば、これは一本の帯のいちばん遠い両端どうしだ。なのに、見た目には似ている。赤紫として、すっと隣に感じる。そこで彼は大胆なことをした。帯の両端をくっつけて、輪っかにした。 こうして世界で最初の色相環が生まれた。『光学（Opticks）』(1704) の中に、その円が描かれている。

ちなみにニュートンは音楽好きで、七色を音階（ドレミ…）の幅に重ねて円を区切った。色と音を、ひとつの輪の上で同じものとして考えたのだ。私たちのこの本が「音楽理論のデザイン版」を目指しているのも、もとをたどればこの発想に近い。ただ、彼が両端をつなげて円にした動機の土台にあったのは、もっと素朴な事実――端の赤と端の紫が似て見える、という観察だった。

ここに大事な事実が一つある。色相環は誰かのデザインの好みで作った飾りではない。「端と端が似ている」という、目に見える事実から、自然に出てきた形だ。だから世界中どこでも、色相は円になる。これは典拠主義（判断を「これに基づく」と出どころで裏づける、この本の立場）の良い例だ――色相環は約束事ではなく、観察から導かれた結論なのだ。

マンセルが「測れる円」にした —— 三属性の続き

ニュートンの円は手描きで、色の位置もあいまいだった。これを測れる円に整えたのが、前章で出てきたアルバート・マンセルだ。彼は『A Color Notation』(1905) で、色相を円周にきっちり等間隔で並べ、「赤から数えて何度の位置」と数字で言えるようにした。

ここで前章とつながる。三属性のうち、色相は「円のどこか（角度）」、明度は「上下（明るい・暗い）」、彩度は「中心からの距離」で表せる。なぜ彩度が中心からの距離になるのか。円の真ん中は「どの色味にも寄っていない＝色味ゼロ（灰色）」の一点だからだ。そこから外へ離れるほど色味が強く、つまり鮮やかになる。だから中心ほど灰色、外ほど鮮やかになる。色相環は、この三属性の地図を真上から見た一枚だと思えばいい。今回はこの「真上から見た円」だけを使って、配色を考える。

補色 —— 正反対は、なぜ目を引くのか

ここからが本題だ。円の上で、ちょうど正反対（向かい合う位置）にある色どうしを補色（ほしょく）という。たとえば赤の正反対は緑、青の正反対は橙（オレンジ）だ。補色を並べると、両方がぶつかって、強く目を引く。サッカーやスーパーのセールのポスターで赤と緑がよく使われるのは、これだ。

なぜ正反対だと目を引くのか。理由は二つある。

一つ目は、目の仕組み。生理学者エヴァルト・ヘリングが1878年に著した『Zur Lehre vom Lichtsinne（光覚論）』で示した考え（反対色説＝色は「赤か緑か」「青か黄か」のように反対のペアで処理されるという説）によれば、目の中で赤と緑はシーソーの両端のように、片方が上がれば片方が下がる関係にある。だから補色を隣に置くと、シーソーが目いっぱい揺れる。ここが肝だ――片方を強く感じるほど、もう片方も強く感じる。だから補色を並べると、両方の色味が最大まで引き上げられ、画面の中でいちばん目立つ。これが「強さ」の正体だ。

二つ目は、化学者ミシェル・ウジェーヌ・シュヴルールが1839年に著した『色彩の同時対比の法則』で示したこと。彼は染物工場で「隣り合う色が互いに影響して見える」現象に気づいた。これを同時対比（となり合う色が互いの見え方を変える現象）という。補色を隣に置くと、互いに相手をいちばん鮮やかに、いちばん濃く見せ合う。赤は隣の緑のおかげでより赤く、緑はより緑に見える。だから補色配色は、ぱっと見て強い。

ただし強さには代償がある。補色は目を引くぶん、画面いっぱいに半々で使うと、色の境目がチカチカ振動して見え、目が疲れる。だから実戦では、**片方を主役（広く）、もう片方を差し色（少しだけ）**にする。「目を引きたい一点」にだけ補色を効かせるのがコツだ。

類似色 —— 隣どうしは、なぜまとまるのか

補色の逆をやってみよう。円の上で隣り合った色（たとえば黄・黄緑・緑）だけを選ぶ。これを**類似色（るいじしょく）**という。並べると、けんかせず、すっとまとまって落ち着く。秋の風景（黄・橙・茶）や、海の写真（青・水色・青緑）が自然に美しいのは、これだ。

なぜまとまるのか。理由はシンプルで、もとが似た色だからだ。隣り合う色は、含んでいる成分が近い。黄緑は「黄」と「緑」の中間で、両隣と血がつながっている。だから補色のようにシーソーが激しく揺れない。目に優しく、一つの「気分」として感じられる。

ここで補色と類似色をまとめると、地図上の距離が、見た目の強さを決めると分かる。遠い（正反対）ほど強くぶつかり、近い（隣）ほど穏やかにまとまる。 これが色相環という地図のいちばんの読み方だ。「もっと目を引かせたい」なら円の上で離す。「落ち着かせたい」なら近づける。狙いが、円の上の操作になる。

トライアド —— 三角で「にぎやかだけど崩れない」

補色（遠い二点）と類似色（近い色）の、ちょうど中間がほしいときがある。にぎやかにしたいけど、ばらけさせたくない。 そこで使うのがトライアド（三色配色）だ。円を正三角形で三等分し、その頂点の三色を選ぶ。赤・黄・青の組み合わせがその代表だ。

なぜ三角だとうまくいくのか。等間隔だからだ。三色がどれも同じだけ離れていると、特定の二色だけが激しくぶつかることがない。力が三方向に均等に分かれるので、にぎやかでも一つだけが暴れたり、全体が崩れたりしない。バランスの取れたお祭りのような配色になる。子ども向けの製品やポップなデザインで赤・青・黄がよく出るのは、これだ。

これら「補色」「類似色」「トライアド」といった型を、Bauhaus（前章のスイス様式でも出た機能主義の造形学校）で色彩を教えたヨハネス・イッテンが、12色の色相環とともに整理した。彼がBauhausで教えたのは1919〜23年。それを約40年後にまとめ直したのが著書『色彩論（Kunst der Farbe／英題 The Art of Color）』(1961) だ。この本で彼は、配色を「円のどこを取るか」という幾何学のパターンとして体系立てた。私たちが今使っている配色の型は、ほぼここに源がある。

配色の型は「円の図形」で覚える

ここがこのクエストの肝だ。配色の型は、色の名前で丸暗記するものではない。色相環の上に描く図形として覚える。図形を円のどこに当てるかで、色の名前は自動的に決まる。

• 補色 … 円をまっすぐ貫く一本の線（正反対の二点）。→ 強い・目を引く
• 類似色 … 円の一部をなぞる短い弧（隣り合う数色）。→ まとまる・穏やか
• トライアド … 円に内接する正三角形（等間隔の三点）。→ にぎやか・安定

つまり、覚えるのは「線・弧・三角」という三つの図形だけ。あとは円を回せば、どんな色でも同じ型が作れる。赤の補色が分からなくても、赤の正反対に線を引けばいい。 これが「地図を持つ」強さだ。

そして、どの型を選んでも最後はこの一点を守る。全部を均等に使わない。 補色なら片方を差し色に、トライアドなら一色を主役にして残り二色を控えめに。色の「位置」は色相環で決め、色の「量」は次のクエスト（役割と比率＝60-30-10）で決める。今回はまず、位置を狙って選べるようになることがゴールだ。

見分け方

街やWebで配色を見たとき、「これは何の型か」を見抜けるようになろう。色相環を頭に思い浮かべて、こう当てる。

• 赤と緑・青と橙のように、向かい合う二色で強く対比していたら → 補色（目を引かせたい広告・スポーツ系に多い）
• 青・水色・青緑のように、ひと続きの近い色でまとめていたら → 類似色（自然・落ち着き・上品さを出したいとき）
• 赤・黄・青のように、離れた三色がバランスよく並んでいたら → トライアド（ポップ・子ども向け・にぎやかさ）
• どの型でも、たいてい一色が主役で、残りは控えめになっている（均等ではない）

大事なのは、これらがバラバラのルールではないこと。すべて「色相環の上で、どの位置を取ったか」という一つの仕組みから出ている。型を覚えるのではなく、円の地図と「近い＝穏やか／遠い＝強い」という読み方を覚えれば、型はいつでも自分で引き直せる。

譜例

棚（design-gallery）で実際のサイトの配色を見て、それが色相環のどの型（補色・類似色・トライアド）か、当ててみよう。

• 棚：配色の実例を見る

見るときは、強調色と背景色を色相環の上に置いてみて、「線（正反対）か」「弧（隣どうし）か」「三角（三等分）か」を確かめる。そして、その色がなぜその印象（強い・穏やか・にぎやか）になるのかを、距離で説明してみるとよい。

練習・チェック

1. 好きな色を一つ決め、その補色を答えてみよう。やり方は簡単――色相環を思い浮かべ、その色の正反対に線を引くだけ。（例：青の正反対は？）
2. 補色がなぜ目を引き、類似色がなぜまとまるのかを、「円の上の距離」という言葉を使って一文で言えるか。（ヒント：遠い／近い）
3. 身近なポスターやWebサイトを一つ選び、配色が「補色・類似色・トライアド」のどれかを当てよう。そのうえで、「もっと落ち着かせるなら色をどう動かすか」「もっと目を引かせるなら、どの色をどっち（円の遠く／近く）へ動かすか」を考えてみよう。