デザインに役立つ心理効果5選|心理学の知識がデザインを成果につなげる

※本サイト・記事にはPRが含まれています
Psychological effects for design

私たちの身の回りには、たくさんのデザインであふれています。

「デザイン」と聞くと「難しそう」「センスが必要」と思われるかもしれません。しかし、デザインに必要なのは「知識」と「実践」です。この記事では「知識」の中でも心理学にフォーカスします。

デザインと心理学には非常に密接な関係があります。例えば、以下の動画をご覧ください。

PreattentiveAttribute-1

人間が視覚的に情報を処理しやすくするためには、色をつけたり、位置を変えたり、似た要素をまとめたり、選択肢の数を限定したりします。つまり、デザインの背景には心理学・心理効果が存在するのです。

デザインに関連する心理学・心理効果を学ぶことで、成果に結びつくデザインができるようになるはずです。そこで、この記事では、デザインに役立つ心理効果を5つに絞ってお届けします。

  • 選択肢過多効果|数が絞られている方がユーザーは選択しやすい
  • マジカルナンバー|人間の短期記憶に寄り添う
  • ベビーフェイス効果|警戒心を解き、安心感を抱かせる
  • 色彩心理効果|私たちは色に操られている
  • ホワイトスペース効果|印象を決めるのは、けっきょく、よはく。

デザイン心理学はSNS広告にも取り入れられているので、この記事を読んだ後にデザイン心理学を発見できるかもしれません。

あわせて読みたい

選択肢過多効果|数が絞られている方がユーザーは選択しやすい

「ジャムの法則」という言葉を聞いたことがありますか?

ジャムの法則は、コロンビア大学のシーナ・アイエンガー氏が提唱した法則で、ジャムを使った実験から名付けられたものです。

この実験では、6種類と24種類の2種類のジャムを用意し、2種類のジャムを購入したお客様の数を求めました。従来、ジャムの種類が多ければ多いほど、購入に至る人が多いと思われていました。

しかし、実験結果は違いました。

この実験の結果、

  • 6種類のジャムの場合、購入に至ったのは29.8%
  • 24種類のジャムの場合、購入に至ったのは2.8%

と、選択肢の数を減らした方が、より多くの人がジャム購入に至ったのです。

デザイン心理学では、この効果を「選択肢過多効果」と呼びます。

選択肢が多すぎると、

「どの商品が良いのだろう?」

「もっと良い商品があるのではないか?」

などと悩みが膨らんでしまい、その悩みがストレスとなって購買を妨げてしまったのです。

さらに、選択肢が多ければ多いほど、購入後に後悔する可能性が高くなることも、この実験を通して明らかになっています。

この心理効果を踏まえると、訴求する商品の数を減らすことで、必要な情報が絞り込まれ、ユーザーはストレスなく購入することができると言えます。

何らかの商品やサービスを売りたい場合、「トップ3」「おすすめ7選」など、数を絞ってアピールすると良いでしょう。

マジカルナンバー|人間の短期記憶に寄り添う

人が短期記憶の範囲内で覚えておくことができる情報のかたまりの数のことを、デザイン心理学では「マジカルナンバー(マジックナンバー)」と呼んでいます。

■チャンクとチャンキング

マジカルナンバーを解説する前に、「チャンク」という概念についてかんたんに触れます。

人の脳は情報をある程度のかたまりとして記憶します。この情報のかたまりを「チャンク(chunk)」と言います。ひとつひとつの情報を、何らかの切り口でひとつにまとめてかたまりとして扱うことを「チャンキング(chunking)」といいます。

■マジカルナンバー7±2

このマジカルナンバー(マジックナンバー)、1956年に心理学者のジョージ・ミラーが提唱した概念です。

人が短期記憶に保持できる情報のかたまり(チャンク)の数は7±2(7を基準値として±2チャンクまで|つまり、5~9チャンク)としたミラーの研究結果は、「マジカルナンバー7±2」「ミラーの法則」という名前でも知られています。

マジカルナンバー4±1

しかし、2001年にはミラーとは少し異なるマジカルナンバーが登場します。

心理学者のネルソン・コーワンが、マジカルナンバーは「4±1」である可能性を指摘したのです。

人が短期記憶に保持できる情報のかたまり(チャンク)の数は4±1(4を基準値として±1チャンクまで|つまり、3~5チャンク)とした「マジカルナンバー4±1」という考え方が、現在では有力視されています。

■身近なマジカルナンバーの例

身の回りにもマジカルナンバーで構成されたものがあります。わかりやすい例は電話番号です。

080-1111-1111

08011111111

