なぜ、ある特定のTシャツが選ばれ、別のブランドのまったく同じようなTシャツは選ばれなかったのでしょうか?本人は気づいていないかもしれませんが、そこには心理学が関わっています。多くのブランドは心理学を利用して、人間の脳がどのように意思決定を行うかを理解しようとしています。
潜在顧客がウェブサイトに訪れたとき、そのブランドは彼らの行動に影響を与える機会がいくつかあります。第一印象からコンバージョンに至るまで、すべてのデザインの決定が重要です。
ここでは、心理的デザインが、あなたのウェブサイトのテーマやブランドカラー、購入ボタンのコピーにどのように影響を与えるかを学びます。また、世界のトップブランドが使用する戦術を通じて心理学の基本原則を探ります。
デザインにおける心理学の役割
学者の意見は多少異なりますが、人間の意思決定の95%が無意識であると考えられています。これは、ブランドデザインにとってなぜ重要なのでしょうか?それは、心理的原則(人々が行動する動機となる感情的トリガーなど)を理解することで、より情報に基づいたデザインの決定ができるからです。
行動心理学を理解することで、ブランドはターゲットオーディエンスについて正しい質問を導き出すことができます。基本的な人口統計を超えて、彼らの深い動機は何でしょうか?彼らの基本的なニーズや帰属感をどのように満たすことができるでしょうか?どのようなイメージや言葉が、彼らに安心感や懐かしさを感じさせるでしょうか?
Finnのホームページは、コピー、写真、デザインの決定を使用して、犬を飼っているターゲット顧客にポジティブな感情を生み出しています。

すべてのオーディエンスは異なり、彼らの好みや行動に合わせてデザインを調整することが重要ですが、心理的デザインの基本原則には広く受け入れられているセットがあります。これには、ゲシュタルト原則、認知負荷、ヒックの法則、メンタルモデル、色彩心理学などがあります。(この記事の後半では、これらの原則がユーザー行動にどのように影響を与えるかについてより詳しく説明します)
近年、多くのデザイナーがUXデザイン(ユーザーエクスペリエンスデザイン)に移行しています。これは、デザインが顧客を引き付け、コンバージョンを促進する重要な役割を果たすからです。UXデザイナーは心理的デザインを使用して、顧客が訪問し、関与し、フォローし、購入することを促す関連性のある意味のある体験を創造します。このユーザー中心のフレームワークはデザイン思考と呼ばれています。
心理的デザイン戦略を学ぶことの重要性

美しいデザインは、それにふさわしい感情を喚起しない限り、何の意味もありません。
デザイン心理学の戦術を適用することは、科学に基づいた意図的なデザインを選択することであり、直感に従うこととは異なります。この確証済みのアプローチは、ブランドが試行錯誤に費やす時間を節約し、ターゲット顧客をよりよく理解するのに役立ちます。
人間の心理を考慮したウェブサイトデザインは、体験をより直感的にし、摩擦を減らします。これにより、顧客を迅速かつストレスなく、望む場所へ導くことができます。
心理的デザイン:ブランドのための8つの戦術
1. ビジネスを人間らしくする

人間のためにデザインすることは、デザイン心理学における効果的な戦術であることは明白です。しかし、一部のブランドはこの基本的な概念を見落としがちです。ブランドを構築する際には、自分の価値観に固執し、自分の好みに基づいてデザインすることが重要ですが、ユーザーエクスペリエンスをすべての決定の中心に置くことがさらに重要です。
重要なのは、あなたにとって魅力的なものであっても、それが潜在的な顧客にとって魅力的であるとは限らない点です。
ブランドはしばしばウェブサイトを再デザインしたり、完全にリブランディングを行ったりします。最良のものは、変化する消費者のトレンドに対応し、フィードバックに応じて行います。しかし、一部のウェブサイトは永遠に同じままです。例えば、人気の売買サイトCraigslistは、1990年代からほとんど変わっていません。なぜなら、それでうまくいっているからです。デザインは親しみやすく、機能的で、ターゲット顧客のニーズに応えています。シンプルさと使いやすさを実装することは、人間を第一に考えることを意味し、コンバージョン率最適化のための実証済みの戦略です。
ポジティブな感情を引き起こす
デザインを人間らしくする別の方法は、ウェブサイトのデザインやマーケティングに笑顔を使用することです。笑っている顔ということが重要なのです。ある研究によると、笑顔は人に伝染するとされており、人間は笑顔を見ると自分も笑顔になることが多いとされています。笑顔には健康上の利点があります。笑顔を浮かべるという単純な行為は、ストレスを軽減し、気分を高め、エンドルフィンを放出します。
以下の例では、Nuggetは、製品ページの写真に笑顔の子供たちを使用して、顧客とのポジティブな感情とつながりを引き起こしています。

