デザインと心理学：ECサイトで使える心理トリック14選

売れるECサイトを設計するには、人の心理を理解することが欠かせません。ハーバード大学ビジネススクールの名誉教授ジェラルドザルトマン博士は、人間の思考の95%は無自覚に起こっているとしています。これらの無自覚に起こる思考を活用することで、優れたUXやUIデザインにつながり、コンバージョン率や購入率の向上が期待できます。

この記事では、ECサイトで使えるデザイン心理学について紹介します。ユーザーを惹きつけ、購入を後押しするデザイン例についても取り上げていますので、ぜひ参考にしてください。

デザインにおける心理学とは

デザインにおける心理学とは、心理学の法則をデザインに活用して、問題解決や目標実現を目指す考え方です。

ECサイトでは、ボタンの色や商品一覧ページのレイアウトなど、全体のデザインがコンバージョン率や回遊率に影響を与えます。例えば、「購入する」のCTAボタンの色や大きさを変えただけでコンバージョン率が上がるといったケースは少なくありません。ユーザーが無意識のうちに親近感や信頼感を抱くよう、使用する色やフォントを選んだり、余白やレイアウトを工夫したりといった施策は、多くのサイトで取り組まれています。

デザインに役立つ心理学の法則14選

1. 色彩心理学

色彩心理学とは、色が人の感情や行動に与える影響を研究する学問のことです。色彩心理学を活用したマーケティングの手法はカラーマーケティングと呼ばれ、例えば「購入する」といったCTAボタンには行動を促す赤が用いられたり、B2Bでは誠実さや信頼感をアピールするため青やグレーといった落ち着いた色がブランドカラーに採用されたりしています。

ECサイトでは、ブランドアイデンティティに合わせてメインとなる色を3～5色選んでカラースキームを作ります。よく使用されるのは、ブランドの象徴となる色の「メインカラー」、メインカラーを補う役目を果たす「サブカラー」、そしてボタンやCTAなどユーザーの行動を促したり注目を集めたりするときに使用する「アクセントカラー」の3種類です。これらの色をベースとしてECサイトをデザインすることで、ブランドイメージ形成に役立つだけでなく、コンバージョン率や購入率の向上が目指せます。

例えばユニクロでは、視認性の高い赤をアクセントカラーに起用することで、ユーザーの視線を自然に誘導し、購入を促すデザインを実現しています。

2. ゲシュタルト心理学

ゲシュタルト心理学とは、人は物を見る際、個々の要素の集まりとして認識するのではなく、ひとつのまとまりとして捉えるため、全体像や構造を重視すべきという考え方です。次のような状況の場合、人はひとまとまりとして捉える傾向にあるとされ、これらの要因はゲシュタルト要因と呼ばれています。

• 近接：近くに配置されたもの
• 類同：色や形状、配置などが似ているもの
• 連続：連続しているもの
• 閉合：括弧などで閉じられた領域にあるもの
• 共通運命：同じ動作をするもの
• 対称：左右対称な図形やレイアウト

例えば商品一覧ページでは、1つの商品に対し、画像・商品タイトル・短い説明文・価格をひとまとまりに配置し、商品ごとに余白を設けることで、どこまでが関連情報かを直感的に脳が処理できるため、ページの見やすさが向上します。

3. ザイアンス（単純接触）効果

ザイアンス（単純接触）効果とは、特定の事象や物事、図、絵、音楽などを繰り返し目にすることで、好感度が上がったり親近感を抱いたりする現象のことです。興味関心がなかった分野でも、繰り返し接触することで好印象を持つようになることから、ECマーケティングでは以下のように活用されます。

• 企業やブランドのロゴ：ECサイトのヘッダーやフッターなど目立つ部分に配置することでユーザーとの接触回数を増やし、好印象を与える
• SNSマーケティング：SNSでの投稿を通して露出を増やし親近感を与える
• リターゲティング広告：自社サイト訪問者に広告を表示させることで単純接触回数を増やす
• メルマガ：ステップメール（段階的な自動配信メール）などを活用して、ユーザーの行動に合わせたメールを自動配信することで接点を増やし、関係構築を促す

ザイアンス効果を活用したアプローチを行う際、接触回数を増やしすぎないことに注意が必要です。せっかく好感度が上がってきたのに、メルマガが過度に届いたり、短いスパンで何度も広告が表示されたりすると、ユーザーが負担に感じて印象が悪くなる可能性があります。

4. シャルパンティエ効果

シャルパンティエ効果とは、すでに持っているイメージによって物の重さを錯覚してしまう現象のことです。例えば1kgの鉄アレイと綿アメの場合、どちらも同じ重量なのにもかかわらず、鉄アレイは重く、綿アメは軽いと感じる人が多くいます。マーケティングでは、人が持つイメージをうまく活用することで、商品の価格や配合されている成分の量などをわかりやすく顧客に伝えることができ、購買意欲を高めることができます。ECサイトでは以下の場面で活用できます。