この2つの電話番号を見たときハイフンがあるだけで、何桁区切りになっているか判別しやすくなります。

ハイフンで区切られることによってチャンクが作られていますね。また、そのチャンクの数も3つです。この例の場合、いずれもマジカルナンバー4±1の範囲内にあることがわかります。

(市外局番が03や06の場合は、マジカルナンバーから外れますが…、短くなるので問題ないということで…)

また、日本語は自然にマジカルナンバーを求めているのかもしれません。たとえば俳句や川柳、短歌などは5-7-5や5-7-5-7-7と、マジカルナンバーで構成されています。

略語についても、「デジタルカメラ」を「デジカメ」、「スマートフォン」を「スマホ」、「鴨が葱を背負って来る」を「かもねぎ」、などマジカルナンバー4±1に縮約される傾向にあります。

困ったら4つ以内に絞り込む│選択肢過多効果×マジカルナンバー4±1

選択肢過多効果とマジカルナンバーを掛け合わせて考えると、選択肢や要素の数は4つ以内に絞り込むのが良いでしょう。

たとえば、ECサイトをたちあげる際は、カテゴリー数を4つ以内に分類することで、ユーザーが見やすいサイトに作り上げることができるでしょう。

ベビーフェイス効果|警戒心を解き、安心感を抱かせる

広告に赤ちゃんの顔や、猫の画像が使われていると「かわいい」と思いじっと見つめてしまうことありませんか?

この心理効果を「ベビーフェイス効果」と呼びます。

特に、赤ちゃんのビジュアルは人の目線を奪いやすく、安心感や清潔感などのプラスのイメージを与えることができます。

この心理効果は、赤ちゃんの画像だけではなく「丸い顔」「目の位置」「パーツが中心に集まっている」などでも、ベビーフェイス効果を利用することができます。

ご当地ゆるキャラもこれを用いていることが多く、目の位置が低く丸い顔をしていたりと

親しみやすく、かわいい印象を与えるように作られています。

社会心理学の概念のひとつに「ハロー効果」があります。ハロー効果とは、ある人や物が持つ目立った特徴によって、それら対象の印象・評価が歪められる現象のことを指します。

「体に比べて頭が大きい」「顔の中心よりやや下に大きな目がある」「顔が丸い」などの赤ちゃんの特徴(ベビースキーマ)を見ると、警戒心が緩んで好印象を抱くのは、ハロー効果のひとつと言えるでしょう。

色彩心理効果|私たちは色に操られている

「赤の果物はリンゴ、黄色はバナナ」という様に、色によって与えるイメージを操作することをデザイン心理学では「色彩心理効果」と呼びます。

  • 高級やスタイリッシュさを出したいなら黒
  • 柔軟性を出したいなら緑
  • エネルギッシュな雰囲気にしたいなら赤
  • さわやかで誠実さを演出したいなら青

など色によってイメージが異なるのは想像に難くないでしょう。

色の組み合わせ方にもさまざまなパターンがあります。ここでは、コーポレートカラーを例に見ていきます。

  • 1色戦略:メインカラーで訴求する(コカコーラ、auなど)
  • 2〜3色戦略:メインとサブカラーを組み合わせて、インパクトを出す(IKEA、タリーズコーヒー)
  • 4色以上:新サービス拡大が視野に入っている場合(Google)

上記のような色彩戦略は大手企業ではあたりまえのように利用されています。また、アイドルやアニメキャラにも絶対に色の担当は決まっています。それほどまでに、色というのは「コンセプトの価値」を訴求していくのに重要な役割になっているのです。

しかし、色の大切さを分かっても「どう組み合わせたら良いのか」など悩むこともあると思います。

そこで、色彩心理効果の「王道の3色選び」が適応されるのです。

王道の3色選びとは、下地・文字色・アクセントの3つを決めることになります。

カフェのパンフレットを例に挙げると、下地を白。文字色を黒。アクセントを紺色にすることで、落ち着きがあり、コーヒーの画像を入れても深みがでる色の組み合わせになります。

また、ビジネスシーンのパンフレットでは下地を白。文字を灰色。アクセントをオレンジにすることで、見て欲しいグラフなどに視線を誘導することができます。

このように、メインカラーとサブカラー2色を決めるだけでも、質が高く心理効果も利用できるターゲットに合わせたサイト等を作ることができるのです。

ホワイトスペース効果|印象を決めるのは、けっきょく、よはく。

「余白ってなるべく減らした方がいいんじゃないの?」

こう感じる方もいると思います。しかし、余白がないと

「文字が小さすぎて読めない」

「そもそも見ようと思わない」

