コントラスト効果(対比効果)
Contrast Effect

同じものでも、前後との対比によって印象が変わること。

同じ商品や同じものを見ても、周囲との対比で印象が大きく変わる。
周囲より目立っているものは、より深く記憶する。

丸いボタンを例に説明する。
以下では、すべて同系色のボタンのため、Bがあまり目立たない。

一方、こちらの並びでは、周囲のボタンと全く異なる色のBを目立たせることができた。

価格におけるコントラスト効果

販売価格だけをそのまま見せるのではなく、あらかじめ大きい価格を見せておき割引することで心理的に低い価格に見せるアンカリングがある。→アンカリング
これにコントラスト効果を加えて、効果的に売りたい商品アピールすることができる。

ただし以下のように価格差が大きすぎるとかえって逆効果になることもあるので、注意が必要である。

UIでの応用

以下はデスクトップ用Kindleアプリで検索した画面である。
マウスオーバーした部分の背景色を変えることで、自分がどこを選択しているかわかりやすく表現している。

また以下のように検索語をハイライトして視覚的にコントラストを出すことで、検索にマッチした部分をわかりやすく提示できる。

Netflixの会員登録画面では登録してもらいたいプランを予め選択状態にし、さらに目立つように濃い色で表示して、他プランとコントラストをつけて選ばれやすくなるよう印象づけている。

関連用語

参考文献

参考サイト

この記事を書いた人:山田 和広

株式会社PR TIMES エンジニア。
2000年慶應義塾大学環境情報学部卒業。新卒でWEB制作会社に入社。その後、映画宣伝会社でハリウッド映画等の公式サイト作成・オンライン宣伝企画を担当。2014年4月PR TIMESへフロントエンド・エンジニアとして入社し、サービスの企画・開発を行っています。