UXの5段階モデルとは？ユーザー体験設計の基本を解説
はじめに
「UXってなんとなく聞いたことあるけど、どう設計するの？」そんな方におすすめなのが、Jesse James Garrett氏が提唱した**「UXの5段階モデル」**です。
このモデルは、Webサイトやアプリの設計における「ユーザー体験」を5つの階層に分けて体系的に整理したものです。この記事では、それぞれの階層で何を考えるべきかをわかりやすく解説します。
UXの5段階モデルとは？
UXの5段階モデル（The Elements of User Experience）は、以下の5つのレイヤーに分かれています。 下から上へ積み上がるピラミッド構造になっており、下位の階層が決まっていないと上位を正しく設計できません。
各階層の説明
1. 戦略（Strategy）
目的：なぜこのプロダクトを作るのか？
誰のために？どんな課題を解決する？
ユーザーのニーズ（ユーザーゴール）とビジネスの目的（ビジネスゴール）を定義します
戦略（Strategy）段階では、ユーザーが誰で、どのようなニーズを持っているのかを調査・分析し、ビジネスの達成目標を明確にします。ユーザーニーズとビジネス目標を理解し、明確に定義することで、プロジェクト全体の方向性が定まります。
2. 要件（Scope）
どんな機能を提供するか？
コンテンツや機能の要件を整理します（要件定義）
機能一覧、対応デバイス、導線、API連携などを明確に
要件（Scope）段階では、戦略段階で明確にしたユーザーニーズとビジネス目標に基づいて、製品やサービスに必要な機能とコンテンツを具体的に洗い出します。この段階で重要なのは、ユーザーニーズを満たす機能や、ビジネス目標に貢献するコンテンツを検討することです。
3. 構造（Structure）
ユーザーがどう動くか？どう情報にたどり着くか？
サイトマップ・ユーザーフロー・情報設計（IA）をここで整理します
構造（Structure）段階では、要件段階で決定した機能やコンテンツを、ユーザーにどのように提供するかを検討します。この段階では、ユーザーが目的の情報にたどり着けるよう、サイトマップや情報構造の整理、ユーザーシナリオなどの作成を通して情報アーキテクチャを策定します。
4. 骨格（Skeleton）
どんな画面レイアウト・ナビゲーションになるか？
ワイヤーフレーム設計の段階。要素の配置や導線のわかりやすさを重視
骨格（Skeleton）段階では、構造段階で定義した情報アーキテクチャに基づき、インターフェースやナビゲーションを設計します。この段階では、ユーザーが直感的に操作できるように、画面レイアウト、ボタン配置、メニュー構成などを検討し、ワイヤーフレームやプロトタイプ（試作品）を作成します。
5. 表層（Surface）
見た目・ビジュアルデザインの段階
UIカラー・フォント・アイコン・ボタンのデザインなど
ブランディングや印象、操作感をデザインします
表層（Surface）段階は、ユーザーが実際に目に触れる視覚デザインを設計します。この段階では、配色、フォント、画像などを用いて、ユーザーに魅力的で分かりやすいデザインを提供し、ブランドイメージの一貫性を保ちながら、ユーザーに好印象を与えるUI（ユーザーインターフェース）を構築します。
UX設計でやりがちなミス
❌ 表層から作り始めてしまう❌ ロゴやボタンデザインに時間をかけて、目的や情報設計が未整理❌ ページ単位で考えて全体の流れが見えていない → 5段階モデルを使うことで、論理的に設計順序を進めることができます。
まとめ：UXの5段階モデルを活用するメリット
チーム間の共通言語になる（戦略〜UIまで共有しやすい）
「なんとなく良い」ではなく、目的に沿った設計ができる
改善や検証もしやすくなる
UXを「なんとなく」から「設計可能なもの」へ。ぜひプロジェクトに役立ててください。