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

前回の記事【色による錯覚を使いこなそう　～対比現象～】では、「対比現象」について考えてみました。対比現象は、使い方次第で目立たせたいポイントを簡単に強調することができます。
人間の目の錯覚を有効利用すれば、今までとは違ったデザインやレイアウトの仕方が見つかるため、ぜひ復習しておいてください。

一方、目の錯覚の一つである「同化現象」は、対比現象と逆の現象として知られていて、デザインの仕方によってその効果が大きくも小さくもなります。今回はこの、色の「同化現象」について、具体的に見ていきましょう。

同化現象の概要と具体例

同化現象とは、色の面積が小さく、細い線状のときに、隣接する色が近づいて見える現象です。言い換えれば、囲まれた色同士が影響を与え合うことで、あたかも色が近づいているように見える目の錯覚のことです。

人によっては、同化現象のことを「色の同化」と呼ぶこともあります。対比現象とは真逆の現象で、配色される明度や色相が近ければ近いほど、同化現象の効果はより一層大きいものとなります。

同化現象を学ぶにあたって押さえていただきたいのは、下記の3つのポイントです。

• 明度の同化
• 色相の同化
• 彩度の同化

どれも代表的な現象ですので、それぞれの違いに着目しながらひとつずつ具体例とともに確認していきましょう。

・明度の同化
明度は、背景色に同化していきます。たとえば、下記の事例を見てください。正方形を2つに分けて、左半分に黒、右半分に白の線を入れてみました。すると、左半分は、全体的に黒く見えます。一方で、右半分は、全体的に白く明るい印象を受けます。

これは、明度の同化によって、背景色と同化していることが大きく関係しています。よく野菜のパッケージに緑色が使われることがありますが、明度の同化が利用されていることをご存じでしょうか？

人の認識の中で、緑色は、状態の良い野菜というイメージがあるため、少しでも新鮮な野菜だと思ってもらうために、野菜のパッケージに緑色を使っています。パッケージを緑色にすれば、中に入っている野菜が緑色と同化し、状態が良く見えるということです。

・色相の同化
色の組み合わせ方を変えると色みが変化します。これは色相の同化と呼ばれていて、下記の実例を見ればその変化の様子が分かるかと思います。

黄色に赤色を入れると、全体的に橙色に近い色へと変化していきます。黄色に緑色を入れると、全体的に黄緑色へと変化していきます。

色相の同化現象を利用すれば、色の組み合わせ方によって全体的な色の違いが生まれます。

・彩度の同化
組み合わせる色の鮮やかさに違いが生まれると色が変化します。

黄緑色に鮮やかな緑、くすんだ緑を入れると、鮮やかな緑を入れたほうは鮮やかさが増して見えます。くすんだ緑を入れたほうは、よりくすんで見えます。
これは、彩度の同化現象と呼ばれていて、同じ色でも鮮やかさが増すケースと、くすんだ色になるケースを作ることができます。

対比と同化の違い

ここで、対比現象と同化現象の根本的な違いを理解していきましょう。下記は、対比と同化の概念を視覚的にわかりやすく表現した絵です。デザイン上で扱う色が同じでも、線の太さを変えることで相手に与える印象がまったく違う点に着目してください。

【実例として使用可能な画像を設置】

対比現象では、それぞれの色が対比できるほどに独立しているため、色がまじり合うことはありません。片側の色は明るく、一方の色は暗く見えます。今よりも対比効果を上げたければ、真ん中の部分に線を一本引いてみても良いかもしれません。線を引いた部分が境界線となって対比現象が起きているため、視覚的にも対比しやすくなります。

一方で、同化現象は、線が細く明度の同化現象が発生しています。つまり、片側の色は、全体的に明るく、一方の色は全体的に暗くなります。

「対比現象と同化現象を区別して使い分けることが難しい…」と思う人もいるかもしれません。上記のように、どのようなレイアウトでどういった視覚効果が生まれるのかを知っておけば、目の錯覚をこれまでよりも有効に使えるでしょう。

まとめ

同じ配色であっても、細い線の時は同化して見えますが、色の面積が広いときには対比に見えます。
デザイン時の配色に困ったときは、対比現象や同化現象のような理論が問題解決へと導く糸口になり得ます。対比現象や同化現象をうまく使いこなして、よりよいデザインを作成してみてください。