気になる人
- 配色ってどうやるの？
- 配色はセンスだと思っているけど違うの？
と、思っている方に配色はセンスではなく決まった方があるので、ロジカルに配色をする方法をお伝えします。
こんにちは、とある企業で企画やWeb/UIデザイン・UXデザインを担当しています。モーリーと申します。
配色はセンスと思われがちですが、しっかりとした理論があります。
配色理論を学ぶことで、デザイナーとしての引き出しが増えます。
僕自身も、デザイナーになったばかりの時は、配色するときに、配色の参考サイトをみて真似ていたのですが、ロジカルに配色を考えることを知り、「なぜそのデザインなのか」「なぜその配色で綺麗なのか」をしっかりと説明できるようになりました。
そして、これが現場では結構役立ちます！
目次
配色理論と配色の種類を徹底解説！
今回はアメリカの色彩学者ジャッド氏の色彩調和論に絞り、 配色の種類とどういった印象を与えるのかという意味の部分にフォーカスして説明していきます。
また、色自体（赤、青、緑）が持つ意味と心理的効果は、デザインにおける色の意味と効果を解説で説明していますので、こちらをご覧ください。
ジャッドの色彩調和論とは以下の４つの原理からなります。
- 秩序の原理
- 類似性の原理
- なじみの原理
- 明瞭性の原理
配色理論を学ぶ前に以下の前提知識について説明します。
- 色相(Hue)
- 明度(brightness)
- 彩度(saturation)
色相は、色合いの違いのことです。
赤、緑、青、黄色などといった色合いの違い。
明度は、色の明るさのことです。
明度が高い色ほど白に近づき、明度が低い色ほど黒に近づきます。
彩度は、色の鮮やかさのことです。
彩度が0の色は、黒、白、グレーといったモノクロの色になります。
反対に、彩度が高い色は原色に近い色に近づきます。
彩度は、色相と明度によって最大値が異なります。
WEB/アプリUIデザインにも使える配色ツール５選で紹介しているツールを使うことで、色相・彩度・明度に対する理解度はより深まると思いますので、ぜひご覧ください。
それでは、本題に入っていきます！
1.秩序の原理
「一定の法則によって選ばれた色は調和する」というもの。
この原理に基づいた配色方法は細かくあるが、
例えば、それぞれ色相環上から三角形、四角形の位置にある色を選ぶと配色は調和しやすい。
アイデンティティ（Identity）
同じ色相の色のみを用いた配色。
静かでおとなしいイメージを作ることができるが、単調になりがちなので、明度や彩度差をもたせてコントラストを取る事が多い。
アナロジー（Analogy）
色相環で隣り合った色で作る配色。
やわらかい印象になりやすく、アイデンティティより単調さを避けれる。
この配色も明度や彩度に大きくコントラストをとるとうまくいきやすい。失敗しにくい配色。
インターミディエート（Intermediate）
色相に中程度のコントラストがあり、バランスよく安定感がある配色。
ダイアード（Dyad）
色相環で反対側に位置する補色の関係にある色の組み合わせ。
インパクトが強くなる。
赤の明度を上げた場合、補色である緑の明度は落とす。
コンプリメンタリー（Complementary）とも呼ばれる。
オポーネント（Opornent）
インターミディエートとダイアードの間での2色配色。
派手すぎずよりも調和させやすい。
スプリットコンプリメンタリー（Split Complementary）
補色の両隣りの色を使った3色配色。
この配色もダイアードよりも調和しやすい。
トライアド（Triad）
色相環を三等分した位置にある3色での配色。
バランスの取れた配色の組み合わせ。
テトラード（Tetrad）
色相環を四等分した位置にある色もしくは2組の補色での配色。
2組の補色同士の色なのでカラフルな色合いになる。
色数を増やす必要がある場合に試してみる価値あり。
ペンタード（Pentad）
色相環を5つに分けた色、もしくはトライアドに白と黒を加えた5色の配色。
ヘクサード（Hexad）
色相環を正六角形分けた6色、もしくはテトラードに白と黒を加えた6色の配色。
2.類似性の原理
「共通性がある色同士は調和する」というもの。
同じ色の明度・彩度を変えて配色を作ったり、同じ明度・彩度で、色をかえて配色することで調和しやすい。
色相やトーン（明度と彩度のこと）などの何らかの共通性がある色同士で配色することで、色の持つイメージをストレートに表現でき、統一したイメージを持たせることができる。
それぞれの色が持つ印象はこちらの記事で解説しています。
ドミナントカラー配色
色相を統一して、トーン（明度・彩度）を変化させた配色。
秩序の原理のアイデンティティとの違いは、近似色相を用いる点。
トーン・オン・トーン配色
色相を統一して、明度にドミナントカラー配色よりも差をつける配色。
ドミナントトーン配色
トーン（明度・彩度）を統一して、色相を変化させた配色。
トーンイントーン配色
ドミナントトーン配色よりも、明度の差を小さくした配色。
カマイユ配色
色相を揃えてトーンを少しだけ変える配色。
遠くから見たら1色に見間違えるほどにさりげなく色を変える配色。
フォカマイユ配色
カマイユ配色に比べて、色相・トーンもやや変化をつけた配色。
グラデーション配色
色相・彩度・明度を一定の法則に従って段階的に変化させる配色。
多色づかいのグラデーションや色相の変化が大きいグラデーションは、中間長の部分が濁って汚く見えてしまうことや、連続したグラデーションの効果が薄れてしまう場合がある。
3.なじみの原理
「自然界にみられる色の変化や、見慣れている配色は調和する」というもの。
自然界でよく見られる色の組み合わせや、太陽光の影響を取り入れた配色は調和しやすい。
例えば、太陽光が当たっている部分は明るく鮮やかに、逆に影になっている部分は暗く鈍く見える。
ナチュラルハーモニー
色相環からバランスよく色相の異なる色をピックアップし、その上で黄色系統の色は彩度・明度をあげ、青系統の色は、彩度・明度を下げるよう調整する。
4.明瞭性の原理
「明快なコントラスト（色相・明度の差が大きい）を持つ色の組み合わせは調和する」というもの。
非常口の看板や、国旗などでよく使われている2色または3色の配色。
トリコロール配色
国旗に用いられる、明快なはっきりとした三色配色。
間に白などの低彩度色や無彩色を挟んで調和させるセパレーションカラーを置く事が多い。
ビコロール配色（ダイアード）
明快なはっきりとした二色配色。
コントラスト配色
反対色でつくる配色で、くっきりとしメリハリがあり力強い印象になる。
秩序の原理のダイアードもこの配色に含まれます。
まとめ
いかかだったでしょうか。
今回は、ジャッドの色彩調和論に基づいて配色理論を紹介しました。
- ４つの原理に細かい配色方法があり、それぞれで違った印象を与えることができる
- どんな印象を与えたいのか決める
- その印象を与える配色方法は何か
上記のことを考えつつ配色をしていきましょう。
また、色自体が持っている意味や心理的効果があります。
そちらに関しては、別記事で解説していますのでぜひ参考にしてください。
配色に関するおすすめの本
紹介する書籍には、配色の具体例と構成している色についてまとめてある書籍になります。
配色についてもう少し学びたい方にオススメです。
合わせて読みたい
【色の意味解説！】デザインにおける色の意味と心理効果を解説！
【配色の決め方②】配色の基本！意味・印象と実例紹介
