大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

色の対比と同化の錯覚現象

2021/11/9 デザインMemo
色の対比と同化の錯覚現象

皆さんは「対比現象」や「同化現象」という言葉をご存知でしょうか?

これらは、目の錯覚に関する現象のことです。実は、色の面積や組み合わせによって、色の見え方は変化します。不思議なことに、単色で見た場合と、複数の色で見た場合とでは、色の見え方が変わってしまうのです。

「デザインしてみたけれど、何か色の見え方がおかしい」「同じ色を使っているのに、同じに見えない」といった経験はないでしょうか?もしかしたら、対比現象や同化現象が起きているのかもしれません。

逆に、対比現象や同化現象について詳しく知っておけば、デザインに活かすことも可能でしょう。そこで今回は、初心者向けに、対比現象や同化現象について分かりやすく解説していきます。ぜひ参考にしてみてください。

対比現象とは

錯覚現象のうち、まずは対比現象について解説していきます。

対比現象とは、「隣接する色を同時に見たとき、色の違いが際立って見える現象」のこと。具体的には、以下の5つに分類されます。

  • 色相対比
  • 明度対比
  • 彩度対比
  • 補色対比
  • 縁辺対比

それぞれ詳しく見ていきましょう。

色相対比

色相対比

まず、色相対比です。

色相対比とは、「ある色が他の色に隣接するとき、お互いの色が影響を受けあって違う色に見える現象」のことを言います。

周囲に存在する色の影響を受けて、色相がズレているように錯覚してしまうのです。

例えば、赤地の上にオレンジ色を置いた場合と、緑地の上にオレンジ色を置いた場合とでは、同じオレンジ色でも違う色のように感じられます。

明度対比

明度対比

次に、明度対比です。

明度対比とは、「ある色が他の色に隣接するとき、お互いの色の明度が影響を受け合って、違う色に見える現象」のこと。先ほどの色相対比と似ていますが、錯覚の要因が「明度」にあるのが重要なポイントだと言えるでしょう。

同じグレー色でも、高明度の薄いグレーに囲まれたグレー色と、低明度の黒色に囲まれたグレー色では、見え方が大きく異なります。

彩度対比

彩度対比

次に、彩度対比です。

彩度対比とは、「ある色が他の色に隣接するとき、お互いの色の彩度が影響を受け合って、違う色に見える現象」のことを言います。

ここでの錯覚の要因は、「色の彩度」です。周囲の色が高彩度なほど対象の色はくすんで見え、逆に、周囲の色が低彩度なほど対象の色は鮮やかに見えるという特徴があります。

補色対比

補色対比

続いて、補色対比です。

補色対比とは、「ある色が他の色に隣接するとき、お互いの色が補色関係にあるほど色が鮮やかに見える現象」のことを言います。

補色とは、色相環において反対の位置にある色のこと。赤なら緑、黄なら青といったイメージです。

補色対比では、彩度の高い補色を組み合わせたときに、「ハレーション」と呼ばれる現象が起こることがあります。ハレーションとは、「強烈な要因が混ざり合うことでマイナスの効果が生まれてしまう」といった意味合いの言葉です。この場合、色と色の境界がちらついて目がチカチカするような状態になることを指します。

補色の組み合わせでは、色の差が大きいためインパクトを与えることができますが、彩度が高くなるとハレーションが起きてしまうので注意しましょう。

なお、ハレーションを回避したい場合は、色と色の間に無彩色を挿入する、どちらかの色の彩度を下げるといった方法があります。

縁辺対比

縁辺対比

最後に、縁辺(えんぺん)対比です。

縁辺対比とは、「ある色とある色を並べたときに、色が接する縁の部分で明度差が強調される現象」のこと。

例えば、あるグレー色の左側に暗い灰色、右側に明るいグレー色を並べたとき、左の縁の部分では灰色が明るく見え、右の縁の部分では灰色が暗く見えます。

なお、無彩色を間に挟めば、縁辺対比を回避することができます。

同化現象とは

対比現象とは逆の現象として知られているのが、同化現象です。

対比現象では隣接する色が際立って見えるのに対して、同化現象では「隣接する色に近づいて見える」ように錯覚されます。

対象の色が他の色に囲まれているとき、対象の色が周囲の色に似て見えるような現象です。囲まれた色の面積が小さく、色相・明度・彩度が近似しているほど、同化現象が起こりやすいと言えます。

同化現象は、主に以下の3つに分類されます。

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

それぞれ簡単に解説していくので、ぜひ参考にしてみてください。

明度の同化

明度の同化

まず、明度の同化です。

明度の同化とは、「挿入色が背景色に隣接するとき、挿入色の明度によって背景色と同化しているように見える現象」のこと。ある色を背景色に挿入したとき、全体の明度が変わって見える現象とも言えるでしょう。

例えば、白地と黒地の背景に同じ明度の灰色の線をたくさん挿入すると、背景色である白や黒に影響され、全体の色が違って見えます。

色相の同化

色相の同化

次に、色相の同化です。

色相の同化とは、「挿入色が背景色に隣接するとき、挿入色の色相によって背景色と同化しているように見える現象」のことを言います。

例えば、黄色地に赤色を挿入すると、全体的にオレンジ色が強調されます。一方で、黄色地に緑色を挿入すると、全体的に黄緑色へと変化していきます。

ちなみに、この同化現象は、みかんの販売にも利用されています。普通のみかんよりも、赤いネットに入れたみかんの方が、より鮮やかな赤色が強調されて、美味しそうに見えるのです。

彩度の同化

彩度の同化

最後に、彩度の同化です。

彩度の同化とは、「挿入色が背景色に隣接するとき、挿入色の彩度によって背景色と同化しているように見える現象」のことを言います。

例えば、黄緑色の背景に鮮やかな緑色とくすんだ緑色を挿入した場合、鮮やかな緑色を入れた方は全体的により鮮やかになり、くすんだ緑色を入れた方は全体的によりくすんで見えるようになります。

まとめ

初心者向けに、色の錯覚現象である「対比現象」と「同化現象」について簡単に解説しました。

【対比現象】

  • 色相対比
  • 明度対比
  • 彩度対比
  • 補色対比
  • 縁辺対比

【同化現象】

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

錯覚現象は種類が多いため、いきなり全てを理解する必要はありませんが、知識として頭に入れておくと、デザイン制作などに大きく役立つでしょう。

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP