投稿する
マガジン
著者：アソバース編集部公開：更新：約11分で読めます

「もう一回」を押す人と閉じる人：結果画面の滞在時間と視線を記録で比べる方法

遊びをつくる

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

キーボード、ゲームパッド、タッチ画面を同じ机に置いた操作方法の比較。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

ゲームが終わり、結果画面が出ます。ある人は数秒で「もう一回」を押し、別の人は数字を眺めてからタブを閉じます。この違いを、遊び心地の良し悪しだけで説明してよいのでしょうか。結果画面の中に、押させる要素や閉じさせる要素があるかもしれません。 この記事は、その違いを自作ゲームで確かめるための実験の設計書です。見るのは3つだけです。結果画面にどれだけ留まったか、最初と最長にどこを見ていたか、その後に押したか閉じたかです。視線を測る専用機器は使わず、簡単なログと観察者のメモで足ります。結果そのものは書きません。手順どおりに行えば、自分のゲームの答えが出る形にしてあります。

この記事の目次
  1. 問いを三つの観測に分ける
  2. 準備するもの
  3. 手順と記録の取り方
  4. 結果の読み方
  5. 誤りやすい点
  6. 次の行動

問いを三つの観測に分ける

「結果画面で何が見られているか」は、そのままでは測れません。次の3つに分けます。

  1. 次の行動：結果画面の後に「もう一回」を押したか、やめたか。
  2. 滞在時間：結果画面が表示されてから、次の行動までのミリ秒。
  3. 視線の先：最初に見た場所と、最も長く見ていた場所。

視線は、画面を大きな領域に分けて粗く記録します。結果画面によくある要素は4つに整理できます。

  • A、内容：今回の結果、例：スコア、評価、クリアタイム
  • B、内容：再挑戦の入口、例：「もう一回」ボタン
  • C、内容：比較の材料、例：ベスト記録、前回との差
  • D、内容：その他、例：やめる、メニュー、共有など

自作ゲームの結果画面がこの4つに収まらないときは、領域の数を増やしてかまいません。ただし、観察者が瞬時に区別できる数にとどめます。目安は5つまでです。

仮説は先に紙に書いておきます。たとえば「押す人は最初にBを見て、閉じる人はAを長く見る」といった形です。外れてもかまいません。先に書いておくと、結果を見てから都合のよい理由を探す誤りを減らせます。

準備するもの

  • 対象のゲーム：自作ゲームが最適です。結果画面にログを仕込めるからです。公式作品など他の作品を観察する場合は、コードを入れられません。画面録画とストップウォッチだけで行い、結果画面の有無や構成は作品を開いて確かめます。
  • 遊んでもらう人：目安は10人以上です。数人では、たまたまの癖と傾向を区別しにくくなります。ゲームを知っている人と初見の人は、別の区分で記録します。
  • 観察者：1人以上。できれば2人で同じセッションを別々に記録し、後で見比べます。
  • 同意：観察して記録すること、画面録画をするなら録画することを、事前に伝えて承諾を得ます。顔や声を撮る場合は特に注意し、必要がなければ画面だけを録ります。
  • 記録用の表：1セッションを1行とする表計算シートか紙です。

録画は必須ではありません。ただし観察者の記録に迷いが出たとき、見返せると判断の根拠になります。

手順と記録の取り方

1. 結果画面にログを入れる

次のコードは、結果画面の表示、ポインタの出入り、観察者のキー入力、ボタンの押下を、時刻つきで画面に並べる最小構成です。1ファイルで動き、外部通信はしません。自作ゲームの結果画面に合わせて、領域の data-area を付け替えます。

html
<!doctype html>
<meta charset="utf-8">
<title>結果画面ログ</title>
<div id="result">
  <p data-area="A">スコア 120</p>
  <p data-area="C">ベスト 150</p>
  <button id="again" data-area="B">もう一回</button>
  <button id="close" data-area="D">やめる</button>
</div>
<pre id="out"></pre>
<script>
const log = [];
const t0 = performance.now();
const now = () => Math.round(performance.now() - t0);
function add(type, detail) {
  log.push({ t: now(), type, detail });
  document.getElementById("out").textContent =
    log.map(e => e.t + "ms\t" + e.type + "\t" + e.detail).join("\n");
}
add("result_shown", "");
// 観察者用：1=A 2=B 3=C 4=D 、見ている場所が変わるたびに押す
addEventListener("keydown", e => {
  const m = { "1": "A", "2": "B", "3": "C", "4": "D" };
  if (m[e.key]) add("gaze", m[e.key]);
});
document.querySelectorAll("[data-area]").forEach(el => {
  el.addEventListener("pointerenter", () => add("pointer_in", el.dataset.area));
});
document.getElementById("again").onclick = () => add("again", "");
document.getElementById("close").onclick = () => add("leave", "");
addEventListener("visibilitychange", () => {
  if (document.hidden) add("hidden", "");
});
</script>

