WEBデザイン ロジカル色彩シリーズ

色の組み合わせの法則(2色編)【りよのロジカル色彩】

この記事は、りよとロジカル色彩シリーズの第5弾!

色の組み合わせの基本パターン(2色編)についてご紹介&ご説明していきます!

りよのロジカル色彩シリーズ一覧

 

色の組み合わせ方(配色)の基本

配色の基本は「同一」「類似」「対照」の観点で組み立てられています。

どんな複雑に見える配色も、整理するとほぼこれらの分類に当てはまります。

 

また、色の組み合わせは「色相やトーンを主体にした配色」「色相環をベースにした配色」の大きく2つに分けられ、2色の組み合わせの配色パターンは「色相やトーンを主体とした配色」がほとんどです。

 

この記事では、2色で作ることができる基本的な色の組み合わせ(配色)を説明していきます!

取扱う配色

  • トーンオントーン/トーンイントーン
  • トーナル
  • カマイユ/フォカマイユ
  • ビコロール
  • ナチュラルハーモニー/コンプレックスハーモニー
  • ダイアード

 

簡単単語チェック!

  • 色相
    色の4つの属性「色相」「明度」「彩度」「清濁」のうちの一つで、いわゆる赤、青などの色味のこと。
  • 色相環
    色相を似た色味の順に環状に配置したもの
  • トーン
    明度・彩度・清濁のレベルが近いグループ

    出典:日本色研事業株式会社

トーンについての詳細はロジカル色彩②で説明しています。

 

配色法1-1:トーンオントーン

色相が一緒で、トーンが離れている

同じ色相で、トーンが対照的な色の組み合わせです。

明度差のある組み合わせを意識するとよりまとまりやすい配色です。

3色、4色…と色を増やしていくとグラデーションになり、色相を統一されているという意味で「色相ドミナント配色」とも言われます。

sample

 

配色法1-2:トーンイントーン

トーンが同じ(似てる)で、色相は自由

トーンを同一か類似の範囲で統一し、色相を自由に組み合わせます。

トーンが持つ印象(感情効果)を伝えやすい配色で、トーンを統一されているという意味で別名「トーンドミナント配色」とも言います。

sample

ただ、高彩度トーンで色相の明度差を大きくしてしまうと、この配色の持ち味が薄れてしまうので注意が必要です。

NG例

例は高彩度であるビビットトーンの黄色と紫です。

高彩度のトーンは、同じトーン内でも色味によって明度の差が大きいです。

そのため、同じトーンとはいえ、明度が高い黄色と明度が低い紫を合わせた時に大きな明度差が生まれてしまい「同じトーンでまとめている」という印象が薄れてしまいます。

 

 

配色法2:トーナル

濁色トーン同士の組み合わせ

トーンは同じか類似の、濁色同士の配色です。

具体的にはダルトーンを中心に、ソフトトーン、ライトグレイッシュトーン、グレイッシュトーンなどを合わせます。

落ち着き・控えめ・地味な印象を与えやすく、トーンドミナント配色の一つです。

sample

 

 

配色法3-1:カマイユ

ほぼ同じような色(低彩度)同士の配色

フランス語で「単色画法」という意味で、色相・明度・彩度・清濁のいずれもほとんど差のない配色です。

一見すると単色に見えるほどの似た色の組み合わせ。

厳密には色相を統一してその他の色の要素(明度・彩度・清濁)を微妙に変化させ、色調の違いを表現する配色ですが、低彩度色同士であれば多少色相が違っても構いません。

sample

りよ
みつはカマイユ配色好きなんじゃない?
はい!
やわらかくて、繊細な配色で好きです。
部屋もこんな感じです♪
みつ

 

配色法3-2:フォ・カマイユ

類似色同士の配色(カマイユよりは差がある)

「フォ(faux)」は「まがいの」という意味があります。

つまり「カマイユまがいの配色」ということです。

 

カマイユ配色は遠目に見たら1色に見えるくらい色調が近い組み合わせですが、フォカマイユになると「遠くから見ても色が違うのはわかるけど、似た色の組み合わせ」ということ。

具体的にいうと「色相もトーンも類似の組み合わせ」で、ファッションコーディネートで伝統的に用いられる配色です。

sample

 

配色法4:ビコロール

コントラスト差がある色同士の配色

フランス語で「2色配色」の意味のビコロールは、コントラスト感のある明快な色の組み合わせを指します。(3色の場合はトリコロールと言います。)

