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