身につけること
体験の棚卸し4ステップを実践できる
ユーザーの感情をフローごとに書き出せる
感情から「UIで配慮すべきこと」を導けるようになる
ユーザーシナリオを軸に、体験で配慮するべきことを整理しよう
「よし、じゃあ早速UIのアイデアを出そう！」とFigmaを開く前に、やるべきことがあります。
それが、つくる体験を機械的に整理して、シナリオのユーザーがどう感じるか（どこでつまずくか）を書き出す作業です。
ここから、ユーザーが目的を達成しやすいように「UI側で配慮すべきこと」を明確にし、フローの中で項目として洗い出していきます。
このステップで目指す「ゴール」
このワークを終えたとき、手元には以下の要素が整理された1枚のシートができあがります。
- 機械的な体験フロー： ユーザーが行う操作手順
- ユーザー目線： フローごとにシナリオのユーザーが考えそうなこと・感情
- 配慮： ユーザーが目的を達成しやすくするためのUIの工夫・配慮ポイント
これがあれば、「なんとなく」ではなく、「ユーザーに配慮するべきこと」を持つことができます。これを使って「ユーザーの理想の体験」を考えることに進めます。
それでは配慮ポイントを洗い出すためのステップを始めていきましょう。
テンプレート
実践する上で使うためのテンプレートは以下で全てが見れます。
FigjamやFigma Design、そのほかmiro、テキストなんでもお好きなもので展開してください。（おすすめはFigjam）
このフレームワークで整理して実践していきましょう💪
体験の棚卸し整理フレームワーク
実践！体験の棚卸し ステップ
それでは、「社内本レビューアプリ（BookShelf）」の投稿画面を作るケースを題材に、実際に手を動かしながら4つのステップを進めていきましょう。
スタート： ユーザーシナリオからはじめる
□ やること 「誰が・いつ・どんな状況で・どんな気持ちで使うのか」を具体化します。
□ ポイント
- 「ユーザーが使う」といったふんわりした設定では不十分です。「具体的にどんな状況か」まで解像度を上げることで、初めてユーザーに届くアイデアが生まれます。
- 100万人に届けたくても、具体性がないと誰にも刺さらない「当たり障りのないUI」になってしまいます。
- ※本来はユーザーヒアリングなどで事実を確認しますが、設計段階の練習としては仮説（想像）で作っても大丈夫です！
□ 具体例（BookShelfの田中さん）
- 誰が： 営業部の田中さん（28歳・入社したての新米メンバー）
- 状況： 3週間前に読んだビジネス書の感想を共有しようとしている。仕事の合間で忙しい。
- 気持ち： 内容はうろ覚え。文章を書くのは得意ではなく、少しプレッシャーを感じている。
Step 2. フローを「機械的」に整理する
□ やること この体験でユーザーが行う必要がある操作を、シナリオ（感情）は一旦無視して、時系列で「機能的」に書き出します。
□ ポイント
- 【ここが最大の落とし穴！】
初心者は、いきなり「ユーザーの感情」から体験を考えようとして挫折しがちです。
- あえて一度、感情を無視して「何をする必要があるか」だけを機械的に列挙してください。
- 目的は、ユーザーが辿る操作ステップを抜け漏れなく把握することです。土台となるフローが整理されているからこそ、後から感情を乗せやすくなります。
□ 具体例（BookShelfの投稿フロー）
- Slackの通知リンクからサービスを開く
- 「投稿」ボタンを押す
- 本のタイトルを入力する
- 著者名を入力する
- 星評価を選ぶ
- レビュー本文を書く
- 「投稿」ボタンを押す
- トップ画面に戻る
Step 3. 「ユーザーが考えそうなこと」をフローごとに書く
□ やること Step 1の「シナリオ（田中さん）」を頭に置き、Step 2で作った「機械的なフロー」の各ステップで、この人が何を思いそうかを書き出します。
□ ポイント
- 【完璧主義は捨てよう！】
最初から正解を出そうとしなくてOKです。仮説や思い込みでもいいので、「困りごと」だけでなく、単純な気持ち・迷い・「めんどくさい」「やめたい」といった本音を客観視点でフランクに書いてみましょう。
- 【システムエラーは書かない！】
「パスワードが間違っている」「通信が切れる」といったシステムの都合ではなく、あくまでユーザーの「感情や思考」にフォーカスしてください。
□ 具体例（田中さんの心の声）
- フロー3. 本のタイトルを入力する
→ 「タイトルって正確に何だったっけ。うろ覚えだな…わざわざ本を探して確認するの面倒くさいな」
- フロー6. レビュー本文を書く
→ 「『レビュー』って書いてあると、ちゃんとした長文を書かないとダメな気がするぞ…。どうまとめようか、ちょっとプレッシャーだな…時間ないし、また今度にしようかな」
Step 4. 配慮すると良いことを書く
□ やること Step 3で見えた「ユーザーの思いや困りごと」を整理し、「なぜそれが起きているのか？」を考え、UIとして何を配慮できると良い状態になるかを書き出します。
□ ポイント
- 「ユーザーが困りそうなこと」を引き起こしている原因に対して、先回りしてサポートするアイデアの種を出していきます。
□ 具体例（田中さんへの配慮）
- ユーザーの思い： 「タイトルって何だったっけ。本を探すの面倒だな」
- 配慮のアイデア： タイトルは途中まで入れたら予測変換で出るような仕組みにすると良さそう！ - 配慮のアイデア： そもそも、書き始めるのに「著者名」まで必須入力にする必要あるんだっけ？任意でよくない？
- ユーザーの思い： 「レビューって長文を書かないとダメな気がする…」
- 配慮のアイデア： 入力欄を小さくして「3行でOK！一番の学びは？」というガイド（プレースホルダー）を入れて、プレッシャーを下げてあげよう！
Step 5. 整理する（サマリーシートの作成）
お疲れ様でした！最後に、ここまで考えた内容をパッと思い出せるように、整理して方向性を確認しましょう。
たくさんアイデアを出したと思うので、良い体験をデザインするためにどういうことを考えなくてはならないのか？をまとめておきます。
ーーー
さあ、これで「具体的なユーザーの状況」に対して「どんな配慮をすれば」良い体験になりそうかの整理ができました。
次回のステップでは、ユーザーにとっての「理想の体験」を定義し、いよいよ具体的なUIのアイデア出しへと進んでいきます。