ux-design

UX デザイン

戦略から検証済みのインタラクションまで、ユーザーエクスペリエンスを体系的に設計します。

対象範囲

ユーザーリサーチを計画する、ペルソナを作成する、情報アーキテクチャを定義する、ユーザーフローを文書化する、インタラクションパターンを設計する、または既存の製品の UX 品質を監査する場合に、このスキルを使用します。

原則

1. デザインを決めるのはデザイナーではなく、ユーザーです

すべてのデザイン上の判断は、実際のユーザーデータに基づいています。検証されていない仮定は推測にすぎません。

2. 表面ではなく、エクスペリエンスをデザインします

UX は、最初に認識した瞬間から長期的な利用まで、インタラクション全体を包含します。

3. 完全さよりシンプルさを優先します

誰もが理解できる機能が 1 つあれば、誰にも見つけられない機能が 10 個あるより価値があります。

4. 感情は測定可能な成功要因です

ポジティブなエクスペリエンスは信頼と再訪を生みます。UX はビジネスに直結する重要な要素です。

5. 完璧さより反復を優先します

迅速なプロトタイピング、早期テスト、継続的な改善は、長期にわたる計画段階より効果的です。

ルール

ユーザーエクスペリエンスの 5 つのプレーン（Garrett モデル）

• DO: 下から上へ進めます：Strategy > Scope > Structure > Skeleton > Surface。
• DO: プレーン 1（Strategy）では、ユーザーは誰か、ユーザーの目標は何か、ビジネス上の目的は何かを定義します。
• DO: プレーン 2（Scope）では、ステークホルダーの希望ではなく、ユーザーのニーズに基づいて機能の優先順位を決めます。
• DON'T: 基盤となるプレーンを定義せずに、ビジュアルデザイン（プレーン 5）へ直接進まないでください。

ユーザーリサーチ

• DO: デザインの前に、少なくとも 5 件のユーザーインタビューまたはユーザビリティテストを実施します。
• DO: データに基づくペルソナを作成します：名前、属性、目標、課題、状況。
• DO: 手軽な形式として共感マップを使用します：ユーザーは何を考え、感じ、言い、行動するかを整理します。
• DON'T: チームの思い込みに基づいてペルソナを作成しないでください。各ペルソナにつき、実際のデータを少なくとも 3 点使用します。
• DON'T: 同僚だけを対象にテストしないでください。必ず実際のターゲットオーディエンスを対象にテストします。

情報アーキテクチャ（IA）

• DO: 組織の構造ではなく、ユーザーのメンタルモデルに沿ってコンテンツを構成します。
• DO: カードソーティングを実施して、コンテンツ構造を検証します。
• DO: ナビゲーションの階層を浅く保ちます：目的のコンテンツに到達するまでのクリック数は最大 3 回です。
• DO: 業界用語ではなく、ユーザーの言葉でナビゲーション項目にラベルを付けます。
• DON'T: 主要カテゴリが 7 つを超えるメガメニューは使用しないでください（ミラーの法則：7 ± 2）。

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

• DO: すべての操作に対して即座にフィードバックを提供します（フィードバックなしの時間は最大 400ms）。
• DO: 問題が起きたときは、何が問題だったのか、どうすれば解決できるのかを示す、役立つエラーハンドリングを用意します。
• DO: 破壊的な操作には取り消し機能を用意します（取り消し可能な時間は最低 5 秒）。
• DO: 1 ページあたりの選択肢を減らします（ヒックの法則）。
• DON'T: フォームの送信後にのみエラーメッセージを表示しないでください。インライン検証が標準です。
• DON'T: 些細な操作に確認ダイアログを使用しないでください。取り消せない操作に限って使用します。

UX の法則