具体的なコントラストの付け方は、高彩度同士で対照的な色相を用いたり、明度差のあるトーンを用いる方法が一般的です。

白や黒などの無彩色が積極的に用いられるのも特徴です。

sample

メモ

黄色と紫のサンプルはトーンイントーンでNG例に出したものと同じですが
コントラスト差を必要とするビコロール配色では、高彩度の補色はgoodな組み合わせです!

 

配色法5-1:ナチュラルハーモニー

黄みよりの色を明るく、青みよりの色を暗く

その名の通り自然界の法則に従った配色です。

自然界では日光に照らされた部分は黄みを帯びて明るく、日陰の部分は青みを帯びて暗いです。

その自然界の法則の通り、2色を比べて黄みによっている色を明るく、青みによっている色を暗くした配色です。

二つの色を比べて、より黄みより・青みよりと考えるので、必ずしも黄や青を含む配色でなくても構いません。

なじみのよい、調和的な配色が作れます。

sample

 

 

配色法5-2:コンプレックスハーモニー

黄みよりの色を暗く、青みよりの色を明るく

ナチュラルハーモニーとは逆で、2色を比べて黄みによっている方を暗く、青みによっているようを明るくした配色です。

自然の法則と逆をいっており「複雑」であることからコンプレックスハーモニーという名前がついています。

斬新でデザイン性が高い配色効果を生みます。

sample

 

配色法6:ダイアード

補色同士の組み合わせ

色相環で対角線上に位置する2色の組み合わせをダイアードと言います。

下図の色相環で向かい合った色同士の配色のことで、いわゆる「補色」同士の組み合わせです。(色相環を3等分した3色の組み合わせはトライアード、4等分した4色の組み合わせはテトラードと言います。)


出典:日本色研事業株式会社

補色同士の組み合わせはただでさえ強い印象になりやすいので、彩度が高いと強すぎる配色になってしまいます。

必要に応じて、トーンを調整して利用しましょう。

sample

ちなみに強すぎる高彩度同士で組み合わせると…

こんな感じになります。

この配色はビコロール配色で例として取り上げられながらも、ダイアード・トーンイントーン配色ではどちらかというとNGの組み合わせ方になっています。

理由は単純に「高彩度同士」「補色同士」の配色は印象が強く、取り扱いが難しいから。

意図を持って利用する分には構いませんが、慎重に利用しましょう。

りよ
【豆知識】
補色同士を混ぜると無彩色(白〜グレイ〜黒)になります!

 

まとめ

今回は2色で作ることができる基本的な配色方法を紹介いたしました!

教科書的に配色理論を説明した記事になりましたが、どの配色方法を覚えておいて損はない基本的な知識です。

一通り配色の知識を頭に入れておくと応用も効きやすく、デザイン系の仕事でもクライアントさんに納得感を持ってもらえる説明をしやすくなりますし、コンペ形式の場合プレゼンの説得力も上がります。

ぜひ基本の配色知識を学び、仕事や趣味、実生活に役立ててみてくださいね!

要点まとめ

  • 色の組み合わせは「色相やトーンを主体にした配色」「色相環をベースにした配色」の大きく2つに分けられる
  • 紹介した2色で作れる配色はトーンオントーン・トーンイントーン・トーナル・カマイユ・フォカマイユ・ビコロール・ナチュラルハーモニ・コンプレックスハーモニー・ダイアード
  • 紹介した9つの配色のうち、ダイアード以外は「色相やトーンを主体とした配色」
  • 紹介した9つの配色のうち、ダイアード以外は、3色4色…と多数色への応用も可能
  • ダイアードだけは「色相環をベースにした配色」で多色に応用しない

 

 

色を学ぶ

色彩検定2級3級パックコース

たのまな 公式サイト

1回の受験でW合格が目指せる!

 

【3万円以上割引】デジタルハリウッド経由でAdobeをお得に買う方法

続きを見る

【色が好きな人へ】色彩スキルを活用したお仕事一覧。

続きを見る

【厳選4校】WEBデザイナーを目指す人におすすめのプログラミングスクール

続きを見る

【Photoshop|Illustrator|canvaの違い】最安値の購入方法も紹介!

続きを見る

-WEBデザイン, ロジカル色彩シリーズ
-, ,

Copyright© LIYO MEMO リヨメモ , 2020 All Rights Reserved.