色による錯覚を使いこなそう ～対比現象～

複数の色を使う際、1色で見た時とは見え方が違うと感じることがあります。これは、「対比現象」や「同化現象」と呼ばれる色の錯覚によるものです。

色の錯覚は、以前の記事で挙げた配色による見やすさにも関わります。色の性質の基本について知りたい方は、まずは下記の記事を読んでみてください。

【見やすい色の性質について考えよう】
https://www.site-shokunin.com/blog/design/4345.html

「対比現象」や「同化現象」を知っておけば、ホームページの配色や各コンテンツのデザイン構成を考案する際に、錯覚をふまえたデザインができるようになります。今回は、色の「対比現象」について、具体的に見ていきましょう。

「対比現象」とは、隣接する色の差が大きい場合に、より際立って見える現象です。対比効果とも呼ばれる現象で、他の色の影響を受けて、いつもとは違う見え方をする現象を指します。

色相対比とは、周囲に存在する色に影響されて色相にズレが生じる現象のことです。
たとえば、次の画像を見てください。

中心の四角はどちらも同じ色であるにもかかわらず、周囲の色が違うと見え方が大きく異なります。これこそが色相対比の現象であり、視覚効果です。

明度対比とは、周囲に存在する色の明度によって、同じ色でも異なって見える現象のことです。
次の画像は、中央の四角はどちらも同じ色のはずなのに、周囲の色の明るさによって見え方が異なることが分かります。

デザインを考案するなら、明度の高い部分と低い部分を意図的に作ってあげることで、強調したい部分を引き立てやすくなります。色の違いにしか注目していなかった方は、明度対比まで意識できるとデザインの幅が広がっていくでしょう。

彩度対比とは、周囲に存在する色の彩度によって、同じ色でも異なって見える現象のことです。周囲の彩度が低ければ、中央の色が鮮やかに見えます。一方で、周囲の彩度が高ければ、中央の色がくすんで見えます。下記の画像を見えてください。周囲の色は彩度が異なるだけで同じ色相、同じ明度です。

周囲の彩度が高いと中央の色がくすんでしまって、ハッキリとしません。ぼやーっとしているなと思ったら、彩度対比による錯覚を疑いましょう。一方で、彩度の低い色を周囲に置くと、中央の四角がハッキリとしてきれいですよね。

全体的にデザインを見渡した時、「色がくすんでみえるな」と思ったら、彩度を調整してみると、大きく改善されるケースが多いです。

補色対比とは、補色となる色同士がそれぞれを引き立てることで、より鮮やかに見える現象のことです。そもそも、補色とは、一体どのような色なのでしょうか？一般的に補色関係とは、色相環で反対色になる色のことを意味します。そのため、反対色になる色を組み合わせると、色を引き立てあうということです。

こういった色は凄く目立ちますし、インパクトも強いです。だからといって、組み合わせ方を間違えるとハレーションを起こしてしまいます。ハレーションとは、色の境目がぎらぎらして見えづらくなる現象を指します。

極端に明るい色同士のデザインを見ると、目がパーッとなって、デザイン自体を楽しめなくなることがあるでしょう。それがハレーションを起こしている状態です。補色対比を有効に利用する場合は、ハレーションを起こしていないかまでしっかりと注意を払ってください。

縁辺対比とは、色と色が隣接する部分で明度差が強調される現象のことです。たとえば、次の画像では明度差のある色を順番に並べてみました。どこに色の差を強く感じるでしょうか？

色と色の境目を見てください。明るい色と隣接している左側は暗く見えて、暗い色と隣接している右側は明るく見えるため、強調されて見えませんか？
人間の目は、2つの色が隣接する場所を探して、識別しようとします。その作用を理解していれば、明度差を利用したデザインを考えることができます。

たとえば、芸術の分野が好きな方なら、正方形を段階的に重ねたもので縁辺対比を利用しているものを見かけたことがあるでしょう。縁辺対比を利用すれば、目の錯覚により十字の線が見えてきます。

対比現象を上手く利用することで、アピールしたい文字や画像を強調することができます。いつもなら、今ひとつデザインが目立たないなと感じ、色の組み合わせ方について、困っていたこともあるでしょう。

対比現象を知れば、今までとは違った目線が持てるのではないでしょうか。配色やデザインには、答えがありません。それこそ、その人の感性や経験により、表現されるものが大きく異なります。

ホームページなどの全体的なデザインを決定する際は、見やすさも意識しつつ、対比現象を有効に取り入れてみてください。

< 前の記事次の記事 >

サイト職人スタッフブログ