こんにちは！デザイナーの上野です。
皆さん、Webサイトをデザインする上で、注意している点はありますでしょうか？
お客さんとデザインの決定をしていく際に、
「どういう点に注意したらいいんでしょうか？」
とよくご相談があります。
私は、「不一致なデザインになっていないか」を気をつけています。
例えば、メインカラーでは黒色を用い、落ち着きをもたせてるが、
採用ページではピンク色で華やかさや可愛らしさを表現してしまうと、
ユーザーに混乱を招いてしまいます。
「不一致なデザイン」で信頼を落としてしまう可能性もあるのです。
これは、Webサイト制作だけではなく、バナー広告や紙メディアのデザインでも注意したい点です。
今回は「不一致なデザイン」を引き起こしてしまう原因の一つ、「ストループ効果」についてお話ししたいと思います。
また、対策も一緒にご紹介するので、ご活用ください！
ユーザーを混乱させてしまう、ストループ効果とは？
いきなりですが、問題です！
どちらが、読みやすいでしょうか？
おそらく、赤で書いた「青」の文字は情報を理解するのに、時間がかかってしまいます。
文字と色の2つの情報が干渉しあって混乱を引き起こしてしまっているのです。
この現象のことを「ストループ効果」と言います。
“ストループ効果とは「文字の意味」と「文字色」のように同時に目にするふたつの情報が干渉しあう現象です。
色情報と文字情報が脳内で葛藤を起こすことが混乱の原因です。意味の異なる刺激が同時に呈示されると、刺激に反応するまでに時間が多くかかる現象のことを指します。”
引用元: Web行動心理学研究所
ストループ効果は、マーケティングにも使える心理学のテクニックです。
こちらの「文字」を読んでください。
どうでしょうか。とてもわかりづらいですよね？
このストループ効果、実はWebデザイン上でもよく起こってしまうのです。
実際に起こり得る事例を見てみましょう！
ストループ効果が招く混乱と事例
CTAのバナー画像でのストループ効果
Webサイトでよく見る、お問い合わせ電話番号のデザインパーツです。
一目瞭然かと思いますが、右と左はどちらが理解しやすいでしょうか？
当然、右の図になりますよね。
左のメールのアイコンも、「ストループ効果」によって混乱を起こしてしまっています。
ビジネス講座のバナー画像でのストループ効果
もうひとつ例をあげてみます。
とあるビジネス講座の広告を想定し画像を作成してみました。
左は「超人気」と書いてあるのに、ひと一人いない画像を使用しています。
「え？本当に人気なの？人全然いないけど…」 と感じてしまいませんか？
図像と文字の2つの情報が合致していないため、混乱を起こしています。
では、右はどうでしょうか？
右側の人気そうな写真を使用した図の方が、断然見やすいですよね。
内容を理解するのに時間がかからず、ユーザーに優しいデザインと言えるのではないでしょうか。
ユーザーに優しいWebページをデザインする
ユーザを混乱させない、優しいデザインを作るには 「ストループ効果」を回避することが重要です！
つまり、文字と色だったり文字と画像だったり、複数の情報を合致させることが大切なのです！
情報を一致させることは「当たり前のこと」なのですが、案外難しいことです。
現在のWebサイトは本当にユーザー、見ている人に優しいデザインになっていますでしょうか？
もしかしたら、文字の色ひとつ、アイコンひとつを変えるだけでクリック率が上がる！
そんなこともあるかもしれません。
ストループ効果を回避することは、ひとつのデザインのテクニックにすぎません。
Webサイトのターゲットやコンセプトによって、デザインによる解決方法は変わってきますので、
まずはお気軽にご相談ください。
