1. UXの5段階モデル入門 MOC
- UXの5段階モデルとは
- UXの5段階モデルの定義 (UXデザインのプロセスを5つの階層的なプレーンに分解した概念モデル)
- 提唱者: Jesse James Garrett とその著書『The Elements of User Experience』
- このモデルの目的 (抽象的なアイデアから具体的なデザインへと体系的に進めるための道標)
- モデルの構造
- 5つのプレーンの階層関係 (下位の決定が上位の選択肢を制約する)
- 2つの二元性 (Dualities) MOC
抽象的 (Abstract) から 具体的 (Concrete) へ機能性 (Functionality) 思考 vs. 情報 (Information) 思考 (製品/タスク指向 vs. Webサイト/コンテンツ指向)
- なぜこのモデルを学ぶのか
UXデザインプロセスの全体像の理解設計上の意思決定の根拠の明確化チーム内での共通言語の構築複雑なプロジェクトの見通しを立てる
- 5段階モデルと他の開発プロセスとの関係
HCD/デザイン思考プロセスとのマッピングアジャイル開発における5段階モデルの活用
2. 各段階 (プレーン) の詳細 MOC
2.1. 第1段階: 戦略 (Strategy) MOC
- 戦略プレーンの目的: “なぜ (Why)”
- プロジェクトの目的と方向性を定義する
- 誰のための、どのような価値を提供する製品/サービスなのかを明確にする
- 戦略プレ天ーンにおける二元性
- ユーザーニーズ (User Needs)
- ターゲットユーザーは誰か
- ユーザーが解決したい課題や達成したい目標は何か
- ビジネス目標 (Business Goals / Product Objectives)
- 製品/サービスがビジネスにもたらす価値は何か
- 成功指標 (Success Metrics / KPIs) の設定
- この段階での主要な活動と手法
ステークホルダーインタビューユーザーリサーチ (インタビュー, アンケート, 観察調査) (HCD MOCと連携)ペルソナの作成 (暫定的なものでも) (HCD MOCと連携)競合分析ブランドアイデンティティと価値提案の定義
- この段階での主な成果物
プロジェクト憲章 / ビジョンステートメントペルソナドキュメントビジネス要件定義書 (BRD) の一部主要なKPIリスト
- 戦略プレーンの失敗例 (目標の不一致、ユーザーニーズの誤解)
2.2. 第2段階: 要件 (Scope) MOC
- 要件プレーンの目的: “何を (What)”
- 戦略に基づいて、製品/サービスが提供する機能とコンテンツを具体的に定義する
- 要件プレーンにおける二元性
- 機能要件 (Functional Requirements) (タスク指向)
- ユーザーが実行できるタスクやインタラクション
- システムが提供すべき機能のリスト
- コンテンツ要件 (Content Requirements) (情報指向)
- 必要とされる情報 (テキスト, 画像, 動画など) の種類と量
- コンテンツの目的とソース
- この段階での主要な活動と手法
ユーザーストーリーマッピングユースケースの作成機能仕様書 (Functional Specification) の作成コンテンツインベントリ (Content Inventory) とコンテンツ監査 (Content Audit)要件の優先順位付け (MoSCoW法, KANOモデルなど)
- この段階での主な成果物
機能仕様書 / 要求仕様書コンテンツインベントリリスト優先順位付けされたフィーチャーリスト (バックログ)
- 要件プレーンの失敗例 (スコープクリープ、不必要な機能の追加)
2.3. 第3段階: 構造 (Structure) MOC
- 構造プレーンの目的: “どのように (How)” - 概念レベル
- 要件で定義された要素群を、ユーザーが理解しやすいように体系化・構造化する
- 構造プレーンにおける二元性
- インタラクションデザイン (Interaction Design - IxD) (機能指向)
システムの振る舞いの設計ユーザーのアクションに対するシステムの応答定義概念モデルの構築エラーハンドリングの設計
- 情報アーキテクチャ (Information Architecture - IA) (情報指向)
情報の分類と構造化ナビゲーションシステムの設計コンテンツ間の関係性の定義
- この段階での主要な活動と手法
ユーザーフロー / タスクフロー図の作成サイトマップの作成カードソーティング (IA構築のため)ダイアログフローの設計- 情報アーキテクチャの主要な構造
階層構造 (Hierarchy)シーケンシャル構造 (Sequence)マトリックス構造 (Matrix)有機的構造 (Organic)
- この段階での主な成果物
サイトマップ / アプリケーションマップユーザーフロー図ナビゲーションスキーマ概念モデル図
- 構造プレーンの失敗例 (迷いやすいナビゲーション、直感的でない操作フロー)
2.4. 第4段階: 骨格 (Skeleton) MOC
- 骨格プレーンの目的: “どのように (How)” - 具体レベル
- 構造を具体的なレイアウトとして画面上に配置し、情報とインタラクション要素を視覚的に設計する
- 骨格プレーンにおける3つの要素 (二元性を統合)
- インターフェースデザイン (Interface Design) (機能指向)
インタラクション要素 (ボタン, ドロップダウン, フォームなど) の選択と配置ユーザーがタスクを達成するための具体的なUIコントロールの設計
- ナビゲーションデザイン (Navigation Design) (情報指向)
グローバルナビゲーション, ローカルナビゲーション, コンテキストナビゲーションの具体的な表現パンくずリスト、タブ、メニューなどの設計
- 情報デザイン (Information Design)
情報を分かりやすく伝えるための視覚的な表現方法の設計情報のグルーピングと階層化の視覚的表現
- この段階での主要な活動と手法
- ワイヤーフレーム (Wireframe) の作成 MOC
低忠実度ワイヤーフレーム高忠実度ワイヤーフレームワイヤーフレームに含める要素と含めない要素
インタラクティブプロトタイピング (骨格レベル)UIデザインパターンの適用
- この段階での主な成果物
ワイヤーフレーム (画面ごと、またはテンプレート)インタラクティブプロトタイプ
- 骨格プレーンの失敗例 (一貫性のないレイアウト、分かりにくいUI要素)
2.5. 第5段階: 表層 (Surface) MOC
- 表層プレーンの目的: “見た目と感覚 (Look and Feel)”
- 骨格で定義されたレイアウトに視覚的処理を施し、ユーザーが最終的に目にするデザインを完成させる
- 表層プレーンの主要な活動
- ビジュアルデザイン (Visual Design) / 感覚デザイン (Sensory Design)
色彩設計 (Color Theory and Palette)タイポグラフィ (Typography) レイアウトとグリッドシステム (Layout and Grid System)アイコンとグラフィック (Iconography and Graphics)ブランディングの反映(オプション) サウンドデザイン、触覚フィードバック
- この段階での主要な活動と手法
- モックアップ (Mockup) の作成 (高忠実度なビジュアルデザインカンプ)
デザインシステムの構築と適用スタイルガイドの作成マイクロインタラクションのデザイン
- この段階での主な成果物
モックアップ / ビジュアルデザインカンプスタイルガイド / デザインシステム仕様書アセット (画像, アイコンなど)
- 表層プレーンの失敗例 (ブランドイメージとの不一致、美しさを優先しすぎたユーザビリティの低下)
3. UXの5段階モデルの実践と応用 MOC
- モデルの適用方法
ボトムアップ (下から上へ) での分析と、トップダウン (上から下へ) での設計各段階での意思決定が後続の段階に与える影響
- チーム内でのコミュニケーションツールとして
議論のスコープを特定のプレーンに限定するステークホルダーへの説明責任
- プロジェクトの種類によるモデルの適用
新規プロジェクト vs. 既存プロジェクトのリニューアルWebサイト vs. Webアプリケーション
- 5段階モデルの限界と批判
厳密なウォーターフォールモデルと誤解されやすい現代のアジャイルな開発プロセスへの適合性の課題ビジュアルデザインの重要性の軽視という批判コンテンツ戦略やサービスデザインなど、より広範な視点の欠如
4. 関連概念とツール MOC
- 各プレーンで役立つツール
戦略/要件: Miro, FigJam, ドキュメントツール構造: XMind, FlowMapp, Miro, FigJam骨格/表層: Figma, Sketch, Adobe XD
- 関連するデザイン原則
ゲシュタルト原則 (表層/骨格)ヒックの法則、フィッツの法則 (骨格/構造)
- 関連する成果物
デザインシステム (表層/骨格)スタイルガイド (表層)ペルソナ、カスタマージャーニーマップ (戦略/要件)