デザインにおいて適切な顔を使用することも重要です。ターゲット顧客の顔を反映させ、「これは私のような人のためのブランドだ」と感じさせます。他の戦術には、訪問者を見つめる人々の写真を使用する(彼らを引き込むため)や、ブランドの背後にいる実際の人々の写真を共有する(信頼を築くため)ことが含まれます。
Dream Popsの顧客レビューにも、提示された理想的な顧客に似た顧客の写真が含まれています。

Nopaleraの創設者は、自身のストーリーをブランドのメッセージに中心に据え、彼女自信の写真を載せることでオーディエンスとの信頼を築いています。

💡ヒント:
- Aboutページを作成し、創設者や従業員の写真を含めましょう。
- もしあなたが始めたばかりでライフスタイルの写真を撮っていない場合は、ストックフォトサイトを利用して、デザインに笑顔の人々を含めましょう。
2. 色彩心理学を利用する

色彩心理学は、さまざまな見解やGoogle検索結果が混在している、難解なトピックです。誤った情報に、人はいとも簡単に惑わされます。青は静寂、黄色はエネルギーなど、感情や反応と関連付けられることがよくあります。しかし、すべての人が各色に対して同じ関連性を持っているわけではありません。
行動科学者のブライアン・キュゲルマンは「西洋では、人々は赤を危険や情熱に関連付けて語られます。しかし、中国では赤は幸福や富に関連付けられます」と述べています。文化や多様性は、色彩心理学に影響するため、単一のフレームワークで要約することはできません。
ある研究では、この主張が認められました。文化や地域によってパターンがあることがわかったのです。黄色は喜びと高い関連性を持ち、黒は悲しみと関連しています。これらの違いは重要です。
年齢や学習経験も考慮してください。年配のオーディエンスは、1970年代の落ち着いた秋のパレットのように、子供時代を思い起こさせる色に親しみを感じるかもしれません。一方、若いオーディエンスはトレンドの影響を受けることがあります(「ミレニアルピンク」を考えてみてください)。
デザイン心理学者のサリー・オーガスティンは、色の属性(色相、彩度、明度)を考慮するようデザイナーにアドバイスしています。「あまり彩度が高くないが比較的明るい色は、私たちをリラックスさせます」と彼女は述べています。

上記の例では、非常に彩度が高く、エネルギーに満ちた暖色を使用することで、Fly By Jingの大胆なブランドの性質を反映しています。下のSalt & Stoneは、低彩度を採用することで、訪問者に平和で高級なスパ体験を思い起こさせます。

これらの例は、色に対するアプローチの違いがウェブサイトの雰囲気をどのように変えるかを示しています。しかし、広範囲に適用される色彩心理学の原則を、ブランド戦略に採用しないでください。ターゲット市場を調査し、フォーカスグループを使用することで、ユーザーの色の認識に影響を与える可能性のある特定の文化的または人口統計的な違いを理解してください。
3. 選択肢の数を減らす

棚にある数十種類のソーダのフレーバーやパスタの形の前に立ち、身動きが取れなくなったことはありませんか?実は、この現象には科学的な裏付けがあります。「選択の逆説」は、心理学者バリー・シュワルツによって広められた概念です。これは、人間は、多くの選択肢を前にすると、幸福感や自由感ではなく、ストレスや不満を感じるというものです。
選択肢が多いと、意思決定にかかる時間が長くなることもあります。これはヒックの法則に基づいています。ヒックの法則をデザインに適用させると言うことは、選択肢の数を減らし、意思決定の障壁を取り除くことを意味します。
訪問者があなたのサイトにアクセスしたとき、製品からバリエーション、送料まで、数多くの選択肢が提示されると、彼らは圧倒され、何も選ばずに去ってしまうかもしれません。
ブランドのためにウェブサイトをデザインする際には、絶対に必要なものを考え、気を散らす要素を排除しましょう。顧客は、1つのTシャツに48色の選択肢が必要ですか?データや市場調査に基づいて、最も人気のある10色を選ぶのが良いかもしれません。ホームページにCTAが多すぎますか?顧客の注意を向けたい道に集中させましょう。

