【ゆーえっくすでざいんごだんかいもでる】
UXデザイン五段階モデル とは？
最終更新:
💡 目的から見た目まで、設計の判断を5層で整理する
Jesse James GarrettがUXの設計判断を戦略・要件・構造・骨格・表層の5層に整理したモデル。抽象的な目的から具体的な表現へ、各層の関係を確認するために使います。
📌 このページのポイント
- 戦略は利用者のニーズと、提供側の目的を扱う
- 要件は必要な機能やコンテンツの範囲を扱う
- 構造は操作の振る舞いや、情報同士の関係を扱う
- 骨格はインターフェース・ナビゲーション・情報の配置を扱う
- 表層は見た目の表現。上の検討で下の判断を見直すこともある
ひよこ 必ず5工程を順番に進めるの？
ペンギン先生 5層は判断の整理に使う枠組みだよ。下の層が上の層を支えるけど、原著は下を全部終えるまで上を始めない方式を求めていない。上の検討から下を見直すこともあるんだ。
ひよこ 戦略と要件の違いは？
ペンギン先生 戦略は「誰の何を助けるか」「提供側は何を達成したいか」。要件は、その目的のために必要な機能や情報の範囲。例えば学習サイトなら、学ぶ人の困りごとを確かめてから、どの説明や検索機能を用意するか考えるよ。
ひよこ 構造と骨格はどう違う？
ひよこ 表層は色を決めるだけ？
ペンギン先生 色や文字、画像などの見た目の表現を扱うけど、好みだけで選ぶわけではないよ。下の層で決めた目的や構造を表現し、利用者が読めるか、重要な情報に気づけるかも考えよう。
ひよこ 困ったら一つの層を特定すればいい？
ペンギン先生 複数の層に関わる問題もあるよ。原著も現実の境界は図ほど明確でないと説明している。図の左の矢印は抽象から具体への向きで、工程を一度だけ進める順序ではないんだ。
もっと詳しく知りたい人へ
ワイヤーフレームを描けばUX設計は完成？
ワイヤーフレームは骨格を検討する手段の一つですが、利用者のニーズ、必要な情報、操作や情報の関係、表現まで自動で決まるわけではありません。このモデルを使い、見落としている判断と層同士の整合を確認できます。
まとめ：ざっくりこれだけ覚えればOK！
「UXデザイン五段階モデル」って出てきたら「設計判断を抽象的な戦略から具体的な表層まで整理する枠組み」と思えばだいたいOK！
📖 おまけ：英語の意味
「The Elements of User Experience / Five Planes」 ＝ ユーザー体験の要素 / 5つの層
💬 Jesse James GarrettのThe Elements of User Experienceで説明されるモデルです。出版社の第2版の公開抜粋は、2000年の図の構想を紹介しています。