ストループ効果 : 色や情報の「干渉」を意識すると、Webページはわかりやすくなる

人間の行動には、「法則性」があると言われています。これをうまく活用し、より良いページづくりをしてみましょう。
よろしければこちらもご覧ください
※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

人間の行動には、「法則性」があると言われています。
これをうまく活用し、より良いページづくりをしてみましょう。

「ストループ効果」とは

「ストループ効果」とは、『2つの異なる情報が干渉しあう』ことを言います。
この現象を発見した人(ストループ)の名前がつけられました。

色が与える情報と文字が干渉している例

例えば、「クリスマス」をイメージする色は「赤」と「緑」ですね。
下記の画像を見てみてください。

「犬がかわいいなぁ」と思いつつ、何か違和感を感じませんか?
クリスマスで、サンタの格好なのに「水色」・・・。ヘンな感じですよね。

この「違和感」がストレスに感じられてしまうということになります。
人は、ストレスからは逃げたいという欲求を持っていると言われているため、こういった違和感が続くことで、見ていて「何かストレスを感じる」という印象を与えてしまいます。

サンタクロースはやはり、「赤」ですね。

情報内容と文字が干渉している例

色だけでなく、情報をレイアウトする際にも注意が必要です。

特に問題ないようにも見えますが、パッと見で「問い合わせ」「電話で」という言葉が目にはいると思います。そこで必要になる情報は「電話番号」です。

電話番号を大きくしてみました。
こちらの方がスッと「電話で問い合わせ」という情報が入りやすいと思います。

さらに、視覚的に「電話だ」とわかるような記号も追加してみます。

より、問い合わせしやすくなりました。
さらに、問い合わせする側になって想像してみると、下記のような疑問が出てきます。

  • 営業時間は何時なんだろう
  • 定休日はあるのかな
  • ファックスやメールで問い合わせしても良いのかな
  • 会社名なんだったっけ?
  • 担当の人っているのかな?

これらの情報を、関係があるもの同士を並べてレイアウトすることで、より問い合わせしやすく見える、ということになります。

★こちらの記事も参考にどうぞ

  • あなたのホームページを「読んで」もらおう! 第1回:すぐに活用できる2つのポイント※「はじめてWEB」は
    サービスを終了しました

まとめ

人にはすでに、普段の生活から「これが当たり前」と植えつけられている情報がたくさんあります。
単なる文字の列挙や好きな色を使うのではなく、ホームページを見にきている人が

  • どんな情報が欲しいのか
  • どんな行動をとってもらいたいのか

などを想像しながら、使う色やレイアウトを工夫してみてください。

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

※「はじめてWEB」のオリジナル版は掲載を終了しました

この記事の筆者

蝦名 晶子(えびな・あきこ)

ディーシーティーデザイン 代表
http://dct-design.net/

NPO法人あおもりIT活用サポートセンター 副理事長
http://aoit.jp/

生まれも育ちも青森県青森市。

ショッピングセンターでマーケティング・共同販促・広告・イベント企画・ディスプレイ等の販売促進に携わる。当時おつきあいのあったデザイナーやクリエイターに影響をうけ「何かをつくりあげる」ことに魅力を感じるようになり、2000年、「デザインを発注する側」から「デザインする側」へ転職。2004年に起業し、現在は『ユーザー目線での制作』『スピーディーに良いモノを』をモットーとし、Webサイトや紙媒体の企画から制作・活用提案など、運用全般を手がけている。2012年、青森県内の有志一同とNPO法人あおもりIT活用サポートセンターを設立。IT教育部会を担当し、ITに関わる人材育成に力を注いでいる。

何事も「つなげる」ことが好き。人と人、モノやコトはひとり(ひとつ)よりもつながることでより良いものになると信じている。何事も「プロセス」にこだわり、常にいろいろなゴールを目指し模索している。自他共に認める「愛犬家」で、縁あって里親になったフレンチ・ブルドッグの「タロウ」を溺愛中。

テーマ別カテゴリ: 
記事種別: