操作説明の画像を見せる前と後で、最初の動きは変わるか
遊びをつくる執筆にClaudeを使用しています。

自作のブラウザゲームに、操作説明の画像を1枚付けたとします。矢印キーで移動、スペースで決定、といった内容です。ところが、その画像を読まずに遊び始める人は少なくないはずです。ここで気になるのは、画像を見ても見なくても、最初の30秒の動きが同じなのかどうかです。同じなら、画像は飾りになっています。違うなら、その違いが出た操作こそ、画面だけでは伝わっていなかった部分です。 この記事は、その差を自分で確かめるための実験の設計書です。結果は書きません。目的は「説明あり・なしのどちらが良いか」を決めることではありません。操作を一つずつ分けて、説明がなければ最初の30秒で見つからなかったものを特定することです。そうすれば、画像を直すのか、画面側の見せ方を直すのか、何も足さなくてよいのかを、操作ごとに判断できます。 必要なのは、自作ゲームが1本、画面録画ができる環境、タイマー、参加者数人です。専用のツールは要りません。
問いを「操作ごと」に分ける
「説明で動きが変わるか」という問いは、大きすぎてそのままでは答えが出ません。まず、ゲームを始めた直後に必要な操作を最大5つまで書き出します。たとえば次のような粒度です。
- 自キャラを動かす
- 決定やアクションを行う
- 一時停止やメニューを開く
- 取り消しや戻しを行う
- 画面の拡大や音の切り替えなど補助的な操作
この5つ以内という数は目安です。多すぎると記録が追いつきません。「30秒以内に最低限できてほしい操作」だけに絞ります。
次に、操作ごとに予想を書き、記録を取る前に保存しておきます。「移動は説明なしでも数秒で見つかる」「アクションは見つからない」といった予想です。あとから予想を立てると、結果に合わせた理屈を作りやすくなります。予想が外れた操作が、設計の盲点を示す手がかりになります。
比べ方は二通りある
一つ目は、同じ人に「説明なし→説明あり」の順で2回遊んでもらう方法です。操作ごとに「1回目で詰まったものが、画像を見たあとに解消したか」を見られます。ただし2回目には1回目で覚えたことが混ざります。そのため、2回目で動きが変わったことが画像の効果なのか、慣れの効果なのかは、この方法だけでは区別できません。
二つ目は、別の人を2群に分ける方法です。一方は説明なしで、もう一方は画像を見てから遊びます。学習の混ざりは避けられますが、人数が少ないと個人差に左右されます。
核が「説明が必要だった部分の特定」なので、一つ目を主にします。ただし1回目に偶然自分で気づいた操作は、画像の影響と切り分けにくくなります。そこで、1回目の最中にどの操作を自力で見つけたかを必ず記録します。1回目で自力で見つけられた操作は、画像がなくても伝わっていた候補になります。1回目で一度も行われず、2回目で行われた操作は、画像で初めて伝わった候補になります。
二つ目は補助として、最初から画像を見せる人を数人加えます。参加者の目安は、説明なしの1回目から始める人を3〜5人、最初から画像を見る人を2〜3人です。この数は設計上の目安であり、統計的な結論を出すための人数ではありません。傾向を見るための実験だと考えてください。
準備するもの
次の6点をそろえます。
- 開始状態を固定したゲーム。再読み込みで毎回同じ画面から始まるようにします。保存データが残る作品では、保存を消すか、新しいブラウザのプロフィールで開きます。
- 説明画像1枚。実際に公開するのと同じものを使います。実験のために作り直しません。
- 画面録画。OS標準の機能で十分です。可能なら、手元のキー入力やクリックが分かる範囲を映します。
- タイマー。30秒を計ります。
- 記録シート。操作ごとの行と、時刻の欄を持つ表です。
- 台本。観察者が話す内容を、事前に書いておきます。
台本は短くします。例は次のとおりです。
「これからゲームを30秒だけ遊んでもらいます。操作について質問されても、お答えできません。思ったことは、できれば声に出してください。」
観察者は、30秒の間は黙ります。うなずきや「あ、そこです」といった相づちもヒントになるため、避けます。
入力を自動で記録したい場合
録画だけでも読み取れますが、秒数を正確に取りたいときは、ログを仕込むと楽になります。次の最小構成を、自作ゲームのHTMLの末尾に貼ります。ページ読み込みからの経過秒を記録し、F9キーで表として確認します。
<script>
const t0 = performance.now();
const log = [];
function rec(type, detail) {
log.push({
秒: Math.round((performance.now() - t0) / 100) / 10,
種類: type,
内容: detail
});
}
addEventListener('keydown', e => {
if (e.key === 'F9') { console.table(log); return; }
if (!e.repeat) rec('キー', e.key);
});
addEventListener('pointerdown', e => {
rec('ポインタ', Math.round(e.clientX) + ',' + Math.round(e.clientY));
});
</script>時間の基準は「ページを読み込んだ瞬間」です。参加者に画面を見せる直前に再読み込みして開始する運用にすると、秒数がそろいます。表の確認には開発者ツールのコンソールを使うため、ローカルで開いた状態で試してください。このログは、どのキーを押したかを残すだけで、参加者が考えていた内容までは分かりません。録画と声の記録で補います。
30秒の手順
説明なし(1回目)
- 再読み込みして開始状態にします。
- 台本を読み、参加者に画面を向けます。
- 合図と同時にタイマーを動かします。
- 30秒たったら止めます。途中で終わっても、30秒までは続けます。
- 終了後すぐに聞きます。「最初に何をしようとしましたか」「分からなかったことは何ですか」。
説明あり(2回目)
- 参加者に画像を見せます。見せ方は実際の公開形態に合わせます。ゲームの横に常に表示されているなら、画像を表示したまま始めます。説明ページを開いてから遊ぶ形なら、数十秒見てもらってから閉じます。どちらにするかは実験の前に決めます。
- 再読み込みして同じ開始状態に戻します。
- 同じ台本で、もう一度30秒計測します。
- 終了後に聞きます。「画像で初めて知ったことはどれですか」「画像を見たのに迷ったことはありますか」。
最初から画像を見る補助群の人は、この2回目の手順だけを行います。
1回目と2回目の間の休憩は短くします。長く空くと、画像の内容を忘れたり、別のことを考えたりして、条件が変わります。
記録の取り方
記録は、操作ごと、参加者ごとに1行で取ります。単位はすべて秒です。
- 初動までの時間、単位:秒、取り方:開始から最初の入力まで
- 操作ごとの初回実行時間、単位:秒、取り方:事前に決めた各操作を初めて行った時刻。未実行は「なし」
- 誤入力の回数、単位:回、取り方:意図と違う反応が出た入力。録画と声で判断
- 無入力の停止、単位:秒、取り方:5秒以上入力がない区間の長さと、そのときの発言
- 自力の発見、単位:有無、取り方:1回目で、画像なしに見つけた操作に印を付ける
- 声に出た疑問、単位:文言、取り方:原文のまま書く。要約しない
操作ごとの「初回実行時間」が、この実験の中心です。「なし」も大切な記録です。30秒で見つからなかったという事実そのものが、説明が必要だった候補になります。
誤入力は、たとえば移動のつもりでクリックした、画面の別の場所を押した、といった入力です。判断に迷う場合は、録画の時刻を書いておき、あとで見直します。
声に出た疑問は、できるだけ原文のまま残します。「これ押すの?」と「なぜ進まないの?」では、原因の場所が違います。
結果の読み方と、起こりやすい誤り
操作ごとに、説明なしと説明ありの記録を並べて読みます。次のように分けて考えます。
- 説明なしでも早く実行された操作:画像から外しても影響が小さい候補です。画像の面積が足りなければ、ここから削れます。
- 説明なしでは未実行か遅く、説明ありで早くなった操作:画像が効いた候補です。これが「説明が必要だった部分」です。画像で伝えるのか、ゲーム内で初回に見せるのかを検討します。
- どちらでも未実行か遅い操作:画像が読まれていないか、画像の伝え方が合っていない候補です。録画で、画像を見たあとに迷っていたかを確認します。
- 説明ありで初動が遅くなった:読む時間が加わった可能性があります。操作の分かりにくさとは別の問題として扱います。
人数が少ないので、全員に同じ傾向が出た操作だけを強く扱い、一人だけの動きは「気になる点」として残します。平均だけを見ると、全員が10秒前後で見つけた操作と、半数が見つけられず残り半数が数秒で見つけた操作が、同じように見えてしまいます。人ごとの並びも見てください。
よくある誤り
- 観察者がヒントを出す:相づち、視線、笑い声もヒントになります。録画を見直し、反応してしまった場面があれば、その区間の記録に印を付けます。
- 身近な人だけで行う:ゲームの癖を知っている人は、画像がなくても動けます。可能なら、そのゲームを初めて見る人を含めます。
- 30秒の途中で止める:「見つからなかった」を取り逃します。迷っていても終わりまで待ちます。
- 画像の出来と操作設計を混ぜる:画像を見ても迷ったときは、図の分かりにくさ、文字の小ささ、操作自体の見つけにくさのどれが原因かを分けます。「画像のどの部分を見ましたか」と聞くと手がかりになります。
- 結果を平均で語る:人数が少ないほど、一人の動きが平均を動かします。
手元で練習する場合
自作ゲームを使う前に、操作方法が複数ある公式作品で手順に慣れておくのも一つの手です。たとえば「紙ひこうき郵便」は、左右キー、ドラッグ、矢印ボタンの3通りで操縦できます。同じ画面でも、最初にどの入力から始める人が多いかを記録する練習になります。作品内にどんな案内があるかは、作品を開いて確かめてください。
次の行動
自作ゲームの最初の30秒に必要な操作を、5つ以内で書き出し、それぞれに予想を添えて保存してください。そのうえで、まず説明なしで1人に遊んでもらい、録画と記録シートだけで「なし」になった操作を拾い出します。そこが、画像や画面表示に最初に手を入れる場所です。
