大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

色彩調和を考える

2021/9/29 デザインMemo
色彩調和を考える

ホームページ制作やデザイン制作において、配色に悩む機会は多いでしょう。

  • 「どの色を使えばよいのか分からない」
  • 「メインカラーは決めたけれど、色の組み合わせ方が分からない」
  • 「いつも同じような配色ばかりになってしまう」

上記のように感じている方もいるのではないでしょうか。

色の選び方で悩んでいる場合は、色彩調和を考えることが大切です。色彩調和をしっかりと意識すれば、誰でも簡単に効果的な配色を実現することができます。

色彩調和にも様々な理論が存在しますが、今回は、アメリカの色彩学者ジャッドが提唱した「ジャッドの色彩調和論」を紹介していきます。初心者向けに分かりやすく解説していくので、色の基礎について理解を深めたい方は、ぜひ参考にしてみてください。

ジャッドの色彩調和論

アメリカの色彩学者J.B.ジャッド(1900〜1972)は、過去に発表された様々な色彩調和論を研究し、共通する考え方を「4つの原理」としてまとめました。これを「ジャッドの色彩調和論」と呼んでいます。

具体的には、以下の4つの原理です。

  1. 秩序の原理
  2. なじみの原理
  3. 類似性の原理
  4. 明瞭性の原理

ジャッドの色彩調和論は、色彩調和を考える上での基本原理です。デザイン初心者の方でも、失敗のない配色を実現できるので、ぜひ頭に入れておきましょう。

1. 秩序の原理

1つ目は「秩序の原理」です。

秩序の原理とは、「一定の法則に従って規則的に選ばれた色は調和する」という原理のこと。色相環を見てみると分かりやすいでしょう。色相環上で規則的な位置関係にある色や、幾何学的な位置関係にある色は、調和しやすいと言えます。

秩序の原理を使用した配色方法としては、以下のものが挙げられます。

秩序の原理
秩序の原理

アイデンティティ

同一の色相のみを使った配色。静かなイメージを作りやすい。

アナロジー

色相環上で隣り合う色を使った配色。柔らかいイメージを作りやすく、初心者でも失敗しにくい配色だと言える。

インターミディエート

色相環上で90度の位置関係にある色を使った配色。安定感をもたらしてくれる。

ダイアード

色相環上で正反対の位置関係にある色を使った配色。補色関係の組み合わせ。大きなインパクトを与えたい場合に有効。

オポーネント

色相環上で180度±30~60度の位置関係にある色を使った配色。派手過ぎず、バランスの取れた配色だと言える

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

補色の両隣の色を使用する3色配色。一見派手な印象だが、ダイアードほど奇抜にはならず、調和させやすい。

トライアド

色相環を三等分した位置関係にある色を使った3色配色。バランスを重視したい場合に有効。

テトラード

色相環を四等分した位置関係にある色を使った4色配色。スクエアカラーとも呼ばれる。カラフルな配色を実現できる。

ペンタード

色相環を五等分した位置関係にある色を使った5色配色。もしくは、トライアドに白と黒を組み合わせた5色配色。賑やかな印象を与えやすい。

ヘクサード

色相環を六等分した位置関係にある色を使った6色配色。もしくは、テトラードに白と黒を組み合わせた6色配色。カラフルで変化に富んだ配色を実現できる。

2. なじみの原理

ナチュラルハーモニーとコンプレックスハーモニー

2つ目は「なじみの原理」です。

なじみの原理とは、「自然界の景色で見られる配色など、日常で見慣れている配色は調和しやすい」という原理のこと。「親近性の原理」と呼ばれることも少なくありません。

例えば、自然界では、太陽光に照らされた部分は黄色っぽくなり、日陰の部分は青みを帯びて見えるでしょう。この特徴を利用したのが、「ナチュラルハーモニー」という配色方法です。

ナチュラルハーモニーでは、黄色っぽい暖色系の色は明るく、青紫に近い寒色系の色は暗く設定していきます。こうすることで、色が馴染みやすくなり、自然な配色を実現することができます。そのため、家のリビングの配色や、女性のメイクの配色にも効果的だと言えるでしょう。

また、ナチュラルハーモニーとは真逆の「コンプレックスハーモニー」という配色方法も存在します。黄色っぽい暖色系の色を暗く、青紫に近い寒色系の色を明るく設定する方法です。あえて自然界では見慣れない配色にすることで、斬新で意外性のある印象を与えられるでしょう。

3. 類似性の原理

3つ目は「類似性の原理」です。

類似性の原理とは、「同じような色相・同じようなトーンを持つ色同士は調和しやすい」という原理のこと。似たような色、何らかの共通性を持った色は相性が良いわけです。「共通性の原理」と呼ばれることもあるので、覚えておきましょう。

類似性の原理を使った配色方法としては、以下のものが挙げられます。

ドミナントカラー配色とトーンオントーン配色

ドミナントカラー配色

色相を統一した配色方法。トーンで変化をつける。まとまった印象を与えたい時に有効。

トーンオントーン配色

色相を統一した配色方法。ドミナントカラーよりも明度差が大きい。

ドミナントトーン配色とトーンイントーン配色

ドミナントトーン配色

トーンを統一した配色方法。色相で変化をつける。トーンが持つイメージを強く印象付けられる。

トーンイントーン配色

トーンを統一した配色方法。ドミナントトーンよりも明度差が小さい。

トーナルカラー配色

トーナルカラー配色

中間トーン(ダル、ソフト、グレイッシュ、ライトグレイッシュ)でまとめた配色方法。落ち着いた印象を与えられる。

カマイユ配色とフォカマイユ配色

カマイユ配色

色相やトーンにほとんど差がない配色方法。

フォカマイユ配色

カマイユよりも、色相やトーンに多少の差をつける配色方法。

4. 明瞭性の原理

4つ目は「明瞭性の原理」です。

明瞭性の原理とは、「はっきりした色同士は調和しやすい」という原理のこと。つまり、コントラストの強い配色は調和しやすいということです。「明白性の原理」と呼ばれることも少なくありません。

明瞭性の原理を使った配色方法としては、以下のものが挙げられます。

トリコロール配色とビコロール配色とコントラスト配色

トリコロール配色

明快なコントラストがある3色配色。3色の中間に白や黒を入れることも多い。ドイツやフランスの国旗などにも使用されている。

ビコロール配色

明快なコントラストがある2色配色。白や黒を使うことも可能。

コントラスト配色

反対色で作る配色。メリハリや力強さがある。

まとめ

「ジャッドの色彩調和論」について簡単に解説しました。

  1. 秩序の原理
  2. なじみの原理
  3. 類似性の原理
  4. 明瞭性の原理

上記の4つの原理を頭に入れた上で、ぜひ効果的な配色を考えてみてください。

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP