【ゆーえっくすでざいんごだんかいもでる】

UXデザイン五段階モデル とは?

💡 ビルを建てるように、地盤(目的)から壁紙(見た目)まで順番に設計するUXの設計図
📌 このページのポイント
UXデザイン五段階モデル 抽象 具体 戦略(Strategy) ユーザーニーズ・ビジネス目標 要件(Scope) 機能・コンテンツの範囲 構造(Structure) 情報設計・ナビゲーション 骨格(Skeleton) レイアウト・配置 表層(Surface) ビジュアルデザイン
抽象(戦略)から具体(表層)へ5つの層で設計する
ひよこ ひよこ

UXデザインに5つの段階があるの?

ペンギン先生 ペンギン先生

そうだよ。下から戦略・要件・構造・骨格・表層の5層になっていて、抽象的なことから具体的なことへ順番に考えていくんだ。建物で言えば基礎工事から内装まで順番にやるようなイメージだね

ひよこ ひよこ

戦略って何を決めるの?

ペンギン先生 ペンギン先生

一番大事な土台で、「ユーザーは何を求めているか」と「ビジネスとして何を達成したいか」を明確にするんだ。ここがズレてると上の層をいくら頑張っても的外れなものができちゃうよ

ひよこ ひよこ

構造と骨格の違いがよく分からないんだけど…

ペンギン先生 ペンギン先生

構造は情報の整理方法やページ間の関係を決める段階で、骨格はそれを実際に画面上にどう配置するかを決める段階だよ。サイトマップを作るのが構造、ワイヤーフレームを引くのが骨格、と覚えると分かりやすいね

ひよこ ひよこ

いきなり見た目のデザインから始めちゃダメなの?

ペンギン先生 ペンギン先生

よくある失敗パターンだね。見た目がキレイでも、そもそもユーザーが求めてない機能だったり、情報が見つけにくい構造だったりすると使われないんだ。だから下の層から順番に固めていくのが鉄則だよ

ひよこ ひよこ

実際の現場でもこのモデルを使ってるの?

ペンギン先生 ペンギン先生

厳密にこの5層を順番に進めるというよりは、思考の整理ツールとして使うことが多いね。問題が起きたときに「今どの層の問題なのか」を切り分けるのに役立つんだ。デザイナーだけでなくエンジニアやPMも知っておくと共通言語になるよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
UXデザイン五段階モデルって出てきたら「目的→機能→構造→配置→見た目の順で設計する考え方」と思えればだいたいOK!
📖 おまけ:英語の意味
「The Elements of User Experience(Five Planes Model)」 = ユーザー体験の要素(五段階モデル)
💬 2002年にJesse James Garrettが書籍で発表したフレームワークで、UXデザインの古典的名著として知られているよ
← 用語集にもどる