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

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

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

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

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

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

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

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

UIでの応用

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

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

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

関連用語

参考文献

参考サイト

blank

山田 和広

事業会社でサービス開発をおこなっています。
元々はエンジニアとして働いていましたが、現在ではスクラムマスター、QA、UXライティングなど様々な分野に挑戦中です。
UX DAYS TOKYOの活動を通じて、ユーザーの視点やスクラムに関する本質、共創のマインドなどを学び、現場でも多くを取り入れています。