デザイン

【使えると楽になる!!】デザインに必要な配色の知識

こんにちは、事業会社でマーケティング&デザインの仕事をしているyukiji(@yukiji_olm)です。

【本記事はこんな方におすすめ】
・いつも何となくで配色をしてしまっている
・配色にいつも時間がかかってしまう
・配色の基本を論理的に学びたい

本記事では、理論に基づいた配色の基本をご説明します。理論的にデザインができるようになることで、再現性の高い高品質な配色を目指しましょう!!

【筆者はこんな人】
・色彩検定2級(aft.or.jp)取得。
・副業でWEBデザイン。収益は月平均10万円。
・本業は事業会社(一応上場)マーケティング担当。
マーケティング戦略立案からクリエイティブ制作まで行う。
・前職は総合広告代理店。

ご質問などはTwitter(@yukiji_olm)からどうぞ!よろしくお願いします!!

配色を学ぶための「色の基本」

まず初めに配色を体系的に学ぶために必要なとなる「色の基本」をご説明いたします。ご存知の方はこのセクションは飛ばしていただいて大丈夫です!!

色相・明度・彩度

色を多くの人が共通して理解するために「色の物差し」が存在します。この基準となるのが色相明度彩度 という3つの性質で「色の三属性」と言います。

・色相:色み(赤,青etc..)
・彩度:鮮やかさ
・明度:明るさ

色相環

色相を規則的にグラデーションにし、1つの輪にして表現した「色相環」というものがあります。色相環は、色を体系化する時に重要です。
例えば、色相環上で対角にある色を「補色」といい、色の差が大きくお互いの色を引き立てる組み合わせになります。

https://ichi-up.net/2015/099

色調(トーン)

「彩度」と「明度」を合わせて「色調(トーン)」と呼びます。こちらも色相環のように体系化することができ「トーン図」と呼びます。
トーン図では、トーンは12種類に分類されており「明るい」「薄い」などのイメージが指定されています。


トーンの詳細な説明については本記事では割愛しますが、別の記事でもまとめているので是非読んで見てください!!

非デザイナーにも役立つ!デザインの配色で活躍するトーンとは こんにちは、事業会社でマーケティング&デザインの仕事をしているyukijiです。 今回は配色をする時に役立つ「トーン」...

カラーダイヤル

「色相環」と「トーン図」を1つの図にまとめたカラーダイヤルというものも存在します。同じ円周には同じトーン、同じ列には同じ色相が並んでいます。
これは若干マニアックなので実はあまり世の中に浸透しているものではありませんが、「カラーダイヤル」を使うと「色相」「トーン(明度・彩度)」を1つの図で表すことができ、色彩調和の理論も非常に体系的に理解することができます。

※色相環、トーン図、カラーダイヤルは一般財団法人日本色彩研究所が開発したPCCS(日本色研配色体系)を用いて説明させていただきます。

配色とは

配色とは「複数の色を組み合わせること」です。そのため「色同士の調和性」が非常に重要になります。
調和性のある配色には規則性があります。「色相環」「トーン図」を用いることで正しく規則に則った配色をすることができます。

色相差に基づいた配色

色相環では基準となる色から円状にどれだけ距離が離れているかで配色を体系立てられています。

色相の調和 配色名
色相に
共通性
同一色相配色
隣接色相配色(色相差:1)
類似色相配色(色相差:2-3)
色相に
やや違い
中差色相配色(色相差:4-7)
色相に
対称性
対照色相配色(色相差:8-10)
補色色相配色(色相差:11-12)

同一色相配色:色相差0

同じ色相同士の配色です。「色は同じで濃淡だけ違う」というイメージです。
色相が同じなので、統一感がありまとまりやすく、色自体のメッセージ性を伝えやすいです。

ねこ先生
ねこ先生
「トーンオントーン配色」とも呼ばれます。

隣接色配色:色相差1

色相環上で隣り合う色相同士の配色です。色相が似ている配色なのでまとまりやすい配色ですが、変化に乏しい印象になってしまうこともあるので注意です。
ちなみに色相環では交互にビビットトーンの色が挟まっているため、必ず1色がビビットトーンになることも特徴です。

類似色配色:色相差2〜3

色相環上で色相差が2〜3で色相が似ている配色です。この程度の色相差になってくると明らかに色相が異なることがわかりますが、調和しやすい組み合わせです。

中差色相配色:色相差4〜7

色相環上で色相がやや離れた色同士の配色。類似性も対照性も感じることができないため、調和の取りにくい難易度の高い配色です。ただ明度や面積などで上手くバランスを取れば、デザインのイメージを際立たせることができます。

対照色相配色:色相差8〜10

強烈な印象を与える配色となり、色みの違いが大きいことから彩度を上げ過ぎないことが必要。デザインにインパクトをつけたい時に効果的です。

補色色相配色:色相差11〜12

