付箋で画面遷移を作る：紙のプロトタイプの作り方

この実験で確かめる問い

画面遷移とは、ある画面から別の画面へ移る道筋のことです。付箋のプロトタイプでは、画面を付箋、移動を矢印、ユーザーの操作を指で押す動作に置き換えます。見た目は確かめません。確かめるのは次の3点です。

• 行き止まりがないか。入ったきり、どの操作でも出られない画面のことです。
• 迷いがないか。次に押すものが見つからない、またはどれを押すか決められない瞬間のことです。
• 回り道がないか。遊び始めるまでに、必要以上に画面や操作が挟まっていないかを見ます。

実験を始める前に、予想を一言で書いておきます。たとえば「結果画面から再挑戦に戻る道が弱いと思う」といった内容です。実験後に予想と見比べると、頭の中の地図と実際の地図のずれがはっきりします。

準備するもの

高価なものは要りません。

• 75mm角程度の付箋を20〜40枚。色を2色用意すると、通常の画面と例外の画面を分けられます。
• 太めのペン。細いペンでは、離れて見たときに読めません。
• 大きめの紙（A3など）か、広い机。付箋を並べる土台です。
• マスキングテープ。矢印の代わりに、付箋どうしをつなぐ線として使います。貼り直せるので便利です。
• 実際に使うスマホ画面の縦横比を写し取った枠。厚紙を切って作れます。ボタンを置ける広さの感覚を保つために使います。
• タイマー（スマホで構いません）と記録用紙。
• 協力者が1人いれば理想的です。いなくても、後述のとおり役割を切り替えれば実施できます。

手順

1. 遊びの一周を1文で書く

最初に、1回の遊びを1文で書きます。たとえば「タイトルから難易度を選び、プレイして、結果を見て、もう一度か終了を選ぶ」といった文です。この文に出てくる動詞が、画面の候補になります。

2. 画面を洗い出して付箋に書く

付箋1枚を、画面の1つの状態として書きます。書式を固定しておくと、あとで見比べやすくなります。

1. 上段にタイトルを書きます(例:「タイトル」「プレイ中」)。
2. 中段に、画面に見えているものを文字で書きます。絵は描きません。
3. 下段に、押せるものを書きます。ボタン、タップできる場所、キー操作などです。

状態ごとに付箋を分ける点が肝心です。同じ「プレイ中」でも、ヒントを表示している状態や一時停止の状態は、別の付箋にします。

3. 並べて、つなぐ

土台の紙に、遊びの順に左から右へ付箋を並べます。マスキングテープで、どのボタンからどの付箋へ移るのかをつなぎます。このとき、テープの手前に押すボタンの名前を書きます。ボタンの名前が書けない矢印は、まだ設計が決まっていない道です。

4. 例外の付箋を足す

次に、色を変えた付箋で、通常の流れから外れる状態を足します。思いつく例を挙げます。

• 一時停止と再開
• 一手(または一操作)戻す
• ゲームの途中でやめて、最初の画面に戻る
• ページを再読み込みしたとき
• 画面の拡大や言語の切り替えをしたとき
• 失敗が続いて終了する場合と、時間切れで終了する場合

すべてを網羅する必要はありません。ただし、正常系だけで終えないことが、この実験でいちばん効く点です。

5. 指でなぞる

ここからが実験の本番です。ゲームを知らない人(協力者)に、スマホ枠の位置へ立ってもらい、次の流れで進めます。

1. 協力者に「ゲームを遊ぶつもりで、押したいものを指で指してください」と伝えます。
2. 協力者が指したボタンに矢印がつながっていれば、そのつながった付箋を、枠の位置に置き換えます。この「付箋をめくる役」を担当するのが、画面を動かすコンピューターの役目です。
3. つながっていなければ、「何も起きません」とだけ答えます。ここが抜けの候補です。
4. 説明は一切しません。聞かれても「画面に書いてあることがすべてです」と返します。

協力者がいない場合は、日を置いて自分で行います。ボタンの名前だけを見て指し、頭の中の知識で補わないよう、付箋の中段を声に出して読んでから動く方法が有効です。ただし、自作の流れは自分が知りすぎているため、迷いが出にくい点は理解しておいてください。

公式作品で練習する

自作に入る前に、他人の作品の画面遷移を付箋に写す練習が役立ちます。アソバースの公式作品を例にします。