実際のゲームでは、結果画面が出た瞬間に t0 を取り直し、結果画面を再表示するたびにログを空にします。

このログには限界が2つあります。まず、タブそのものを閉じると、画面上のログも消えます。閉じる行動は「やめる」ボタンの押下か、観察者の手書きメモで残します。次に、スマートフォンのようにキーボードがない端末では、観察者のキー入力が使えません。その場合は録画を見ながら、後でストップウォッチ付きで書き起こします。

2. 観察者の役割を決める

観察者はプレイヤーの斜め後ろ、画面とプレイヤーの目の向きが両方見える位置に座ります。結果画面が出たら、プレイヤーの目が向いている領域のキーを押します。目が動くたびに押し直します。最初に押したキーが「最初に見た場所」、押している時間の合計が最長の領域を示します。

目の向きは顔の角度からの推定なので、細かい位置までは当てられません。だからこそ領域を大きく分けます。押すまでには必ず遅れが生じます。短い視線移動は拾えないものとして割り切ります。

3. 1セッションを1行にまとめる

結果画面の表示から次の行動までを1セッションとし、次の列を埋めます。

  • セッションID
  • プレイヤー区分（初見／経験者）
  • 何回目の結果画面か
  • 今回の結果（スコアの帯でかまいません）
  • 滞在ミリ秒（result_shown から again または leave まで）
  • 次の行動（again／leave）
  • 最初に見た領域
  • 最長の領域
  • ポインタが最初に入った領域

同じ人が何度も遊ぶ場合は、1人あたり3回までを目安にし、回数の列で区別します。1回目と3回目では、結果画面の見方が変わっている可能性があるからです。

結果の読み方

集計では、平均より中央値を使います。結果画面の途中で席を立つなど、極端に長いセッションが平均を引き上げるためです。「押した群」と「閉じた群」に分けて、滞在時間の中央値、最初に見た領域の分布、最長領域の分布を並べます。

読み方の例を、「こうなればこう判断する」の形で挙げます。

  • 押した群で最初に見た領域がBに偏る、考えられる解釈：再挑戦の入口を探してから決めている。または入口が目立っている、次に確かめること：ボタンの位置や大きさを変えて、同じ偏りが出るか
  • 閉じた群でAやCの滞在が長い、考えられる解釈：結果を確認して納得し、区切りよく終えている、次に確かめること：閉じた後の再訪があるか。この終わり方が悪いとは限らない
  • 閉じた群の滞在が非常に短い、考えられる解釈：結果画面を見る前に終えると決めている。または目に入る要素が少ない、次に確かめること：結果の直前の場面（難しさ、長さ）に原因がないか
  • 押した群でCの滞在が長い、考えられる解釈：比較の材料が再挑戦の動機になっている、次に確かめること：Cの表示を弱めたとき、押す割合が変わるか
  • 群の間で差がほとんどない、考えられる解釈：結果画面の構成はあまり効いていない、次に確かめること：プレイ内容、遊んだ時間、疲れなど画面の外の要因

差が見えても、因果は断定しません。この実験は結果画面で起きていることを観察するもので、「Bを大きくすれば押される」を証明するものではありません。証明したいときは、次の条件を1つだけ変える実験が必要です。

また、観察者2人の記録が合わないセッションが多い場合は、領域の分け方が細かすぎます。領域を減らして、やり直します。

誤りやすい点

  • 見られていることの影響：観察者が真後ろにいると、プレイヤーは急いで次に進んだり、あえて長く眺めたりしやすくなります。距離を取り、事前に「結果は評価に使わない」と伝えます。
  • 結果の良し悪しとの混同：スコアが低いとすぐ押し、高いと眺める、といった傾向があるかもしれません。スコアの帯を列に入れておき、帯ごとに分けて比べます。
  • 同じ人ばかりになる：友人は遠慮して押す傾向があります。可能なら、ゲームの作り手を知らない人にも加わってもらいます。
  • ボタン文言の混在：「もう一回」と「リトライ」など、文言を途中で変えると、比較できなくなります。実験の間は結果画面を固定します。
  • 領域の定義のぶれ：ベストの数字がAに近い配置だと、AとCの境目があいまいです。実験前に、領域を線で区切って共有しておきます。
  • ログの消失：画面上のログは、タブを閉じるとなくなります。終了ごとに、表を手元にコピーします。アップロードしたゲーム内のlocalStorageは一時メモリー扱いなので、端末に残る前提で記録しないでください。
  • 観察用コードを公開版に残す：画面にログが出るコードは、公開用のものには入れません。観察用と公開用は別のファイルにします。

次の行動

自作ゲームの結果画面を、A〜Dの領域に分けて線で書き出してください。そのうえで、10人分の記録を取る前に、1人に遊んでもらって観察者のキー入力を試します。記録の手順が通ったら、本番に進みます。差が見えた領域が1つあれば、次はそこだけを変えて同じ手順をもう一度行います。

マガジン一覧に戻る