Deepsは、自然な睡眠パッチを販売する単一製品ブランドです。このブランドのウェブサイトは整理されており、明確なコールトゥアクション(CTA)に焦点を当てています。
4. 使いやすさを最適化する

アメリカだけでの年間モバイルeコマース売上高は、2025年までに7100億ドル(約110.64兆円)に達する見込みです。モバイル使用が増加し続ける中、ウェブサイトがスマートフォンでのユーザーエクスペリエンスを向上させるよう最適化されていることが重要です。
使いやすさと機能性のバランスを見つけることが重要です。顧客に多くの選択肢を提供したいかもしれませんが、それがモバイルサイトの使いやすさに影響を与える場合、体験が不快になることがあります。
ヒートマッピングから得られる情報などのデータを分析することで、潜在的な顧客がモバイルサイトをどのようにナビゲートしているか、どこでつまずき、いつ離脱するかを理解するのに役立ちます。ウェブサイトとのシームレスな体験は、潜在的な顧客のブランドに対する全体的な感情に影響を与える可能性があります。
5. ゲシュタルト原則を使用する

ゲシュタルト原則は、1920年代に導入されたアイデア群で、デザイナーが人間の脳の理解に基づいて心地よく機能的なデザインを作成するのに役立ちます。私たちの脳は、情報をより良く消費し理解するために自然に整理し、パターンを見つけます。
この研究は、数や名称が異なる心理的原則のセットが導き出されました。一般的に近接性、類似性、連続性、閉鎖性、関連性、知覚、組織、対称性、継続性、図/背景などが含まれます。

ここでは、ブランドやeコマースサイトのデザインに適用できるいくつかのゲシュタルト原則を紹介します。
対称性
研究によると、人間は顔や物体の対称性に引き寄せられると言われています。専門家のアラン・ライトマンは、彼の著書『The Accidental Universe』の中で、「対称性の探求と、それを見つけたときに得られる感情的な喜びは、私たちが周囲の世界を理解するのに役立つに違いない」と述べています。「対称性は経済性です。対称性はシンプルさです。対称性はエレガンスです」
人間は対称性を調和と同一視し、ウェブサイトデザインにこのデバイスを使用することで、ユーザーがナビゲートする際の快適さに影響を与えることができます。飲料ブランドAvecの素晴らしい例です。

一方で、非対称性も、顧客に影響を与えたい感情や行動に応じてデザインにおいて効果的です。慎重に使用すれば、ページの特定の側面を強調するためのツールとなります。
図/背景
図/背景の原則は、オブジェクトと背景の関係に関するものです。デザイナーに、背景とユーザーが焦点を合わせるべきもの(図)を明確に区別するよう促します。このNoah's Boxのホームページでは、ブランドは重要なコンテンツ(テキストとCTA)を強調するために個体のボックスを使用し、より暗い、賑やかな背景の上に重ねています。

近接性の原則は、人間が情報をどのように消費するかを理解するための有用な方法です。私たちの脳は世界に秩序を見出そうとするため、情報をバケツに入れて整理する傾向があります。この負担を軽減するために、この人間の行動を模倣し、関連情報を視覚的にグループ化しましょう。
ナビゲーションバー、ドロップダウン、フッターは、デザインがどのように類似のアイデアやオブジェクトを整理して、顧客にシームレスな体験を提供できるかの優れた例です。こちらは、Loisaの定番の例です。デザイナーは、複数のリンクやページの混乱を減らすために近接性を使用しています。


6. ユーザーの視線を誘導する

ウェブサイトに初めて訪れた平均的な人は、彼らのニーズに合ったページやソリューションにナビゲートするための手助けが必要かもしれません。デザイン心理学を使用して、彼らをこのナビゲーションに導くことができます。
グラフィック要素(矢印や曲線など)やスクロール時のアニメーションは、オブジェクトをつなげてパスをたどるのを助けるためにゲシュタルトの連続性の原則を使用します。また、色、サイズ、デザイン要素を通じて強調を使用して、ユーザーの注意を焦点に引き寄せることができます。
この製品ページのPetalumaを見てください。オレンジの要素に目が引かれます。購読オプションを強調することで、顧客をリピートバイヤーに促しています。これにより、重要性を示すために色を使用して視覚的な階層が作成されます。

