UXデザインの五段階モデルとは？ 10分でわかりやすく解説

UnsplashのAdrien Tutinが撮影した写真  

UXデザインの五段階モデルは、ユーザー体験を「戦略」「要件」「構造」「骨格」「表層」の5層に分け、抽象度の高い目的設定から具体的な画面デザインまでを順に整理する考え方です。見た目から先に作るのではなく、誰に、どの価値を、どの範囲で、どの流れで提供するのかを段階的に決めます。

このモデルを使うと、デザイン判断の根拠を説明しやすくなります。ユーザー調査、要件整理、情報設計、ワイヤーフレーム、ビジュアルデザインを切り分けて進めるため、関係者間の認識違いや後工程の手戻りを減らしやすくなります。

UXデザインの五段階モデルとは？

UXデザインの五段階モデルとは、ユーザーエクスペリエンスを設計する際に、検討すべき要素を5つの層に分けるフレームワークです。上位層では目的や対象ユーザーを定め、下位層では画面構造や視覚表現へ具体化します。

この考え方は、Webサイト、アプリ、業務システム、サービス改善などに応用できます。ただし、5つの段階を形式的に埋めることが目的ではありません。各段階で何を決め、どの前提を次の段階へ渡すのかを明確にすることが要点です。

UXデザインの五段階モデルの概要

UXデザインの五段階モデルは、一般に次の5段階で整理されます。

上位層ほど抽象度が高く、下位層ほど具体的な画面や表現に近づきます。戦略が曖昧なまま表層を作ると、見た目は整っていても、ユーザー課題や事業目的から外れた設計になりやすくなります。

UXデザインの五段階モデルの目的

UXデザインの五段階モデルの目的は、ユーザー中心の設計を再現しやすい手順に分解することです。主な目的は次のとおりです。

• ユーザーの行動、心理、課題を調査やデータに基づいて把握する。
• ビジネス上の目的とユーザー価値を分けて整理する。
• 機能や画面を作る前に、対応範囲と優先順位を決める。
• 情報構造、導線、画面配置、視覚表現を段階的に具体化する。
• 関係者が同じ前提で議論できる共通言語を持つ。

感覚的に「良さそうなUI」を作るのではなく、なぜその機能が必要なのか、なぜその導線にするのか、なぜその配置にするのかを説明できる状態にするためのモデルです。

UXデザインの五段階モデルの意義

現代のサービスやシステムでは、機能があるだけでは継続利用につながりません。ユーザーが迷わず目的を達成できること、必要な情報にたどり着けること、利用中の負担が少ないことが評価に影響します。

UXデザインの五段階モデルを使うと、デザイナー、エンジニア、企画担当者、事業責任者が、現在どの層の議論をしているのかを共有しやすくなります。例えば、色や見た目の議論をしているつもりでも、実際には要件や情報構造に問題がある場合があります。段階を分けて見ることで、修正すべき層を見誤りにくくなります。

UXデザインの五段階モデルを理解するメリット

UXデザインの五段階モデルを理解すると、設計や改善の議論を分解しやすくなります。代表的なメリットは次のとおりです。

特に、既存サービスの改善では「画面が悪い」と見えていた問題が、実際には要件や構造の問題だったということがあります。五段階モデルは、問題の発生箇所を切り分ける補助線になります。

UXデザインの五段階モデルの各段階

UXデザインの五段階モデルは、ユーザー体験を段階的に具体化するための考え方です。各段階の役割を理解すると、どの時点で何を決めるべきかが見えやすくなります。

第1段階：戦略（Strategy）

戦略段階では、プロジェクトの目的、対象ユーザー、解決すべき課題、成功条件を定義します。ビジネス側の目的とユーザー側の目的を分けて整理し、両者の接点を見つけます。

主な活動例は次のとおりです。

• ユーザーインタビュー、アンケート、ログ分析などのユーザーリサーチを行う。
• 対象ユーザー像や利用文脈を整理する。
• 競合サービスや代替手段を分析する。
• ビジネスゴール、UXゴール、評価指標を設定する。

この段階が曖昧だと、後続の要件や画面設計が場当たり的になります。誰の何を改善するのかを言語化し、関係者で合意することが出発点です。

