UX Designer

UX デザイナー

調査に基づき、直感的でアクセシブルなユーザー体験を設計します。

基本原則

自分ではなく、ユーザーのために設計する。 個人の好みではなく、ユーザー調査とユーザビリティテストに基づいて設計を決定します。

UX デザインの5段階プロセス

フェーズ1：情報アーキテクチャ

目標：コンテンツと機能を論理的に整理する

活動：

• カードソーティング：ユーザーにコンテンツをカテゴリー別に分類してもらいます
• サイトマッピング：ページと機能の階層を作成します
• ナビゲーション設計：主要、補助、ユーティリティのナビゲーションを設計します
• ラベリング：明確でユーザーフレンドリーな用語を使用します

検証：

• IA を5人以上のユーザーでテスト済み（ツリーテスト）
• ナビゲーションの経路が明確で論理的
• ラベルがユーザーのメンタルモデルに合致

---

フェーズ2：ユーザーフロー

目標：ユーザーがタスクを完了するまでの経路を可視化する

設計する主なフロー：

• オンボーディング：初回利用時のユーザー体験
• コアタスク：主なユースケース（利用の80%）
• エラー状態：間違いからの復旧
• エッジケース：頻度は低いものの重要なシナリオ

フロー図の要素：

[Entry Point] → [Decision] → [Action] → [Outcome]
                    ↓
               [Alternative Path]

検証：

• 正常系のフローを文書化済み
• エラー状態を設計済み
• 離脱ポイントを特定済み
• フローがユーザー調査と一致

---

フェーズ3：ワイヤーフレーム作成

目標：構造に重点を置いた低忠実度のレイアウトを作成する

忠実度のレベル：

• 低忠実度：スケッチ、ボックス、プレースホルダーテキスト（最速）
• 中忠実度：グレースケール、現実的なコンテンツ、基本的なインタラクション
• 高忠実度：スタイル適用済み、ブランド反映済み、詳細なインタラクション

ワイヤーフレームを作成する主な画面：

• ホームページ／ダッシュボード
• コアタスク画面（CRUD 操作）
• ナビゲーション（ヘッダー、サイドバー、フッター）
• フォームと入力検証
• 空の状態、読み込み状態、エラー状態

ワイヤーフレームのチェックリスト：

• 視覚的な階層が明確
• レイアウトパターンに一貫性がある
• コントラストとサイズがアクセシブル
• タッチターゲットが44x44px以上（モバイル）
• フォームが論理的にグループ化されている

---

フェーズ4：プロトタイピングとテスト

目標：ユーザビリティテスト用のインタラクティブなプロトタイプを作成する

プロトタイピングツール：

• Figma（推奨）：共同作業に対応したブラウザベースのツール
• Adobe XD：デザインシステムに適しています
• Framer：コードベースのプロトタイピング
• InVision：シンプルなクリック操作式プロトタイプ

ユーザビリティテスト：

Script:
1. Welcome (5 min): Explain process, get consent
2. Context (5 min): Ask about current solutions
3. Tasks (20 min): "Try to [complete task]"
4. Think-aloud: "What are you thinking?"
5. Debrief (5 min): Overall impressions

Metrics:
- Task completion rate (target: >70%)
- Time on task
- Error rate
- Satisfaction (1-5 scale)

検証：

• プロトタイプが主要なユーザーフローを網羅
• 5人以上のユーザーでテスト済み
• タスク完了率が70%超
• 重大な問題を文書化し、修正済み

---

フェーズ5：UI デザインと引き継ぎ

目標：本番環境で使える高忠実度のデザインを作成する

デザインシステムの要素：

• 色：プライマリ、セカンダリ、ニュートラル、セマンティック（エラー、成功）
• タイポグラフィ：スケール（h1-h6、本文、小）、ウェイト
• 余白：4pt または 8pt のグリッドシステム
• コンポーネント：ボタン、入力欄、カード、モーダルなど
• アイコン：一貫性のあるセット（Heroicons、Lucide、Font Awesome）

アクセシビリティ（WCAG 2.1 AA）：

• 色のコントラスト：テキストは4.5:1、大きなテキスト／UIは3:1
• キーボードナビゲーション：タブ移動の順序が論理的
• スクリーンリーダー：セマンティックな HTML、ARIA ラベル
• フォーカス状態：視認できるフォーカスインジケーター
• 代替テキスト：画像の内容を説明するテキスト

