こんにちは、株式会社NOROSHIの公式ブログ編集部です！

「UXデザインの重要性は理解しているけれど、プロジェクトの手順が複雑で手戻りが多い...」
「新規プロダクトの設計で、どこから着手すべきか迷ってしまう...」

このような課題を持ちの方も多いのではないでしょうか。

UXの設計プロセスは、知識や経験によってバラつきが生じやすく、体系的に進めることが難しいと感じる方も多いかもしれません。「UXの5段階モデル」は、プロダクト開発の道筋を示す有効なフレームワークの一つとして活用されています。

この記事では、UXデザインの全体像を体系的に捉える「UXの5段階モデル」について、各段階の目的や具体的なアプローチ手法を解説していきます。

UXの5段階モデルとは？

このモデルは、著名なUXデザイナーであるジェシー・ジェームズ・ギャレット氏によって提唱されたモデルで、著書である『Elements of User Experience』の中で紹介されている概念です。

ギャレット氏の「5段階モデル」は、UX設計を5つのレイヤーに分解し、下から上へ向かって、抽象度の高い概念から具体的な実体へと段階的に進んでいく構造になっています。

• 表層段階：ビジュアルデザインの作成

• 骨格段階：インターフェイスの設計

• 構造段階：情報設計やインタラクションデザイン

• 要件段階：求められる機能やコンテンツの要件を定義

• 戦略段階：プロジェクトの目的やユーザーニーズの定義

5つのレイヤーを下から段階的に進めていくことで、ビジネスの成果やユーザーのニーズを捉えながら、手戻りを最小限に抑え、一貫したユーザー体験を実現することができます。

※参考：『The Elements of User Experience ~5段階モデルで考えるUXデザイン』（Jesse James Garrett）

UXの5段階モデルを活用するメリット

① ビジネスインパクトとユーザーニーズを両立するプロダクト開発

UXの「5段階モデル」では、全ての土台となる「戦略」フェーズで、ビジネスの目標とユーザーのニーズを明確にします。

この目的が全ての工程の土台となるため、要件定義や情報設計、デザインの際に判断の軸がブレなくなります。これにより、ビジネスとユーザー、双方にとって価値のあるプロダクトを、一貫性を持って開発することができます。

② チーム全体で共通認識を作る

各段階のアウトプット（ペルソナ、要件定義書、サイトマップなど）がそのまま次の段階へのインプットとなるため、担当が異なるメンバーも設計のプロセスや目的をスムーズに把握できます。

例えばUIデザイナーであれば、単に「この画面のデザインを作る」だけでなく、「戦略で決まったユーザー課題を解決するために、この設計が必要なのだ」という背景まで理解して作業に取り組むことができます。

目的が共有されることで、指示待ちではなく、全員が目的に沿った最適な改善提案を行えるようになりチーム全体がひとつの目標に向かって開発を推進していくことができます。

③ 改善点を発見しやすくなる

プロダクトに問題があるとき、「どこを直せばいいのか」が曖昧なままでは、的外れな改善に時間を費やしてしまいます。

UXの5段階モデルを活用すると、開発プロセスが明確に区切られているため、どの段階で問題が起きているのかを特定しやすくなるでしょう。

たとえば、ユーザーが求めている情報にたどり着けない場合、骨格段階のナビゲーション設計に問題があると判断できます。

そもそもユーザーが求めている情報とプロダクトのコンテンツにずれがあるなら、要件段階まで立ち戻って再設計すると判断できるでしょう。

ボトルネックがどこなのか素早く見極められるため、無駄な手戻りを減らし、効率的な改善が可能になります。

④ 社内の役割がはっきりする

プロダクト開発では、デザイナーやエンジニア、ディレクターなど多くのメンバーが関わります。

UXの5段階モデルを取り入れることで、各段階における必要なアウトプットと担当領域が明確になります。

結果的に、誰がどこで手を動かす必要があるのかがはっきりするため、メンバー同士の認識のずれが減り、スムーズな連携が生まれます。

