プロトタイプとは何か（触って確かめられる試作）

プロトタイプとは、作り込む前に、触って確かめられるようにした試作のことです。前回までのUIは、1画面ずつを見て評価するものでした。プロトタイプは、それらをつないで、押すと次の画面へ進むようにし、利用者になったつもりで実際に操作できるようにします。まだ本物のシステムではありませんが、流れは本物のように体験できます。

なぜ、本物を作る前に試作を触るのでしょうか。理由は、作り込んでからの手直しは大変だからです。プロトタイプなら、画面のつなぎ方を変えるのも、順番を入れ替えるのも短時間で済みます。頭の中や1枚の絵では気づけなかった不便さ、たとえば手順が多すぎる、次にどこを押すか分からない、といった問題を、早い段階で見つけて直せます。

前回のUIデザインとスタイルガイドは、この試作の材料です。深緑 #2F5D50とオフホワイト #F6F1E7という配色も、ボタンや文字の部品も、ルールはすでに決まっています。だから今回は見た目を作り直すのではなく、できあがった画面をつなぐことに集中します。次のレッスンでは、このプロトタイプを実際に人に触ってもらい、流れに問題がないかを確かめます。

画面をつないで予約フローをたどれるようにする

プロトタイプの中心の作業は、画面と画面を遷移でつなぐことです。3-3で作った画面フローが、どの画面からどの画面へ進むかの設計図になります。トップ画面の予約するボタンを押したら日時選択へ、日時選択で日時を選んだら確認へ、確認で確定したら完了へ。この順につないでいけば、予約という目的をたどる主要な導線ができあがります。

つなぐときは、押すと画面が移る場所（ボタンやカード）を1つずつ選び、移り先の画面を指定していきます。全部を一度につなごうとせず、まずはトップから完了までまっすぐ進む一本道を先に完成させます。一本道が通ると、予約の流れが体験できるようになり、どこが長い、どこで迷う、といったことが自分でも見えてきます。

戻る・エラーなどの分岐を用意する

主要導線が一本道で通ったら、次はまっすぐ進めないときの道を足します。人は、いつも順番どおりに操作するとは限りません。1つ前に戻りたいとき、選んだ日時が空いていないとき、入力を間違えたとき。こうした場面で行き止まりになると、利用者は予約をあきらめてしまいます。3-3の画面フローで設計した戻る経路とうまくいかない場合の分かれ道を、プロトタイプにも反映させます。

戻る操作は、どの画面にも用意しておきます。プロトタイプでは、画面の中の戻るボタンや矢印を、1つ前の画面につないでおくだけです。うまくいかない場合の分岐は、まず利用者が詰まりやすい所を1つか2つ選んで作れば十分です。リフトなら、日時が空いていないときに別の候補を出して選び直しへ戻す道が、その代表例です。

分岐まで用意できたら、最後に自分で一度、利用者になったつもりで通して確認します。トップから予約完了まで指でたどり、戻る操作も試し、日時が空いていない道にも入ってみます。途中でつながっていない場所や、押しても進まないボタンがあれば、それが直すべき箇所です。この確認までを終えて、はじめてプロトタイプが完成します。

演習：リフトの予約フローをプロトタイプにする

ここからは実践です。前回のUIデザインとスタイルガイドを土台に、画面をつないでリフトの予約フローをたどれるプロトタイプに仕上げます。4つのステップで進めます。完成イメージは、下のように全画面が遷移でつながった状態です。

プロトタイプは、修了評価のプロトタイプ・検証の観点（15点）に直結する成果物です。凝った動きを足すことより、トップから完了までが最後まで通ること、戻る道と分岐で行き止まりが残っていないことを優先してください。ここで作ったプロトタイプは、次のレッスンで実際に人に触ってもらい、流れに問題がないかを確かめる材料になります。