4. STEP2 :理想の体験を整理 - なりたい状態をデザインしよう

前回の「体験の棚卸し」ワークでは、ユーザーの感情から「UIで配慮すべきこと」をあぶり出し、サマリーシートを作成しました。

進め方の記事でお伝えした STEP2「理想の体験を定義する」 にあたるパートです。手元にあるそのシートの「配慮」を使って、ユーザーにとっての「理想の体験（なりたい状態）」を定義し、具体的なUIアイデアの種に変換していきましょう。

前回見つけた「配慮」を、UIアイデアに変換しよう

「配慮すべきこと」はわかった。でも、それをどうやって画面（UI）に落とし込めばいいのでしょうか？

いきなりFigmaを開いて画面を作り始めるのは、まだ早いです。 まずは、その配慮がすべて叶った「ユーザーが最高にハッピーな状態（理想の体験）」をストーリーとして描き、そこから逆算して「じゃあどんな機能や情報が必要か？」をブレストしていきます。

このステップで目指す「ゴール」

このワークを終えたとき、手元には以下の3つができあがります。

1. 価値定義： この機能がどんな課題を解決し、ユーザーをどう理想の状態に近づけるのか？というブレない方針。
2. 理想の体験の流れからアイデアを出す： ユーザーが「こういう風に体験できたら最高だ！」という具体的なストーリーを整理して、デザインのアイデアに繋げる

これがあれば、「なんとなく」ではなく、「ユーザーの理想の体験を実現するために必要なUI」を自信を持って作れるようになります。

テンプレート

実践する上で使うためのテンプレートは以下で全てが見れます。
FigjamやFigma Design、そのほかmiro、テキストなんでもお好きなもので展開してください。（おすすめはFigjam）

このフレームワークで整理して実践していきましょう💪

▼ 価値定義をする

▼ 理想の体験を整理する

実践！理想の体験からアイデアを出す 3つのステップ

それでは、前回から引き続き「社内本レビューアプリ（BookShelf）」の田中さんを題材に、手を動かしていきましょう！ 手元に前回のサマリーシートをご用意ください。

整理：「価値定義」を作成して方針をまとめる

□ やること 前回のシートで整理した「配慮すること」を使って、このユーザーに対して提供する体験が「どういう状態になるのがベストか（価値定義）」を文章にまとめます。

□ これをやるとどうなる？（デザインで効く理由） 「配慮」の箇条書きを、誰の・どんな障壁を・どんな体験なら超えられるかという一文の方針に束ねられます。「機能を増やしたい」「見た目を整えたい」だけの議論に流れにくく、あとで理想の流れやUIを決めるときにも「これは価値に効くか？」と戻れるコンパスになります。

□ ポイント

• 以下の決まったフォーマットの穴埋めをするだけでOKです！
• フォーマットに沿って書くと、欲求・障壁・打ち手が一度に整理され、抜け漏れを防ぎやすくなります。

□ 具体例（田中さんの価値定義）

【価値定義のフォーマット】

救いたいユーザー（入社したての田中さん）は、

「チームに貢献するため、上司が勧めた本からの学びをサクッと共有したい」という欲求があるが、

「内容がうろ覚えで、長文を書くのがプレッシャー」ということが障壁になってしまい、

「レビューの投稿」がやりづらい。

そのため、

「タイトル予測変換や、3行でOKという気軽さに配慮した体験」にすることで、

ユーザーのやりたい状態が達成しやすくなるので、この機能には価値がある！

この方針を軸に、次から実際に「理想の体験」を整理していきます。

Step 1. 「理想の体験の流れ」を作る

□ やること Step 1で作った価値定義をもとに、田中さんがこの機能を使うときの「理想の体験の流れ」を時系列のフローで書き出します。

□ これをやるとどうなる？（デザインで効く理由） 価値定義を、時間と文脈つきのストーリーに落とす作業です。フレーム1では感情を外した「機械的なフロー」を土台にしましたが、今回は逆に、気持ちよく進む理想の出来事を細かく見える化します。どの瞬間に何がうまくいっていると最高かが見えるので、次のステップで「このシーンに、どんな画面・情報・操作が必要か」が具体化しやすくなります。

□ ポイント

• 前回は感情を無視した「機械的なフロー」を書きましたが、今回は逆です！
• 「こういう状態になりながら進めていくと最高だ！」というユーザーのリアルな心の声（ストーリー）を交えて、体験の流れを細かく書いていきましょう。
• 細かく書くほど、あとから「ここは画面が切り替わる」などの区切りも見つけやすくなります。

□ 具体例（田中さんの理想の体験フロー）

• 流れ1：本を読み始める

