UXデザインの5段階モデルは、体験の設計を5つの層に分けて考える枠組みです。理論として紹介されることが多いものですが、実務での価値は別のところにあります。制作で手戻りが起きる原因を、層の言葉で説明できることです。
サイト制作で「見た目の話をしていたはずが、根本から作り直しになった」という事態が起きます。これは下の層が決まらないまま上の層を作ったときに必ず起きる現象です。色やレイアウトを議論しているつもりが、実は誰に何を提供するかが決まっていなかった、という構造です。
この記事では、5つの層の内容、下から決めるべき理由、各段階で発注側が確認すべきこと、そして手戻りを防ぐ進め方を整理します。
この記事でわかること
・5つの層は下から順に決める
・手戻りは下の層が未決定のまま上を作ると起きる
・各層で決めるべきことと、確認すべきこと
・見た目の議論に見えて、実は下の層の問題である場合
・発注側が各段階で用意すべき情報
・小規模なサイトでも順序は変わらない
5つの層は下から順に決める
モデルは抽象的な層から具体的な層へ、5段階で構成されます。
| 層 | 決めること | 成果物の例 |
|---|---|---|
| 戦略 | 誰の何を解決するか、事業として何を得るか | 目的とターゲットの定義 |
| 要件 | そのために必要な機能と情報 | 機能一覧、掲載内容の一覧 |
| 構造 | 情報をどう分類し、どう遷移するか | サイトマップ、画面遷移 |
| 骨格 | 画面上でどこに何を置くか | ワイヤーフレーム |
| 表層 | 色、書体、写真、装飾 | デザインカンプ |
上の層は下の層に依存します。戦略が変われば要件が変わり、要件が変われば構造が変わります。逆に、表層だけを変えても下の層には影響しません。
構造の設計については情報設計（IA）とは？わかりやすいサイト構成の作り方、骨格についてはワイヤーフレームの作り方｜構成を固めてからデザインに進むを参照してください。
5つの層は下から順に決める。
上の層は下の層に依存し、逆は成立しない。
手戻りは下の層が未決定のまま上を作ると起きる
制作の途中で大きな変更が発生する場合、ほぼ例外なく下の層が固まっていません。
| 発生する事象 | 実際に未決定だった層 | 起きる手戻り |
|---|---|---|
| デザインを見て「思っていたのと違う」 | 戦略（誰向けか） | 全面的なやり直し |
| 「この情報も載せたい」が繰り返される | 要件 | レイアウトの再設計 |
| 「メニューの並びを変えたい」 | 構造 | 全ページの調整 |
| 「この要素をもっと目立たせたい」 | 骨格 | 画面ごとの調整 |
| 「色を変えたい」 | 表層 | 表層の修正で済む |
下にいくほど、修正の影響範囲が大きくなります。表層の修正は1画面で済みますが、戦略の変更は全工程に及びます。だからこそ、下の層ほど早い段階で合意しておく必要があります。
下の層ほど、修正の影響範囲が大きい。
大きな手戻りは、下の層の未決定が原因。
見た目の議論に見えて、実は下の層の問題
会議で出る意見の多くは表層の言葉で語られますが、本当の論点が下の層にあることがあります。
- 「もっと信頼感を出したい」→ 誰に何を信頼してほしいのか（戦略）
- 「情報が多くて見づらい」→ 何を載せると決めたのか（要件）
- 「どこに何があるか分からない」→ 分類の基準は何か（構造）
- 「このボタンが目立たない」→ この画面の目的は何か（骨格）
- 「色が好みでない」→ 表層の問題
最後の1つ以外は、表層をいじっても解決しません。意見が出たときに、それがどの層の話かを判別できると、議論が空回りしなくなります。
表層の言葉で語られる意見が、下の層の問題であることがある。
どの層の話かを判別すると、議論が空回りしない。
各段階で発注側が用意すべき情報
制作会社に任せきりにできない部分があります。特に下の2層は、事業側でしか決められません。
| 層 | 発注側が用意するもの | 制作側が担う部分 |
|---|---|---|
| 戦略 | 事業目標、想定顧客、優先する成果 | 整理と言語化の支援 |
| 要件 | 掲載したい情報、必要な機能 | 実現方法の提案、取捨の助言 |
| 構造 | 既存の情報資産、業務上の制約 | 分類と遷移の設計 |
| 骨格 | 確認と判断 | 配置の設計 |
| 表層 | ブランドの規定（あれば） | デザイン |
戦略の層を制作会社に丸投げすると、後から認識のずれが表面化します。誰に何を届けたいかは、事業の判断です。制作会社ができるのは、それを引き出して整理することまでです。
制作の進め方はサイト制作の進め方｜発注から公開までの工程と発注者側の作業を参照してください。
戦略と要件は事業側でしか決められない。
丸投げすると、後から認識のずれが表面化する。
各層での確認事項
進行中に各段階で何を確認すれば手戻りを防げるかを整理します。
- 戦略：このサイトで達成したいことを、数字で言えるか
- 要件：載せる情報の優先順位が決まっているか
- 構造：初めて訪れた人が、目的の情報にたどり着けるか
- 骨格：各画面で最も見てほしい要素が明確か
- 表層：ブランドとして一貫しているか
各段階で合意してから次へ進んでください。並行して進めると、後の工程で判明した問題が前の工程に戻り、作業が二重になります。
各段階で合意してから次へ進む。
並行させると、手戻りで作業が二重になる。
小規模なサイトでも順序は変わらない
ページ数が少ない場合でも、層の順序は同じです。ただし各層にかける時間は変わります。
| 規模 | 戦略・要件 | 構造 | 骨格・表層 |
|---|---|---|---|
| 小規模（数ページ） | 簡潔でよいが必須 | 短時間で済む | 中心的な作業 |
| 中規模 | 文書化する | 設計が必要 | テンプレート化 |
| 大規模 | 関係者間の合意形成 | 重い工程 | システム化 |
小規模だから戦略を省いてよいわけではありません。むしろページ数が少ないほど、1ページに何を載せるかの判断が重要になります。載せられる量に限りがあるためです。
規模が小さくても層の順序は同じ。
ページ数が少ないほど、何を載せるかの判断が重要になる。
よくある失敗
デザインカンプから議論を始める
表層の話をしているつもりで、実は戦略が決まっていない状態が露呈します。順序を守ってください。
戦略の層を制作会社に任せる
誰に何を届けたいかは事業の判断です。制作側ができるのは整理の支援までです。
各層の合意を取らずに並行して進める
後の工程で判明した問題が前に戻り、作業が二重になります。
意見がどの層の話か判別しない
表層をいじっても解決しない問題を、表層で解決しようとすることになります。
小規模だからと戦略を省く
載せられる量に限りがあるほど、何を載せるかの判断は重要になります。
よくある質問
すべての層を厳密に文書化する必要がありますか
規模によります。小規模なサイトで大量の文書を作ると、作業が重くなります。重要なのは、各層で決めるべきことが決まっていて、関係者が同じ認識を持っていることです。形式は問いません。
途中で戦略が変わった場合はどうすべきですか
上の層をすべて見直す必要があります。影響範囲を明示したうえで、スケジュールと費用の再調整を行ってください。戦略の変更を表層の修正で吸収しようとすると、一貫性のないものになります。
リニューアルの場合も同じ順序ですか
同じです。既存サイトがあると表層から議論を始めがちですが、なぜリニューアルするのかという戦略の層から確認してください。手順はコーポレートサイトリニューアルの進め方｜失敗しない依頼手順を参照してください。
この5層とワイヤーフレームの関係は何ですか
ワイヤーフレームは骨格の層の成果物です。構造が決まっていない状態でワイヤーフレームを作ると、画面ごとの配置は決まっても全体の遷移が破綻します。
ユーザー調査はどの層で行いますか
戦略の層で行うのが基本ですが、各層で目的が変わります。戦略では課題の把握、構造では分類の妥当性、骨格では操作の確認です。手法の使い分けはUXリサーチの手法の使い分け｜知りたいことが決まれば、方法は決まるを参照してください。
まとめ
UXデザインの5段階モデルは、体験の設計を戦略、要件、構造、骨格、表層という5つの層に分ける枠組みです。理論としてよりも、制作で手戻りが起きる原因を説明できる道具として使うと実務的な価値があります。上の層は下の層に依存するため、下が決まらないまま上を作ると必ず作り直しが発生します。
重要なのは、下の層ほど修正の影響範囲が大きいという性質です。色を変えるのは1画面の修正で済みますが、誰に何を届けるかという戦略が変われば全工程に及びます。だからこそ下の層ほど早い段階で合意しておく必要があり、各段階で合意してから次へ進む進め方が結果的に速くなります。
また、会議で出る意見の多くは表層の言葉で語られますが、本当の論点が下の層にあることがあります。「もっと信頼感を出したい」は誰に何を信頼してほしいかという戦略の問題であり、「情報が多くて見づらい」は何を載せると決めたかという要件の問題です。意見がどの層の話かを判別できると、表層をいじっても解決しない議論に時間を使わずに済みます。
当社ではホームページ制作において、戦略の整理から表層のデザインまで一貫してご相談いただけます。進め方を検討したい場合はお問い合わせよりご連絡ください。
