女性のための大人可愛いWEBサイト制作スタジオ

色彩講師が教える配色のコツ!実はたったの4パターンだった!ジャッド「四つの原理」

世の中に溢れる配色パターン

こんにちは。
色彩講師のいたみけいこです。

ご覧いただきありがとうございます。
最近書店で配色本をよく見ます。
配色について知りたい人が多いのだなあと実感します。


そんなわけで今日は配色についてのお話をしたいと思います。


私たちは毎日「色」に触れて生活しています。
仕事の時や日常生活で、効果的な「色」の使い方をしたいときに考えるのが「配色」です。

配色とは2色以上の色の組み合わせのことです。

配色について調べてみると、色々なパターンがあります。
たくさんあるように見えて頭の中で混乱してしまいませんか?

私も昔はそうでした。



配色パターンは実はたったの4パターンだった!

たくさんあるように見える色彩調和論(美しく感じる配色のルール)は実はたったの4パターンに分類されます。


この4パターンのどれに当てはまるのかを理解すれば、
配色パターンを整理し考えることができるようになります。


そして、

配色本など見なくても配色を考えることができたり、

本を見ても応用して配色を考えるようになったり、

配色理論を大まかに説明できるようになります。



数多くある色彩調和論を研究した色彩学者ジャッド

美しいと感じる配色のルールについて、つまり配色調和論については色々な方が研究してきました。

その原理については共通するものもありましたが矛盾するものもあり、

残念ながら万人において正しい色彩調和論というものは存在しません。


「調和とは秩序だ」

という意見もあれば、

「アクセントがないと味気ない」

という見方もあります。どちらも間違いではありません。



結局のところ色というのは「人間の感覚」であり、見え方も違えば感じ方もそれぞれなのです。

使う場所によっても違ってきます。



そんな中でアメリカの色彩学者ディーン・ブルースター・ジャッド(1900-1972)は、数多くの色彩調和論について研究をします。

そして色彩調和論は4パターンに分類されることを突き止め、「四つの原理」にまとめたのです。



ジャッド「四つの原理」に則った配色例の分類

ジャッド四つの原理は以下の内容です。

1秩序の原理
規則的に配置された色空間から、規則的に選ばれた色は調和する。

2なじみの原理
日常で見慣れた色の組み合わせは調和する。

3類似性の原理
色に共通性を持つもの同士は調和する。

4明瞭性の原理
明快なコントラストのある色同士は調和する。

一つずつみていきましょう。



1秩序の原理

「規則的に配置された色空間から、規則的に選ばれた色は調和する。」


連続して見える色の輪、色相環(しきそうかん)というものがあります。
色相環は色の間隔がなるべく等しく見えるように配置されています。


そのため、
「規則的に配置された色空間」
のひとつに、この「色相環」が含まれます。


この「色相環」は

「表色系(ひょうしょくけい)」

によって色相(しきそう=黄や赤など色みのこと)の位置が変わります。


「表色系」

というのは色の表示方式のようなものです。

表色系の話は一言で語れるようなものではないので、またの機会にするとします。
今回はP C C S(ぴーしーしーえす)という表色系の色相環を例にご説明します。

こちらがPCCS色相環です。

PCCS色相環



この色相環を使って「規則的に」色を選べば調和するという配色パターンが
秩序の原理に当てはまります。


例えば。
色相環の一つおきに色を選んでみます。

秩序の原理その1

色相差が均一であるため自然に感じます。



次は6色相差で配色してみましょう。

秩序の原理その2

色相差(色の違い)は感じるものの、その差が均等であるため
調和します。


このように、

色相環で規則的に色を選ぶことで、
秩序の原理に則った配色ができます。



2なじみの原理

「日常で見慣れた色の組み合わせは調和する。」

アメリカの自然学者であるルードはこのようなことを言いました。

・美しい配色はたくさんの色を使うのではなく、限られた色の使用によって作られる。
・自然光の色の見え方には一定の法則がある。
光が当たっているところは黄みに寄って見え、陰になる部分は青紫に寄って見える。

ルードの上記のような考えから、ナチュラルハーモニーと呼ばれる配色があります。

なじみの原理ーナチュラルハーモニーその1
なじみの原理ーナチュラルハーモニーその1
👀 Mabel Amber, who will one dayによるPixabay