色相環上で色相が真反対の色同士の配色です。色相に共通性が全くないので、もっとも対称性を感じるインパクトが強い配色です。トーンと明度に差をつけることで安定させやすくなります。

トーン差に基づいた配色

トーンを基準にして配色を選ぶことも可能です。色相環の代わりに、トーン図を用いて体系的に配色を行うことが可能です。

トーンの調和 配色名
トーンに共通性 同一トーン配色
類似トーン配色
トーンに対称性 対照トーン配色

同一トーン配色

同じトーン同士での配色です。統一感がありまとまりやすい配色です。
トーンにはそれぞれ「鮮やかな」「くすんだ」などのイメージがあるのですが、同一トーン配色だとそのトーンのイメージをそのまま表現することができます。

ねこ先生
ねこ先生
「トーンイントーン配色」とも呼ばれます。

類似トーン配色

トーン図上で隣り合ったトーンを使った配色です。明度や彩度の差があるので、
コントラストが程よくある使いやすい配色です。

対照トーン配色

トーン図上でや離れた位置にあるトーンを使った配色です。コントラストが強いので、メリハリのある配色になります。明度差があり、どんな色相でも組み合わせやすいのも特徴です。

ジャッドの色彩調和論

アメリカの色彩学者ジャッドが唱えた色彩調和論です。
「秩序の原理」「明瞭性の原理」「なじみの原理」「秩序の原理」の4つに分類されています。
この4つに沿って配色理論を紹介していきます。

・秩序の原理
・明瞭性の原理
・なじみの原理
・秩序の原理

ねこ先生
ねこ先生
色彩検定では必須の内容です!!

秩序の原理

色相環やトーン図など、規則的に配置された色群の中から規則的に選んだ色は調和する。

ドミナントカラー配色

3色以上の配色において、1つの色相でまとめた配色です。基本は同一色相ですが、類似色相(色相差〜3)まででも配色できます。調和しやすい配色ですが、単調に見えてしまうこともあります。

ドミナントトーン配色

3色以上の配色において、トーンを統一させた配色です。トーンが持つイメージを表現しやすい配色です。

ねこ先生
ねこ先生
お伝えした通り、色相かトーンどちらか一方が調和が取れていれば他の要素は自由に選んでも調和が取れた配色が可能です。
ただ、色相・トーンどちらも調和させた配色も存在します。

カマイユ配色

同一・隣接色相を使い、同一・類似トーンを使った配色。色相もトーンも非常に近い配色で、単色のようなぼんやりとした配色になります。
※「カマイユ」とはフランス語で「単色画法」という意味。

フォカマイユ配色

カマイユ配色より少しだけ色相に変化を出した配色です。
※「フォ」とはフランス語で「まがいもの」「偽の」という意味。

ねこ先生
ねこ先生
カマイユ配色とフォカマイユ配色は似ているけど、フォカマイユ配色の方が色の違いを感じます!!

明瞭性の原理

ビコロール配色

コントラストがあり明度差が大きい2色配色です。サッカーのユニフォームなどで見かけるようなハッキリとした目立つ配色です。
※「ビコロール」はイタリア語で2色のという意味。英語の「バイカラー」と同じ。

コントラストがあり明度差が大きい3色の配色になると「トリコロール配色」と呼ばれます。ヨーロッパ系の国旗で多い、鮮やかな高彩度の色が適した配色です。

なじみの原理

協調性のある配色をするための基本的な考え方を説明してきましたが、その他にも昔から各地で活用されている配色技法が存在します。「色彩調和論」を活用したものや「色数」「色相の配置」など様々な切り口で配色を決めることができます。

ナチュラルハーモニー(ナチュラル配色)

自然界の法則に従って、明るい色を黄みよりに、暗い色を青紫寄りに配色することです。自然界では、光が当たっている部分は黄みがかかり、影になっている部分は青みがかかって見えるという自然学者ルードの考えに基づいた配色技法です。

コンプレックスハーモニー(コンプレックス配色)

自然界の法則に逆らい、暗い色を黄みよりに、明るい色を青紫よりに配色することです。自然界で見慣れない配色なので「不調和の調和配色」とも呼ばれます。意外性があり新鮮な印象を与える配色です。

スプリットコンプリメンタリー

色相環を規則的に分割し、その位置の色相を組み合わせるという配色方法があります。

補色関係の2色のうち、どちらか一方の色相を分裂させ、分裂させていない色相と合わせた3色配色です。
補色が含まれるのでメリハリがあり、2色は近い色相なので全体が調和します。

秩序の原理

トライアド

色相環上で等しい距離にある3色を使った配色です。間隔が均等なのでバランスの良い配色になります。「色料の三原色」シアン・マゼンダ・イエローはトライアドの関係です。

この「色相環を均等に分割する配色技法」は4色以上でも同様に対応可能!
分割数に応じて「4分割:テトラード」「5分割:ペンタード」「6分割:ヘクサード」と名付けられています。(ギリシャ語)

