【2025年版】ギャレットのUX5段階モデルとは？戦略からビジュアルまで失敗しない進め方

UI/UXを設計する際に、「どこから手をつければいいのか分からない」と感じたことはないでしょうか。また、UX設計の途中で修正が発生して途方に暮れた経験のある人もいるでしょう。

UX設計を失敗せずに進めるには、ギャレット氏が提唱した「UX5段階モデル」が効果的です。

UX5段階モデルとは、戦略から具体的なビジュアル設計までを段階的に整理するためのフレームワークで、一貫したUX設計が実現できます。

本記事では、UX5段階モデルの概要と各層の特徴、導入のメリットや活用ポイントについて解説します。UX設計にお悩みの方は、ぜひ最後までお読みください。

UX5段階モデルとは

2002年にジェシー・ジェームズ・ギャレット氏が著書The Elements of User Experienceで提唱したUX5段階モデルとは、Webサイトやソフトウェア開発をはじめ、幅広い設計に応用できるフレームワークです。

チーム全体で共通認識を持ちながら進められるので、優れたUXを設計する際に効果的です。

ユーザー体験を5層に分けて段階的に進めるため、大きな見逃しや設計のズレを防止できます。2002年に提唱された考え方ですが、現在でも多くの現場で活用されています。

UX5段階モデルの各段階

UX5段階モデルはその名のとおり5つの階層に分かれています。ここでは、それぞれ段階について解説します。

戦略・Strategy

戦略（Strategy）はプロジェクトを作る理由を明確にする段階です。ユーザーの抱える課題を整理し、売上アップや認知拡大などのビジネスゴールと結びつけます。UX設計の方向性を決める土台となる部分です。

要件・Scope

要件（Scope）では戦略で決めた目的をもとに提供するものを具体化します。ユーザーに届ける機能やコンテンツを洗い出し、優先順位をつけて実装範囲を整理します。迷走や手戻りを防ぐには、取捨選択が重要です。

構造・Structure

構造（Structure）は要件で決めた機能やコンテンツの並べ方やつなぎ方を設計します。ユーザーが迷わず目的にたどり着けるよう、画面遷移や動線の流れを組み立てます。

骨格・Skeleton

骨格（Skeleton）は構造を元にどこに何を置くかを具体化するステップです。ワイヤーフレームの作成やボタン、入力欄の設計などが該当します。情報の優先順位や視認性、使いやすさを考えて形にしましょう。

表層・Surface

表層（Surface）は一番表に見えるビジュアルデザインの領域です。文字のフォントや配置、ロゴデザインなどユーザーが最初に目にする部分を指します。見た目を整えるだけでなく、ここでも使いやすさを意識しましょう。

UX5段階モデルが必要な理由

体験価値をを高めるためには、見た目を整えるだけでは不十分です。ユーザーにとって使いやすく満足度の高い体験を提供するには、プロジェクトの目的やユーザーの課題を正しく理解し、それに基づいた設計プロセスが求められます。

UX5段階モデルは、ユーザーの課題理解から適切な設計まで一気通貫で回避するための枠組みです。戦略・要件・構造・骨格・表層という5つの層を順序立てて進めるので、設計の軸がぶれずに進行できます。

各段階での検討ポイントが明確になるため、感覚や個人の経験に頼らずに誰が見ても理解できる論理的なプロセスを構築できるのが強みです。

迷わずUX設計を組み立てられることが、UX5段階モデルが必要とされている理由です。

UX5段階モデルを活用するメリット

UX5段階モデルを活用すると、どんな効果が得られるのでしょうか。ここでは、4つのメリットを紹介します。

社内チームの役割と方向性の明確化

システム開発やWebサイト制作などUX設計が関わるプロジェクトには、企画・開発・デザイン・運用など多くのメンバーが関わります。

チーム内の意思疎通ができていないと、工程ごとの責任範囲が曖昧になり、認識のズレや手戻りにつながります。

5段階のプロセスに沿って進めると、戦略の意図を共有しながら設計を進められるのが利点です。部署や担当者で意図がぶれることなく、チーム全体で同じゴールを目指せます。

開発プロセスでの問題の特定が容易になる

「ユーザーの離脱が多い」「特定の操作でつまずく」などの課題が生じた場合、見た目や使い方に原因があると思われがちです。しかし、実際は設計プロセスの問題であることも少なくありません。

5段階モデルに沿って設計を進めると、プロジェクトの構造が段階ごとに整理されているため、問題の原因を分析しやすくなるのがメリットです。

場合によっては「戦略の段階に立ち返ってユーザー像を見直す」「構造の設計に無理がないか確認する」など、デザイン以外の改善にも取り組めます。

事業ゴールにぴったり合致するUXをデザインできる

UX5段階モデルでは、最初にビジネスゴールを定めたうえでUX設計を進めます。目指す成果を最初に明確にするため、ユーザーの満足度と事業成果を両立した設計が可能です。

たとえば、売上を伸ばすことがゴールなら、購入導線の最適化やCTAの設計に重点を置くべきでしょう。ブランドの信頼性向上が目的であれば、統一感のあるデザインや読みやすいコンテンツ設計が重要です。