からの画像

なじみの原理ーナチュラルハーモニーその2
なじみの原理ーナチュラルハーモニーその2
Capri23autoによるPixabay

からの画像

ナチュラルハーモニー


あまり色みの離れていない色から選び、

明るい色は黄に近い色みから、
暗い色は青紫みに近い色みから

選ぶ配色です。


この条件で選ぶことにより「日常で見慣れた」配色となり、

「なじみの原理」に当てはまる調和の取れた配色となります。


このように自然の中で見られる配色なので、

見慣れており調和するというのが

なじみの原理です。


3類似性の原理

「色に共通性を持つもの同士は調和する。」


簡単なところで言うと、「色相(色み)」「トーン」を統一することで、調和させることができます。

トーンとは

トーンというのは色調のことで、明度(明るさ)と彩度(鮮やかさ)を複合して捉えた概念です。
同じトーンの色は似た印象・イメージをもつので、持たせたいイメージから配色を作ることもできます。


言葉だと分かりにくいですね。
トーン概念図を簡略化したものを作成したのでご覧ください。

トーン概念図
トーン概念図


一つのトーンにつき、丸が12個あります。
この丸は色相です。一つのトーンにつき12色相配置されています。


PCCSだと12種に分類され12トーンあります。
ストロングトーンは近いトーンと色みを見分けにくいため省略します。

この図上で、
上にいくほど明度は高くなり、下に行くほど明度は低くなります。
左にいくほど彩度は下がり、右に行くほど鮮やかになります。


この図の円上で同じ位置にあるものはそれぞれ同じ色相です。

例えば、以下の色は一つのトーンの一番上に位置しており、全て「黄」の色相です。

色相「黄」の色


この色から選んで配色を作れば、
色相を統一した配色となります。

色相を統一した配色-ドミナントカラー配色-

ドミナントカラー配色その1
ドミナントカラー配色その1


ドミナントカラー配色その2
ドミナントカラー配色その2


そしてこの色相を揃えた配色をドミナントカラー配色と言います。



トーンを統一した配色-ドミナントトーン配色-

トーンを統一した配色例は以下のようになります。

ドミナントトーン配色


ペール(p)トーンで統一しました。

トーンを揃えた配色をドミナントトーン配色と言います。


このように、
色相を変えずにトーンだけ変えたり、
トーンは変えずに色相だけ変えたりすることで、

色に共通性を持たせることができ、
類似性の原理に則った配色を作ることができます。


4明瞭性の原理

「明快なコントラストのある色同士は調和する。」


「1秩序の原理」でも登場した色相環ですが、明瞭性の原理に則った配色を考える上でも非常に役に立ちます。

色相環で色相差の位置関係を均等に分割することで、
明快なコントラストを持つ配色を作ることができます。


配色例を見ていきましょう。

2色配色ーダイアードー
2色配色ーダイアードー
三色配色ートライアドー
三色配色ートライアドー
4色配色ーテトラードー
4色配色ーテトラードー
5色配色ーペンタードー
5色配色ーペンタードー
6色配色ーヘクサードー
6色配色ーヘクサードー


このように、色相差に統一感を持たせることで違和感のない配色となります。



配色を考えるときは、ジャッド四つの原理を意識しよう

自分で配色を考えるとき、ただ闇雲に感覚的にイメージだけで色を選ぶのではなく、

ジャッド四つの原理を意識した上で考えてみましょう。


その際に自ずと「色相環」「トーン分類図」を用いることになると思います。

すると色を記号化することができ、論理的な配色をすることが可能となります。

センスや直感に頼ったものでなく、論理的な組み立てができるようになるので、説得力が増します。
是非日常のデザインに正しい色彩の知識を入れてみてください。

参考文献
内閣府認定 公益社団法人 色彩検定協会
「色彩検定公式テキスト2級編」

著者:色彩文化研究会
発行元:株式会社パイインターナショナル
配色の教科書ー歴史上の学者・アーティストに学ぶ『美しい配色』の仕組み」

Infomation

このサイト、cocoa web studioは

  Web集客をしたい
  Webについて疎くてどこから手をつけていいかわからない
  業者には相談しにくい

といった方を対象としたWeb制作スタジオです。

私の経歴についてはこちらをご覧ください。

ご相談はお気軽にどうぞ