中間色を制して配色を制す!色選びのテクニック

色はデザインにおいて最も大切な要素のひとつです。
色によって人は様々な印象を抱きます。

 

それはあまりに繊細でほんの些細な色差でも人はまったく違う印象を抱いてしまいます。
だからこそ、配色に悩むデザイナーは少なくありません。
僕も配色は本当に苦労する要素のひとつです。
色選びだけで数時間費やしたこともあるくらいです。

 

では、どうしたら色を自在に操り、その魅力を最大限に引き出すことができるのでしょうか?
配色には様々なテクニックがありますが、その中で一番オーソドックスなやり方があります。
その鍵を握るのが中間色という存在です。


中間色を使いこなすことで、それまで悩んでいた配色も多少はスムーズに行えます。
今回はこの中間色についてお話しようと思います!

 

 

 

 

 

 

配色はセンスなんて言葉をよく耳にします。
確かに色はほぼ無限に選択肢があり、的確な色選びというのは非常に難しいことは確かです。

また、デザイナーやイラストレーターが色選びに考慮しなくてはいけないのは、そのデザインやイラストがどこで掲載されるのかということです。
印刷されるものなのかディスプレイで完結するものなのかでも違いますし、環境光や出力される紙の色、印刷手法など表現媒体や環境によっても大きく変わってしまいます。

 

例えば、暗い明かりの店内で掲載されるポスターであるならば、その店内に合わせて発色の良い色選びが必要になってきます。
こういう様々な外的要因やデザインやイラストに適した色選びという内的要因の板挟みとなるわけです。

 

 

配色が難しいのは一番に色にはたくさんの選択肢があることです。
組み合わせ方で見え方もまるで変わってくるので、それぞれでバランスを取ろうとするとなかなか難しい。
また、色は様々な要因に影響するので、配色を上手く行うには知識と経験が必要となります。

 

 

この難しさを色選びはセンスという一言で片付けてしまいたくなるのはよくわかります。
配色にセンスの有無があるかと言われれば確かに有るでしょう。

 

色に敏感な人や特に意識することなく調和の取れた色選びができる人は確かにいます。
しかし、世の中の大半の人はそんな能力を先天的には持ち合わせていません。


何より、仮に調和の取れた素晴らしい色を選べたとしてもそこには主観しかなく、仕事の現場では説得力をもちません。
必ず理論的な観点から色を選んでいなくてはならないのです。そうでなければお客様は決して納得してくれません。

 


デザイナーやイラストレーターにとって、色選びとは決して感覚的なセンスの賜物ではなく、
理論的な観点から選び出された説得力をもつ要素でなくてはならないのです。

 

 

 

 

では中間色ってどんな色?

 

ここまでで配色の難しさを語ったところで、本題に入ろうと思います。
中間色はその名前の通り、何かと何かの間の色という意味です。

 

では、赤と黄色の間の色のオレンジは中間色? となるかもしれません。


実際、色相で定義するならば赤と黄色の中間色はオレンジですが、今回でいうところの中間色は色相に関してではありません。
今回における中間色とは彩度の高いところから低いところの間を指しています。

 

 

 

 

こちらは水色の彩度表です。
この表のちょうど、真ん中あたりのが色が中間色となります。

 


この表から見ても分かるように、彩度が高ければ高いほど目がチカチカしますよね?
逆に中間調では落ち着いて見ることができます。
この落ち着いてみることができるというのが中間色のポイントなのです。

 

彩度が落ち着けばそれだけ、画面に調和が生まれ統一感が生まれます。
もし、配色があまり得意でないという方がいらしたら、まずはこの中間色で配色を行っていくと良いでしょう。

 

 

 

配色のキモは中間色

 

中間色そのものについて触れました。

今回のテーマである中間色は聞き慣れない人からしたら、なんだか難しく感じてしまうかもしれません。
ですが、実際に表にしてみれば簡単なことであることは理解していただけたと思います。


中間色がどのようにできていて、どのように組み合わせればいいかをちゃんと理解すれば、漠然としていた色選びが途端に説得力を持つようになります。
仕組みさえ理解するれば配色の大きなヒントになります。

 

落ち着いてみれるというのは配色においてとても重要なポイントです。
では具体的に中間色を使いこなすことで得られるメリットについて話そうと思います。

 

 

中間色はナチュラルな印象を与えます

 

※1

 

 

こちらの写真は意図的に中間色の配色がなされています。
こうすることで写真全体の印象がとてもナチュラルです。


さらに、全体を同系色の中間調で揃えることで、白い椅子が一番に見えてくるよう画面がデザインされていることが分かります。

 

中間色がナチュラルな印象になるのは、その多くが自然の中に存在する色だからです。
普段から目にする色のトーンだからこそ、人は落ち着いて見ることができるのです。

 

 

中間色は他要素の邪魔をしません

 

※2

 

 

こちらのデザインは全体が中間色でまとめられています。
そうなることで統一感が生まれつつ、なおかつ主張が控えめなのでデザインの邪魔をしないつくりとなっています。

中間色は原色のような強い主張がないので、コンテンツそのもののデザインを邪魔することなく引き立てることができのです。

 

 

中間色はメリハリを作るのに役立ちます

 

※3
 


こちらのポスターをご覧ください。一番に黄色のテントに目が行きますよね?
彩度の高くない中間色で周囲を構成し、一番みせたい黄色いテントの彩度を高くしているこのデザインは実にメリハリが効いています。

このように明度の大きく異なる色を上手く組み合わせることで、コントラストが高まり、画面全体が締まった印象に仕上げることができるのです。

 

 

中間色は多色でも調和がとりやすい

 

 

※4
 

ついつい未経験の人がやってしまうのが多色です。

 

実は多色はとても難易度が高い配色です。
色はお互いに影響を与え合います。だから増やせば増やすほど、バランスを整えるのが非常に難しくなるのです。
また高い彩度の色を多色使いすると、色の刺激が強くとても見にくい印象になってしまいます。

 

意図的にそのような配色をするデザインも存在します。
ですが、それは相当に難易度の高いものなのです。



一方、こちらの画像のデザインは多色ですが、見やすい印象ですよね?
こののように中間色での多色使いであれば、とても落ち着いた印象に仕上げることができます。

これは中間色自体がナチュラルな要素を含んでいるからこそ成り立っています。

 

 

 

まとめ

 

今回は配色をテーマにお話をさせていただきました。
実際のデザインやイラストの現場では、レイアウト作業や形状、文字など様々な要素が重なります。


そうなることで、より配色という工程は全体の印象を仕上げていく重要な要素としてデザイナーやイラストレーターの目の前に立ちはだかることでしょう。
色を考える上で大切なことは主に3つです。

 


 

1 色がもつイメージ

色はそれ自体に様々なイメージを持っています。
赤色なら温かい。青色なら冷たい。そんなイメージが僕たちの共通認識として確かに存在しているのです。
そんなイメージとデザインの齟齬がないか。
そこをきちんと理解していかなくてはなりません。

 

2 メリハリが効いているか

デザインやイラストの中には必ず主役がいます。
画面の中で主役が一番に見えてくるようにするのも配色をする上でとても大切な要素です。
色は言わば、舞台のスポットライトなのです。
スポットライトが何個も光っていては主役は目立たないですよね?
スポットライトが一番輝く中、周囲は暗闇の中に沈んでいるのが舞台です。
つまり、それこそがメリハリという要素の本質なわけです。
例えば先程までのトピックで触れていたように周囲を中間色で抑え、部分的に彩度の高いアクセントカラーをさすなんてことが、まさしくこのスポットライトなわけです。

 

3 全体に調和がとれている

配色の調和はトーンや色相をなるべく揃えることで、作り出すことができます。
この全体の調和をとるということが中間色を使う最大の利点となり、今回の記事の主軸となる部分でした。
言わば、この要素は色選びにおける基盤そのもです。
このベースがあってこその配色といっても過言ではありません。
だからこそ、中間色を制するということは配色を制するという事に他なりません。

 


 

いかがでしたでしょうか?
配色は本当に難しい工程ではありますが、ほんの少し知識を身につけるだけで、格段にレベルアップしていける要素でもあります。
今回の記事が少しでもその役に立てば幸いです。

 

 

配色関連記事

皆様はハレーションカラーをご存知でしょうか? 簡単に説明すると明度差がない彩度が高い色を組み合わせた配色のせいで、目がチカチカし、不快感を起こすような色の組み合わせのことを言います。 百聞は一件にしかず。こちらの画像をご覧くださ[…]

 

 

    引用元
  • 1 https://flymee.jp/category/chair/calligaris/
  • 2 https://tegra.co/?utm_source=pinterest&utm_medium=rss_pin
  • 3 http://www.shinmura-d.co.jp/news/category/work/
  • 4 https://www.anthropologie.com/shop/mistral-floral-bar-soap?color=059&quantity=1&size=One%20Size&type=STANDARD
http://www.shinmura-d.co.jp/news/category/work/より引用
最新情報をチェックしよう!