UX Psychology - 心理学に基づくUI/UXデザイン

UI/UX実装時に心理学の原則を適用し、ユーザー体験を向上させるためのガイドライン。

参照元: https://www.shokasonjuku.com/ux-psychology

How to Use This Skill

UIデザインやUX改善のリクエストがあった場合、以下のワークフローに従う：

Step 1: 要件分析

ユーザーの要求から以下を特定：

• UI要素: フォーム、CTA、ナビゲーション、カード、モーダルなど
• 目的: コンバージョン向上、エンゲージメント向上、信頼性向上など
• コンテキスト: ECサイト、SaaS、ダッシュボード、ランディングページなど

Step 2: 適用可能な原則を選択

下記の「適用ガイド」と「原則一覧」から、要件に合った心理学原則を2-5個選択。

Step 3: 実装

選択した原則をコードに反映し、コメントで適用した原則を明記。

// UX Psychology Applied:
// - 損失回避 (Loss Aversion): 「今だけ」表示で緊急性を演出
// - 社会的証明 (Social Proof): レビュー数を表示

適用ガイド（UI要素別）

フォーム設計

CTA・ボタン設計

料金プラン

オンボーディング

通知・リマインド

エラー処理

完了画面

UX心理学 原則一覧（43原則）

視覚・認知系

意思決定・行動系

エンゲージメント系

信頼・社会系

体験評価系

パフォーマンス系

その他

コード実装時のコメント記法

/**
 * UX Psychology Applied:
 * - [原則名] ([英語名]): [適用理由]
 * - [原則名] ([英語名]): [適用理由]
 */

例

/**
 * UX Psychology Applied:
 * - 損失回避 (Loss Aversion): 「今だけ」表示で緊急性を演出
 * - 希少性効果 (Scarcity): 残り在庫数を表示して購買意欲を刺激
 * - 社会的証明 (Social Proof): レビュー件数を表示して信頼性向上
 */
export function ProductCard({ product }: { product: Product }) {
  return (
    <div className="card">
      {/* 希少性効果: 在庫数表示 */}
      {product.stock < 5 && (
        <Badge variant="warning">残り{product.stock}個</Badge>
      )}

      {/* 社会的証明: レビュー数 */}
      <div className="reviews">
        <Stars rating={product.rating} />
        <span>({product.reviewCount}件のレビュー)</span>
      </div>

      {/* 損失回避: 期間限定表示 */}
      {product.isLimitedOffer && (
        <Badge variant="destructive">今だけ特別価格</Badge>
      )}
    </div>
  )
}

参考リソース

• 松下村塾 UX心理学: https://www.shokasonjuku.com/ux-psychology
• Laws of UX: https://lawsofux.com/
• Qiita記事: https://qiita.com/nori0724/items/5c1aa2a5d5327bb68b6c

チェックリスト

実装前

• 対象UI要素の目的（コンバージョン、エンゲージメント、信頼性等）を明確にしたか
• 適用する心理学原則を2-5個選定したか
• 過剰な心理操作（ダークパターン）になっていないか確認したか

実装中

• 各原則の適用理由をコードコメントに記載したか（UX Psychology Applied: 形式）
• アクセシビリティ（コントラスト比4.5:1以上、スクリーンリーダー対応）を確保したか
• 認知負荷が適切なレベルに抑えられているか

実装後

• ライトモード・ダークモード両方で視認性を確認したか
• モバイル（320px）とデスクトップ（1440px）で体験が一貫しているか
• ユーザーが不快に感じる強引な誘導がないか最終確認したか

トラブルシューティング

Q: どの心理学原則を適用すべきか判断できない

A: まず「適用ガイド（UI要素別）」セクションを参照してください。対象のUI要素（フォーム、CTA、料金プランなど）に対応する推奨原則が一覧化されています。迷う場合は、認知負荷の軽減と社会的証明の2つから始めるのが汎用的に効果的です。

Q: 心理学原則の適用がダークパターンにならないか心配

A: ユーザーの利益と一致する方向で原則を適用しているか確認してください。例えば「損失回避」は本当に有益な情報の見逃しを防ぐために使うのは良いですが、偽の緊急性を煽るのはダークパターンです。「ユーザーがこの仕組みを知っても納得できるか？」を判断基準にしてください。

Q: 複数の原則が矛盾する場合はどうするか

A: 例えば「認知負荷の軽減（情報を減らす）」と「社会的証明（レビュー数を表示する）」が競合する場合は、段階的開示を活用して初期表示は最小限にし、詳細は展開可能にすることで両立できます。優先すべきはユーザーの主タスク達成です。

関連スキル

• ui-ux-pro-max -- UI/UXデザイン実装。心理学原則を実際のスタイル・カラー・タイポグラフィに落とし込む際に連携
• playwright -- UXテストのブラウザ操作。実装した心理学的UI改善のE2Eテスト・スクリーンショット検証に使用
• liftkit -- LiftKit UIフレームワーク。黄金比ベースのデザインシステムとUX心理学原則の組み合わせ

改訂履歴