「UXが重要であることは理解している。しかし、実務に落とす際に“どこから考え、どう設計すればよいのか”が曖昧なままになっている」
プロダクト開発やWeb制作の現場で、こうした悩みを抱えている担当者は少なくありません。

UXという言葉はすでに一般化しましたが、概念として広すぎるがゆえに、判断基準や設計プロセスが属人的になりやすいのも事実です。そこで本記事では、UX設計を体系的に整理するための代表的なフレームワークである「UXの5段階モデル」について、ビジネスとの関係性を軸に解説します。

単なるUI改善や見た目の最適化にとどまらず、「なぜこのプロダクトを作るのか」「どのように価値へ変換するのか」を一貫して考えるための思考モデルとして、UXの5段階を捉え直していきます。

目次

UXの5段階モデルとは何か

UXの5段階モデルとは、ユーザー体験（UX）を構成する要素を5つのレイヤーに分解し、抽象から具体へ段階的に設計していく考え方です。このモデルは、UXデザインの分野において長年参照され続けている基本フレームであり、Webサービス・アプリ・業務システムなど、領域を問わず活用されています。

提唱者は、アメリカのUXデザイナーである Jesse James Garrett。彼が2002年に著した The Elements of User Experience の中で示された概念図が、この5段階モデルの原型です。

当時はまだ「UX」という言葉自体が一般的ではありませんでしたが、
・ユーザー体験は偶発的に生まれるものではない
・設計可能な構造を持つ
という考え方は、現在のプロダクト開発にもそのまま通用します。

UXを5つの段階で捉える理由

UXとは、単に「使いやすさ」や「心地よさ」を指す言葉ではありません。ユーザーがプロダクトと接触し、利用し、評価し、感情を動かされるまでの一連の体験すべてがUXです。

たとえば以下のような要素も、すべてUXに含まれます。

• 必要な情報にすぐ辿り着けたか

• 操作中に迷いや不安を感じなかったか

• 期待していた価値を得られたか

• 使い終わったあと、再利用したいと感じたか

これらはUIデザイン単体ではなく、戦略・設計・構造・視覚表現が積み重なった結果として生まれます。UXの5段階モデルは、その積み重なりを分解し、設計可能な単位に整理するためのフレームです。

UXの5段階モデル｜全体像

UXの5段階モデルは、以下の5つのレイヤーで構成されます。

1. 戦略（Strategy）
   ユーザーの課題と、事業として達成したい目的を定義する段階

2. 要件（Scope）
   価値提供のために必要な機能・コンテンツを整理する段階

3. 構造（Structure）
   情報や機能をどのような全体構造で提供するかを設計する段階

4. 骨格（Skeleton）
   画面単位での情報配置や導線を設計する段階

5. 表層（Surface）
   色・文字・ビジュアルなど、視覚的に認識されるデザインを作る段階

重要なのは、この5段階が独立していないという点です。
下位の段階は、常に上位段階の判断を前提として成り立ちます。

ビジネスにおいてUXの5段階モデルが有効な理由

ビジネスは本質的に、「誰かの問題を発見し、それを解決することで対価を得る仕組み」です。UXの5段階モデルは、このビジネス構造をそのまま設計プロセスに落とし込んだフレームだと言えます。

• 戦略：誰の、どんな問題を扱うのか

• 要件〜表層：その問題を、どのような体験として解決するのか

問題設定が曖昧なまま機能追加やUI改善を行っても、
「それっぽく整っているが、選ばれないプロダクト」になりがちです。

UXの5段階モデルは、意思決定を感覚や好みではなく、構造で支えるための装置として機能します。

UXの5段階モデルを導入する3つの実務的メリット

1. UI設計を「装飾」ではなく「問題解決」として扱える

表層のデザインだけを切り出して考えると、UIはどうしても見た目の議論に寄りがちです。しかし5段階モデルを前提にすると、UIは常に「戦略の結果」として位置づけられます。

• なぜこの色なのか

• なぜこの情報がここにあるのか

これらを説明可能な状態で設計できるようになります。

2. 課題の発生箇所を特定しやすくなる

UXの問題は、「使いにくい」という一言で片付けられがちですが、実際には原因はさまざまです。

• 要件自体がユーザーとズレているのか

• 構造が複雑すぎるのか

• 骨格設計で情報の優先度を誤っているのか

5段階で整理されていれば、どのレイヤーで判断を誤ったかを切り分けて検討できます。

3. チーム内で共通言語が生まれる

UXの5段階モデルは、ディレクター・デザイナー・エンジニア・ビジネスサイドが同じ構造で議論するための共通フレームにもなります。
「それは戦略の話か、UIの話か」
この切り分けができるだけでも、議論の質は大きく変わります。

各段階の役割と設計のポイント

戦略｜誰の、どんな課題を扱うのか

戦略段階では、以下を明確にします。

• 想定するユーザーは誰か

• そのユーザーは、どんな文脈で、どんな不満や欲求を抱えているのか

• その課題を解決することが、事業として成立するのか

ここでの判断が曖昧なまま進むと、後工程でどれだけUIを磨いても成果につながりません。

要件｜何を提供すれば価値になるのか

戦略を実現するために必要な機能・コンテンツを定義します。重要なのは「作れるか」ではなく、「体験として必要か」という視点です。
ユーザーの行動や感情を時系列で捉え、どの瞬間に、どんな支援が必要かを考えることで、要件が具体化します。

構造｜どう整理し、どう辿らせるか

要件として洗い出した情報や機能を、ユーザーが迷わず理解できる構造に再編します。
ここでは情報アーキテクチャの考え方が重要になります。構造設計は、UI以前に「理解のしやすさ」を決定づける工程です。

骨格｜画面単位での設計

ナビゲーション、レイアウト、情報の優先順位など、画面上の骨組みを設計する段階です。ワイヤーフレームやプロトタイプを用い、実際に「目的を達成できるか」を検証しながら精度を高めていきます。

表層｜視覚としてどう伝えるか

最終的にユーザーが認識するビジュアルを設計します。色・文字・余白・写真・動きなど、すべてが体験の印象を左右します。ただし表層は「仕上げ」であって「起点」ではありません。戦略から積み上げた判断を、視覚として翻訳する工程です。

UXの5段階モデルは万能ではない

UXの5段階モデルは、あくまで思考のフレームです。この通りに進めれば必ず成功する、という魔法の手法ではありません。

しかし、

• なぜ失敗したのかを説明できる

• 次に何を改善すべきかを構造的に考えられる

という点において、ビジネスの再現性を高める強力な武器になります。
戦略なきUI設計は、偶然に期待する行為に近い。UXの5段階モデルは、その偶然を減らすための設計思想だと捉えるとよいでしょう。

まとめ

UXの5段階モデルは、UIデザインを「成果につながる設計」に引き上げるための基盤です。

見た目を整える前に、価値の定義と構造設計に十分な時間をかけること。
それが、選ばれるプロダクトを生む最短ルートになります。

FAKE BLOGでは今後も、「感覚論に寄らないデザイン思考」をテーマに、
実務に直結するUX・UIの考え方を整理していきます。