コントラスト効果とは？

この記事を読むための時間：5分

コントラスト効果という言葉を聞いたことがありますか？

これは心理学用語のひとつで、私たちが五感（視覚や触覚など）を感じるときや、買い物をするとき、家を借りるときや、広告の文章で見かけるなど、日常生活の様々な場面で使われている効果です。

さらに、コントラスト効果をうまく活用することで、WEBサイトのクリック率を向上させる効果もあります。特にビジネスでWEBサイトを運用している方は、売り上げにも直結するもののため、ぜひコントラスト効果について知っておいてくださいね。

コントラスト効果とは

同じものでも、前後の対比によって印象が変わることをコントラスト効果（もしくは対比効果）といいます。

コントラスト効果の具体例

以下で、コントラスト効果の具体例を確認していきましょう。

視覚

例として、以下のボタンを見てみてください。

ボタンA 　ボタンB　 ボタンC

真ん中のボタンBは、AとCと色が違うため目立っています。

反対に全て同じ色だとどうでしょうか？

ボタンA 　ボタンB 　ボタンC

色に違いがないと、全く目立ちません。同系色だった場合でも、上で示した例に比べると目立ちにくいでしょう。

このように、同じボタンを見ても、周囲との対比によって印象は大きく変わります。特に、周囲のものより目立つものは、深く記憶に残りやすくなります。

聴覚

私たちの身の回りには、たくさんの音が溢れています。

その中で、例えば電車が通り過ぎる大きな音を聞いたあとに、駅の案内アナウンスが大音量で流れでも、あまり違和感は感じません。

しかし、静かだったところに、いきなり大音量のアナウンスが流れてきたら、普段より音が大きく感じるのではないでしょうか？

味覚

2種類以上の異なる味を混ぜ合わせたとき、どちらか一方の味が強く感じることがあります。

例えば、スイカを例に挙げてみます。甘いスイカにしょっぱい塩をかけることで、味の対比ができて、その結果スイカにより甘みを強く感じるようになります。

嗅覚

何も匂いを感じないところでは、かすかな匂いでも感じ取りやすくなります。

反対に、強烈な匂いを嗅いだあとだと、かすかな匂いは感じ取りにくくなります。

触覚

冷たい水に触れたあとで、常温の水に触れてみると、少し温かく感じるはずです。

反対に、熱いお湯に触れたあとで常温に触ると、少し冷たく感じるでしょう。

比べることによる判断

五感だけでなく、2つ以上の物事を比較する際にも対比効果は使われます。

例えば、気温20℃は寒いでしょうか？暑いでしょうか？

これだけの情報では「寒い」とも「暑い」とも言えません。

判断するためには、現在の季節はいつなのか、昨日の気温は何℃だったのか、そういった情報がなくてはなりません。

もし昨日が25℃あったのに今日が20℃なのであれば「寒い（涼しい）」と感じますし、昨日が15℃しかなかったのなら「暑い（暖かい）」と感じるはずです。これも対比することによって判断ができるという例になります。

コントラスト効果の活用

コントラスト効果は、日常の様々な場面で活用されています。

洋服のセール

10万円の服と聞くと、非常に高価に感じますよね。しかし、100万円もする高級ブランド品の洋服を見たあとだと少し安く感じるはずです。

この効果を利用したものが洋服のセールです。

通常の価格を少し高めに設定しておき、セールのときに50％OFFとして売り出します。すると、元値が1万円だった場合、最初から5000円として売り出すよりも、1万円が5000円になったと対比を感じさせるほうが安く感じるのです。

しかし、あまりにも価格差が大きすぎると、かえって不審に思われ逆効果となるため過剰な対比には注意が必要です。

不動産業者の当て物件

当て物件の「当て」とは、当て馬のことです。不動産業者が、入居希望者に最初に案内する物件のことを当て物件といいます。

このときに案内するのは、内見した入居希望者ががっかりするような、あまり魅力的ではない部屋（当て馬物件）です。

こうすることで、次に案内する部屋が、コントラスト効果によって実際よりもいい物件に見えるようになるのです。

コピーライティング

広告の文章でもコントラスト効果は活用されています。

例えばラインナップがひとつしかない商品を販売する場合、セールスコピーやラインディングページ（LP）では、他に比較する対象を登場させています。

以下では、5万円の商品（サービス）を販売する場合のコピーライティングの例を挙げてみます。

「3年」や「1500万円」といった表現を使うことで、あたかも5万円を小さな金額であるかのように感じさせるテクニックです。

または、以下のようにこれから得られるであろう利益にフォーカスした表現もできます。

これも「30万円」という大きな金額を打ち出すことで、コントラスト効果によって5万円を安い金額だと感じさせるテクニックです。

または、以下のような表現も可能です。

このように「1年」「半年」などの期間を表すワードを使って対比させています。

デザインでの活用

このコントラスト効果は、WEBデザインでも活用することができます。

サイトの色調に対して、1番のセールスポイントや目立たせたい部分を対比させて目立たせることで、ユーザーにクリックを促すことが可能になります。

• OOPS!（https://demo.tcd-theme.com/tcd048/）
  このサイトは、全体的に暗いデザイン中で、ボタンの色をオレンジにすることでコントラストを生み出しています。1番のセールスポイントであるボタンの色が目立つことで、ユーザーがボタンをクリックしやすくなるという効果があります。
• クラウドワークス（https://crowdworks.jp/）
  全体的に白でまとまったサイトの中で、オレンジ色の「無料会員登録」に誘導させるためのボタンが目立っています。ユーザーとしてもクリックすべき場所が分かりやすくなっています。
• 勘定奉行（https://www.obc.co.jp/bugyo/kanjo）
  サイト全体は白とピンクでまとまりのある色合いですが、その中で「資料をダウンロード」や「無料で試してみる」といった、一番クリックしてほしい部分がオレンジ色になっています。全体がまとまっているからこそ、対比でオレンジが目立ちやすくなっています。
• 西松建設（https://www.nishimatsu.co.jp/）
  全体的に黒でまとまった落ち着いたイメージのサイトです。その中で、ボタンの緑色がポイントとなって目立っています。

まとめ

コントラスト効果は、私たちが何かを感じるときや、何かを判断するときに、ごく自然に使われている効果です。さらに、ビジネスシーンなど日常生活のいたるところで活用されています。

このコントラスト効果はWEBデザインの分野でも活用できます。

コントラストがないサイトはユーザーにとっても使い勝手が悪く、クリックする場所も分かりづらいため売り上げが伸び悩む原因にもなります。

そのため、きちんと対比効果のあるデザインのサイトにし、クリック率の高いサイト運営を目指しましょう。