マガジン

スマホで渡すときとPCで渡すとき、最初の30秒の動きはどう違うのか:同じゲームで比べる観察の設計書

遊びをつくる

執筆にClaudeを使用しています。

速さ、選択肢、ミスの許容を三つの異なる仕掛けで表したゲーム模型のイラスト。
記事のテーマをもとに制作したAI生成イラスト。

自作のブラウザゲームを友人に見せる場面を考えてみます。リンクをチャットで送ると、相手はスマホで開きます。別の日に、同じゲームをPCの前に座った別の人へ見せます。遊びの中身は同じなのに、最初の数秒でやることは違うはずです。スマホなら画面のどこかを指でつつき、PCならマウスで目当てのボタンを探すか、キーボードに手を置くでしょう。 この違いは、作り手の目からは見えにくいものです。自分で作ったゲームは操作を知っているので、最初の迷いを体験できません。そこでこの記事では、同じゲームを端末だけ変えて渡し、最初の30秒の入力を記録する観察の手順を設計します。結果は書きません。何を・どの単位で・何人分記録し、どう読めば「直すべき箇所」が見えるかを、自分で行える形で示します。

この記事の目次
  1. 比べたいのは「最初に何をするか」
  2. 準備と手順
  3. 記録の取り方
  4. 結果の読み方
  5. 起こりやすい誤り
  6. 次の行動

比べたいのは「最初に何をするか」

問いを先に絞ります。「スマホとPCではどちらが遊びやすいか」は広すぎて、観察では答えが出ません。最初の30秒の観察で答えが出る問いは、次のように小さく切れます。

  • 画面が表示されてから最初の入力までに、何秒かかるか
  • 最初の入力は、タップ・クリック・キー入力・スクロール・ピンチのどれか
  • 最初に触れた場所は、作り手が想定した場所か
  • 最初の入力は意図どおりに働いたか、空振りだったか
  • 30秒の時点で、ゲームのどこまで進んでいるか

この5つなら、動画と簡単なメモで数えられます。「面白かったか」「分かりやすかったか」といった感想は、この観察では記録しません。感想は後から本人の記憶で変わりますが、最初の指の動きは変わらないからです。

仮説も先に書いておきます。たとえば「スマホでは最初のタップがボタンから外れやすい」「PCではキー操作の存在に気づくのが遅れる」といった、外れてもよい予想です。予想を書かずに観察すると、見たいものだけが目に入り、確認したい事実が曖昧になります。

準備と手順

準備するもの

  • ゲーム:公開済みのURLか、1つのHTMLファイルにまとめたもの。同じ版を両方の端末で使います。観察の途中で修正しないでください。
  • 端末:スマホ1台とPC1台を基本とします。スマホは縦持ちか横持ちかを決め、全員同じにします。
  • 記録手段:画面録画か、観察者がテーブル越しに撮る動画。それにストップウォッチと記録表です。
  • 遊ぶ人:そのゲームを一度も見ていない人。スマホ側とPC側で、できれば別の人を同数ずつ集めます。
  • 台本:渡すときに言う一文だけを決めます。たとえば「画面を見て、好きなように触ってみてください」です。ルールの説明も、ゲームの名前以外のヒントも言いません。

同じ人に両方の端末で遊んでもらう方法もありますが、2回目は最初の内容を覚えているため、最初の動きの観察になりません。同じ人に両方やってもらうなら、スマホ→PCとPC→スマホの順を半数ずつにして、順序の影響を相殺します。ただし2回目は「初見」ではないと割り切ってください。初見の記録としては、1人1端末のほうが素直です。

当日の手順

  1. 端末の通知を切り、音量とマナーモードの状態を決めて、全員同じにします。
  2. ゲームの入口画面を出しておく状態にするか、URLを開く瞬間から録るかを決めます。迷うなら、リンクを開く瞬間から録ります。実際の第一印象は、読み込み中の画面から始まっているからです。
  3. 台本の一文だけを言って端末を渡し、ストップウォッチを押します。
  4. 観察者は話しません。質問されても「好きなように触ってください」と繰り返すだけにします。助けたくなる場面がいちばん大事な記録になります。
  5. 30秒で止め、終わった人に初めて「どこで迷いましたか」と聞きます。ここで得た言葉は、記録表の別欄に書きます。

端末ごとに最低でも5人を目安にしてください。人数が少ないので統計的な結論は出せません。目的は「同じ動きが何人に出るか」を見ることで、数字で証明することではありません。

記録の取り方

記録は動画を見返しながら、1人1行の表にまとめます。観察しながらは書かず、30秒の途中は見ることに集中します。

  • 端末、記録のしかた:スマホ/PC(画面サイズも一言)
  • 最初の入力までの秒数、記録のしかた:画面が見えてから最初の入力まで。0.5秒単位で十分です
  • 最初の入力の種類、記録のしかた:タップ・クリック・キー・スクロール・ピンチ・その他
  • 最初に触れた対象、記録のしかた:ボタン名、背景、文字、画面外など
  • 空振りの回数、記録のしかた:反応しなかった入力の数
  • 画面の調整、記録のしかた:拡大・縮小・スクロール・向きの変更の有無
  • 30秒時点の到達点、記録のしかた:ゲーム内の状態を一言で
  • 迷いの兆候、記録のしかた:止まる、画面を見回す、他の端末に目をやる、など
  • 終了後の発言、記録のしかた:本人の言葉をそのまま