戦略層で定めた目的を軸に、要件・構造・骨格・表層と順番に積み上げるので、プロジェクト全体の判断基準がずれにくいのがメリットです。その結果、コンバージョン率の向上やブランドの印象強化など求める成果が期待できます。

ムダのない効率的なUX設計が実現できる

UX設計のプロセスにおいて、完成間近の段階で大幅な変更が発生するケースは珍しくありません。これを避けるには、UX5段階モデルを使用し各工程でやるべきことを明確にしておくことが不可欠です。

戦略段階でプロジェクトを作る理由を明確にし、その後段階的に積み上げることでムダな修正を省き効率的に設計できる点もUX5段階モデルの強みです。

UX5段階モデルをデジタルデバイスで活かす方法

スマートフォンやタブレットが主流となった今、UX5段階モデルの各層でモバイル特有の考慮事項を組み込む必要があります。ここでは、各段階でモバイル環境を意識した設計⽅法を解説します。

戦略(Strategy)：モバイルコンテキストを踏まえた⽬的設定

モバイル環境では、ユーザーの利⽤状況がデスクトップとは⼤きく異なります。

• 利⽤シーン: 移動中、待ち時間、⽚⼿操作など
• 時間的制約: 短時間での⽬的達成が求められる
• 環境的制約: 屋外での視認性、通信環境の不安定さ

これらを踏まえて、モバイルに特化したペルソナとユーザーストーリーを作成し、ビジネスゴールとの整合性を図ります。

たとえば、通勤中の電車内での片手操作や子どものお迎え前のちょっとしたスキマ時間など、集中しづらい環境で利用されることも少なくありません。そのため、短時間でスムーズに目的を果たせるUXが求められます。

ユーザーの満足度向上には、利用時間帯・場所・心理状態などを踏まえたリアルなペルソナ設計が不可欠です。戦略段階からモバイル特有のコンテキストを意識すると、ユーザーのニーズに沿った満足度の高いUX設計につながります。

要件(Scope)：モバイルファーストの機能定義

モバイル端末は小さく、表示できる情報量や操作スペースが限られています。そのため、多くの機能を詰め込みすぎると使いづらくなりがちです。そのため、以下に留意し機能定義を行うようにします。

• コア機能の抽出: デスクトップ版の全機能ではなく、モバイルで本当に必要な機能を厳選
• ワンタップ設計: 主要なタスクを最⼩限のステップで完了できるよう要件を定義
• オフライン対応: 通信環境に依存しない機能の検討

ユーザーの使いやすさの検討には、プログレッシブディスクロージャー(段階的開示)という手法を念頭に、機能の優先順位付けをし、優先度が高い機能から配置するようにします。また、より精度を高めるには、最低限必要な機能だけ要件定義しMVP開発を行いユーザーフィードバックを反映させることも有効な手段のひとつです。

関連記事：MVP開発とは？アジャイル開発との違い、実施プロセスや注意点を解説

構造(Structure)：モバイル操作を前提とした情報設計

モバイル端末には特有の操作方法があり、多くのユーザーはモバイル端末を使う際に、マニュアルなどは読まず直感的に使います。モバイル設計においては、操作フローと情報アーキテクチャが密接に結びつくため、ここの設計が重要となります。

• 階層の簡素化: 深い階層構造を避け、フラットな構造を採⽤
• ジェスチャー対応: スワイプ、ピンチ、⻑押しなどを活⽤した画⾯遷移
• 予測可能な動作: ⼀般的なモバイルアプリの操作パターンに準拠

⾻格(Skeleton)：親指操作を中⼼としたレイアウト

スマートフォンは片手で操作するユーザーが多いため、親指の可動範囲に配慮したUI配置が重要です。骨格層では、エルゴノミクス(人間工学)に基づき、実際のユーザー行動を考慮した設計によって、作業効率の向上、疲労の軽減、ミスの防止、安全性の確保などを実現します。

• 親指リーチゾーン: 重要な操作要素を画⾯下部に配置
• タッチターゲット: 最⼩44×44ピクセルのタップ領域を確保
• 視覚的階層: 限られた画⾯でも情報の優先順位が明確になるレイアウト

重要なボタンや操作メニューは、画面下部の親指が自然に届く範囲に配置するのが基本です。また、リンクやボタンのタッチ領域が小さすぎると誤タップを招くため、適切なサイズや余白の確保も意識するとよいでしょう。

表層(Surface)：モバイル体験を⾼めるビジュアルデザイン

表層層では、見た目の美しさだけでなく伝え方や動かし方も重要です。モバイルの場合、遷移のアニメーションやスクロールの動きが、ユーザーの操作理解や安心感に大きく影響します。また、スマホの画面は小さく、表示できる情報量に制限があるのが特徴です。そのため、すべてを詳細に説明するのではなく、短く的確な表現が必要です。たとえば、「メールアドレスは公開されません」「今すぐ登録(無料)」といったマイクロコピーをボタンやフォームの近くに配置すると、ユーザーの迷いや不安を軽減できます。

