優れたUXを実現するプロダクトをデザインする前に最低限決めておくべき9つのこと
大企業の新規事業開発を支援する、NEWhのサービスデザインチームのマネージャーをしている今村です。
ここではクライアントとの“共創”によって得られた事業開発に関する知見やノウハウをお伝えしています。
今回のテーマは“UX(ユーザー体験)のデザイン”です。
もともと僕はUI/UXデザイナーとしてキャリアをスタートしました。これまでの経験を踏まえて、優れたUX(ユーザー体験)を実現するプロダクトづくりにおいて「デザインする前に、最低限何を決めなければいけないのか？」という観点からお話をしていきたいと思います。
UXデザインの5段階モデル
UXデザインの分野に少しでも関わったことがある方であれば、“UXデザインの5段階モデル”という概念を知っている方は多いと思います。
AdaptivePathというデザインコンサルティング会社(銀行に買収されましたが)の創業者、ジェシー・ジェームズ・ギャレットさんという方が提唱した、優れたUXをデザインするためのプロセス・フレームワークです。
UI/UXデザイナーとしてのキャリアを開始したころ、まずはこの5つのレイヤーを暗記しなければ、と思い「センリャク、ヨウケン、コウゾウ、コッカク…」と元素記号を暗記するかのごとく頭の中で繰り返したものでした。
このモデルの優れたところは、各レイヤーの“論理的な依存関係”が明確になっていることです。
少し難しい言葉を使いましたが、下位のレイヤーがクリアに定義されてないと、それ以降の検討内容がズレてしまうので、最下部のレイヤーからしっかりと積み上げていきましょうね、ということです。
【要件】を決めるにしても、【戦略】が定まってないとズレた【要件】になるし、【構造】を決めるにしても、【要件】が定まってないとズレた構造になる。
最下層の【戦略】レイヤーから積み上げていかないと、本当にやりたかったデザインが実現できてない、という結果になってしまう。後から気づいて手前のレイヤーに立ち戻って検討しなければいけない状況になると、大きな時間・稼働コストがかかってしまう、ということがこのフレームワークの大事なメッセージです。
各レイヤーで何をどこまで考えて言語化すればいいのか
新米UI/UXデザイナーだったころ、まわりの先輩デザイナーはUXデザインの5段階モデルを活用してデザインプロジェクトを推進していました。
自分もこのフレームワークをマスターしたいと思っていましたが、どうもうまくこのフレームワークを使いこなせてないな…と感じていました。
フレームワークあるあるですが、戦略レイヤーで何をどこまで具体的に検討すればいいんだろうか…とか要件レイヤーの要件っていっても要件には種類がたくさんあるしなぁ…とモヤモヤしていました。
構造・骨格・表層レイヤーは具体的なデザインアウトプットがある程度明確ですが、とくに難しいのは、戦略・要件レイヤーです。
今では、僕はこの5段階モデルを2つの視点でみています。
要件・戦略レイヤーをあわせて【要件定義レイヤー】、構造・骨格・表層を合わせて【制作レイヤー】というふうに。
【要件定義レイヤー】が【制作レイヤー】に比べて難しいのは、理由があります。
【制作レイヤー】はUI/UXデザイナーがある程度、自己完結で検討・制作を推進できるのに対し、【要件定義レイヤー】はUI/UXデザイナーだけで検討できない性質があるからです。
戦略を決めるのは事業企画部、要件を決めるのはプロダクトオーナーというように、特に大企業だと様々なステークホルダーが関係してきます。
しかしながら、各レイヤーは“論理的な依存関係”がありますので、要件定義レイヤーがしっかりと定義されていないと、制作レイヤーでのUIデザインがピントがズレたものになったりします。
そこで今回は【要件定義レイヤー】に焦点をあてて、このレイヤーで「何を最低限決めておかなければいけないのか？」をお伝えしようと思います。
要件定義レイヤーで決めておくべき“9つ”のこと
先ほど、各レイヤーで具体的に何を検討すべきかモヤモヤ感があったというお話をしました。
UI/UXデザインを検討する際に、おそらく同じような感覚を持っている方は多いのではないかと思います。
僕も駆け出しの頃はそのような感覚がありましたが、いくつものUI/UXデザインプロジェクトを推進するなかで作ったのが、各レイヤーで最低限おさえておかないといけない項目を整理した以下のリストです。
【要件定義レイヤー】で決めておいておかないといけない項目は9つあるのですが、まず最初の【戦略レイヤー】は以下の5つです。
■戦略レイヤーで決めておくべき項目（5つ）
1. 目的（状態）
…プロジェクトで達成したいプロダクトの目的をユーザーを主語として記述
2. 目標（定量指標）
…目的（状態）の達成を数値的な観点で記述
3. 提供価値
…目標を達成するための提供価値をユーザー視点で記述
4. アプローチ
…提供価値実現の核となるアプローチをユーザー体験の観点で記述
5. ターゲットユーザー
…もっとも提供価値とアプローチが“刺さる”ターゲットユーザーを記述
そして、次の【要件レイヤー】で決めておかないといけない項目は以下の4つです。
■要件レイヤーで決めておくべき項目（4つ）
6. ユーザーゴール
…PJスコープ内のシステム利用におけるゴールをユーザーを主語に記述
7. ユーザーシナリオ
…ユーザーゴールに至るタスクの手順をユーザーを主語に記述
8. UX要件
…各タスクにおける実現したいユーザー体験を記述
9. コンテンツ・機能要件
…ユーザー体験に紐づくコンテンツや機能を具体的に記述
以上、【戦略レイヤー】と【要件レイヤー】あわせて9つの項目を決めておくことで、“ブレない”UI/UXデザインが可能になります。
ここで重要なのは、これらの項目も“論理的な依存関係”にあるということです。
最初の項目である【①目的】を定量的に表現したのが2番目の【②目標】であり、その目標を達成するために3番目の【③提供価値】があるというように、各項目は論理的につながっているため、ロジックが破綻しないように各項目の関係性をチェックしながら記述していく必要があります。
そうすることで、筋の通った一貫性のある戦略と要件を定義することができます。
シンプルにまとめることが大事
ここまで、UXデザインの5段階モデルの戦略・要件レイヤーで決めるべきこと9個についてお伝えしてきました。
これから、“各項目の具体的なアウトプットはどのように記述したらいいのか？”という問いに答えていきたいと思います。
記述方法は極力“シンプル”にすることが重要です。
なぜなら、情報過多でノイズが多いと論理構造がみえづらくなり、各項目の論理的なつながりを把握して腹落ち感をつくることを難しくするからです。
最終的にはこのくらいの情報量でシンプルにまとめられていることが理想です。
もしあなたがデザイナーだったとします。
すでに戦略が決まっている状態でデザインの依頼を受けた場合は、依頼者にこのようなシートをつくって埋めてもらうとよいと思います。
一方で、あなたがデザイナーに依頼する場合は、逆にこのようなサマリーシートを用意しておくとよいでしょう。
実際にこのフレームを使って埋めてみると、【①目的】と【②目標】の関係性がしっくりこなかったり、【④アプローチ】が【⑤ターゲットユーザー】に有効かどうかの確信が持てなかったり、論理構成上の問題点がクリアになります。
もちろん、デザインは仮説を立てながら進めるのが前提なので、各項目の内容に確信が持てない部分があってもいいと思います。
それでも、各項目の論理的つながりを意識しながら、どの部分の仮説の確度が低いのかをチームメンバー間で認識を合わせてプロジェクトを進めることができると、仮説検証ポイントを明らかにしながらデザイン活動を進めることができます。
UX要件レイヤーについては、以下のように各項目の論理構造をシンプルに可視化できるとよいでしょう。
【⑦ユーザーシナリオ】を中心に【⑥ユーザーゴール】に至るまでのユーザータスクを時間軸に沿って具体的に記述します。
そして、ユーザーシナリオ上の各タスクに【⑧UX要件】と【⑨機能・コンテンツ要件】を紐づけて構造化します。
このように整理することで、ユーザー体験を軸に、UX要件に対してコンテンツ・機能要件が抜け漏れなく定義されているかをチェックすることができるのです。
終わりに
今回は、UXデザインをテーマにお話しをさせていただきましたが、いかがでしたでしょうか？
今回ご紹介させていただいたUXデザインの5段階モデルのような優れたフレームワークであっても、“具体的に何を検討し言語化しなければいけないのか？”という問いに対してクリアに答えをイメージできてないと、実際にプロジェクトでうまく活用することができません。
そこで今回は、フレームワークを抽象的な概念のままで終わらせることなく、具体的に検討すべき最低限の項目をリスト化した、実際に現場で使えるシートをご紹介させていただきました。
今回の記事をヒントに、実際のプロジェクトで活用していただけると嬉しいです。
最後まで読んでいただきありがとうございました。「♡スキ」をいただけると今後の励みになります。ではまた！