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

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

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

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

コントラストで強調する

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

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

明度のコントラスト

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

彩度のコントラスト

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

色相のコントラスト

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

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

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

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

ハレーションの対処方法

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

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

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

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

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

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

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

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

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

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

上の画像は左のオレンジ系の配色は進出色で飛び出しているように見え、右の後退色引っ込んだ感じに見えると思います。

デザインに応用

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

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

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

遠近感で目立たせる。

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

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

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

まとめ

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

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

おすすめの本

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

 他にもおすすめの配色の本を紹介した本の記事も参考にどうぞ。

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