KJR020's Blog
ここ数か月ほど、生成AIを活用したシステム開発のPoCに取り組んでいます。開発するシステムの要件が固まっていない状態で、UXも含めて提案する役割を任されたことをきっかけに、UX設計を学んでいます。
生成AIを使うと、それっぽいUIは短時間で作れます。デザインシステムを参照させれば、見た目の整った画面が数分でできあがります。ですが、できあがった画面を見ていると「それっぽいけど、なんか違う」と感じることが多いです。一見きれいにまとまっているのに、一つひとつを見ていくと、なぜこの要素が強調されているのか、なぜこの単位で情報がまとめられているのか、と引っかかる。そうした違和感は、単にUIの見た目の問題ではなく、その背景にあるUX設計の問題なのではないかと感じるようになりました。
この違和感を整理する手がかりになったのが、Jesse James Garrettの『The Elements of User Experience』で示されている、UXを5つのレイヤーで捉える考え方でした。
今回は、本書の中心にある5つのレイヤーについて、概要紹介と自分の感想や考えたことをまとめます。
そもそもUXとは？
5つのレイヤーについて説明する前に、「そもそもUXってなんだっけ？」という話から整理します。
まず本書での扱いです。 ギャレットは、「UXは製品やサービスの内部の仕組みではなく、人がそれらに触れたときに、どのように働き、どう感じるかに関わるもの」として説明しています。
また、ISO 9241-210:2019では、UXを「システム、製品またはサービスの利用、または利用を予期したことから生じる、ユーザーの知覚や反応」と定義しています1。
この二つに共通しているのは、UXを製品やサービスそのものではなく、それを利用することでユーザーに生じる体験として捉えていることです。 つまりUXは、画面の見た目やUI上の操作だけではなく、ユーザーが製品やサービスと関わる中で、何を感じ、どう受け取り、どう反応するかまで含むものだと言えます。
UXデザインとは
Chapter 2の冒頭で、ギャレットは、UXデザインについて次のように説明しています。
製品のユーザーエクスペリエンスが、すべて意識的かつ明確な意図のもとにもたらされるようにする。それがユーザーエクスペリエンス・デザインのプロセスである。これは、ユーザーが取る可能性のある行動をすべて考慮に入れ、そのプロセスのすべての過程でユーザーの期待を理解することを意味する。2
個人的に、前半の一節は特に印象に残っています。UXデザインとは何をすることなのかを端的に表した、本質的な定義だと感じました。
それと同時に、「ユーザーエクスペリエンスが、すべて意識的かつ明確な意図のもとにもたらされるようにする」というのは、ものすごくハードルの高いことを言っているように思います。 実際にギャレットも「大仕事」であると認めています。
大仕事のように聞こえるし、ある意味、そのとおりだ。
そして次のように続けています。
けれど、ユーザーエクスペリエンスを作るという仕事を構成要素に分解することで、タスク全体をよりよく理解することができる。
UX設計は大仕事だが、それを構成要素に分解することで仕事全体をよりよく理解できる。この考え方には、ソフトウェア開発でいうDivide and Conquerに通じるものを感じます。複雑な問題をそのまま理解しようとするのではなく、扱える単位に分けることで全体を捉えやすくする。UXという捉えどころのないものに対しても有効なのかもしれません。
ギャレットの5段階モデル
ここまでUXとUXデザインについて整理してきました。ここから、ギャレットの5段階モデルを見ていきます。 UXを作るという複雑な仕事を構成要素に分けて捉えるためのフレームワークです。
下から、戦略（Strategy）、要件（Scope）、構造（Structure）、骨格（Skeleton）、表層（Surface）と並びます。下にあるほど抽象的で、上に行くほどユーザーが触れる具体的な表現に近づきます。
ギャレットの5つのレイヤーをもとに作成
日本語版では、このモデルを「5段階モデル」と呼び、各 plane も「戦略段階」のように訳しています。この記事では、モデルの名称には「5段階モデル」を使い、各 plane は「レイヤー」と表記します。「段階」という言葉から、順番に進める設計工程だと受け取られるのを避けるためです。この点は、後の「5つのレイヤーは設計工程ではない」で改めて触れます。
5つのレイヤーで扱うこと
ここからは、本書で用いられているオンラインストアの例をもとに、各レイヤーで何を考えるのかをまとめます。
本書では、成功指標やユーザー調査、機能仕様の書き方など、各レイヤーを検討するための考え方や手法も詳しく扱っています。この記事では、5つのレイヤーの全体像をつかむことを目的に、各レイヤーの概要に絞って紹介します。興味を持った方には、ぜひ本書を読んでみてほしいです。
戦略レイヤー
戦略レイヤーでは、プロダクトを提供する側の目的と、それを使うユーザーのニーズを扱います。
オンラインストアなら、運営側には「商品を売りたい」という目的があり、ユーザーには「商品を買いたい」というニーズがあります。こうしたプロダクトの土台となる目的やニーズを明らかにするのが戦略レイヤーです。
ギャレットは、戦略レイヤーで考えることを二つのシンプルな問いで表しています。
- 自分たちはこの製品から何を得たいのか
- 自分たちのユーザーはこの製品から何を得たいのか
シンプルで覚えやすく、個人的にも好きな問いです。
本書では、戦略レイヤーで考える製品目標とユーザーニーズについて、次のように述べています。
ユーザーエクスペリエンスをデザインするプロセスでは、戦略段階の製品目標とユーザーニーズのふたつが、すべての意思決定の基盤となる。しかし驚くことに、ユーザーエクスペリエンスのプロジェクトは、根本的な戦略を明確に理解しないまま始まっていることが多い。
問い自体はシンプルですが、この二つがその後のすべての意思決定の基盤になると考えると、その重みが分かります。
要件レイヤー
戦略レイヤーで製品目標とユーザーニーズが見えてきたら、それらを具体的な機能やコンテンツへ落とし込んでいきます。これが要件レイヤーです。
本書では、オンラインストアで過去に使った配送先を保存し、次回の注文でも使えるようにする機能を例に挙げています。この機能を製品に含めるのか、それとも別の機能を含めるのか。戦略では目的やニーズとして考えていたものが、ここで「製品として何を提供するのか」という具体的な話になってきます。
またギャレットは、戦略から要件への移り変わりを次のように説明しています。
ユーザーニーズと製品目標を「製品がどんなコンテンツや機能性をユーザーに提供するのか」という具体的な要求に置き換えることで、戦略は要件になる。
ギャレットは、要件を明確にする理由として、「自分たちが何を構築しているのか」がわかることと同時に、「自分たちが何を構築していないのか」がわかることを挙げています。
戦略で考えた目的やニーズを「何を提供するのか」まで具体化することで、次の構造レイヤーで、それらをどう組み合わせ、ユーザーにどう使ってもらうのかを考えられるようになります。
構造レイヤー
必要な機能やコンテンツが決まっても、それだけではユーザーがそれらをどのように使い、どのようにたどるのかまでは決まりません。
オンラインストアなら、商品を探して購入するまでどのように進むのか、購入後にどこへ移動できるのか。あるいは、商品をどのようなカテゴリーに分類するのか。要件として決めた機能やコンテンツ同士の関係を設計していくのが構造レイヤーです。
要件レイヤーで「何を提供するのか」を決め、構造レイヤーでは「それらをどう組み合わせ、どのような体験にするのか」を考えていきます。
骨格レイヤー
構造レイヤーで体験の流れや情報の構造を決めても、それをユーザーにどう提示するのかまでは決まりません。そこで、ボタンや文章、画像、ナビゲーションなどをどのように配置するのかを考えるのが骨格レイヤーです。
ギャレットは、ボタンや写真、文章をどこに置けば、ロゴを覚えてもらい、必要なときにショッピングカートのボタンを見つけてもらえるか、という例で説明しています。
構造レイヤーで決めた体験の流れや情報の構造を、ユーザーが実際に使い、理解できる具体的な配置へ落とし込んでいくレイヤーです。
表層レイヤー
骨格レイヤーまでで、画面上に何をどのように配置するのかは決まってきます。しかし、それがユーザーにどのように見え、感じられるのかはまだ決まっていません。
最も上にある表層レイヤーでは、色やタイポグラフィ、コントラストなどを使い、ユーザーが実際に知覚できる視覚表現として具体化します。本書では「感覚デザイン」として扱われ、Webでは視覚表現が中心になります。
ここで考えるのは、単に見た目を整えることだけではありません。どこに注意を向けてもらうのか、何を一つのまとまりとして認識してもらうのかといったことも、視覚表現によって伝えていきます。
戦略で考えた抽象的な目的やニーズが、要件、構造、骨格での判断を通じて、ユーザーが実際に見て触れる具体的な表現につながります。
「機能」と「情報」という2つの側面
ここまでは、5つのレイヤーを抽象から具体へという縦方向で見てきました。一方、このモデルにはもう一つ、「機能」と「情報」という二つの側面があります。
ギャレットは、Webがもともとハイパーテキストによって情報を扱うメディアとして始まり、発展する中でアプリケーションとしての役割も担うようになったことに触れています。現在のWebには、情報を伝えるメディアとしての側面と、アプリケーションとして機能を提供する側面があり、この二面性がUX設計に関わる概念や用語の混乱にもつながっていると説明しています。
そうした概念の関係を整理するために公開されたのが、次の図です。5つのレイヤーを左右に分け、それぞれの側面に関わる要素とその関係が整理されています。
引用: Jesse James Garrett, “The Elements of User Experience”, 2000
例えば、要件レイヤーでは、ソフトウェアとして必要な機能を「機能仕様」、情報として必要な文章や画像などを「コンテンツ要件」として扱います。構造レイヤーでも、機能とのやり取りを考える「インタラクションデザイン」と、情報の分類やつながりを考える「情報アーキテクチャ」に分かれます。
オンラインストアで考えると、商品をカートに入れたり注文を確定したりする部分は「機能」、商品を探し、価格や説明を読んで比較する部分は「情報」として捉えることができます。
Webが発展してきた経緯から「機能」と「情報」という二つの側面を捉える説明は、個人的にも面白く感じました。また、この二つを切り分けることで、一つの連続した体験として見えているものを、「ユーザーが情報をどう受け取り、理解するか」と「システムとどうやり取りするか」に分けて考えることができ、UX設計をより深く理解するための手がかりになるように思います。
5つのレイヤーは設計工程ではない
最後に一つ、5つのレイヤーについて誤解しやすい点に触れておきたいと思います。
戦略、要件、構造、骨格、表層と順番に並んでいますが、これはその順番どおりに進める設計工程を定義したものではありません。
ギャレットが2000年に公開した原図の注意書きにも、次のように明記されています。
this model does not describe a development process
「このモデルは開発プロセスを説明するものではない」という意味です。
また、本書では、このモデルをUXの問題と、それを解決する手段について考えるための「概念的なフレームワーク（conceptual framework）」と表現しています。各レイヤーの検討は時間的に重なり、具体的なレイヤーでの検討から、より抽象的なレイヤーを見直すこともあります。
下のレイヤーでの判断は、その上のレイヤーで選べることに影響します。何のために作るのかが曖昧なら、何を作るべきか判断しにくくなり、何を作るのかが定まっていなければ、それらをどう構造化するのかにも影響します。
5つのレイヤーは工程ではありませんが、それぞれのレイヤーでの判断は互いに関係している、ということです。
本書を読んでみて
冒頭で触れた「それっぽいけど、なんか違う」という感覚につながったものとして、実際に生成された画面では、例えば次のような点に違和感がありました。
- 判断に使うわけでもない「○○件」のような数値が、重要な指標のように強調されている
- 情報がカードやセクションにきれいに分けられているが、なぜその単位でまとめているのか分からない
- ユーザーの判断や行動には必要のない説明が、それらしい補足情報として追加されている
いずれも「この表現は使わない」「この情報は必要ない」と個別に指示すれば改善できますが、それでは対症療法的で、根本的な違和感が残りました。
色やコンポーネントはデザインシステムに沿っていて、一見するときれいにまとまっています。しかし、十分な前提や指示を与えないままLLMに生成させると、「ユーザーに何をしてもらいたいのか」「何を重要なものとして伝えたいのか」という意図と、その構造や表現が結びついていないことがありました。
5つのレイヤーに照らして考えると、根本にあったのは、画面上の表現が、それを支える戦略・要件・構造での判断と結びついていなかったことでした。5つのレイヤーで捉えることで、「この数字を強調するべきか」「この情報をここに置くべきか」という画面上の問いだけでなく、そもそも何をユーザーに提供する必要があるのか、その背景にどんなユーザーニーズや製品目標があるのか、と遡って考えられるようになりました。
では、最初から戦略、要件、構造と順番に考えてから画面を作るべきなのかというと、必ずしもそうではないと思います。5つのレイヤーは順番に進める工程ではなく、UX設計で扱う問題を捉えるためのものです。
生成AIを使って具体的な画面から考え始め、そこから「そもそも何をユーザーに提供する必要があるのか」「何を目的とするのか」と上位のレイヤーへ遡ることもできます。特にステークホルダーと一緒に考えるときには、具体的な画面を見ながら「これは必要なのか」「何を重要なものとして見せたいのか」と議論することで、要件や目的が明確になっていくこともあります。
生成AIで具体的な画面を作り、そこから上位のレイヤーを見直し、明確になったことをまた画面に反映する。5つのレイヤーは、こうして具体と抽象を行き来しながら、それぞれの判断がどうつながっているのかを考えるための軸として使えるのではないかと思います。
脚注
-
ISO 9241-210:2019, 3.15。訳は私によるものです。 ↩
-
以下、特に断りのない本文中の引用は、Jesse James Garrett『The Elements of User Experience 5段階モデルで考えるUXデザイン』（ソシオメディア訳、マイナビ出版、2022年）より。 ↩