第2段階：要件（Scope）

要件段階では、戦略で定義した目的をもとに、プロジェクトで扱う機能やコンテンツの範囲を決めます。やることだけでなく、今回は扱わないことも明確にします。

主な活動例は次のとおりです。

• ユーザーが達成したいタスクに基づき、機能要件を定義する。
• 画面やページに必要な情報、コンテンツ、入力項目を洗い出す。
• リリース段階ごとの対応範囲と優先順位を決める。
• スコープ外とする要望や制約条件を明記する。

要件段階の判断が曖昧だと、後から機能追加が続き、スケジュールや品質に影響します。ユーザー価値、事業上の優先度、実装コストを見比べながら、対応範囲を決めます。

第3段階：構造（Structure）

構造段階では、ユーザーがどの順番で情報にアクセスし、どの流れでタスクを完了するかを設計します。情報の階層、画面遷移、ナビゲーション、操作フローが主な対象です。

主な活動例は次のとおりです。

• 画面遷移図やユーザーフローを作成する。
• 情報の階層構造、カテゴリー、グループを設計する。
• グローバルナビゲーション、ローカルナビゲーション、検索導線を検討する。
• 主要なユースケースごとに利用シナリオを作成する。

この段階では、「ユーザーが目的の情報にたどり着けるか」「迷わずタスクを完了できるか」を確認します。画面の見た目に入る前に、体験の流れを検証しておく必要があります。

第4段階：骨格（Skeleton）

骨格段階では、構造段階で設計した流れを、画面レイアウトとして具体化します。どこに何の要素を配置するか、ボタンやフォームをどう見せるかを検討します。

主な活動例は次のとおりです。

• ワイヤーフレームを作成する。
• ボタン、フォーム、リンク、ナビゲーションなどの配置を決める。
• レイアウトパターンやコンポーネントを整理する。
• 簡易プロトタイプを使い、操作の分かりやすさを確認する。

骨格段階では、色や装飾よりも、情報の優先度、操作順序、視線の流れを確認します。この時点でユーザーテストを行うと、表層まで作り込む前に問題を見つけやすくなります。

第5段階：表層（Surface）

表層段階では、骨格段階で定めたレイアウトに、色、文字、アイコン、画像、余白、アニメーションなどの視覚要素を加えます。ブランドらしさを反映しながら、読みやすさや操作しやすさを損なわないように仕上げます。

主な活動例は次のとおりです。

• ブランドガイドラインに沿って視覚デザインを作成する。
• 色彩、タイポグラフィ、アイコン、画像素材を選定する。
• ホバー、エラー表示、完了表示などのマイクロインタラクションを設計する。
• デザインデータを整理し、開発チームへ引き継ぐ。

視覚デザインは最後の装飾ではありません。情報の優先度、操作の安心感、ブランド認知に影響します。ただし、表層の改善だけで、戦略・要件・構造の問題を解決することはできません。

UXデザインの五段階モデルの実践方法

UXデザインの五段階モデルは、概念として理解するだけでは不十分です。実務では、プロジェクトの規模や制約に合わせて簡略化しながらも、戦略から表層までの前提をつなげて使います。

五段階モデルを使ったUXデザインプロセスの進め方

五段階モデルを使う場合、代表的には次のような流れで進めます。

1. プロジェクトの目的、背景、成功指標を整理し、関係者で合意する。
2. ユーザーリサーチを行い、ユーザーのニーズ、課題、利用文脈を把握する。
3. ペルソナやカスタマージャーニーを作成し、対象ユーザー像と行動を具体化する。
4. 競合サービスや既存サービスを調査し、差別化の方向性を検討する。
5. 機能要件、コンテンツ要件、情報構造を定義し、実装範囲と優先度を決める。
6. 画面遷移、ユーザーフロー、ワイヤーフレームを作成する。
7. プロトタイプを作成し、ユーザーテストや関係者レビューを行う。
8. フィードバックを反映し、デザインと仕様を確定する。

この流れは、必ず一方向に進むものではありません。ユーザーテストで構造の問題が見つかれば構造段階へ戻り、要件の不足が見つかれば要件段階へ戻ります。

各段階で押さえるべきポイント