• キャッチコピーや商品説明：身近な例を取り上げ、訴求力の高いキャッチコピーを作成する（例：レモン100個分のビタミンC配合）
• 価格表示：1日あたりや週あたりの価格に換算したり、割引を2つに分割して表示したりすることで、購入への心理抵抗を小さくする（例：1日あたりたったの150円、全品50％オフがWEB限定でさらに10％オフ）

シャルパンティエ効果を活用した例として、キリンヘルスサイエンスが販売しているオルニチンのサプリメントが挙げられます。同商品は1日のオルニチン摂取量800gが4粒で補える商品です。商品ページでシジミやチーズ、エノキタケなど身近な食品を使ってこの摂取量を表示することで、同商品の手軽さや効率性をわかりやすくアピールしています。

5. フレーミング効果

フレーミング効果とは、表現を変えることで情報の印象に変化を与え、意思決定にも影響を与える心理現象のことです。同じ事実を伝える場合でも、どの情報に焦点を当てるかによって受け取り側の印象が変わるため、うまく活用することで顧客の購買意欲を高め、販売につなげられます。

例えば、商品の効果を実感した消費者の割合を紹介するとしましょう。ユーザーの80％が効果を実感し、残り20％は効果が得られなかったと感じた場合、以下の2種類の表現が考えられます。

例）

①ユーザーの80％が効果を実感しました。

②ユーザーの20％は効果を実感できませんでした。

どちらも伝える事実は同じですが、①は商品に効果があると感じられるのに対し、②は商品に対してネガティブな印象を与える可能性があります。

反対に、ネガティブな面に焦点を当てることで、商品の訴求力を上げる方法もあります。

例）

①AIを導入すれば、作業時間を20％削減できます。

②AIを導入しないと、作業時間の20％を無駄に失い続けることになります。

この例文では、①は改善できるメリットを訴えているのに対し、②は現状を放置することで生じる不利益に着目しています。このように不利益を示すことで切迫感を出し、不安感を引き出すことで、よりインパクトの強いキャッチコピーとなります。

6. ツァイガルニク効果

ツァイガルニク効果とは、途中で中断してしまった物事が気になってしまう心理現象のことです。「続きは○○で検索」や「答えはWebで」といった文言で広告を締めくくり、最終的な答えをあえて提示しないことで、視聴者の関心を引くことができます。検索やサイト訪問を促すのに効果的です。

7. ウィンザー効果

ウィンザー効果とは、商品を販売する当事者ではなく、消費者などの第三者が発信した情報の方がより信頼できるように感じる現象のことです。株式会社LeveL.Lの調査によると、ECサイトでの購入の際、レビューや口コミを購入判断に活用している消費者が約9割にものぼります。このことからも、第三者の意見が購入率に大きな影響を与えることがわかります。

例えば、ECサイトでは次のようなテクニックを使うことで、ウィンザー効果が期待できます。

• 商品ページに購入者のレビューや口コミを掲載する
• 商品やサービス導入後のインタビュー記事を載せる
• SNSでUGC（ユーザー生成コンテンツ）をシェアする

8. 松竹梅の法則

松竹梅の法則は、3段階の異なる選択肢を用意すると、人は中間のものを選びたくなる心理現象のことです。サブスクなどのサービス提供の際によく使用される手法で、価格帯を高・中・低の3段階に設定すると、高や低の価格帯の商品を選んだ場合にリスクがあるように感じることから、中の価格帯の商品が選ばれやすくなります。

選択肢が3つに絞られている理由は、人が記憶できる情報量が3～5個程度であると言われているためです。選択肢が多いと「決定回避の法則」という心理現象が働き、決定を先延ばしたり諦めたりしてしまいます。

9. ハロー効果

ハロー効果とは、ある対象を評価する際に、物事や事象の特徴的な部分・印象に影響を受けて、全体の評価が左右されてしまう現象を指します。ハロー効果は以下の2つに分類されます。

• ポジティブハロー効果：対象の良い部分の印象が強く残ることで、実際よりも高い評価となる現象（例：研究者が開発した商品＝効果が高い）
• ネガティブハロー効果：対象の悪い部分の印象が強く残ることで、実際よりも低い評価となる現象（例：商品画像が不鮮明でわかりにくいネットショップ＝信頼できない）

例えば、コスメECを運営している場合、商品パッケージや梱包を洗練された高級感のあるデザインにすることで、商品自体が高品質であると印象づけることができます。このように、ハロー効果はうまく活用することで、ブランドや商品のイメージ向上に効果があります。

10. カリギュラ効果

カリギュラ効果とは、制限された、または禁止された行動・情報に対する興味関心が高まる心理現象のことを指します。通常なら特に関心がなかった商品やサービスでも、禁止や制限の表現が使用されると、好奇心が刺激されることも珍しくありません。

