本日は、「ストループ効果」という現象について、お話しします。
「ストループ効果」という名前自体は知名度が高くありませんが、テレビのクイズ番組などでよく利用されることもあり、比較的なじみ深い現象です。
ストループ効果とは？
ストループ効果について説明するにあたり、いきなりですが、まずは下記の図について、左から順に色を読み上げていっていただきたい。
いかがでしょうか？
言われていることは、ただ単に「ひらがなを読め」ということだけなのに、大変読みづらいなと感じた方が多かったのではないでしょうか。
これは、文字を読もうとした際、いやでも目に飛び込んでくる「背景色」という情報が、「文字」という情報に干渉しているからこそ起こる現象であると言われています。
そして、おそらくですが、このような「意地悪な」クイズ、皆さん一度は、どこかしらで眼にしたことがあるのではないでしょうか。
そう、これこそが「ストループ効果」です。
ストループ効果とはすなわち、「色」と「文字」など、目に飛び込んでくる複数の情報が干渉しあう現象のことです。
結果的に、我々の情報処理に支障をきたすことが多いです。
さて、続いて、以下の図をご覧ください。
この図も、どことなく気持ち悪さを覚えてしまう方が多いのではないかと思います。
「SALE」と大々的に掲げる際は、有色の背景に別の色の文字（赤地に白など）を描くことが一般的です。
しかし、下の図では、白地に黒という、それとは逆行するスタイルで描かれていることが、違和感の正体です。
右側2つについては、言うまでもないでしょう。
普段我々は、「信号」というものの存在により、「赤なら止まる、青なら進む」ということを意識の中に刷り込まれています。
下の図では、見事にこの逆をやっているため、見ていてどことなく混乱してしまう、というわけです。
逆ストループ
さて、ここまで「ストループ効果」についてお話ししてきましたが、実は、「ストループ効果」とは別に、「逆ストループ効果」と言われる効果もあります。
そもそも「ストループ効果」の名前は、これを発見した心理学者、ジョン・ストループの名前を取ってつけられたものです。
彼が実験によって発見したのは、①赤インクで書かれた『あか』と、②青インクで書かれた『あか』では、「色名を答えなさい」と言われたとき、正解が出てくるまでに、②の方がより時間がかかる、ということです。（①の正解は「あか」、②の正解は「あお」）
つまり、文字の干渉を受けることで、色を正しく認識することが難しくなること、これが「ストループ効果」と呼ばれるようになった現象です。
一方で、①と②のそれぞれ、「文字の意味を答えなさい」（正解は、①はあか、②もあか）と言われた場合に②の方が時間がかかってしまうこと、つまり、背景色の干渉を受けることで、文字の意味を正しく認識することが難しくなること、これを「逆ストループ効果」と呼びます。
ストループ効果現象が起きる原因
では、上記で見てきたような「ストループ現象」は、一体なぜ起こるのでしょうか。
その原因は何でしょうか。
既に言及してはいますが、目に複数の情報が同時に飛び込んできた場合、その情報同士が干渉しあい、一方の情報が正しく認識されるのを、他方の情報が邪魔してしまうことにより起こるのがストループ効果です。
ストループ課題と干渉制御
しかし、我々は、意識すれば、情報同士の干渉を避けることができます。
冒頭で見たように「文字の色ではなく、意味を答えてください」というように、一方の情報（刺激）を気にせず、片方の情報（刺激）にのみ、選択的に注意を向けさせる課題を、「ストループ課題」と言います。
このストループ課題において問われているのは、「干渉制御」という、どちらか一方の刺激に選択的に注意を向けるために、意識的に片方の刺激を無視する能力のことです。
カクテルパーティ現象
こういわれると、「干渉制御」という能力は、ストループ課題を出されたときのみ使う力で、日常生活とは疎遠のもののように思えてしまいます。
しかし、実はそうではなくて、この「干渉制御」、我々が日常生活を営んでいくうえでも極めて重要な能力なのです。
その代表例が「カクテルパーティ現象」と呼ばれる現象です。
大勢の人が集まっているパーティ会場。
当然、大勢の人の声やBGM、足音など、様々な音が飛び交っています。
しかし、そんな中でも我々は、誰かと会話しているときは、目の前の人の声に集中し、それを聞き分けることができます。
これを「カクテルパーティ現象」といいますが、これは、我々が、無意識のうちに、目の前の人の声に選択的に集中し、それ以外の音や声を無視しているからこそできることです。
このように、意識しているかいなかに関わらず、我々は日常生活から、「干渉制御」の力を発揮しているというわけです。
Webサイト制作への応用方法とは
このように、我々が普段から無意識に行っている「干渉制御」を最大限に活かせば、web制作においても、1つの情報を相手に届けやすくすることができます。
ここから先は、この「干渉制御」を活かし、「ストループ効果が起きないように」意識することで、web制作においてどのような工夫をすることができるのか、という点を見て行きたいと思います。
早速ですが、以下の図をご覧ください。
この図は、「安売りしている」「お得なんだ」ということが、視覚的にも伝わりやすくなっています。
この伝わりやすさの理由の一つは、「MEGA SALE」という、最も伝えたいメッセージが、シンプルな文字で書かれていることにあります。
もしもこの文字が、必要以上にカラフルで、派手な文字になっていたら、おそらくここまで伝わりやすいものにはなっていないでしょう。
情報に対して適切なアイコンを使用
また、ストループ効果を引き起こさず、伝えたいメッセージをきちんと伝えるためには、メッセージとアイコンの整合性も重要です。
例えば、下記の図をご覧ください。
とちらも、問い合わせ先として、メールアドレスが記載されていますが、左側は電話のアイコン、右側はメールのアイコンが記載されています。
当然ですが、メールアドレスを伝えたいのに、電話のアイコンを配置するというのはいただけないチョイスと言わざるを得ません。
まさかここまで極端なことをする人はいないでしょうが、些細なところで、こうした「メッセージとアイコンの不一致」を引き起こしてしまったら、メッセージが大変伝わりにくく、見ている側にとって、大変ストレスフルなwebサイトとなってしまうでしょう。
言葉がなくても伝わるピクトグラム
最後に、ピクトグラムを活用する、という手法もあります。
ピクトグラムとはつまり、絵文字のことです。
伝えたいことをシンプルな絵や図で表現しているため、文字を使わず、それ単体で届けたいメッセージを届けることができます。
その代表例は、下記のようなトイレのマークです。
ストループ効果は、「文字と色」「文字と図」など、複数の情報が混在するから起こってしまうので、そもそもメッセージを1つの情報だけで完結させてしまうのが、最良の解決策だといえるでしょう。
まとめ
このストループ効果のメカニズムを知り、「ストループ効果が起きないように」と考えることで、よりよいweb制作が可能になります。
ぜひ普段から、複数の視覚情報を使うのはできるだけ避けること、使うとしても、それらに整合性を持たせることを意識して、よりよいweb制作を可能にしていただけたらと思います。
当社のWEBマーケティングメールマガジンにご登録いただきますと、下記の５つのPDFを無料でプレゼント！
平日 10:00～18:00
（セールス目的のお電話はご遠慮ください。）