- 「よし、今日は上司に勧められた『誰のためのデザイン？』を読むぞ！」 - 「せっかくだし、社内のBookShelfを開いておこっと」

• 流れ2：本を読む ＋ 投稿を書く

- 「とりあえず『新規投稿』の場所だけ作っておくか（サクッとタイトル入力完了）」 - 「さ、読み進めるぞ〜」 - 「『シグニファイア』ってむずい言葉だな…あ、ヒントみたいなことね。なるほど、これ忘れないうちに投稿しとこ！（パチパチ）」 - 「良い概念モデルをデザインすることが大切…と。これも投稿しとこ！（パチパチ）」 - 「本の内容に加えて、自分の気づきもセットで短く書いておくと、後でチームの役に立ちそうだな〜」

のように”具体的なリアルな行動と心情”がわかるようにまとめましょう

Step 2. 「体験に必要な要素」を出す

□ やること

• 理想の体験に必要な”要素”を書き出します
• 思いつくだけ書き出しましょう

□ これをやるとどうなる？（デザインで効く理由）

• 理想の流れを実現するための「条件」を考えることができます
• 「条件」を達成することで、理想の体験に近づくため、アイデアを評価したり具体化するときにイメージしやすくなります。

Step 3. 理想の流れから「UIアイデア」を出す

□ やること

• Step 2で作った「理想の体験の流れ」をもとに、各フローで「その体験を実現するためには、どんなUI（情報や機能）が必要か？」のアイデアをブレストしていきます。

□ これをやるとどうなる？（デザインで効く理由）

• 理想の流れの成立条件から逆算するので、アイデアが「あったら便利」に寄りにくくなります。
• 体験が途切れそうな単位（画面の切り替わりなど）で区切ると、情報や機能の塊が見え、優先順位をつけやすくなります。
• あとでプロトタイプにするときの検証のまとまりにも直結します。

□ ポイント

• 全体を一気に考えると大変です。体験が途切れるフロー（画面の切り替わりなど）ごとに区切って、細かくアイデアを出していくのがコツです。
• ここで出したアイデアをもとに画面を作り、足りなさを見ながら整理する…というサイクルでブラッシュアップしていきます。

□ 具体例（UIに必要な体験要件のブレスト）

さきほどの「流れ2：本を読む ＋ 投稿を書く」のフローを実現するためのアイデアを出してみましょう。

○「新規投稿」の作成部分

• ユーザーの声：「とりあえず場所だけ作っておくか」
• UIアイデア：

- 本の選択（検索）は最低限必要。最悪、トピックで説明できれば本を選ばなくてもいいパターンもあり得る？ - 作成時に最低限必要な情報は？ → 「タイトル」「ユーザー名」「日時」。 - 表紙の画像が自動で出るとテンション上がりそう。

○ 気づきなどの入力部分

• ユーザーの声：「忘れないうちに投稿しとこ！（パチパチ）」
• UIアイデア：

- 読みながら書くなら、長文のテキストエリアじゃなくて、Twitter（X）のように短いフォームで「連投」できる形式がいいかも！ - サクサク投稿できる軽快なUIにしよう。 - 画像（本の図解など）もサクッと貼れると便利そう。 - 本の内容を引用できる機能があると最高だけど、技術的に難しそうなら一旦外すか。

最後に：アイデアは「プロトタイプ」で検証してサイクルを回そう

お疲れ様でした！ ここまでで、ユーザーの「なりたい状態（理想の体験）」から逆算して、根拠のあるUIアイデアがたくさん出たはずです。

「要件を満たすだけの綺麗なUI」を作っていた頃とは、出てくるアイデアの質（ユーザーへの思いやり）が全く違うことに気づいたのではないでしょうか？

ただ、ここで出したアイデアはまだ「文字」でしかありません。 このアイデアが本当にユーザーの理想の体験を作れるかどうかは、実際にプロトタイプ（画面）を作ってみないとわかりません。

ここから先は、Figma等でプロトタイプを作り、「このUIでさっきのストーリーは実現できるか？」を評価しながら、さらにブラッシュアップ（デザインサイクル）を回していきましょう。

STEP3（プロトタイピング）の進め方そのものは、進め方の記事にも書いたとおり、この連載のフレーム1・2では深掘りしていません。

手を動かす手順は、BONOのデザインサイクル／プロトタイピングなどの別コンテンツで体系立てて学ぶ想定です。迷ったら、進め方の記事の「STEP3」節を読み返してください。

▼ 参考の進め方

UIが上手くなる人の“デザインサイクル” ─ 入門編β

デザインで迷走しなくなる「正しい進め方」を、実践しながら体で覚えるAI時代にも必須な入門レッスンです。

bono-training.vercel.app