テトラード:色相環上で等しい距離にある4色を使った配色です。
カラフルだけど調和が取れているのが特徴。Googleロゴはテトラード配色です。

ペンタード:色相環上で等しい距離にある5色を使った配色です。またはトライアド配色の4色に白・黒を組み合わせます。

ヘクサード:色相環上で等しい距離にある6色を使った配色です。またはテトラード配色の4色に白・黒を組み合わせます。赤系、橙系、黄系、緑系、青系、紫系の6つの色を含むため、変化に富んだカラフルな印象になります。

配色イメージ

配色をする際、「高級感がある」「知的」などのイメージを表現することが多いと思います。
デザインでよく使われるイメージと、それぞれを表現するための配色例をご紹介します。
こちらのセクションでご紹介する配色例は「色彩検定2・3級」のテキストを参考にさせていただいており、私が勝手に編み出したものではありませんのでご安心ください。
参考文献:最短合格! 色彩検定2級・3級テキスト&問題集

単色での色のイメージは以下の記事にまとめています。是非こちらもチェックしてみてください!!

配色に意味を持たせよう!色が表す意味や歴史こんにちは、事業会社でマーケティング&デザインの仕事をしているyukijiです。 今回は配色をする時に役立つ「色の知識」ご紹介...

「色相」と関係する配色イメージ

暖かい

暖色を組み合わせた配色。

冷たい

寒色を組み合わせた配色。

興奮感

暖色系の高彩度色を組み合わせた配色。

クール

寒色系の中〜低彩度色を組み合わせた配色。

「明度」と関係する配色イメージ

軽い・柔らかい

高明度色を組み合わせた配色。

重い・硬い

低明度を組み合わせた配色。

「彩度」でのイメージ

派手な

高彩度色を組み合わせた配色。色相差を大きくとると「派手」な印象が増す。

地味な

低彩度色を組み合わせた配色。色相差はあまり影響しないので、何色でもOK。

「トーン」でのイメージ

ダイナミック

高彩度の暖色系の色をベースに、対照色相や黒などを合わせるとダイナミックなイメージを表現できます。
誘目性の高い赤を使うとダイナミック感が際立ちます。

カジュアル

オレンジ系の色をベースに対照色相

ナチュラル

前述した配色技法「ナチュラルハーモニー」をベースに、木の色や土の色など自然界の色を組み合わせるとナチュラルなイメージになります。
自然界にあまり存在しない、高彩度色は避けて、中彩度で統一すると効果的です。

シック

グレイッシュなトーンをベースに、無彩色を合わせるとシックなイメージになります。グレイッシュな寒色系を使うと、都会的なイメージになります。

エレガント

中明度の紫系の色をベースに、中〜高明度のグレイッシュなトーンを合わせるとエレガントなイメージになります。明度差を少なくすることで優雅さを出すことができます。

モダン(現代的)

無彩色をベースに、低明度の寒色系の色と、明度のコントラストをつけるとモダンなイメージになります。

爽やか

中〜低彩度で、高明度な寒色系を組み合わせると爽やかなイメージになります。
特に白と青の組み合わせは透明感のある印象になります。

「配色パターン集」で簡単に美しく

ここまでで色彩調和論の理論的な配色の仕方をご説明しました。

配色をする度に色相環やトーン図を引っ張り出してくるのは大変…

このように感じた方も多いと思います。色彩調和論に基づいて作られた美しい3色配色が既に世の中には存在します。「ポップ」「爽やか」などイメージごとで分かれているので、色彩調和論は理解しつつも、既存の配色パターンを利用するのが近道です!!

ねこ先生
ねこ先生
基本を理解した上で、配色パターンを利用すると応用力がグッと高まります!!

COLOR SUPPLY(無料)

COLOR SUPPLYは、類似色やトライアドなど色相環から優れた色の組み合わせを探すことができるサービスです。
COLOR SUPPLY

Random Material Palette Generater(無料)

Random Material Palette Generatorは、画面をクリックするたびに異なる3色の配色パターンが表示される配色ジェネレーターです。

Random Material Palette Generater

Palettable(無料)

デザイナーの配色を学んだAIが配色を提案してくれる神サイト。ボタンをポチポチ押すだけでハイセンスな配色が完成です。使いたい色が決まっているときも、カラーコードを直接打ち込めるので超便利。

Palettable

3色だけでセンスのいい色(書籍)

本記事でも参考にさせていただいている、配色のパターンを身につけるために激おすすめな書籍です。

まとめ

  • 色相環とトーン図をベースに配色を考える
  • 理論を理解した上で配色パターンの引き出しを増やすと◎
ABOUT ME
yukiji@マーケ担当&デザイナー
都内の事業会社でマーケティングの仕事をするアラサーOL|前職は広告代理店で激務|実務を通して学んだマーケティング、広告、デザインの知識を発信 |副業は主にWEB制作。月10万円の安定した副収入|好きなもの:東京、旅行、猫、ランニング