このようなデメリットが生じるのです。

デザイン心理学では、余白の美しさを利用することを「ホワイトスペース効果」と呼びます。情報をなるべく減らし、周りに空間を持たせることで美しいデザインを印象付けることができます。

このホワイトスペースを存分に生かしているのがAppleです。

Apple公式を覗いたことがある方は理解できると思いますが、気になるスマホを押してスクロールしていくと、スマホをいろいろな角度から見ることができます。その画像を見ると、絶対に余白が存在することに気が付くと思います。

そのデザインのおかげでAppleは「高級感」「スマートさ」を印象付けすることができ、デザインとしては「圧迫感」「情報過多」「目の疲労」等をなくすことができるのです。

また、Appleのほかにもネット記事の文字行間や漫画のコマ割り、写真にも使われています。

スマホで写真と撮るときには、商品をわざと片方にアップさせ左側に余白を作ることで、気軽にホワイトスペース効果を使うことができます。ブログなども、題名と本文の間に装飾を入れることなくスペースを利用することで、言葉の意味を伝えやすくする効果もあります。

デザインに役立つ心理効果まとめ

今回お届けしたのは以下の5つの効果です。

  • 選択肢過多効果|数が絞られている方がユーザーは選択しやすい
  • マジカルナンバー|人間の短期記憶に寄り添う
  • ベビーフェイス効果|警戒心を解き、安心感を抱かせる
  • 色彩心理効果|私たちは色に操られている
  • ホワイトスペース効果|印象を決めるのは、けっきょく、よはく。

簡単に実践できるものばかりなので、ご自身のブログやECサイトなどに利用するのも良いと思います。デザイン心理学は、ビジネスをやる上で最も欠かせないものとなります。デザイナーの中には「作るより、選ぶ方が大変」と言われるほど、時代の流れとデザインは関係あるのです。

なにを訴えかけていきたいのか。

ユーザーにどんな心理効果を引き起こして欲しいのか。

この2点を念頭に置くだけでも、心理効果を引き起こすデザインの選択肢は変わっていきます。

日常生活でも「なぜ、この商品に惹かれたのか」「つい手に取ってしまった商品」をデザイン心理学の観点から考えることで、デザイン心理学の楽しさに引き込まれるきっかけになるかもしれません。

当サイトは第三者配信の広告サービス(Googleアドセンス、A8.net、もしもアフィリエイト、Linksahre、バリューコマース、afb、レントラックス、Amazonアソシエイト、楽天アフィリエイト、Adobe アフィリエイト、Wix アフィリエイト、Coursera Affiliate Program)を利用し、紹介料などの収益を得ています。収益はサイト閲覧体験の改善費用やより有益な情報提供のための取材費用に使用されます。
  • この記事を書いた人

dice

Adobe製品のお得な買い方、スキルアップのためのオンライン学習プラットフォーム情報、デジタルマーケティングの基礎知識など、大人の学びに役立つ情報を発信していきます。コストパフォーマンス高いスキルアップ・リスキリングのお供に。

人気記事

デジハリでAdobeCCを安く購入する方法 1

デザインや動画編集などのクリエイティブな作業に必要不可欠なAdobe Creative Cloud (以下、AdobeCCと略します)を契約すると、IllustratorやPhotoshopなど複数の ...

Courseraの認定証・修了証明書に意味はある?転職・就活に役立つ?メリットやオススメ講座を解説 2

世界最高峰の企業や大学が講座を提供していることで知られている「Coursera(コーセラ)」。 専門講座やプロフェッショナル認定を受講すると、就職・転職に効力を発揮する修了証明書や認定証を取得すること ...

複数のノートパソコンがデスクの上にある 3

リモートワークが一般的になってきて、会社以外の場所で仕事を行うことが増えた人も多いのではないでしょうか。 会社や自宅のパソコンで契約しているAdobeのライセンスを、その他のデバイス(パソコンやタブレ ...

AdobeXDのスタータープランは無くなった?誤報です!正攻法でダウンロードする方法を解説 4

Adobe XD の無料版が使えなくなる? そんな噂を聞きつけて慌てて検索している方に朗報です。Adobe XD はまだまだ無料で使い続けられます! とはいえ、従来のように無料で使い続けることができな ...

コーセラ(Coursera)とは?特徴や料金、登録方法までわかりやすく解説 修正 5

世界の有名大学の教員による授業や有名企業のスタッフによる講座をオンラインで受講できるサービスとして、社会人や大学生に注目されているMOOCs(ムークス)。   その中でも圧倒的規模を誇る、教育プラット ...

-Webデザイン
-,