ホワイトスペース効果

一般的には、何も存在しないスペースを「ホワイトスペース」と呼んでいます。
「ホワイト」といいますが、真っ白でなくても赤や青などの色がついていても空白、何もない異空間であれば「ホワイトスペース」と呼びます。
ホワイトスペースには、目立たせたいポイントを強調したり、伝えたいテキストの背景色をはっきりと見せる効果があります。

白いスペースを上手く利用し、見やすいレイアウトになっています。
ホワイトスペースをうまく使うと、シンプルで洗礼されたデザインになるだけでなく、ユーザーに迷いを抱かせずコンバージョンへと誘導することができます。

サプライズ効果

ユーザーの予想に反した表現で強いインパクトを与えることをサプライズ効果といいます。

人間の心理として、色や形に見慣れてしまうと内容に関わらず無意識にスルーしてしまう傾向にあります。
コンバージョンボタンなど目立ってほしいところにポイントを絞って使うことで、見てほしい部分を確実に見てもらうことができます。
成果の出るランディングページの多くで、サイトのメインカラーの補色(色相環で逆の位置にくる色)をコンバージョンボタンに使っているのも、サプライズ効果を演出するためです。

色彩心理効果

色が人々に与えるイメージを活用することで、 ユーザーのデザインに対するイメージを操作するテクニックを色彩心理効果といいます。
例えば、黒なら高級・カッコよさ、白は清潔感・真実、青は冷静・知的・信頼、オレンジはポジティブなイメージといった印象を与えます。
そのためビジネス関連のデザインではよく青系がよく使われていたり、インパクトを与えたい元気なサイトにはオレンジや黄色といった明るい色が使われたりします。
また、年齢や性別などでも好まれる色や色に対するイメージは変わってきます。
色彩心理効果のように、色彩が与える心理を理解しておけば、ターゲットに合わせたデザインを作りやすくなります。

黒と赤を使うことで、カッコいい男性向けのイメージが伝わってきますよね。

コントラスト効果

コントラスト効果とは、「差異」の生み出す相対的な効果を指します。
はっきりとした違いを出すことで情報をわかりやすくしたり、面白みを出して退屈させないといったメリットがあります。
例えば、黒ベースのデザインの中にコンバージョンボタンも黒や灰色の配色を使うと、全く目立たなくなってしまうでしょう。
そこでコンバージョンボタンだけ赤や黄色といった全く違う色を使うことで目立たすことができます。
また注意したいのが「コントラスト」＝「大きさの変化」ではないということです。大きさを変えただけではコントラスト効果とは言えません。

目線による社会的証明効果

人には「他人の行動を見て自分の行動を決める」という原理があり、これを社会的証明効果といいます。
この心理効果でデザインに使いやすい具体例には視線です。人間は誰かが何かを見つめていたり、ちょっと目線をそらしていたりすると、その目線の先に何があるのか確認したくなる性質があります。
ランディングページのファーストビューで人物写真を使うとき、人物の視線の先に購入ボタンや大事なキャッチコピーを設置し、誘導させるといった活用ができます。

矢印効果

こちらは見たままですが、目線による社会的証明効果と似たような効果です。
矢印を使うことで、 ユーザーの目線を確実に惹き付けることができます。矢印の先に何があるのか矢印の先を追ってしまうのが人間の心理。矢印効果を応用して、矢印の先に購入ボタンなどを設置してユーザーの視線や意識を導くことができます。

トンネル効果

無意識のうちに囲まれている物の中心に目がいったり、トンネルの先に目が行くという経験があると思います。
こうした作用をトンネル効果といい、デザインに活用することで訪問者の目線をコントロールすることができます。

一番強調したい部分、目線を移動してもらいたい部分がある場合、その周囲を囲ったデザインにすることで、自然と注意を惹くことができます。

囲われた空間は周りの空間より、目線がいきます。

道路効果

ほとんどの人にとって、道は続いているという認識があります。
そのため、道路のような物を見るとその先はつながっていると感じて目線を移動する傾向があり、これを道路効果といいます。
この効果を利用して、導線をつくることでユーザーの視線を誘導することができます。

クレショフ効果

旧ソ連の映画作家レフ・クレショフ氏が提唱した認知バイアスという心理効果の一種です。
これは、同じ画像でも前後の内容が変わるだけでユーザーが受け取るイメージが変わってしまうというものです。
画像の組み合わせや配置する場所・順番を変えることで伝えたいイメージをより鮮明にして印象付ける効果があります。

A、B、Cいずれも左側の写真は同じですが、Aでは死を悲しんでいるように、Bはお腹がすいているように、Cは女性に欲望を感じでいるように見えますよね。

選択肢の過多効果

選択肢の過多効果とは選択肢が増えるほど迷いが出てしまい、選びにくくなってしまうというものです。
選択肢が豊富なことは選ぶ楽しみを提供することにも繋がりますが、あまりに多いと購買意欲を減退させることにつながるので注意が必要です。

サービスの選択肢が多い、またはユーザーにとって有益な選択肢を多数提示したほうがコンバージョンに繋がり勝ちと考えがちです。

しかし実際には、選択肢の過多効果によって、種類を増やせば増やすほど効果が下がっていくということも珍しくありません。

ベビーフェイス効果

ベビーフェイス効果とは、赤ちゃんのような丸顔・小さな鼻・大きな目・短いアゴといった特徴を持つ人物・物を見ると、可愛らしさや純粋無垢なイメージを抱くという性質のことです。
安心感を持ってもらいたい時などにはベビーフェイス効果を利用し、これらの特徴を持った人物の画像を使うと有効です。
逆に、専門的・威厳なイメージを伝えたいときには大人の男性の画像を選択するとイメージをコントロールすることができます。

ストループ効果

心理学者のジェームズ・R・ストループが報告した現象です。
提供された情報に同一性が無く干渉し合うと、印象がちぐはぐになり理解が困難になったり、妨げになってしまうというものです。
つまり、画像と文章をセットで使う時には、 ユーザーを混乱させないためにもイメージを統一することが重要です。
代表的な物には、蛇口の色があります。赤がお湯、青が水という認識はほとんど世界共通であるため、色を逆にしただけでも多くの人は混乱し、「使いづらい」という印象を受けます。

日常的な信号機では、赤は「止まれ」なのに「進め」になっているため、理解するのに時間がかかります。

シンメトリー効果

歪みのない対称の物に対して、安定感や美しさ、誠実といったイメージを受ける効果のことをシンメトリー効果と呼んでいます。
また、シンメトリーは左右だけでなく、上下対称や斜め対称も含まれます。
意識的に取り入れることで、にぎやかなデザインでも整って見えるため、見る人に好印象を与えることができます。
逆に、歪みのある非対称なものをアシンメトリーといい、人は不安感や違和感を感じます。

プライマリー効果

人は最初に見たもの・聞いたものほど印象に残ります。これをプライマリー効果といいます。
最初に聞いたり見たりしたものには潜在意識レベルで強調されて受け取られるからです。
そのため、ヘッダーやファーストビューなど、ユーザーの最初に目に入るところには、一番伝えたい内容を入れると効果的です。

リーセンシー効果

プライマリー効果と少し矛盾しているかもしれませんが、人は最後に見たもの・聞いたものも印象に残りやすいという心理効果も持っています。
ユーザーがページを離れる前に見せたいものは何かをよく考え、サイト構成するのも良いかと思います。リーセンシー効果を意識したサイトは、離脱率の低下やリピート率の向上につながります。

反復効果

最初と最後も大事ですが、ページを通して重要な情報を何度も繰り返すことで、ユーザーに覚えてもらうのも大事です。
ランディングページの多くはコンバージョンボタンを何度も登場させますが、本当にコンバージョンしてほしいタイミングにボタンがしっかり認識されるよう、反復効果を意識しています。

効果的なデザイン心理学16選まとめ

今回は、メジャーなデザイン心理学をご紹介させていただきました。

マーケティングではお馴染みの心理学効果ですが、デザインにも必須だと言えます。

デザインではどうしても見た目にこだわってしまいがちですが、単にきれいなデザイン、凝ったデザインであることは重要ではありません。ビジネスの場合の目的はあくまでもコンバージョンの獲得です。Webデザイナーとして活躍するには、こうしたマーケティングの知識が欠かせません。

独学での習得ももちろん可能ですが、効率的に学びたい方はWebデザインやWebマーケティングに特化したITスクールを検討してみてはいかがでしょうか。

Webマーケティングスキルを学べるITスクールはこちら

Webデザインスキルを学べるITスクールはこちら