以下の例では、Dippin’ Daisy’sが、戦略的にトリミングされた画像と強力なグラフィックで視線を誘導しています。

7. 確認バイアスを利用する

確認バイアスは、人間が自分の信念を確認する情報を探し、そうでない情報を無視する行動です。市場調査において確認バイアスの罠を避けることが重要ですが(すなわち、オーディエンスに関する既存の信念と一致しないデータを無視すること)、デザインツールとして利用する方法もあります。

ブランドとして強い意見を持つことは、あなたが一部の人々を疎外する一方で、他の人々を引き寄せることを意味します。ブランドがすべての人にとってすべてであろうとするのは間違いです。それは不可能です。代わりに、ターゲット顧客を明確に定義し、自分の価値観を明確にしましょう。
8. 認知負荷を減らす

簡単に言えば、認知負荷とは、人間の脳における記憶のための利用可能なスペースの量です。情報が多すぎたり、デザインが混雑していたりすると、脳が過負荷になります。1950年代にジョージ・ミラーが作ったミラーの法則は、人間の作業記憶が一度に約7つの情報を処理し保持できると述べています。
デザインの混乱を減らす方法には、冗長なリンクや情報を排除すること、大きなテキストのブロックをインフォグラフィックや他の視覚的記述に変換すること、多くの情報を小さな塊に整理すること、既存のメンタルモデルに基づくことが含まれます。
このHeistの例は、トップナビゲーションを3つのオプションに絞り、ブランドの製品を着用したモデルのクリーンなビデオの上に単一のCTAボタンを中心に配置しています。

ウェブデザインにおけるメンタルモデルは、ユーザーがデザインパターンに基づいてウェブサイトがどのように機能すべきかについて持っている信念を指します。これらは、ユーザーの以前の経験に基づいており、特定の要素が同じ場所に一貫して表示されたり、同じ方法で機能することを期待することに基づいています。例えば、ウェブサイトの左上または右上にメニューを配置し、線のスタックで示すことで、認知負荷を減らすことができます—ユーザーはメニューを見つける必要がなく、期待される場所に存在するからです。
心理学を活用してデザインと顧客体験を向上させる
上記の戦術を採用し、自身の調査を行うことで、ブランドやウェブサイトのデザインに関してより情報に基づいた決定を下すことができます。最初のステップは、明確なビジョン、明確に定義されたターゲットオーディエンス、具体的な測定可能な目標を持つことです。これらは優れたデザインの基礎であり、焦点を維持するのに役立ちます。
データとフィードバックは、その後のスケールアップに役立ちます。ユーザーがデザインにどのように反応し、どのように移動しているかに注意を払い、これらの洞察を使用して顧客のニーズに合わせてデザインを常に調整し、改善してください。顧客が何を求めているかを理解することで、より良い体験を構築し、コンバージョンを促進しやすくなります。
心理的デザインに関するFAQ
心理的デザインとは何ですか?
心理的デザインは、ユーザーのニーズ、目標、行動に焦点を当てたUXデザインのアプローチです。研究とデータに基づいたインサイト、ヒックの法則やミラーの法則などの一般的な心理学原則を使用して、オーディエンスを理解し、彼らにアピールする体験を構築します。ユーザー中心のデザインと視覚的な手がかりを使用して、ターゲットユーザーを簡素化し、焦点を当て、コンバートします。
心理学とデザインはどのように関連していますか?
心理学とデザインは関連しています。なぜなら、デザインは人間の心理を理解し、特定の目標に向かって視聴者や顧客を動機づけるデザインを作成するために依存しているからです。人間の行動を研究し、心理学の原則を理解するデザイナーは、感情や行動に影響を与えるウェブサイトやユーザー体験を構築できます。心理学は効果的なデザイン戦略において重要な役割を果たします。
デザインの心理学はなぜ重要なのですか?
デザインの心理学が重要視される理由は、それが視覚的な魅力を超えてブランドやウェブサイトのデザインに影響を与えるからです。ユーザーリサーチと心理学の原則を組み合わせて、ユーザーからの望ましい感情や反応を引き出すデザインを作成します。また、デザイナーが混乱を抑え、ナビゲーションを簡素化し、ブランドに対するポジティブな美的印象を促すためにデザインを集中させるのに役立ちます。