• CREATIVE

September 04.2019

デザイン心理学で効果的マーケティング!色、レイアウト、マジカルナンバーで売れるサイト作りを

main

こんにちは、デザイナーのアローです。

人の脳には、人の顔を認識するのに特化した領域があります。

その領域が働くことで、混みあう街中での待ち合わせでも友人の顔を見分けることが可能であり、また、空や地面の模様が唐突に人の顔に見えてしまうなど、日常生活において人間は「人の顔」を自然に認識するようにできています。

今回はこのような、人の無意識からの行動や思考傾向・心理状態を、デザインにうまく応用した事例をご紹介します。

①目線による誘導

01

あなたは上の画像のどこに目線がいきましたか。

おそらく多くの人が、無意識に女性の目線の先を追ってしまったでしょう。

人間は他人の行動を見てから自分も同調した行動を起こしやすく、この心理を社会心理学用語で「社会的証明の原理」と言います。

では以下に、この「社会的証明の原理」をデザイン上で応用した具体例を紹介します。

■具体例1

02

子供の目線が上に向かっていますよね。

そこで、目線の先にボタンを配置したり、重要な文言を置いたりすることで、ユーザーの視線を無意識にそちらへと誘導することができます。

■具体例2

03
男女の目線が中央に向いています。

無意識にユーザーの目線も中央に行きやすいため、そこに重要な文言を配置すると良いでしょう。

②視覚と言葉の関係性

04

上の、〇内に書かれた文字(青、緑、赤)の意味を理解するまでに、少し時間がかかったのではないでしょうか。

その理由は、「〇内の文字が示す色名」「〇自体の色」が異なるため、複数の情報が干渉しあい、脳の混乱を引き起こしたからです。このような現象を「ストループ効果」と言います。

あえて引っ掛かりを作る意図がない限り、ユーザーを混乱させないためにも、文字や色などの選び方には注意が必要です。

■具体例1

06
上の画像では、どちらによりお得感を感じましたか。おそらく左側の「赤色」ではないかと思います。

人は過去の出来事や使い慣れたものから、目の前にある物のイメージを決めがちです。

そのため、色の持つイメージと内容をうまく組み合わせることで、より端的にユーザーの購買意欲に訴えかけることができます。

■具体例2

05
左側の画像は、アイコンテキストが一致していません。

この場合は右側のほうが、ユーザーに分かりやすく情報を伝えることができます。

■具体例3

07
上の画像では、文字の意味と文字の太さに矛盾が生じていますよね。

この場合も、「文字の太さ」情報と「文字の意味」情報が異なるため、ユーザーの脳が混乱しやすくなり、制作者が伝えたい情報が伝わりにくくなってしまいます。

バナーやLPを作成する際には、ユーザーの印象に残したい箇所を整理した上で、直感的に理解してもらえるような、情報に矛盾のないメリハリのあるデザインにする必要があります。

③人が瞬間的に記憶できる数

一般的に、人に一度に多くの情報を与えても、瞬間的に覚えていられる個数は「4±1」と言われており、この短期記憶の限界数を「マジカルナンバー」と呼びます。

マジカルナンバーは、WEBデザイン上でも利用されています。

■具体例1

08
現在、多くのECサイトなどで当たり前のように使用されているナビゲーションバー。

ECサイトでは多くのカテゴリーが取り扱われていますが、すべてを細かく表示させてしまっては情報が多すぎるため、ユーザーを余計に混乱させてしまいます。
09

そこで、上画像のように表示させるカテゴリーを大まかに分けて「マジカルナンバー」の4±1程度にすれば、すっきりと分かりやすくなります。

ユーザーは自身が求める商品の場所を瞬間的に理解することができ、結果的にユーザビリティの高いサイトになるのです。

■具体例2

10
頻繁に見かける電話番号も、②のようにハイフンがなければ、一体何桁なのか見間違える可能性があります。

間にハイフンをいれることで、小さなグループとして見せられるため、ユーザーにとってより見やすく覚えやすくすることができるのです

人に伝えるためには心理学を応用しよう!

一般的に、デザイン上で使われている文字や色、アイコンにはそれぞれ意味があります。

それらをうまく組み合わせることで、よりユーザビリティの高いサイトや印象に残るバナーを作ることができるのです!

ユーザーとのやり取りは画面や紙媒体を通すことが多いですが、情報を載せて伝える媒体の先にいるのはあくまで「人」であることを忘れずに、心理学をデザインに活かしてみてはいかがでしょうか。