配色のコツ

配色で目立たせる色の組み合わせ! 強調する配色の作り方。

デザイン作業をする上で必ず何か強調させたいものがあります。

強調させる方法は様々あります。レイアウトで強調したり、要素の大きさで強調するやり方もあります。そして、配色によっても強調させる方法があります。

この記事では配色での強調の方法と注意点を紹介します。

コントラストで強調する

コントラストとは目立たせたい物とそれ以外の物に、色の差を付けることをいいます。
差をつけることで対象物が目立ち、メリハリのあるデザインになります。

コントラストを付けて目立たせるやり方を3つ紹介します。

明度のコントラスト

背景と文字の明暗でコントラストをつけるやり方です。明暗の差があるほどコントラストのついたデザインになります。コントラストを付けやすいやり方です。

彩度のコントラスト

彩度でコントラストをつけるやり方は明暗のやり方と似ていますが、明暗に比べるとより印象的なコントラストがつくイメージになります。明暗では大人し過ぎると感じたらこのやり方が良いかと思います。

色相のコントラスト

色相の対比でコントラストをつけるやり方です。非常に目立ちますが、彩度お高い色同士だとハレーションが起きてしまうので注意が必要です。

ハレーションを起こす色の組み合わせは「赤」と「緑」、「紫」と「青」、「赤」と「青」が挙げられます。これらの色に組み合わせには彩度等の調整が必要となります。

左の赤と緑は彩度が高くハレーションを起こしてしまします。右は同じ補色ですが、ハレーションは起きずに、文字もとても目立っています。

ハレーション
色同士の境界が白く光って見える現象をいいます。よく目がチカチカして見にくくなる現象

ハレーションの対処方法

セパレーションカラーを使う

デザインによっては緑と赤の対比で見せたい時があります。例えばクリスマスの広告など、クリスマスで良く使われる色はまさに補色の赤と緑です。でもハレーションが心配です。

そんな時はハレーションが起きている色と色の間に無彩色の白や黒を挟むことで、ハレーションが解消されます。

この間に挟む色のことをセパレーションカラーと言います。

文字の縁取りもこのセパレーションカラーになります。

また、境界線にセパレーションカラーを挟むことで、曖昧だった境界がはっきりして見やすくなる効果もあります。

写真と四角のオブジェクトの境界に白い線を加えることで境目がはっきりし、目立つ様になりました。

進出色と後退色で目立たせる

同じ面積の色面でも色が異なると前に飛び出して見えたり、奥に引っ込んで見えたりします。

前に飛び出して見える色を進出色といい、反対に奥に引っ込んで見える色を後退色と言います。

進出色:暖色系—–明度彩度が高めの色
後退色:寒色系—–明度彩度が低めの色

上の画像を見てもらえればわかるように左の進出色は飛び出しているように見え、右の後退色引っ込んだ感じに見えると思います。

この進出色と後退色を利用して要素を目立たせることができます。

下の画像は背景に後退色、文字に進出色を使って、文字を目立たせています。

下の画像を見てもらえればわかるように左の進出色の文字色と右の後退色の文字色を比べると明らかに右の進出色の方が前面に飛び出して見えます。

遠近感で目立たせる。

進出色、後退色を利用した作例をもう一つ紹介します。

後退色を背景にして目立たせたい要素を進出色にすることで紙面に遠近感が生まれ自然と目立たせたい要素に目がいく演出が可能になります。

背景を後退色の寒色で統一して、目立たせたいものを進出色の暖色にすることで遠近感が生まれます。

 

大きな色面でイメージを印象つける

色面を使って、伝えたいイメージを前面に強調し目立たせるやり方です。

色にはその色が持つイメージがあります。色面を大きく使うことで色が持つイメージをストレートに伝えることができると同時に明快な印象のデザインとなります。

色ごとにはそのものが持つイメージがあります。色のイメージの参考になる記事を紹介します。合わせてどうぞ。

色の持つ印象でデザインを決める。色の選び方。色はデザインの良し悪しを左右する重要な要素です。 伝えたいイメージに合った色を選ぶことが大切になってきます。 また色選びを難...

下の記事は配色の選び方を書いた記事とトーンから色を選ぶやり方の記事です。参考にどうぞ。

配色の選び方。色を選ぶ方法をわかりやすく解説します。デザインをする上で配色は制作物の印象を左右する重要な要素です。 感覚に頼った配色では色数が増えてくるとどうしても行き詰まってしまい...
トーンが持つイメージで目的の配色ができる!配色を決める時、作りたいイメージにならない、なんてことはありませんか。 そんな時はトーンをうまく活用することで目的のイメージに近づ...

 

まとめ

この記事では色で強調し、目立たせることを紹介しましが、色だけでなく、レイアウトによって目立たせる方法も当然あります。うまく使い分けてることが、伝わりやすいデザインを作れるのではないでしょうか。

レイアウトでは余白を使うことで目立たせることができます。下の記事も参考にどうぞ。

余白をデザインする。劇的にデザインが変わる!デザインをしていると、なにかデザインが窮屈な感じがするとか 落ち着いた、お洒落な感じにしたいのに なんかゴチャゴチャしていて、も...
デザインにメリハリをつけるジャンプ率の解説デザインをしていて、目立たせたい箇所を大きくしているのに 何となく目立たないとか、全体にメリハリがないとか。 また、高級感や落ち...

おすすめの本

配色の選び方で参考になる本を紹介します。この本は作例が豊富で、メインカラー、サブカラー、アクセントカラーの3色を基本としてサンプルを下に効果的に色で伝えることを書かれた本です。とても参考になり、即実戦で使えるのでとてもおすすめの一冊です。

参考になったら幸いです。

 

関連記事はこちら