- センスの良いチラシやポスターを作りたい。
- プレゼンスライドの配色を改善してプレゼンの効果を高めたい。
- ブランド力アップのために、色を効果的に使いたい。
この記事は、このような方に向けた記事です。
主にフリーランスや副業など、自分のビジネスで色を効果的に使いたいという方を想定してご紹介していきたいと思います。
なお、参考までにですが、私の色に関わる経験は以下のあたりです。
- 美大出身
- カラーコーディネーター取得済
- インテリアコーディネータースクール修了
- 元デザイナー
この経験もふまえてわかりやすくご説明していければと思います。
フリーランスとして仕事をしていると、色を使う機会はとても多いですよね。
たとえば、名刺、チラシ、ポスター、企画資料、Webサイト、SNSのアイコンやバナー、動画など。
色はそのシステムを学ぶことで、意図したイメージや効果を生み出すことができる便利なツールです。
様々なものを自分で作る機会の多いフリーランスだからこそ、色を効果的に使うコツを身に着ければあらゆるシーンで役立てていただけると思います。
この記事でご紹介するのは、色を効果的に使うための超基本の３つ、「色相差」、「明度差」、「彩度差」です。
名刺やポスター、Webサイトなど、どこでも通用する基礎知識です。
基本はとてもシンプル。でも身に着ければ自然と応用力も身につけることができるようになる、とても大切な色知識です。
是非、目を通していっていただければと思います。
それでは早速読み進めていきましょう！
配色の基本３パターンについて
色には、
- 色相（赤、黄、緑、青、紫などの色みの違い）
- 明度（色の明るさの違い）
- 彩度（色の鮮やかさの違い）
という３つの特徴があると言われ、これを「色の三属性」と呼びます。
配色をする際には、この３つの属性の違いに注目し、
- 色相の違いに注目した配色
- 明度の違いに注目した配色
- 彩度の違いに注目した配色
この３つの方法で配色していきます。
それぞれの特徴や配色の際のポイントなどをご紹介していきます。
色相差に注目した配色
客観的な基準に基づいて色を表すために、色を定量的に体系化した表色体系が使われます。
ここでは、下記の「PCCS（日本色研配色体系）」を基準にして、「色相差による配色」の特徴を紹介していきます。
色相差に注目した配色には、大きくわけて、
- 色相類似系の配色（似ている色み同士の配色）
- 色相対照系の配色（対照的な色み同士の配色）
の２種類があります。
それぞれご紹介していきます。
色相類似系の配色
色相類似系の配色には、「同一色相の配色」、「隣接色相の配色」、「類似色相の配色」の３パターンがあります。すべてに共通する特徴として、以下のようなものがあります。
●特徴
- 色相の差が「0～3」と小さい。
- 色相関係が近いため、色相が持つ感情効果が表現しやすい。（たとえば、暖色系の配色は「暖かい」、寒色系の配色は「涼しい」など。）
- 色相関係が近い色の組み合わせはイメージにまとまりが出るため、失敗しにくい。
同一色相の配色
- 色相差が「0」で、色相が揃っている配色のこと。
- 無彩色と有彩色の配色もここに含まれる。
- 一般的によく用いられる配色で、調和感を出しやすい。
●たとえばこんな配色
例）壁、ソファ、クッション、ラグマット、シェードカーテンなど、ベージュピンクの同一色相を使った配色
●配色のポイント
- 明度または彩度で変化をつける。
- 同一明度の配色は、色同士の境界があいまいで個々の色が認知しにくくなるという特徴があるため、「同一色相かつ同一明度」の配色は避けるほうがよい。
隣接色相の配色
- 色相の差が「1」と、色相環の隣同士に位置する色相を使った配色。
- 「不調和な配色」とする説もあるが、色相の微妙な違いがかえって色表現の味わいを増す配色にもなる。
●たとえばこんな配色
隣接する色相を使って配色された例
●配色のポイント
- 明度または彩度で変化をつける。
- 色相に違いが出る配色では、配色の濃淡関係を作る際、明るい方の色相はより黄み方向に傾く色を選び、暗い色の色相はより青紫み方向に傾く色を選ぶと、自然な調和感のある配色ができる。
類似色相の配色
- 色相の差が「2～3」と、色相が似ている色同士を使った配色。
●たとえばこんな配色
類似する色相を使って配色された例
●配色のポイント
- 色相に違いが出る配色では、配色の濃淡関係を作る際、明るい方の色相はより黄み方向に傾く色を選び、暗い色の色相はより青紫み方向に傾く色を選ぶと、自然な調和感のある配色ができる。
色相対照系の配色
●特徴
- 色相の差が「4～12」と大きくなる。
- 暖色系と寒色系など、互いに対立的なイメージの色相を組み合わせる配色。
- 色相の差が大きいため、色の統一感を出すために、明度や彩度は近しいものを組み合わせる場合が多い。しかし、「同一明度の配色は、色同士の境界があいまいで個々の色が認知しにくくなる」という特徴があるため、色素対照系であっても、同一明度は避けたほうがいい。
中差色相の配色
-
- 正確には、類似色相でもなく対照色相でもなく、その中間の位置関係にある色相の色同士で、それぞれの色の間に共通の色みを感じない配色。
- 色相の差が、大体「4～7」の配色。
- 調和に求められる「変化と統一」のバランスという点で中途半端なため、「不調和な配色」とする説もある。
- しかし、この中差色相の配色は、アジアの伝統的な色づかいや、エスニック調のデザインなどに多く見られる。
- 中国の五色「赤・黄・青（現代の緑）・白・黒」にある、「赤・黄」、「黄・青（現代の緑）」の配色は、中差色相の関係にあり、日本や中国、韓国における祝いや祭りの色としてよく使われている。
中差色相の配色は、日本の伝統的な縞柄、格子柄、平安時代の十二単や、平安貴族の衣装に見られる「かさねの色目」などにも多くみられる。
●たとえばこんな配色
類似色相と対照色相の中間の位置関係にある色相を使って配色された例
●配色のポイント
- 中差色相かつ、中間的な明度と彩度の色を用いると、アジア的で素朴なイメージを出しやすい。
対照色相の配色
-
- 色相の差が、大体「8～10」の配色。
- 暖色と寒色など、イメージが対照的に大きく異なる色同士を使った配色。
- 調和感を与える配色。
- 熱帯地方の魚類、鳥類、蝶といった昆虫類など、自然の生物によく見られる配色。
- ビビッドトーンやストロングトーンなど高彩度色を使った配色は、活動的でダイナミックなイメージを与えるため、スポーツ関連の配色によく用いられる。
●たとえばこんな配色
対照的な色相を使って配色された例
●配色のポイント
- 色相の差が大きいため、彩度を合わせて、統一感を出すのが一般的。
- 活動的でダイナミックなイメージを与えたい際は、ビビッドトーンやストロングトーンなど高彩度色を使った配色を用いる。
補色色相の配色
-
- 色相の差が、「11～12」の配色。
- 色相の関係が補色の関係になる配色。
- 色相の差が大きいため、彩度を合わせて、統一感を出すのが一般的。
- 対照色相の配色と同様に、高彩度色を使った配色は、活動的でダイナミックなイメージを与える。対照色相よりも色相の差が大きいため、さらに刺激的なイメージを与える。
●たとえばこんな配色
補色に関係にある色相を使って配色された例
●配色のポイント
- 高彩度かつ、明度が近い配色をする場合は、間に無彩色を挟むのがおすすめ。補色関係の色同士の配色は、補色残像（一方の色を一定時間見つめた後、白い壁などに目を移すと、残像として補色が見えてくる、目の特性による現象。）を引き起こし、色の境目を不快に感じることがあるため。
- 活動的でダイナミックなイメージを与えたい際は、高彩度色を使った配色を用いる。
明度差に注目した配色
私たちは、明るさの違いによって物同士の境界を見分けています。そのため、配色を行う際にも、明度を意識することがとても大切になります。また、私たちが色から感じる軽重感や硬軟感といった心理効果には、明度が大きく関係しています。
ここでは、下記の「マンセル表色系の明度」を基準にして、「明度差による配色」の特徴を紹介していきます。
クリックで拡大できます
明度類似系の配色
-
- 明度の差が、「0～1.5程度」ある配色。
- 低明度色同士（4未満）、中明度色同士（明度4以上～7未満）、高明度色同士（明度7以上）、の3パターンに分けられる。
- 明度が近いため、色同士の境界があいまいになり、色の判別がしにくい。
- 明度の差が小さい配色は、明度が与える心理効果である軽重感や硬軟感などが表現しやすい。
●たとえばこんな配色
明度類似系かつ、高明度同士の色相を使って配色された例
●配色のポイント
- 「明度の差が小さい配色は色同士の境界があいまいになる」という特徴があるため、目立ちの効果を抑えることができる。
- 明度差の小さい配色の場合、素材の質感を変えて、微妙な変化を作ることで、統一感がありつつも味わいのある表情を作ることができる。
- 明度差の小さい配色で、色同士の境界を明瞭にしたい場合、補色色相の配色と同様に、間に無彩色を挟む方法を用いる。
明度対照系の配色
-
- 明度の差が、大体「2.5以上」ある配色。
- 明度差が大きいほど、色同士の境界が明瞭になり、視認性が高くなる。
- 上記の特徴から、明快さや、ダイナミックな印象を与えるため、交通標識やスポーツ関連商品に多く使われる。
●たとえばこんな配色
明度が対照的な色相を使って配色された例
●配色のポイント
- 明度差が大きいほど明瞭さが増すため、交通標識や、大衆向けの案内表示など、高い視認性が必要な場合に用いる。
- ダイナミックな印象を与えたい際に用いる。
彩度差に注目した配色
私たちが感じる、派手感や地味感といった心理効果は、主に彩度が影響しています。
ここでは、下記の「マンセル表色系の彩度」を基準にして、「彩度差による配色」の特徴を紹介していきます。
彩度類似系の配色
-
- 彩度の差が、「0～3程度」の配色。
- 低彩度色同士（3未満）、中彩度色同士（3以上～7未満）、高彩度色同士（7以上）の3パターンに分けられる。（ただし、色相によって同じ彩度値でも鮮やかさが異なるため、あくまでも大まかな分類）
- 彩度差の小さい配色は、彩度が与える心理効果である派手感や地味感などを表現しやすい。
●たとえばこんな配色
彩度類似系かつ、高彩度色同士の色相を使って配色された例
●配色のポイント
- 彩度差が小さく、調和のとれた配色をする場合、明度差を適度につけるとよい。そうすることで、鮮やかさが揃いつつも、統一感のある配色になる。
- 彩度差が小さく、色相が対照関係にある2色の配色もおすすめ。彩度の統一感と、色相の変化感のバランスが良く、調和のとれた配色となる。
- 低彩度色同士（3未満）の配色は、彩度よりも明度によって形成されるイメージが強くなる。特に、低彩度・中明度同士の色の組み合わせは地味な印象が強くなる。
- 中彩度色同士（3以上～7未満）かつ、中明度色同士（明度4以上～7未満）の配色は穏やかで素朴な印象になる。
- 高彩度色同士（7以上）の配色は、派手な印象が強くなり、色相の印象が強く発揮される。例えば、暖色系同士は暖かく、情熱的で動的なイメージが強くなり、寒色系同士は冷たく静的なイメージが強く発揮される。
- 彩度差が小さく、かつ、色相差の大きい配色はダイナミックで活動的なイメージを与える。
彩度対照系の配色
-
- 彩度の差が、大体「7以上」の配色。
- 低彩度色や無彩色に、高彩度色を組み合わせた配色。
●たとえばこんな配色
対照的な彩度の色相を使って配色された例
●配色のポイント
- 低彩度色や無彩色の抑えた印象と、高彩度色の派手な印象の組み合わせはバランスがよく、調和のとれた明快な印象を与えることができる。
- 低彩度色や無彩色、高彩度色のどちらかを大きい面積で使用し、もう片方をアクセント色として小さい面積で使用するといった手法がよく用いられる。
色選びに迷ったら
以上、配色の基本３パターンをご紹介しました。
この記事では色の組み合わせ方をご紹介してきましたが、「そもそも何を選べばいいかわからない」という方もいらっしゃるかもしれません。
そういった場合に便利なツールもご紹介しておきます。
使い方は下記です。
「イメージ」と「色」を選択すると、選択肢を提案してくれます。色選びに困った際は、こういったツールも助けになります。
以上でご説明を終わりにします。
いかがでしたでしょうか？中には、既に無意識に使っていた配色や、お気に入りの配色などがあったという方もいらっしゃるのではないでしょうか？
既に知っているものがどの分類に当たるかを知ることも、新しい配色を覚え、活用するための第一歩です。
是非、身近なものの配色を観察してみてくださいね。
最後までお読みいただき、ありがとうございました。