各段階では、判断の観点が異なります。次の表は、段階ごとに確認したいポイントを整理したものです。

段階ごとの論点を分けると、「画面が分かりにくい」という指摘が、実際には情報構造の問題なのか、配置の問題なのか、視覚表現の問題なのかを判断しやすくなります。

段階間の連携と反復作業

五段階モデルは、上から下へ一度だけ進める手順ではありません。ユーザーテストや関係者レビューで新しい事実が分かった場合は、前の段階に戻って前提を見直します。

例えば、プロトタイプのテストでユーザーが目的の情報にたどり着けなかった場合、ボタンの色や文言だけの問題とは限りません。情報構造、ナビゲーション、要件の優先順位、対象ユーザーの理解に問題がある可能性があります。

原因をたどる際は、「どの段階の前提が崩れているのか」を確認します。この見方を持つことで、表面的な修正を繰り返すのではなく、問題が発生している層に戻って改善できます。

五段階モデルを活用した改善例

五段階モデルは、新規サービスだけでなく、既存サイトや社内業務システムの改善にも使えます。例えば、問い合わせ数が多いWebサイトでは、表層のデザインを直す前に、ユーザーがどの情報を探しているのか、どのページで迷っているのかを確認します。

そのうえで、戦略段階では改善対象と成果指標を決め、要件段階では必要なコンテンツと不要なコンテンツを整理します。構造段階ではナビゲーションとページ構成を見直し、骨格段階では情報の配置を検証します。最後に表層段階で、読みやすさ、視認性、操作時の分かりやすさを整えます。

社内業務システムでも同じです。入力ミスや問い合わせが多い場合、画面をきれいにするだけでは改善が限定的です。どの職種が、どの業務で、どの情報を使い、どこで迷っているのかを確認し、要件、構造、骨格の順に見直すことで、作業時間や教育負荷を減らしやすくなります。

UXデザインの五段階モデルを使うときの注意点

UXデザインの五段階モデルは便利な整理方法ですが、使い方を誤ると形式だけが残ります。実務で使う際は、段階を埋めることではなく、判断根拠を残すことに重点を置きます。

順番を守るだけでは不十分

戦略、要件、構造、骨格、表層の順に資料を作っても、ユーザーの実態が反映されていなければ意味は薄くなります。ユーザー調査、利用データ、問い合わせ履歴、営業やサポートの知見などを使い、前提を確認します。

小規模案件では簡略化する

小規模な改善で、すべての段階を重いプロセスとして実施すると、作業負担が大きくなります。例えば、1ページの改善であれば、戦略と要件を短いメモで整理し、構造と骨格を簡易ワイヤーフレームで確認する形でも構いません。

大切なのは、目的、対象ユーザー、対応範囲、情報構造、画面配置、視覚表現の関係を切らさないことです。案件規模に合わせて軽量化しても、各段階の判断は残します。

下流工程だけでUXを改善しようとしない

UX改善という言葉が、色や余白、ボタン配置だけの調整として扱われることがあります。しかし、ユーザーが目的を達成できない原因が、そもそもの要件不足や情報構造の不整合にある場合、表層だけを整えても改善は限定的です。

画面の見た目を直しても効果が出ない場合は、骨格、構造、要件、戦略の順に戻って確認します。五段階モデルは、この戻り方を整理するためにも使えます。

まとめ

UXデザインの五段階モデルは、戦略、要件、構造、骨格、表層の5段階でユーザー体験を設計するフレームワークです。目的や対象ユーザーを定義し、必要な機能やコンテンツを整理し、情報構造と画面配置を設計し、最後に視覚表現を整えます。

このモデルを使うと、デザイン判断を説明しやすくなり、関係者間の認識違いや後工程の手戻りを減らしやすくなります。一方で、段階を順に埋めるだけでは成果につながりません。ユーザー調査、データ、テスト結果をもとに、必要に応じて前の段階へ戻る反復が必要です。

新規サービス、既存サイト、業務システムのいずれでも、UX改善では「見た目」だけでなく、目的、要件、情報構造、操作導線、視覚表現を一体で扱う必要があります。UXデザインの五段階モデルは、その検討範囲を整理するための実務的な枠組みです。

FAQ