「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を「なんとなく」から「設計可能なもの」へ。
ぜひプロジェクトに役立ててください。