AgentSkillsCN

Ux Psychology Principles

在 UI 实施过程中，运用 UX 心理学原理，优化用户体验的实用指南。

SKILL.md
--- frontmatter
description: UI実装時のUX心理学原則を活用し、ユーザー体験を最適化するための実践的ガイドライン

UX心理学原則 - UI実装リファレンス

このスキルを使用する場面：

  • •新規機能のUI/UX設計時
  • •ユーザーエンゲージメント向上の施策検討時
  • •コンバージョンフローの最適化時
  • •ユーザーオンボーディングの設計時
  • •既存UIの改善・最適化時

視覚・認知

  • •美的ユーザビリティ効果: 美しいUIは使いやすいと感じられる
  • •バナー・ブラインドネス: 広告風デザインは無視される。CTAを広告と区別する
  • •認知負荷: 選択肢は3〜5個、情報量を制限
  • •視覚的階層: サイズ・色・余白で優先順位を表現
  • •系列位置効果: 重要項目は先頭か末尾に。ナビは3〜5項目まで（例: Spotify）
  • •親近性バイアス: 一般的なUIパターンを踏襲する

意思決定・誘導

  • •アンカー効果: 価格は「元値→割引価格」順で表示
  • •おとり効果: 3プランで中間を推奨に見せる
  • •デフォルト効果: 推奨設定をデフォルトに
  • •フレーミング: 「10%失敗」より「90%成功」
  • •損失回避: 「失う」より「得る」表現
  • •希少性: 「残りわずか」「期間限定」（例: Airbnb, Booking.com）
  • •社会的証明: レビュー数、★評価、利用者数、顧客ロゴ

エンゲージメント

  • •目標勾配効果: プログレスバー。最初から少し進んだ状態で開始（例: LinkedIn完成度メーター）
  • •ツァイガルニク効果: 未完了タスクは記憶に残る。チェックリスト活用
  • •ゲーミフィケーション: バッジ・ポイント・ストリーク・リーダーボード（例: Duolingo）
  • •授かり効果: 無料トライアル、カスタマイズで「自分のもの」感を演出

オンボーディング

  • •段階的要請: 小さなアクションから始める（メールだけで登録→後から詳細）
  • •段階的開示: 高度な機能は「詳細設定」に隠す
  • •反応型オンボーディング: 初回操作時にツールチップ表示

パフォーマンス

  • •ドハティの閾値: 反応は0.4秒以内。スケルトンスクリーン活用
  • •労働の錯覚: 検索中アニメーションで価値を高める（例: KAYAK, Netflix）
  • •ピーク・エンドの法則: 完了時の称賛アニメーション（例: Duolingo）
  • •ユーザー歓喜: マイクロインタラクション、イースターエッグ

摩擦・抵抗

  • •決断疲れ: 選択肢を減らす、デフォルト提供
  • •意図的な壁: 重要操作に確認ダイアログ（例: GitHub削除時に名前入力）
  • •誘導抵抗: 「後で」「スキップ」を常に提供。強制感を与えない

動機づけ

  • •ピグマリオン効果: ポジティブなフィードバック。目標設定で自己効力感向上

モバイルファースト実装時の心理学

Tumiki はモバイル第一設計（最大幅428px）のため、以下に特に注力：

  • •タップターゲット: 最小44x44px以上（運動制御の効率化、誤タップ防止）
  • •認知負荷: スマホ画面制約下では選択肢は2〜3個に限定（デスクトップは3〜5個）
  • •視覚的階層: モバイルでは大きめのテキスト、メリハリのある色使いが必須
  • •スクロール最小化: 重要な情報は3スクロール以内に配置
  • •プログレス表示: スマホでの待機感は特に強いため、ドハティの閾値（0.4秒）を厳密に守る
  • •Tailwind CSS必須: すべてのスタイリングはTailwind CSSクラスで実装（インラインスタイル禁止）

実装例

プログレスバー（目標勾配効果）

tsx
// 最初から30%進んだ状態で開始 → ユーザーは達成感を感じやすい
<div className="w-full bg-gray-200 rounded-full h-2">
  <div
    className="bg-blue-500 h-2 rounded-full transition-all duration-300"
    style={{ width: '30%' }}
  />
</div>

デフォルト値（デフォルト効果）

tsx
// 推奨オプションをデフォルトに → ユーザーの約90%は変更しない
<select defaultValue="recommended" className="rounded-lg border p-2">
  <option value="basic">ベーシック</option>
  <option value="recommended">⭐ 推奨プラン</option>
  <option value="premium">プレミアム</option>
</select>

タップターゲット（モバイル対応）

tsx
// ❌ 悪い例：タップターゲットが小さすぎる
<button className="text-sm p-1">削除</button>

// ✅ 良い例：44x44px以上のタップエリア
<button className="min-h-[44px] min-w-[44px] px-4 py-2 rounded-lg bg-red-500 text-white">
  削除
</button>

社会的証明（信頼性向上）

tsx
// レビュー数と評価を表示
<div className="flex items-center gap-2">
  <div className="flex text-yellow-400">
    {'★'.repeat(5)}
  </div>
  <span className="text-sm text-gray-600">4.8 (1,234件のレビュー)</span>
</div>

実装チェックリスト

UI実装時に以下の項目を確認してください：

視覚・認知

  • • 視覚的階層は明確か（サイズ・色・余白で優先順位を表現）
  • • 選択肢は適切な数か（モバイル: 2〜3個、デスクトップ: 3〜5個）
  • • 一般的なUIパターンを踏襲しているか

モバイル対応

  • • タップターゲットは最小44x44px以上か
  • • スマホ画面（428px以下）で表示確認したか
  • • すべてのスタイリングがTailwind CSSクラスで実装されているか

パフォーマンス

  • • 反応は0.4秒以内か
  • • ローディング時にスケルトンスクリーンを表示しているか
  • • プログレス表示は必要か

意思決定・誘導

  • • デフォルト値は最適か（推奨設定をデフォルトに）
  • • 社会的証明を活用できるか（レビュー、利用者数など）
  • • ポジティブなフレーミングになっているか

摩擦・抵抗

  • • 重要操作に確認ダイアログを入れたか
  • • 「後で」「スキップ」オプションはあるか
  • • 強制感を与えていないか

活用のポイント

このスキルを活用することで、以下の効果が期待できます：

  • •ユーザーエンゲージメント向上: 心理学的に最適化されたUIで、ユーザーの行動を自然に誘導
  • •コンバージョン率改善: デフォルト効果、アンカー効果、社会的証明の活用
  • •離脱率の低減: 認知負荷の軽減、段階的開示、適切なプログレス表示
  • •モバイル体験の最適化: タップターゲット、視覚的階層、スクロール最小化の実践
  • •開発効率の向上: 実装チェックリストによる品質担保、Tailwind CSSでの一貫性

UI/UX実装時は、このスキルの原則とチェックリストを参照し、心理学的に最適化されたユーザー体験を提供してください。