「かたちのあいだ」は、確認済みの範囲で、3×3の入門と4×4の2段階があり、次の一手のヒント、一手戻す、同じ配置の再挑戦、時計の一時停止があります。「時計じかけの台所」は6つのレシピがあり、時間制限なしの見習いと、ミス3回までの本番があります。

これらの機能から、「難易度やモードを選ぶ状態」「中断する状態」「やり直す状態」が存在しそうだと読み取れます。ただし、実際の画面の数や並び、ボタンの名前は、作品を開いて確かめてください。開いたら、気づいた状態を1枚ずつ付箋に写し、遊びの一周と例外が何枚ずつになるかを数えてみます。他人の作品を写してみると、自分の作品に何枚足りないかの目安が見えてきます。

記録の取り方

通しのなぞりを1回行うごとに、次の項目を記録します。1回の通しとは、タイトル相当の付箋から、結果相当の付箋、そして再挑戦または終了までを指します。役割(協力者役・めくる役)を入れ替えて、少なくとも3回行ってください。

• 迷った瞬間、単位：付箋ID・秒数、記録の仕方：指が3秒以上止まった付箋に印を付け、秒数を書く
• 「次はどこですか」と聞かれた回数、単位：回、記録の仕方：付箋ごとに正の字で数える
• 行き止まりの付箋、単位：枚、記録の仕方：何を押しても出られない付箋にID
• 何も起きなかったタップ、単位：回、記録の仕方：矢印のないボタンを指された回数とボタン名
• 開始までのタップ数、単位：回、記録の仕方：タイトルから最初の操作が可能になるまで
• 付箋の総枚数、単位：枚、記録の仕方：通常と例外を分けて数える

付箋には、あらかじめ通し番号(A1、A2……)を書いておくと、記録が楽になります。3秒という基準は目安です。ご自身の作品に合わせて変えて構いませんが、3回とも同じ基準で測ってください。

結果の読み方

数値の「正解」はありません。以下は、記録をどう判断につなげるかの基準の提案です。

• 何も起きなかったタップが出た:そのボタンに行き先がない、またはボタンが誤解を招いています。行き先の付箋を足すか、ボタンを消すか、名前を変えます。
• 行き止まりの付箋がある:出口が必要です。最低でも、戻る、やり直す、最初に戻るのどれかを下段に足します。
• 同じ付箋で迷いが2回以上、別の回にも出た:画面の問題である可能性が高いです。中段の情報が多すぎないか、押すべきボタンが目立つか、ボタンの名前が行動を表しているかを見直します。
• 迷いが1回だけで、人によって違う:個人の癖の可能性があります。すぐには直さず、次の回で再現するか見ます。
• 開始までのタップ数が多い:その途中の付箋のうち、省けるものがないか確認します。選択を後ろへ回す、既定値を置くといった工夫が考えられます。
• 例外の付箋が極端に少ない:通常の流れだけを設計した可能性があります。一時停止、中断、再読み込みの付箋を足してもう一度なぞります。

最初に書いた予想と、実際の記録を見比べます。予想が外れた箇所は、頭の中の地図が実際と違っていた場所です。そこが、いちばん価値のある発見になります。

起こりやすい誤り

• 絵を描き込みすぎる:色や飾りを描き始めると、話題が見た目へ流れます。この実験では文字だけで十分です。
• 作者が説明してしまう:迷っている協力者に思わず助言すると、迷いの記録が消えます。聞かれても答えず、「迷った」を記録に回してください。
• 正常系だけで終える:壊れるのは、たいてい例外のところです。
• ボタンを大きく書きすぎる:付箋の上では、小さなボタンも大きく書けてしまいます。実機の指のサイズを想定し、スマホ枠に収まるボタン数を超えないよう気をつけます。
• 1回で結論を出す:1人の動きは偶然を含みます。役割を替え、3回なぞってから判断してください。
• 直したあと、なぞり直さない:付箋を足したら、必ず最初から通し直します。直した箇所が別の行き止まりを作ることがあります。

次の行動

今日は、作品の遊びの一周を1文で書き、画面を付箋に洗い出してみてください。まず10枚で十分です。付箋を並べたら、家族や友人に1回だけ、説明なしでなぞってもらいます。直した版を実装に移したら、アソバースの投稿画面で下書き保存を使いながら、入力から公開までの3段階を進めてみるのもよい流れです。