• DO: フィッツの法則 — タッチターゲットは少なくとも 44x44px とし、ユーザーが予想する位置の近くに配置します。
• DO: ヤコブの法則 — 確立された慣習に従います（ユーザーはほかのウェブサイトを知っています）。
• DO: ドハティのしきい値 — 400ms 未満のシステム応答は瞬時に感じられます。
• DO: ポステルの法則 — 受け入れる内容には寛容に、生成する内容には厳格に対応します。

ユーザーフロー

• DO: 主要なフロー（ハッピーパス）に加え、少なくとも 2 つの代替フローを定義します。
• DO: 判断ポイントを含むフローチャートとしてフローを文書化します。
• DO: ワイヤーフレームを作成する前に、実際のユーザーを対象にフローを検証します。
• DON'T: 行き止まりになるフロー（次の操作や戻る方法がないページにつながるフロー）を作成しないでください。

パターン

パターンの詳細な説明については、references/patterns.md を参照してください。

段階的開示

最初の階層では必要最低限の情報だけを表示します。詳細は「詳細を見る」の先に配置します。長いフォーム 1 つではなく、複数ステップのフォームを使用します。

オンボーディングフロー

ステップ数は最大 3～5 件にします。進行状況を示すインジケーターを表示し、スキップできるようにします。完了後は、コアバリューに直接アクセスできるようにします。

検索中心の設計

目立つ検索バー。即時に結果を表示するオートコンプリート。フィルターオプション。代替案を提示する検索結果なしのページ。

フィードバックループ

視覚的なフィードバック（ホバー、アクティブ）、システムからのフィードバック（読み込みインジケーター）、結果のフィードバック（成功メッセージ）。

空の状態

空白の領域を残さないでください。常に、説明＋行動を促す要素＋適切なビジュアルを用意します。

アンチパターン

機能の肥大化

検証なしに機能を増やし続けます。解決策：すべての機能について、ユーザーの需要を検証する必要があります。利用率が20％未満の場合は、削除するか非表示にします。

思い込みに基づく設計

「ユーザーはこうしたいはず……」解決策：重要な意思決定ごとに、少なくとも3つのデータポイントを用意します。

理想的なケースだけを想定する

理想的なケースだけを設計します。解決策：各フローについて、少なくとも3つのエラーシナリオを定義して設計します。

認知的過負荷

1ページに選択肢が多すぎます。解決策：ミラーの法則（7 ± 2）。1ページにつき、主な目標は1つにします。

コンテキストの無視

すべてのデバイスで同じUXを提供します。解決策：コンテキストに応じて設計します（モバイル：移動中、片手操作。デスクトップ：より多くの注意を向けられる）。

チェックリスト

• 戦略レイヤーを定義したか：ユーザーの目標とビジネス目標を文書化したか？
• データに基づくペルソナを少なくとも3つ作成したか？
• ユーザーフローを文書化したか（理想的なケース＋エッジケース）？
• 情報アーキテクチャを検証したか（カードソーティングまたはツリーテスト）？
• ナビゲーションのラベルはユーザーの言葉になっているか（社内用語を使っていないか）？
• ナビゲーションの階層は最大3レベルか？
• すべての操作に対して即座にフィードバックがあるか（400ms未満）？
• エラー処理は役に立つか（何が起きたか＋どうすればよいか）？
• 破壊的な操作を取り消せるか？
• フォームにインライン検証があるか？
• 空の状態に説明と行動を促す要素があるか？
• タッチターゲットは少なくとも44x44pxか？
• メインナビゲーション項目は最大7つか？
• ユーザーの需要が検証されていない機能はないか？

相互参照

• ui-design -- UXの概念を視覚的に実装する
• accessibility -- UXの柱としてのインクルーシブデザイン
• usability -- テスト手法とヒューリスティクス
• navigation-design -- ナビゲーション構造におけるIAの実装
• customer-journey -- ユーザージャーニー全体の文脈におけるUX
• design-process -- プロジェクトのワークフローにおけるUX手法
• landing-pages -- コンバージョンに最適化されたUXパターン