結果として、プロジェクト全体の生産性が向上し、一貫性のあるプロダクトを作り上げることができるでしょう。

UXの5段階モデルにおける5つの段階

UXの5段階モデルは、「抽象」から「具体」へと進むプロセスを、5つのレイヤーに分けて示しています。ここでは、各段階での目的やアプローチ手法を、下のレイヤーから順に解説します。

1. 戦略

「戦略」は、5段階モデルの最も基礎となる土台のフェーズです。ここでいう「戦略」とは、「何のためにそのサービスやプロダクトを作るのか？」という根本的な目的と方向性を定義することです。

ビジネスとしての目的と、ユーザーのニーズという、2つの方向性から戦略を練り、ビジネスとユーザー双方にとっての成功の定義を明確にし、提供すべき価値を定めましょう。この戦略段階が曖昧だと、その後のすべての設計工程がブレてしまうため、慎重に策定する必要があります。

戦略を立てるための具体的なアプローチには、次のようなものがあります。プロジェクトの体制やフェーズに合わせて、最適なものを選んで実行しましょう。

▪︎現状分析と課題特定
企業のビジョン、事業目標、収益モデルを理解し、プロダクトが解決すべきビジネス上の課題を特定します。
ex )
- ステークホルダーへのヒアリング
- エグゼクティブインタビュー
- ビジネスモデルキャンバス
- KPIツリーの整理

▪︎市場・競合分析
市場環境や競合製品・類似サービスの強み・弱みを調査し、自社が狙うべき独自のポジションを明確にします。
ex )
- 競合UX/UI調査
- 3C分析、SWOT分析

▪︎ユーザーリサーチの実施
ターゲットユーザーの属性、行動、思考、そしてまだ解決されていないニーズ（ペインポイント）を、定性的・定量的な両面から調査します。
ex )
- ユーザーインタビュー
- アクセス解析

📖 参考記事 
ユーザーインタビューとは？目的と方法、実施における注意点まで徹底解説！

ユーザー調査とは？4つの種類と8つの手法、3つの注意点を解説！

▪︎ターゲットユーザーの解像度をあげる
リサーチ結果を分析し、チーム内で共通認識を持てる具体的なターゲットユーザー像（ペルソナ）を定義します。
ex )
- ペルソナの設定

2. 要件

「要件」は、「戦略」フェーズで定義したプロダクトの目的（誰に、どのような価値を提供するか）を実現するために、必要な機能やコンテンツの「範囲」と「仕様」を明確にするフェーズです。

例えば、勤怠管理SaaSシステムを開発するのであれば、「出退勤時刻を打刻できる機能」「休暇や残業の申請・修正依頼ができるワークフロー機能」など、どのような機能が必要なのかを洗い出します。

この段階は、設計プロセスにおいて「やりたいこと」と「やるべきこと」を線引きする役割も果たします。「あれもこれも」と機能を追加してしまうと、戦略で定めたコアな価値提供がブレたり、開発コストが膨らんだりします。そのため、「要件」フェーズでは、「戦略」フェーズで定めた内容に基づき、ユーザーとビジネス、双方の成功に不可欠な要素だけを選定することがゴールとなります。

このフェーズでの主なアウトプットは、要件定義書・仕様書を作成することです。要件を洗い出すにあたり、有用なフレームワークをいくつか紹介します。

▪︎ カスタマージャーニーマップ
ユーザーの一連の体験を、各接点での行動・思考・感情などと合わせて時系列順に整理することで、必要な機能が見えてきます。

▪︎ ストーリーボード
ユーザーが特定の状況でどのように製品を利用するかを、イラストや漫画のように時系列で描きます。ビジュアルでユーザーの行動を可視化できるため、チーム内で利用イメージを共有しやすくなります。

▪︎ サービスブループリント
ユーザー体験に加え、その裏側で動く業務（スタッフの動きやシステム）までを可視化します。ユーザーだけでなく、サービス全体の流れや関係性を整理することができます。

📖 参考記事 
サービスブループリントとは？目的や作り方、実践的な活用方法について事例を交えて解説