モバイル体験を⾼めるビジュアルデザインには以下のポイントをおさえるようにするとよいでしょう。

• レスポンシブタイポグラフィ: ⼩画⾯でも読みやすいフォントサイズと⾏間
• マイクロインタラクション: タップ、スワイプ時の視覚的・触覚的フィードバック
• マイクロコピー: 限られたスペースで的確に情報を伝える短⽂
• アニメーション: 画⾯遷移や状態変化を滑らかに表現

マイクロインタラクションでの触覚と視覚の体験強化

「メッセージ送信で紙飛行機が飛ぶ」「通知でバイブレーションが作動する」といったマイクロインタラクションは、ユーザー体験の質に直結します。特にモバイル環境では、視覚と触覚の両方で即時にフィードバックがあることで、ユーザーは操作結果を直感的に理解でき、安心感や制御感を得られます。
このようなフィードバック設計は、ニールセンのヒューリスティック評価*1で示される「システム状態の可視化」や「エラーの予防」といった原則に合致しており、ユーザビリティ向上に有効です。また、認知的ウォークスルー*2という評価手法においても、「ユーザーが操作の結果を正しく解釈できるか」という観点から、視覚や触覚による反応は理解と行動の手がかりとなります。
「買い物かごに入れると数字が増える」「保存操作でアイコンが変わる」といった細かな動きや反応は、UX全体の信頼感や心地よさを左右するため、ユーザー心理と評価基準の両面から丁寧に設計することが重要です。

*1
ニールセンのヒューリスティック評価：Jakob Nielsenが提唱した10のユーザビリティ評価原則で、「ユーザーにとって分かりやすく、効率的でエラーが起きにくいインターフェース」を実現するためのチェックリスト。例：システム状態の可視化、一貫性、ユーザー制御の自由など。
参考：Nielsen Norman Group

*2
認知的ウォークスルー：実際のユーザーを想定してステップごとにUIを検証し、「次に何をすれば良いか分かるか」「その操作が期待通りの結果になると予測できるか」などを評価する手法。新規ユーザー向けUIの評価に特に有効とされる。

データ分析とユーザーテストによる継続的な改善プロセス

UX設計は一度完成したら終わりではありません。その後の運用と改善で、質を高められます。5段階モデルの構造があることで、問題が発⽣した際にどの層に原因があるかを特定しやすく、効果的な改善が可能になります。

• 定量分析: Google Analytics、ヒートマップツールによる⾏動データ分析
• 定性調査: ユーザビリティテスト、インタビューによる課題発⾒
• A/Bテスト: 各層での仮説検証と最適化

たとえば、Google Analyticsやヒートマップでユーザーの行動データを分析してツールの課題を把握しましょう。離脱部分や押されないボタンなど、具体的な問題点を把握します。時にはユーザーテストを通じて実際の利用画面での反応を観察し、PDCAサイクルを回すことでプロダクトの成長につながります。

このように、5段階モデルをベースに設計すると、改善の切り口も整理しやすいのが強みです。

スパイスファクトリーでできること

スパイスファクトリーでは、UX5段階モデルを軸にしたUI/UX支援を提供しています。戦略段階の構想整理から情報設計・UIデザイン・プロトタイピングまで一貫して対応しています。

実装や運用を見据えた設計を得意としており、技術・ビジネス・ユーザー体験の3つの視点をバランスよく取り入れた提案が可能です。業務システムやBtoBサービスのように複雑な要件が絡むプロジェクトにおいても、使いやすさと実装性の両立を図り最適なソリューションを実現します。

また、UXを内製化したい企業に向けて現場の開発者向けに実践的なトレーニングも実施しています。

さらに、UXのプロが課題を洗い出す「エキスパートレビュー」も実施中です。実装前に大きな問題点を可視化できるので、業務の効率化だけでなくWebサービスやWebサイト全体の品質向上にも貢献します。

戦略から実装、継続的な改善まで、必要なフェーズに応じて柔軟に支援しています。UX設計の伴走パートナーをお探しの際は、ぜひスパイスファクトリーにご相談ください。

関連記事：エキスパートレビューとは？ユーザビリティテストやユーザーリサーチとの違いとともに解説

関連記事：テクノロジーとマーケティングの両面から多角的にUIUXをご提案

まとめ

UX5段階モデルは、感覚的になりがちなUX設計を論理的に進めるための強力なフレームワークです。戦略から表層まで一貫して取り組めるので、ユーザーにとって満足度の高い体験を提供できます。

設計段階での迷いや修正が減り開発効率が高まるだけでなく、利用者の満足度向上や継続利用にもつながるのでビジネス成果の最大化が期待できます。

UX5段階モデルはプロジェクトの規模や目的にかかわらず利用できるのが強みです。UX設計に取り組む際は、ぜひ取り入れてみましょう。

「設計が難しい」「修正が多くて進まない」など、多くの企業がUX設計に関する悩みを抱えています。スパイクファクトリーでは、戦略の立案から設計・運用まで一貫してサポートしています。課題の整理から始めたい方も、ぜひお気軽にご相談ください。