この記事ではシナリオベースドデザインの型の全体像をお伝えします。
2つのポイントを把握することが目的です。
- 3ステップそれぞれの「ゴール」と「意味」を理解する
- この続きの実践で各ステップでやるべきことのイメージを掴む
それで見ていきましょう💪
シナリオベースドデザインの3ステップ
この型を通すと、機能リストを並べるだけでは見えてこないユーザーの文脈から、「どこで困るか」「どう配慮するか」「どんな体験が理想か」を言語化し、UIアイデアに根拠を持てるようになります。
いきなり画面を整えるのではなく、誰が・いつ・どんな状況で使うかというシナリオに沿って設計判断できるのが、習得のゴールです。

次の表は、各ステップの役割と、**手元に残るイメージ(ステップのゴール)**の対応です。
| ステップ | 一言でいうと | 手元に残るもの(ゴールのイメージ) |
|---|---|---|
| STEP1 | どこでつまずくかを洗い出す | 配慮すべきことと、その方向性メモ(サマリーシート) |
| STEP2 | 最高の体験をストーリーで描く | 価値定義・理想の体験の流れ・UIに必要そうな要件アイデア |
| STEP3 | 画面にして動かし、評価する | プロトタイプと、シナリオ基準での評価の習慣 |
主に「STEP1」と「STEP2」の理想のユーザー体験をデザインするための準備にフォーカスします。
(STEP3以降はデザインサイクルなど、アイデアを具体化して検討するステップなので、他のシリーズで解説しています)
STEP1:体験で配慮するべきことを洗い出す
□ ゴール
デザインする機能やサービスを使うときの「ユーザーシナリオ」を軸にして、「困りそうなこと」「考えそうなこと」を体験フローごとに言語化します
UI側で先回りすべき配慮が1枚のサマリーとして整理できている状態がゴールです。
□ ざっくり何をするか
ユーザーシナリオを具体化し、まずは感情を抜いて機械的な操作フローを書き、そのうえでユーザーの感情をフローにぶつけ、配慮案に落とす。
□ どういう意味があるか
「項目が揃っている」だけのUIから抜け出し、ユーザーの文脈に根ざした改善の方向性を持てるようになる。ここがないと、いきなり画面を作っても当たり障りのないアイデアで終わりがちです。
STEP2:「理想の体験」を定義する
□ ゴール
配慮を踏まえて、ユーザーにとってベストな体験を「価値の言語化」と「理想の体験の流れ」で描けている状態。そこからUIに必要そうなアイデアがフロー単位で出せている状態。
□ ざっくり何をするか
「救いたいユーザー・欲求・障壁・配慮」を一文でまとめ(価値定義)、続けて最高のストーリーとして体験の流れを書く。流れに沿って画面や機能のヒントをブレストする。
□ どういう意味があるか
機能リストから逆算するのではなく、ユーザーがどういう状態になれば成功かから逆算できる。「なんとなくこの画面が要りそう」ではなく、ストーリーに根拠を持てます。
STEP3:体験アイデアをプロトタイピングする
このシリーズでは扱いません。
STEP2までで、わかった「理想の体験」を実現するUI体験アイデアを考えていきましょう。
□ ゴール
理想の体験の流れを満たすようにUIを画面として具体化し、シナリオ(配慮・理想の体験)を評価軸にして良し悪しを判断できる状態。
□ ざっくり何をするか
アイデアをプロトタイプに落とし、使ってみて・見せてみて、足りない配慮や流れの破綻を直す。必要ならリサーチや整理とセットでデザインサイクルを回す。
□ どういう意味があるか
文章だけのアイデアは、まだ「本当に体験として成立するか」が検証できません。画面にすると初めて、つまずきや認知負荷が見えてきます。
□ この連載の記事では深掘りしない理由
この実践パートは、シナリオベースで**「配慮」と「理想の体験」までを型として身につける**ことにフォーカスしています。
一方、プロトタイプの作り方・評価の回し方・Figmaでの検証などは、**BONOの別コンテンツ(例:デザインサイクル、プロトタイピング)**で体系的に扱っています。重複させず、そちらで手を動かしてもらう想定です。
STEP3に入るタイミングの目安: STEP2のワークまでで「理想の体験の流れ」と「UIに必要そうな要件アイデア」が出たら、別コンテンツの手順に沿ってプロトタイプへ進む、という使い分けで大丈夫です。
次に進む(実践のスタート)
型の流れが頭に入ったら、いよいよ STEP1:体験の棚卸し の記事で手を動かしましょう。