ストーリーボードとは？作成ツールやアプリ、活用事例を紹介！ 

3. 構造

「構造」は、「要件」フェーズで定義された機能やコンテンツを、どのように配置・整理し、ユーザーに提示するか、を設計するフェーズです。

全体的なナビゲーションと情報分類の設計図を作成し、Webサイトであればサイトマップ、アプリであれば画面遷移図などが主なアウトプットになります。

このフェーズは、主に「情報アーキテクチャ」と「インタラクションデザイン」という2つの側面からアプローチします。

▪︎ 情報アーキテクチャ（IA）
ユーザーが求める情報へ迷わずたどり着けるよう、コンテンツや機能の配置・分類のルールを設計します。
ex) 
- カードソーティング
- LATCH
- ナビゲーション設計

▪︎インタラクションデザイン
ユーザーが目的をスムーズに達成できるよう、「どう操作したら」「どういう反応が返ってくるか」という一連の体験の流れを設計します。
ex) 
- メンタルモデル

※関連記事：インタラクションデザインとは？UI/UXデザインとの関係性や考え方を解説！

4. 骨格

「骨格」は、「構造」フェーズで設計されたサイトマップや画面遷移図を、ユーザーが操作する具体的な画面のレイアウトとして落とし込むフェーズです。

まだ見た目（ビジュアルデザイン）は考慮せず、「機能の配置」と「使いやすさ（ユーザビリティ）」に特化して設計を進めましょう。ここで作成されるのが、ワイヤーフレームです。

ワイヤーフレームは、使いやすいUIを作るための重要な設計図です。しかし、ただ機能を配置しただけでは、時代遅れで使いにくいサービスになってしまいます。公開されているデザインライブラリで一般的なUIパターンを参考にしたり、トレンドのUIを調査したりしながら作成を進めましょう。

ワイヤーフレームを作成できたら、「表層」フェーズに進む前に、設計に問題がないかを確認します。そのための代表的な手法を紹介します。

▪︎ プロトタイピング
ワイヤーフレームに画面遷移などの動きをつけ、実際に操作できる「試作品（プロトタイプ）」を作成します。静的な設計図だけでは分からない、画面間のつながりや操作感を具体的に確認できます。

▪︎ ユーザビリティテスト
作成したプロトタイプを実際のユーザーに操作してもらい、その様子を観察する手法です。「ボタンの位置は分かりやすいか」「迷わず目的を達成できるか」といったユーザビリティ上の課題を発見することができます。

📖 参考記事 
ユーザビリティテストとは？評価手順や他の評価方法との違いを解説。

5. 表層

「表層」は、UXの5段階モデルにおける最後のフェーズであり、ユーザーが実際に目で見て触れる最終的なプロダクトの見た目（UIデザイン）を決定します。

これまでの4段階（戦略・要件・構造・骨格）で築いた論理的な土台の上に、視覚的な魅力を加えていくプロセスです。ユーザビリティを確保しつつ、ユーザーが「使いたい」と思えるような魅力と、ブランドとしての一貫性をデザインで表現する必要があります。

▪︎ スタイルガイド
デザインの基本ルールをまとめた指針を作成します。これを土台とすることで、プロダクト全体で一貫性のあるUIを効率的に作ることができます。
ex) 
- カラー
- タイポグラフィ
- アイコン
- レイアウト
- アニメーション

▪︎ UIコンポーネント
スタイルガイドのルールに基づき、「ボタン」「フォーム」「モーダル」など、繰り返し利用できるUIパーツ（コンポーネント）を設計・作成します。

📖 参考記事 
デザインシステムとは？作り方や育て方など、導入のコツを解説！

まとめ

本記事では、UXデザインの全体像を体系的に整理した「UXの5段階モデル」について、各段階のアプローチと実務で活用するメリットを解説しました。

このモデルを活用することで、プロダクト開発をより効率的、かつ目的に沿って進められるようになります。ただし、必ずしもこの順番通りに進める必要はありません。

プロダクトの状況によっては、前の段階に戻って設計を見直すなど、柔軟に対応していくことが重要です。