デザインをしていると、こんなことを言われます。
「この色の組み合わせ、なんだかいいですね」
反対に、
「なんとなく色が合っていない気がする」
と言われることもあります。
では、その「なんとなく」は、どこから生まれるのでしょうか。
実は、色の組み合わせには、ある程度の法則があります。
今回は、配色の基本を考えるうえで参考になる**「ムーン・スペンサーの色彩調和論」**をご紹介します。
難しそうな名前ですが、基本的な考え方はとてもシンプルです。
色には、調和する組み合わせがある
1944年、アメリカの研究者パリー・ムーンとドミナ・スペンサーは、色彩の調和を体系的に説明する理論を発表しました。
それが「ムーン・スペンサーの色彩調和論」です。
この理論では、色同士の関係を大きく3つの調和に分類しています。
- 同一の調和:同じ色を基本にした組み合わせ
- 類似の調和:近い色同士の組み合わせ
- 対比の調和:大きく異なる色同士の組み合わせ
そして、そのどれにも当てはまりにくい関係を「あいまいな領域」として整理しました。
つまり、色を組み合わせるときには、似せるのか、違いをつけるのか。
その関係を明確にすることが、一つの判断基準になるという考え方です。
【図解①:色相環と3つの調和】

① 同一の調和|同じ色で統一感をつくる
もっとも理解しやすいのが「同一の調和」です。
たとえば、青を基本にした配色。
濃い青、明るい青、淡い青。
どれも同じ「青」という色相を基本にしています。
このような配色は統一感があり、落ち着いた印象になります。
デザインではどう使う?
たとえば、企業のWebサイト。
ブランドカラーが青の場合、その青を基本に、見出しや背景、ボタンなどの色を展開できます。
色数を増やさなくても、明るさの違いによって情報にメリハリをつけられます。
一方で、同じ色ばかりでは単調になることもあります。
そんなときは、余白や文字の大きさ、配置などで変化をつけましょう。
色を増やさなくても、デザインに変化はつけられるのです。
【図解②:同一の調和】

② 類似の調和|近い色で自然なまとまりをつくる
次は「類似の調和」です。
たとえば、青と青緑、黄色と黄緑。
色相環と呼ばれる、色を円形に並べた図で、近い位置にある色同士の組み合わせです。
ムーン・スペンサーの理論では、色相環上でおよそ25〜43度離れた関係を、類似の調和としています。
近い色同士なので、柔らかく、自然なまとまりをつくりやすいのが特徴です。
デザインではどう使う?
たとえば、自然や健康をテーマにしたWebサイト。
緑を基本に、黄緑や青緑を組み合わせることで、穏やかな印象を演出できます。
ただし、近い色同士では、違いが分かりにくくなる場合もあります。
特に、文字と背景の組み合わせには注意が必要です。
配色が調和していることと、情報が読みやすいことは別の問題です。
見た目の美しさだけでなく、情報が正しく伝わるかどうかも確認しましょう。
【図解③:類似の調和】

③ 対比の調和|異なる色で強い印象をつくる
3つ目は「対比の調和」です。
たとえば、青とオレンジ、赤と緑、黄色と紫。
色相環で大きく離れた色同士の組み合わせです。
ムーン・スペンサーの理論では、およそ100〜180度離れた色相関係を対比の調和としています。
色同士の違いが大きいため、力強く、印象的な配色になります。
デザインではどう使う?
たとえば、商品のキャンペーンページ。
青を基本にしたデザインの中で、オレンジをアクセントカラーとして使えば、特定の要素に視線を集める効果が期待できます。
ただし、すべての色を同じ面積で使う必要はありません。
背景には落ち着いた色を使い、目立たせたい部分に対比する色を使う。
こうすることで、情報の優先順位を視覚的に表現できます。
大切なのは、色を目立たせること自体が目的ではないということです。
何を目立たせたいのか。
なぜ、その情報を優先するのか。
その目的があって、初めて配色に意味が生まれます。
【図解④:対比の調和】

④ あいまいな配色は、本当に悪いのか?
ムーン・スペンサーの色彩調和論には、もう一つ興味深い考え方があります。
それが「あいまいな領域」です。
同じ色とも言い切れない。
近い色とも言い切れない。
かといって、はっきりと対比しているわけでもない。
こうした色の関係を、理論上は調和しにくい領域として分類しています。
たとえば、Webサイトで、同じ役割のボタンなのに、ページによって微妙に青の色味が違う。
これでは、ユーザーが違いに意味があるのか迷ってしまうかもしれません。
もちろん、すべてのあいまいな配色が悪いわけではありません。
あえて微妙な違いをつくることで、繊細さや個性を表現できる場合もあります。
大切なのは、その色の違いに意図があるかどうかです。
【図解⑤:あいまいな領域】

配色に迷ったら、まず3つのことを考える
では、実際のデザインでは、どう活用すればよいのでしょうか。
私は、次の3つの手順で考えるとよいと思います。
1. 基本となる色を決める
ブランドカラーやサービスの目的、利用するユーザーなどを考え、基本となる色を決めます。
自分の好きな色だから、という理由だけで決めるのではありません。
2. 色の関係を決める
落ち着いた統一感を出したいなら、同一や類似の調和。
強く印象づけたいなら、対比の調和。
表現したい印象や情報の優先順位に合わせて組み合わせを考えます。
3. 実際の画面で確認する
理論に当てはまっていても、必ず美しく、使いやすくなるとは限りません。
文字は読みやすいか。
重要なボタンは見つけやすいか。
色の違いによって、ユーザーが迷わないか。
実際の画面で確認し、必要に応じて調整することが大切です。
型破りをするには、まず型を知る
ここまで、ムーン・スペンサーの色彩調和論を紹介しました。
しかし、私は、この理論に従えば必ず美しいデザインができるとは考えていません。
実際、色彩調和については、その後もさまざまな研究が行われており、ムーン・スペンサーの理論とは異なる結果も報告されています。
つまり、色彩の調和は、一つの理論ですべて説明できるものではないのです。
では、なぜ理論を学ぶ必要があるのでしょうか。
それは、自分の判断に根拠を持てるようになるからです。
画家やデザイナーの中には、一般的には調和しにくいとされる色を巧みに組み合わせ、独創的な作品を生み出す人がいます。
既存の理論にとらわれない表現が、新しい美しさを生み出すこともあります。
しかし、それは単にルールを知らず、好き勝手に色を使うこととは違います。
私は、型破りをするには、まず型を知る必要があると考えています。
基本を理解しているからこそ、意図的に崩すことができる。
なぜ、その色を組み合わせるのか。
なぜ、あえて調和を崩すのか。
そこに説明できる理由があれば、それはデザインとしての判断になります。
まとめ|デザインは「なんとなく」で終わらせない
色彩調和論は、配色の正解を教えてくれるものではありません。
しかし、色を選ぶための判断材料にはなります。
同じ色で統一感をつくる。
近い色で自然なまとまりをつくる。
異なる色で強い印象をつくる。
そして、ときには意図的に、その関係を崩してみる。
大切なのは、どの方法を選ぶかではなく、なぜその方法を選ぶのかということです。
私は、デザインに必要なのは、生まれ持ったセンスではなく、目的を理解し、根拠を持って判断する力だと考えています。
理論は、表現を縛るためのものではありません。
表現の選択肢を増やすためのものです。
それが、私の考える「虹色のタコになれ!」のデザインです。


コメント