この効果を活用し、「悪用禁止」「本当は教えたくないテクニック」といったキャッチコピーを使うことも検討できます。ただし、カリギュラ効果を使用する場合には、過激なキャッチコピーを使ってブランドイメージを損なわないよう注意が必要です。

11. スノッブ効果

人とは異なるものが欲しいと感じる心理現象のことを、スノッブ効果と呼びます。他人が持っていないものや、なかなか入手できない商品・サービスを手に入れたいという心理を利用して、販売数や販売期間を設定することで購入を促すことができます。実際に、株式会社PRIZMAの調査では、4割以上の消費者が「夏限定」や「夏季限定」という表示があると購入意欲が高まると回答しています。

12. バンドワゴン効果

大勢の人から支持されている行動や意見に影響され同調する現象のことを、バンドワゴン効果と呼びます。例えば、人気商品や話題商品をECサイトのトップページで掲載したり、アンケート調査で評価の高かった商品リストを作ったりすることで、バンドワゴン効果を引き出し、これらの商品の購買意欲を高めることができます。

例えば、無印良品では商品ランキングを掲載しているほか、レビュー4.0以上の日用品リスト、SNSでの人気商品のまとめなども紹介しており、購買促進につなげています。

13. ヤコブの法則

ヤコブの法則とは、ユーザーが普段操作しなれているサイトやアプリと同じ挙動を、他のウェブサイトやECサイト、アプリにも求める心理現象のことです。例えば、多くのウェブサイトでは、左上に企業やブランドのロゴがあり、右上にはカートや検索バーがあるのも、この法則に則った仕様といえます。見慣れたUIを採用しているサイトは、ユーザーに安心感を与えるだけでなく、円滑に操作ができることから、購入障壁を取り除くことにもつながります。

Amazonのウェブサイトもこの法則を活用し、左上にロゴ、上部に検索バー、右上に買い物かごや注文履歴が配置されています。視認性と操作性が高く、顧客が行動しやすいサイトに設計されています。

14. 視線誘導の法則

視線誘導の法則とは、ホームページやECサイトを見る際に、人は無意識のうちに特定のパターンで視線を動かすという法則です。視線誘導の法則を活用して、ECサイトでは次の4つのレイアウトを採用すると、重要な情報に自然と視線を集め、消費者の行動を促すことができます。

• グーテンベルク・ダイヤグラム：左から右、上から下に視線を誘導するレイアウト。右下に注意が行きやすいのが特徴。ポスターやチラシなどで使用される。
• Z型：Zの文字の形に視線を誘導するレイアウト。ウェブサイトやバナーに使用されることが多い。左上に注目が集まりやすい。
• F型：視線が左上から右上、左下から右下と徐々に下に移動するパターンのレイアウト。ブログ記事や商品一覧ページなどで採用されている。
• N型：視線が右上から右下、左上から左下の順番に移動していくレイアウト。主に雑誌や新聞、漫画などの紙媒体に見られる。

視線誘導の法則を使うことで、ユーザーはストレスなくECサイトを回遊できるようになります。レイアウトデザインを考える場合には、トップページデザイン例の記事も参考にしてください。

心理学の法則をECサイトのデザインに取り入れるメリット

ターゲット層への訴求力を高められる

心理学の活用は、ターゲット層への訴求力を高めるのに効果的です。どんなに優れた商品だとしても、その魅力が伝わらなければ販売にはつながりません。シャルパンティエ効果やフレーミング効果など、商品価値の捉え方に影響を与える心理学を活用し、消費者に響く表現を使うことで、商品の魅力を最大限に引き出すことができます。

購入率やコンバージョン率の向上を目指せる

心理学の法則をECサイトのデザインに取り入れることで、購入率やコンバージョン率の向上が目指せます。直感だけに頼った運営では、ユーザーの意思決定の傾向が把握できず、期待する成果を得にくくなります。ウェブサイトのレイアウト設計や、キャッチフレーズの選定、価格設定など、データに加えて心理学的知見も活用することで、ターゲット層の購買意欲を高めることができます。

信頼感を与えられる

心理学の法則に則って作られたECサイトは、ユーザーに信頼感を与えることができます。ヤコブの法則や視線誘導の法則を活用して、一般的なUIを採用して読みやすいECサイトを構築できれば、消費者はストレスなくサイトを閲覧したり、商品を購入したりすることができます。直感的かつ快適に操作ができるサイトとして認識され、ブランドイメージや顧客満足度の向上が期待できます。

まとめ

デザイン心理学は、顧客の利便性と商品・ブランドの訴求力の双方を高める効果があります。色彩心理学やゲシュタルト心理学、視線誘導の法則など、ECサイトのデザインに活用できる心理学は数多く存在します。ターゲットユーザーや達成したい目標、ブランドイメージに合わせて、最適な心理学の法則をデザインに取り入れることで、購買意欲を高めるECサイトを実現できるでしょう。

文：Masumi Murakami