開発者への引き継ぎ：

• デザイン仕様：余白、色、フォント（インスペクトモード）
• コンポーネントの状態：デフォルト、ホバー、アクティブ、無効、エラー
• レスポンシブのブレークポイント：モバイル、タブレット、デスクトップ
• インタラクション：アニメーション、トランジション、マイクロインタラクション
• アセット：アイコン、画像、ロゴ（エクスポート済み）

検証：

• デザインがブランドガイドラインに合致
• アクセシビリティを確認済み（コントラスト、キーボード操作）
• すべてのブレークポイントに対応したレスポンシブレイアウト
• コンポーネントライブラリを文書化済み
• 開発者と引き継ぎ内容を確認済み

---

主な UX 原則

1. 一貫性

使い慣れたパターンを使用します。標準的な UI 要素を一から作り直さないでください。

2. フィードバック

ユーザーの操作を確認します（成功メッセージ、読み込み状態）。

3. エラーの防止

エラーに対処するだけでなく、エラーを防ぐ設計にします。

4. 再生より認識

記憶を求めるのではなく、選択肢を提示します。

5. 柔軟性

初心者と上級者の両方をサポートします（ショートカット、デフォルト設定）。

---

デザインパターン

フォームデザイン：

• ラベルはフィールドの上に配置する（プレースホルダーにはしない）
• インラインバリデーション（リアルタイムのフィードバック）
• 明確なエラーメッセージ（「メールアドレスには @ を含めてください」）
• 1列レイアウト（入力をより早く完了できます）
• 関連するフィールドをグループ化する

ナビゲーション：

• 現在のページを強調表示する
• 階層が深い場合はパンくずリストを使用する
• 大規模なサイトには検索機能を設ける
• トップナビゲーションの項目は最大7つにする（ミラーの法則）

空の状態：

• 空である理由を説明する
• 明確な次のアクションを提示する
• イラストまたはアイコンを使用する
• 例：「タスクはまだありません。最初のタスクを作成して始めましょう。」

読み込み状態：

• スケルトンスクリーン（スピナーよりも優れています）
• 時間のかかる処理には進行状況インジケーターを表示する
• 楽観的 UI（確定前に結果を表示する）

---

アクセシビリティチェックリスト

• テキストの色のコントラスト比が 4.5:1 以上
• キーボードで操作できる（Tab、Enter、Esc）
• フォーカスインジケーターが見える
• 画像に代替テキストがある
• フォームのラベルが入力欄に関連付けられている
• セマンティック HTML（見出し、nav、main など）
• アイコンボタンに ARIA ラベルがある
• スクリーンリーダーでテスト済み
• 200％にズームしても動作する（レスポンシブ）
• 点滅するコンテンツがない（発作のリスク）

---

ツールとリソース

デザインツール：

• Figma：共同デザイン
• Tailwind CSS：ユーティリティファーストの CSS フレームワーク
• shadcn/ui：コンポーネントライブラリ
• Heroicons/Lucide：アイコンセット

プロトタイピング：

• Figma：組み込みのプロトタイピング機能
• Framer：高度なインタラクション
• ProtoPie：複雑なマイクロインタラクション

テスト：

• Maze：リモートユーザビリティテスト
• UserTesting：モデレートおよび非モデレートのテスト
• Hotjar：セッション録画とヒートマップ

アクセシビリティ：

• WAVE：アクセシビリティチェッカー
• axe DevTools：ブラウザー拡張機能
• Lighthouse：自動監査

---

関連リソース

関連スキル：

• user-researcher - デザインの根拠を調査結果に置くために使用します
• frontend-builder - デザインを実装するために使用します
• product-strategist - デザインの方向性を検証するために使用します

関連パターン：

• STANDARDS/design-systems/component-library.md - コンポーネントの標準（作成時）
• STANDARDS/best-practices/accessibility.md - アクセシビリティのガイドライン（作成時）

関連プレイブック：

• PLAYBOOKS/conduct-usability-test.md - テスト手順（作成時）
• PLAYBOOKS/design-handoff.md - 開発者への引き継ぎプロセス（作成時）