UXの5段階モデルとは？デザインが「見た目」だけではない理由

「デザインを良くしてほしい」
チームやマネージャー、クライアントからこんな会話が出てくることはありませんか？
上がってきた成果物を見て、「何かが違う」「もっとこう、使いやすくならないか」と感覚的なフィードバックが繰り返されることはないでしょうか？
もし、チーム内で「デザイン＝見た目（色や形）」という認識だけで会話が進んでいるとしたら、それは少し危ういサインかもしれません。 なぜなら、意図のない表面的な修正は、現場の疲弊を招くだけでなく、最終的にユーザーに届かないプロダクトになってしまう恐れがあるからです。

ビジネスにおいても、UX（ユーザー体験）の設計には地図が必要です。
そこで今回は、迷子にならずにゴールへ向かうための強力なフレームワーク、UXの5段階モデルについてお話しします。

「UXの5段階モデル」という地図を持つ

このモデルは、UXデザイナーのJesse James Garrett氏の著書『Elements of User Experience』によって提唱されたものです。
フワフワとして掴みどころのない「ユーザー体験」という概念を、5つの階層に分けて整理してくれています。

• 戦略段階 (Strategy Plane)
• 要件段階 (Scope Plane)
• 構造段階 (Structure Plane)
• 骨格段階 (Skeleton Plane)
• 表層段階 (Surface Plane)

このモデルの面白いところは、下層である戦略から上層である表層に向かって、抽象から具体へと流れていく点です。
一番下の戦略は、「なぜやるのか」という非常に概念的な話。
そこから階段を登るように具体性を増していき、最後に私たちが普段目にする「色や形」になります。

「このフォントをもっと目立たせて」
「ここは赤色の方がいいんじゃない？」
デザインというと、どうしてもこういった表層に注目しがちですよね。
ですが、ビジネスを成功させるためには、そのずっと手前の「なぜ」から思考を積み上げる必要があるのです。

家づくりで考える依存関係のルール

この5つの階層は、積み木のような関係性を持っています。
下の階層での決定が、上の階層の前提条件（制約）になるということです。

例えば、家を建てる時のことを想像してみてください。
素敵な壁紙やカーテン（表層）を選ぶ前に、柱や梁（骨格）が必要です。
その前には間取り（構造）が決まっていなければなりませんし、そもそも「誰が住むのか」「予算はいくらか」（戦略）が決まっていなければ、設計図すら引けません。

もし、骨組みが出来上がってから「やっぱり地下に防音室が欲しい」と言い出したらどうなるでしょう？
解体と作り直しで、とんでもない追加コストが発生してしまいます。

Webやアプリ開発もこれと同じです。
「なんとなく使いにくいからボタンの色を変えよう」という議論。
実はこれ、色の問題ではなく、ボタンの配置や、そもそもその機能が必要なのかという、もっと深い部分に原因があるケースがほとんどです。
このモデルを知っているだけで、「今、私たちはどの階層の話をしているのか？」を整理でき、無駄な手戻りを防ぐことができます。

5つの段階とそれぞれの役割

では、各フェーズで具体的に何をすべきか紐解いていきましょう。

① 戦略段階 (Strategy)

プロジェクトの出発点であり、ここがブレると全てが崩れます。
ユーザーのニーズとビジネスの目的を合致させるフェーズです。

• ステークホルダーへのヒアリング
• 市場調査、競合分析
• ユーザーインタビュー、ペルソナ策定
• KPI・KGIの設定

誰のどんな課題を解決し、どうやって利益を生むのか。
開発投資は安くありません。ここを曖昧にしたまま進むのは、目的地を設定せずに歩き続けるようなものです。
プロジェクトに関わるときは、このフェーズでの合意形成に最も時間をかけるべきです。

② 要件段階 (Scope)

戦略を実現するために必要な機能やコンテンツを洗い出すフェーズです。
ここで最も大切なのは、「何を作るか」ではなく「何を作らないか」を決めることです。

• 要件定義書の作成
• 機能一覧の整理
• 実装のロードマップ策定

あれもこれもと機能を詰め込みたくなりますが、それはグッと我慢します。
機能肥大は開発期間を延ばし、バグのリスクを高め、結果として使いにくいプロダクトを生んでしまいます。
「今回はこの機能を削る」という勇気ある決断こそが、リソースを守り、リリースを早める鍵になります。

③ 構造段階 (Structure)

定義された機能を、ユーザーがどう回遊して利用するかを設計します。
いわゆるUI設計の根幹部分です。

• サイトマップ（情報の階層整理）
• ユーザーフロー図（画面遷移）
• ナビゲーション設計

どんなに素晴らしい機能でも、ユーザーがそこに辿り着けなければ意味がありません。
迷わせず、ストレスなく目的（購入や問い合わせ）へ導く。
ここは、離脱率やコンバージョン率といった数字に直結する、とてもシビアな設計が求められる部分です。

④ 骨格段階 (Skeleton)

具体的な画面上の配置を決めます。
まだ色はつけません。情報の優先順位が正しいかを検証するためです。

• ワイヤーフレーム作成
• プロトタイプでのテスト
• ナビゲーションデザイン

たまに「ワイヤーフレームなんて飛ばしてデザインしちゃえば？」という声も聞きますが、逆に手戻りにつながる確率が高くなります。
ワイヤーフレームの段階なら修正は数分で済みますが、作り込んだデザインを直すのは数時間かかります。
この段階で「配置が悪い」といった課題を潰しておくことが、後半戦のスピードアップ、クオリティアップにも繋がるのです。

⑤ 表層段階 (Surface)

いよいよ、最終的なビジュアルデザインです。
これまでの論理的な積み上げの上に、感性的な魅力を吹き込みます。
はじめに取り組みがちなビジュアルデザインが、UXの5段階モデルでは一番最後なんです。

• 配色、フォント、アイコン選定
• デザインカンプ作成
• 世界観の表現

「見た目」は、ユーザーからの信頼を得るための重要な要素です。
整った美しいデザインは、「ちゃんとしている」という安心感を与え、ブランドのファンを作ります。
ただし、これはあくまで戦略から骨格までの強固な土台があってこそ、初めて輝くものなのです。

なぜ、このモデルが現場に必要なのか？

1. リスク管理としてのコスト削減

システム開発におけるコストの多くは、実は「修正コスト」です。
上流（戦略・要件）でのミスを下流（表層・実装）で直そうとすると、コストは数倍から数十倍に膨れ上がると言われています。
5段階モデルに沿って進めることは、単なる手順の遵守ではなく、プロジェクトのリスク管理そのものなのです。

2. チームをつなぐ共通言語

「デザインが気に入らない」という主観的な意見の対立ほど、不毛なものはありません。
「それは戦略に合っていないのか？」「情報の配置（骨格）の問題なのか？」「好みの色（表層）ではないのか？」
このモデルがあれば、問題の所在を切り分け、建設的な議論に集中できるようになります。

まとめ

水面下の設計にこそ、愛を

UXの5段階モデルは、成功するプロダクトを作るための思考のガイドラインです。
私たちが普段見ているWebサイトやアプリの見た目（表層）は、氷山の一角に過ぎません。

水面下には、巨大な「戦略」「要件」「構造」「骨格」が存在し、それらがプロダクトの成否を支えています。
デザイナーだけでなく、エンジニアも、ビジネスサイドも、チーム全員でこの水面下の設計に関心を持つこと。
「なぜそうするのか」という問いを大切にしながら、一つひとつ丁寧に積み上げていくこと。

それが、ユーザーにとっても、ビジネスにとっても幸せなプロダクトを生み出す近道だと信じています。