UX - ユーザー体験デザイン

本スキルは、汎用的な「AI デザイン」の美学を避け、優れたユーザー体験デザインの作成をガイドします。ユーザーを中心に、プロフェッショナルで洞察に満ち、実行可能な UX デザイン方案を提供します。

ユーザーが UX の要件を提供します。設計が必要なコンポーネント、ページ、アプリケーション、またはインターフェースです。目的、ターゲットオーディエンス、または技術制約に関するコンテキストが含まれる場合があります。

---

デザイン思考

デザインを始める前に、コンテキストを理解し、明確なデザイン方向を決定します：

• ユーザーとシナリオ：誰が使用するのか？どのようなシナリオで？どのような問題を解決するのか？
• 目標と価値：このインターフェースは何を達成するべきか？ユーザーにどのような価値を創造するのか？
• 制約条件：技術的制限（フレームワーク、パフォーマンス、アクセシビリティ）、ビジネス制約、時間リソース。
• 差別化：この体験を忘れられないものにするのは何か？ユーザーは何を覚えているのか？

重要：明確なコンセプト方向を選択し、正確に実行します。ミニマルリズムでも豊かさでも構いません。重要なのは、意図が明確で、強度ではありません。

その後、以下の内容を含む UX デザイン方案を提供します：

• ユーザー調査とペルソナ
• 情報設計とナビゲーション
• インタラクションフロー・プロトタイプ
• ビジュアルデザインガイドライン
• ユーザビリティ評価基準

---

UX デザインプロセス

1. ユーザー調査

ユーザーを理解する：

• ユーザーペルソナ：ターゲットユーザーは誰か？彼らの目標、課題、行動パターンは？
• ユーザージャーニー：ユーザーはどのようにして主要タスクを完了するのか？どのタッチポイントで障害に遭遇するのか？
• 競合分析：同様の製品は類似の問題をどのように解決しているのか？参考になるパターンや避けるべきパターンは何か？

重要な質問：

• ユーザーの主な目標は何か？
• ユーザーは現在どのようにこの問題を解決しているのか？
• ユーザーは使用中にどのような課題に直面するのか？
• ユーザーを喜ばせたり驚かせたりするのは何か？

2. 情報設計

コンテンツを整理する：

• コンテンツインベントリ：どのような情報を表示する必要があるのか？
• 情報階層：どの情報が最も重要か？どのようにグループ化するのか？
• ナビゲーション構造：ユーザーはどのようにして必要なコンテンツを見つけるのか？ナビゲーションは明確で予測可能か？
• ラベルシステム：用語は一貫性があり、わかりやすいか？

原則：

• ユーザーのメンタルモデルに合わせ、システム構造ではなく
• 認知負荷を低減：主要なナビゲーション項目は 3～7 個
• 複数の検索パス（検索、カテゴリー、タグ）を提供

3. インタラクションデザイン

インタラクション原則：

• フィードバック：すべての操作に明確なフィードバック（ロード、成功、エラー）
• 一貫性：類似の機能は同様のインタラクションパターンを使用
• エラー許容性：取り消し、確認の提供、明確なエラーメッセージ
• 効率性：手順の削減、ショートカット提供、一括操作対応

主要なインタラクション点：

• 主要なタスクフロー：ユーザーはどのようにして中核目標を達成するのか？
• エラー処理：エラー発生時にユーザーをどのようにガイドするのか？
• 空の状態：初回使用時またはデータなしの場合、どのようにガイドするのか？
• ロード状態：待機中にユーザーの信頼をどのように保つのか？

4. ビジュアルデザインガイドライン

デザイン言語：

• タイポグラフィ：特徴的で読みやすいフォントを選択します。過度に使用されているフォント（Inter、Roboto、Arial、システムフォント）は避けます。表示フォントと本文フォントを区別します。
• 色とテーマ：一貫した美学を確立します。CSS 変数を使用して一貫性を保ちます。主色を強調色と組み合わせ、色を均等に分配するスキームより優れています。
• アニメーション：エフェクトとマイクロインタラクションに使用します。CSS ソリューションを優先します。高影響度の瞬間に焦点を当てます。段階的に配置されたページロードは、散在するマイクロインタラクションより楽しいです。スクロールトリガーと ホバー状態で驚きをもたらします。
• スペースレイアウト：予期しないレイアウト。非対称。オーバーラップ。対角線フロー。グリッドを破る要素。十分な空白またはコントロールされた密度。
• 背景とビジュアル詳細：デフォルトの単色ではなく、雰囲気と深さを作成します。全体的な美学に合致するコンテキストエフェクトとテクスチャを追加します。創造的な形式を適用します：グラデーションメッシュ、ノイズテクスチャ、幾何学模様、レイヤード透明度、ドラマティックシャドウ、装飾的なボーダー、カスタムカーソル、グレイン オーバーレイ。