動画の見返しには、補助として入力ログを併用できます。次のコードは、自作ゲームのHTMLの末尾に貼るだけで動く最小構成です。外部の仕組みは使いません。30秒たつと画面を覆って、そこまでの入力を一覧で表示します。

html
<script>
(() => {
  const t0 = performance.now();
  const log = [];
  const sec = () => ((performance.now() - t0) / 1000).toFixed(1);
  ["pointerdown", "keydown", "wheel"].forEach((type) => {
    addEventListener(type, (e) => {
      if (log.length >= 40) return;
      const who = e.pointerType || e.key || "";
      const tgt = e.target.id || e.target.tagName;
      log.push(sec() + "秒 " + type + " " + who + " " + tgt);
    }, { passive: true, capture: true });
  });
  setTimeout(() => {
    const pre = document.createElement("pre");
    pre.style.cssText = "position:fixed;inset:0;margin:0;padding:12px;" +
      "overflow:auto;background:#111;color:#eee;font:12px monospace;z-index:99";
    pre.textContent = "ページ読み込みから30秒\n" + (log.join("\n") || "入力なし");
    document.body.appendChild(pre);
  }, 30000);
})();
</script>

使うときの注意点があります。計時の起点は、このスクリプトが動いた時点で、画面が見えた瞬間とは少しずれます。このログは、入力の種類(マウスかタッチか、どのキーか)と順番を確かめる補助にとどめ、秒数の記録は動画を基準にしてください。また、30秒後に画面が覆われるため、この版は観察専用です。公開する版には入れないでください。

結果の読み方

記録がそろったら、まず端末ごとに列を並べて眺めます。判断は次の順で行います。

1. 最初の入力の種類が端末で分かれているか。 スマホは全員タップから始まり、PCはクリックとキーに分かれる、といった形になっているかを見ます。分かれていれば、その端末では「想定される最初の動き」が複数あることになります。ゲームは、そのすべてに何かしら反応を返す必要があります。

2. 空振りが集まる場所はどこか。 同じ場所での空振りが3人以上に出ているなら、そこに触れる価値があると見えている一方で、反応しないことを意味します。スマホで出たなら、ボタンの大きさや、見た目と判定範囲のずれを疑います。PCで出たなら、クリックできそうに見えて押せない装飾を疑います。

3. 最初の入力までの秒数が長い人は、何を見ていたか。 動画で視線や手の位置を確かめます。説明文を読んでいたなら説明が必要な状態、画面を探していたなら次の一手が見えていない状態です。PC側でキーボードに手を置いたまま動かない人が複数いるなら、使うキーが画面から伝わっていない可能性があります。

4. 30秒時点の到達点に差があるか。 片方の端末だけで、全員が最初の遊びの手前で止まっているなら、その端末の入口に問題があります。到達点が同じで、動きだけ違うなら、問題はゲームの中身ではなく入力の入口にあります。

どの結果でも、直すのは1回に1か所にします。複数を一度に直して再観察すると、何が効いたか分からなくなります。同じ条件でもう一度、別の人に渡して比べてください。

起こりやすい誤り

  • 観察者が口を出す。 一言のヒントで、最初の動きの記録は失われます。口を閉じる練習として、台本を紙に書いて手元に置いておくと有効です。
  • ゲームを知っている人を混ぜる。 以前に見た人は、最初の動きが速くなります。初見の人だけで集計し、既知の人は別表にします。
  • 端末の条件がばらつく。 画面の大きさ、ブラウザ、音量、通知の有無が違うと、差が端末のせいか条件のせいか分かりません。条件を表の欄外にも書いておきます。
  • スマホのブラウザ画面の余白を見落とす。 アドレスバーなどで、ゲームが見える面積は想定より小さくなることがあります。見切れて触れなかった箇所がないかを、録画で確認してください。
  • PC側の持ち方を決めていない。 マウスで遊ぶのか、タッチパッドか、キーボード中心か。入力機器が違うと「PC」とひとくくりにできません。
  • 少人数の結果を言い切る。 5人の観察は仮説づくりの材料です。「スマホは○○だ」ではなく、「この版では、この場所で空振りが出た」という書き方で、修正案の根拠にしてください。
  • 起動回数への影響を気にしない。 公開済みの作品で何度も観察を行うと、プレイ回数の見え方に影響しうるため、観察の目的は数字の集計ではなく入口の改善だと割り切ってください。

次の行動

まず、いま作っているゲームで、スマホとPCそれぞれ1人ずつ、合計2人に台本の一文だけで渡してみてください。2人分でも、最初の入力の種類と最初に触れた場所には、両者の違いが表れる可能性があります。その2行を記録表に書けたら、5人ずつに広げるかどうかを決めましょう。