体験の棚卸し4ステップを実践できる
ユーザーの感情をフローごとに書き出せる
感情から「UIで配慮すべきこと」を導けるようになる
「よし、じゃあ早速UIのアイデアを出そう!」とFigmaを開く前に、やるべきことがあります。
それが、つくる体験を機械的に整理して、シナリオのユーザーがどう感じるか(どこでつまずくか)を書き出す作業です。
ここから、ユーザーが目的を達成しやすいように「UI側で配慮すべきこと」を明確にし、フローの中で項目として洗い出していきます。

このワークを終えたとき、手元には以下の要素が整理された1枚のシートができあがります。
これがあれば、「なんとなく」ではなく、「ユーザーに配慮するべきこと」を持つことができます。これを使って「ユーザーの理想の体験」を考えることに進めます。
それでは配慮ポイントを洗い出すためのステップを始めていきましょう。
実践する上で使うためのテンプレートは以下で全てが見れます。
FigjamやFigma Design、そのほかmiro、テキストなんでもお好きなもので展開してください。(おすすめはFigjam)
このフレームワークで整理して実践していきましょう💪
田中さんのユーザーシナリオをベースに 社内で使う本棚シェアサービスの事例は実際にFigJamで実践してみたのは以下から 閲覧することができます
それでは、「社内本レビューアプリ(BookShelf)」の投稿画面を作るケースを題材に、実際に手を動かしながら4つのステップを進めていきましょう。

□ やること 「誰が・いつ・どんな状況で・どんな気持ちで使うのか」を具体化します。
□ ポイント
□ 具体例(BookShelfの田中さん)

□ やること この体験でユーザーが行う必要がある操作を、シナリオ(感情)は一旦無視して、時系列で「機能的」に書き出します。
□ ポイント
初心者は、いきなり「ユーザーの感情」から体験を考えようとして挫折しがちです。
□ 具体例(BookShelfの投稿フロー)

□ やること Step 1の「シナリオ(田中さん)」を頭に置き、Step 2で作った「機械的なフロー」の各ステップで、この人が何を思いそうかを書き出します。
□ ポイント
最初から正解を出そうとしなくてOKです。仮説や思い込みでもいいので、「困りごと」だけでなく、単純な気持ち・迷い・「めんどくさい」「やめたい」といった本音を客観視点でフランクに書いてみましょう。
「パスワードが間違っている」「通信が切れる」といったシステムの都合ではなく、あくまでユーザーの「感情や思考」にフォーカスしてください。
□ 具体例(田中さんの心の声)
→ 「タイトルって正確に何だったっけ。うろ覚えだな…わざわざ本を探して確認するの面倒くさいな」
→ 「『レビュー』って書いてあると、ちゃんとした長文を書かないとダメな気がするぞ…。どうまとめようか、ちょっとプレッシャーだな…時間ないし、また今度にしようかな」

□ やること Step 3で見えた「ユーザーの思いや困りごと」を整理し、「なぜそれが起きているのか?」を考え、UIとして何を配慮できると良い状態になるかを書き出します。
□ ポイント
□ 具体例(田中さんへの配慮)
- 配慮のアイデア: タイトルは途中まで入れたら予測変換で出るような仕組みにすると良さそう! - 配慮のアイデア: そもそも、書き始めるのに「著者名」まで必須入力にする必要あるんだっけ?任意でよくない?
- 配慮のアイデア: 入力欄を小さくして「3行でOK!一番の学びは?」というガイド(プレースホルダー)を入れて、プレッシャーを下げてあげよう!
お疲れ様でした!最後に、ここまで考えた内容をパッと思い出せるように、整理して方向性を確認しましょう。
たくさんアイデアを出したと思うので、良い体験をデザインするためにどういうことを考えなくてはならないのか?をまとめておきます。
ーーー
さあ、これで「具体的なユーザーの状況」に対して「どんな配慮をすれば」良い体験になりそうかの整理ができました。
次回のステップでは、ユーザーにとっての「理想の体験」を定義し、いよいよ具体的なUIのアイデア出しへと進んでいきます。