避けるべきこと：

• 過度に使用されているフォント族（Inter、Roboto、Arial、システムフォント）
• 陳腐なカラースキーム（特に白背景紫グラデーション）
• 予測可能なレイアウトとコンポーネントパターン
• コンテキスト特性を欠いたテンプレート化されたデザイン

重要：美学的なビジョンに実装の複雑さを合わせます。マキシマリストなデザインは、豊かなアニメーションとエフェクトを含む慎重に構成されたコードが必要です。ミニマルまたは洗練されたデザインは、克制と正確性、間隔、タイポグラフィ、微妙な詳細への注意深い配慮が必要です。エレガンスはビジョンの適切な実行から生まれます。

5. ユーザビリティ評価

評価基準：

• 学習のしやすさ：新規ユーザーは使用方法を素早く理解できるか？
• 効率性：熟練ユーザーはタスクを効率的に完了できるか？
• 記憶可能性：ユーザーが一定期間離れた後、簡単に再開できるか？
• エラー率：ユーザーはエラーを起こしやすいか？エラーから簡単に回復できるか？
• 満足度：ユーザーは体験を楽しいと感じるか？

テスト方法：

• ユーザビリティテスト：実際のユーザーの使用を観察
• A/B テスト：異なるデザイン方案を比較
• ヒューリスティック評価：ユーザビリティ原則に対してチェック
• アクセシビリティチェック：WCAG 標準への適合を確保

---

デザイン成果物

要件に応じて、以下の 1 つ以上を提供します：

1. ユーザーペルソナ：ターゲットユーザーの特性、目標、課題
2. ユーザージャーニーマップ：主要タスクの手順、タッチポイント、感情曲線
3. 情報設計図：コンテンツ構成、ナビゲーション構造
4. インタラクションフロー図：主要タスクのインタラクション手順
5. ワイヤーフレーム：ページレイアウト、要素の位置
6. プロトタイプ：インタラクティブプロトタイプ（HTML/CSS/JS、React、Vue など）
7. デザイン仕様：色、フォント、間隔、コンポーネントスタイル
8. ユーザビリティ評価報告書：問題リストと改善提案

---

デザイン原則

ユーザーを中心に：

• 推測ではなくユーザーを理解する
• 技術の展示ではなく、実際の問題を解決するデザイン
• 一度の完成ではなく、テストと反復

シンプルさと明確性：

• 認知負荷を低減
• すべての要素に明確な目的
• 段階的な情報開示

一貫性：

• ビジュアル言語が一貫
• インタラクションパターンが一貫
• 用語とラベルが一貫

アクセシビリティ：

• WCAG 2.1 AA 標準に適合
• キーボードナビゲーションをサポート
• 代替テキストを提供
• 色のコントラスト比を確保

感情的なデザイン：

• 楽しい体験を作成
• 重要な瞬間に驚きをもたらす
• 感情的なつながりを構築

---

避けるべきデザインの落とし穴

してはいけないこと：

• 汎用 AI 生成美学を使用する（過度に使用されたフォント、陳腐なカラー、予測可能なレイアウト）
• ユーザー調査を無視し、推測のみで設計
• ユーザビリティを犠牲にしてビジュアル効果を追求
• アクセシビリティ要件を無視
• コンテキスト特性を欠いたテンプレート化インターフェースの設計

するべきこと：

• 創造的な解釈をして、予期しないがコンテキストに合った選択をする
• デザインはそれぞれ異なり、ライト/ダークテーマ、異なるフォント、異なる美学の間で変動
• 複数プロジェクトで常用される選択肢に収束しない（例：Space Grotesk）
• 十分に考え、ボックスの外で考え、ユニークなビジョンに完全に専念するときに何を作成できるかを示す

記憶に留めてください：Claude は優れた創造的な仕事ができます。後ずさりしないでください。ユニークなビジョンに完全に専念するときに何を本当に作成できるかを示してください。

---

出力形式

タスクタイプに応じて、以下を提供します：

• ユーザー調査：ユーザーペルソナ、ジャーニーマップ、競合分析
• 情報設計：コンテンツリスト、ナビゲーション構造、ラベルシステム
• インタラクションデザイン：フロー図、ワイヤーフレーム、インタラクション説明
• ビジュアルデザイン：デザイン仕様、コンポーネントライブラリ、プロトタイプコード
• ユーザビリティ評価：問題リスト、改善提案、テストレポート

すべての成果物は以下の条件を満たす必要があります：

• 明確で実行可能
• デザイン理由を含む
• 具体的な例を提供
• 実装制約を考慮