配色調和

定義

配色調和とは、色相環の上で特定の角度の関係にある色どうしは、互いにきれいにまとまって見えるという考え方です。 色相環は、赤・黄・青といった色を円の上に順番に並べた図で、この円の上での色の位置関係を見ながら組み合わせを選んでいきます。 向かい合う補色、すぐ隣にある類似色、正三角形をつくるトライアド、一つの色の明暗だけを変えた同一色相配色のように、 関係から色を導き出すと、勘だけで選ぶよりもずっと安定して統一感が生まれます。色をうまく選べないという不安を、 理論という安全網でやわらげてくれる道具だと考えてください。

なぜ重要か

何の関係もなく色をいくつも選ぶと、画面がバラバラに散らかって落ち着かない印象になります。調和の考え方は、 まさにこの問題を防いでくれます。基準になる色を一つ決めるだけで、残りの色は関係にしたがって自動的に決まるので、 毎回ゼロから色を悩まずに済みます。さらに、それぞれの関係は違う印象を与えます。補色は強いコントラストで視線を集め 強調に向き、類似色はやわらかく落ち着いた雰囲気をつくり、トライアドはバランスの取れた華やかさを、 同一色相配色は最も静かで安全な統一感を生みます。ほしい雰囲気に合う関係を選ぶだけで、色選びはずっと予測しやすくなり、 仕上がりも偶然ではなく狙いどおりになります。そして何より、この関係は「なぜこの色を選んだのか」を 人に説明できる根拠になります。それを根拠にすれば、チームの中で勘に頼って色をめぐって揉めることも大きく減らせます。

よくある間違い

• 気に入った色を一つずつバラバラに集めてしまうことです。一つ一つはきれいでも、互いの関係がなければ、 並べたときに散らかって統一感が消えます。まず基準の色を決めて、そこから派生させましょう。
• 補色を同じ面積で半分ずつ使ってしまうことです。強い二色を同じ広さで置くと、互いに競い合って目がちかちかします。 片方を広い背景に、もう片方をせまい強調に使う方が落ち着いて見えます。
• 関係から導いた色を、彩度だけ最大まで上げてそのまま使ってしまうことです。理論上は合う色でも、 すべてを鮮やかにすると野暮ったくなるので、一部は彩度を落として落ち着いた背景にすると調和が生きてきます。

実務のヒント

• 色を勘でいくつも選ぶのではなく、基準の色を一つ決めてから、色相環の関係で残りを派生させましょう。 安全にいきたいなら同一色相配色や類似色を、はっきりした強調がほしいなら補色を選ぶというように、 目的に合わせて関係を選べば失敗が減ります。
• 一つの配色の中でも、色ごとに役割と面積を変えましょう。広い背景色を一つ、補助色を一つ、 せまく使う強調色を一つに分けると、関係がはっきりして画面が整って見えます。
• 導き出した色が本当に合うか、小さなカードやボタンにまず載せて確かめましょう。理論上は合う組み合わせでも、 実際の画面では違って見えることがあるので、広い面積に使う前に小さな要素で先に検証する方が安全です。 調和はルールから始めて、最後は目で仕上げる作業です。

関連概念