プロダクト開発において「デザインは綺麗なのに使いにくい」「機能は豊富なのにユーザーが定着しない」という問題は、多くの場合UX（ユーザー体験）の階層構造が整理されていないことに起因します。
これを解決するための世界標準のフレームワークが、ジェシー・ジェームス・ギャレット氏が提唱した**「UXの5段階モデル（The Elements of User Experience）」**です。この記事では、概念から実務での成果物まで、1つの記事で網羅的に解説します。
1. UXの5段階モデルとは？
UXの5段階モデルは、ユーザー体験を構成する要素を、「抽象（コンセプト）」から「具体（完成形）」へと向かう5つの階層に分けて整理したものです。
下位の層（土台）が固まっていない状態で上位の層（見た目）を作ると、必ず「手戻り」や「軸のブレ」が発生します。
| 階層 | 名称 | 問い：何を解決するか？ | 状態 |
|---|---|---|---|
| 第5層 | 表面 (Surface) | どう見えるか？ | 具体的 |
| 第4層 | 骨格 (Skeleton) | どこに配置するか？ | ↑ |
| 第3層 | 構造 (Structure) | どうつながるか？ | |
| 第2層 | 要件 (Scope) | 何を作るか？ | ↓ |
| 第1層 | 戦略 (Strategy) | なぜ作るか？ | 抽象的 |
2. 各レイヤーの詳細と成果物
第1層：戦略層 (Strategy)
「プロダクトの存在意義」を定義する最重要の土台です。
- ビジネス目標： 企業側が何を達成したいか（売上、認知度、継続率など）。
- ユーザーニーズ： ターゲットユーザーは誰で、何を解決したいのか。
- 主な成果物： ユーザーリサーチレポート、ペルソナ、カスタマージャーニーマップ、OKR。
第2層：要件層 (Scope)
戦略を実現するために「必要なもの」をリストアップします。
- 機能要件： ユーザーがタスクを完了するために必要な機能（例：検索、お気に入り登録、決済）。
- コンテンツ要件： 提供すべき情報（例：商品画像、仕様表、解説動画）。
- 主な成果物： 要件定義書（PRD）、バックログ、MVP（実用最小限の製品）の定義。
第3層：構造層 (Structure)
要件を整理し、システムとしての「論理的なつながり」を設計します。
- 情報アーキテクチャ（IA）： 情報をどのようにカテゴリー分けし、整理するか。
- インタラクションデザイン： ユーザーが操作したとき、システムがどう反応し、次にどこへ遷移するか。
- 主な成果物： サイトマップ、概念モデル、状態遷移図。
第4層：骨格層 (Skeleton)
構造を実際の画面レイアウトに落とし込み、認知負荷を最小化します。
- インターフェースデザイン： ボタンやテキストの具体的な配置。
- ナビゲーション： ユーザーが迷わず目的地に辿り着けるための導線。
- 主な成果物： ワイヤーフレーム（Lo-Fiプロトタイプ）。
第5層：表面層 (Surface)
ユーザーが触れる「最終的なビジュアル」を完成させます。
- ビジュアルデザイン： 配色、フォント、アイコン、画像の質感、アニメーション。
- 一貫性： ブランドイメージを視覚的に統一し、信頼感を醸成する。
- 主な成果物： デザインカンプ（Hi-Fiプロトタイプ）、スタイルガイド、デザインシステム。
3. このモデルの「本質」：二面性と波及効果
機能としての側面 vs 情報としての側面
このモデルは、プロダクトの性質によって重視すべきポイントが分かれます。
- Webアプリ（機能重視）： 「いかにスムーズにタスクを完了させるか（UI/操作性）」が構造・骨格の肝になります。
- Webサイト（情報重視）： 「いかに早く正しい情報に辿り着けるか（IA/情報設計）」が肝になります。
波及効果 (Ripple Effect)
下の階層での決定は、上の階層に強力な影響を与えます。
戦略（最下層）が変われば、すべての機能（要件）も、その配置（骨格）も、色（表面）も変わります。
しかし、表面の色を変えても、戦略や構造には影響しません。
開発後半で「ボタンの配置」に迷った場合、実は「構造（情報の整理）」や「戦略（誰に向けたものか）」に立ち戻る必要があるケースが非常に多いです。
4. 現場で使えるセルフチェックリスト
各フェーズで以下の問いに答えられるか確認しましょう。
- 戦略： この機能は、誰のどんな課題を解決し、どうビジネスに貢献するか？
- 要件： ユーザーが目的を達成するのに、この機能は「必須」か？（余計なものはないか？）
- 構造： ユーザーは「今どこにいて、次どこへ行けばいいか」を予測できるか？
- 骨格： 重要なボタンや情報は、一目で視認できる場所に配置されているか？
- 表面： 色やフォントは、ターゲットにとって信頼性が高く、アクセシブルか？
まとめ
UXの5段階モデルを意識することは、単にデザインの工程を分けることではありません。「なぜその形になったのか」という根拠を、ビジネス視点から視覚的細部まで一貫させることです。
エンジニア、PM、デザイナーがこの共通言語を持つことで、無駄な手戻りを防ぎ、ユーザーに真に価値を届けるプロダクトを作ることができます。