マガジン

タイトル画面で止まる人はなぜ止まるのか

遊びをつくる

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

四つの仕掛けを巡って元へ戻る、赤いビー玉の円形コース
記事のテーマをもとに制作したAI生成イラスト。

自作ゲームを友人に渡したところ、タイトル画面を開いたまま何も起きない場面を考えてみます。画面を見ている時間は10秒、20秒と伸びますが、マウスはほとんど動きません。作った側からは「始めるボタンは目の前にあるのに」と見えます。ただ、この「止まっている」状態には、少なくとも二つの違う中身が入っています。 一つは、開始ボタンがそもそも見つかっていない状態です。もう一つは、見つけたけれど押していいか分からない状態です。前者は配置や目立ち方の問題で、後者は文言や見た目、押した後に起きることの予告の問題です。外から見ると同じ「止まっている」なので、どちらも「ボタンを大きくする」で直したくなります。しかし後者にその対処は効きにくいはずです。 この記事は、二つの止まりを観察で分けるための実験の設計書です。結果は書きません。準備、手順、記録の取り方、結果の読み方、誤りやすい点を順に示すので、自分のゲームで試して答えを出してください。

この記事の目次
  1. 二つの止まりを分ける手がかり
  2. 準備するもの
  3. 手順
  4. 記録の取り方
  5. 結果の読み方
  6. 起こりやすい誤り
  7. 次の行動

二つの止まりを分ける手がかり

分けるための手がかりは、「ボタンに到達した時刻」の前後で止まっているかどうかです。

  • 見つからない型:ボタンに到達する前に止まります。カーソルや視線が、タイトル文字、背景、装飾の間をさまよいます。
  • 確信不足型:ボタンの上、または近くまで来てから止まります。カーソルがボタンの周りを往復したり、乗ったまま動かなくなったりします。

ほかにも、止まりに見える状態があります。

  • 読んでいる:説明文やクレジットを読んでいます。
  • 待っている:読み込み中だと思っています。
  • 音への警戒:音が出るのを気にして操作を控えています。この可能性は、観察と振り返りの質問で確かめます。

この4つ目以降は最初から決めつけず、「その他」の枠に入れておき、後の質問で振り分けます。

準備するもの

必要なものは次のとおりです。

  • 試す人:自分のゲームを一度も見ていない人を数人。同じ人を何度も使い回さないでください。最初の30秒は一度しか観察できません。
  • 画面録画:画面とカーソルの動きが残る録画。可能なら、顔や手元が映る別カメラ。録画の前に、目的と保存先を伝えて同意を得てください。
  • 時計:録画の再生時間を使えば十分です。
  • 記録用の表:後述します。
  • 計測用のスクリプト:自分のタイトル画面に貼る短いコードです。
  • 質問メモ:終わった後に聞く質問を書いたもの。

人数は、最初のラウンドで5人前後を目安にしてください。人数が少ないと「この人が特別だった」を排除できませんが、止まり方の型を見つけるには足ります。割合を語るには足りないので、割合は求めないでください。

計測用スクリプト

自分のタイトル画面のHTMLに貼ります。start の部分を自分の開始ボタンのidに変えてください。外部通信はなく、単体で動きます。

html
<script>
const t0 = performance.now();
const log = [];
const mark = (name) => {
  if (log.some(e => e.name === name)) return;
  const t = Math.round(performance.now() - t0);
  log.push({ name, t });
};
addEventListener("pointermove", () => mark("firstMove"), true);
addEventListener("pointerdown", () => mark("firstDown"), true);
addEventListener("keydown", () => mark("firstKey"), true);
const btn = document.getElementById("start");
btn.addEventListener("pointerenter", () => mark("onButton"));
btn.addEventListener("click", () => {
  mark("click");
  console.table(log);
});
</script>

このスクリプトは、最初の操作、ボタンへの到達、クリックの時刻(読み込みからのミリ秒)を一度ずつ残します。クリックされないまま終わった回の分は残らないので、そのときは録画の時刻を使ってください。タッチ端末ではボタンに触れた時点で到達とクリックがほぼ同時に起きます。到達の判定には使えないので、後述の録画での判定を使います。

手順

1. 回ごとの条件をそろえる

全員に同じ端末、同じ画面サイズ、同じ音量で渡します。画面は全画面または普段遊ぶ大きさにします。初回の読み込みが遅い場合は、読み込み完了後に渡します。待ち時間が止まりの原因になるのを避けるためです。

渡すときの言葉も固定します。「このゲームを自由に遊んでください」だけにして、「ボタンを押して始めます」「画面にあるものを教えてください」など、ヒントになる言葉は言いません。

2. 無言で最初の30秒を観察する

タイトル画面が表示された時点を0秒とし、30秒間は質問せず、声もかけません。試す人が話しかけてきても「あとで聞きます」とだけ答えます。声に出して考えながら遊んでもらう方法は、考えを言葉にする分だけ止まり方を変えてしまうので、この実験では使いません。

観察者は、次のことだけを記録します。

  • 最初に動いた時刻
  • カーソル、指、視線がボタンに到達した時刻
  • 操作が止まった区間の長さ
  • 開始した時刻(30秒以内に開始しなかった場合は「未開始」)

「止まった」の閾値は先に決めておきます。たとえば「操作も視線の移動もない状態が3秒以上」のように、数字を一つ決めてください。3秒はあくまで一例で、どの値でも構いませんが、全員で同じ値を使います。

3. 30秒後に振り返りの質問をする

30秒たったら、遊びを止めずに次の順で聞きます。順番が大事です。

  1. 「いま、画面に何があると思いましたか」(具体物を挙げてもらう)
  2. 「最初に何をしようと思いましたか」
  3. 「押せそうだと思ったものはありますか。どれですか」
  4. 「押したら何が起きると思いましたか」
  5. 「押さなかった理由があれば教えてください」

3と4で、ボタンを見ていたのに押さなかった人の理由が出てきます。たとえば「ボタンだと思わなかった」と「ボタンだと思ったが、何が起きるか分からなかった」は、同じ止まりの別の中身です。回答は要約せず、出てきた言葉のまま書き留めます。

記録の取り方

1回の観察につき1行を使います。録画があれば、あとから時刻を確認して埋められます。

  • 参加者ID、内容:名前でなく通し番号
  • 端末・入力、内容:マウス、タッチ、キーボード
  • 最初の操作、内容:画面表示からの秒数。なければ「なし」
  • 到達、内容:ボタンに乗る、近づく、見る、のいずれかが起きた秒数
  • クリック、内容:開始操作の秒数。30秒以内になければ「未開始」
  • 最長の止まり、内容:閾値を超えた区間の長さと、その位置(到達の前か後か)
  • 質問3・4の回答、内容:発言そのまま

「到達」は、マウスならボタンの上への侵入、タッチなら指が画面に近づいて動いた先、キーボードならフォーカスがボタンに移った時点とします。視線は録画で確実には分かりません。見ていたかどうかは質問3の回答で補ってください。

結果の読み方

記録がそろったら、次の表で振り分けます。1人が複数に当てはまるのは普通です。

  • 到達が遅い、または到達しない。止まりは到達より前、疑うこと:見つからない、最初に試す変更:ボタンの位置、周囲とのコントラスト、タイトル文字や背景に目を奪われていないかを見直す
  • 到達はしたが、クリックまでの間が長い、疑うこと:押していいか分からない、最初に試す変更:ラベルを「はじめる」のような動詞にする、押せる形に見せる、押した後に起きることを一言添える
  • 最初の操作自体がなく、全体が長い、疑うこと:読んでいる、待っている、最初に試す変更:読み込み中の表示を出す、説明文を減らす
  • 質問4で「何が起きるか分からない」が複数出る、疑うこと:結果の予告不足、最初に試す変更:「セーブが消えるか」「音が出るか」など、不安になりやすい点を先に示す

特に注意するのは、到達は早いのに止まっていた人です。ここを「見つけにくい」と読み違えると、ボタンを大きくしても同じ止まりが残ります。逆に、到達までが長い人に「ラベルを変える」を試しても効果は出にくいはずです。

変更するのは一度に一つだけにします。変えた後は、別の新しい5人前後で同じ手順を繰り返し、到達とクリックの間隔や、質問3・4の回答がどう変わったかを前回と並べます。同じ人に再度見てもらうと、場所をすでに知っているため比較になりません。

起こりやすい誤り

  • ヒントを出してしまう:「そこの下のほう」と一言言うだけで観察は終わります。話しかけられたら、あとで聞くと伝えるだけにします。
  • 作った側の友人を呼ぶ:ゲームを知っている人は、止まる場面が出ません。
  • タッチ端末でホバー前提にする:触れた瞬間に到達とクリックが同時に起きるため、録画の指の動きで補います。
  • 閾値を途中で変える:後から都合のよい値に変えると、型の分け方がぶれます。
  • 1人の様子を全員に当てはめる:5人前後は型を見つける人数であり、割合を語る人数ではありません。
  • 質問が誘導的:「ボタンが分かりにくかったですか」と聞くと、そう答えやすくなります。「画面に何があると思いましたか」のように、答えが決まっていない質問にしてください。
  • 音の影響を見落とす:音を出す作品では、鳴ることへの警戒が止まりの理由になることがあります。質問5で拾ってください。確かめたいときは、音量をあらかじめ小さくした回と通常の回で、同じ手順を別々の人に行う方法もあります。

練習として、他の人の作品を同じ手順で観察する方法もあります。アソバースの公式作品13本は、タイトルの文字組みが作品ごとに異なります。縦組みの明朝、手描き文字、郵便ラベルなどです。それぞれの開始操作がどう見えるかは、作品を開いて確かめてください。自作で試す前に1本だけ観察してみると、記録のペースがつかめます。

次の行動

まず自分のタイトル画面に計測スクリプトを貼り、ボタンのidを合わせて、ひとりで一度動かしてください。次に、そのゲームを見たことのない人を5人前後集め、無言の30秒と5つの質問を同じ手順で行います。記録表の「到達」と「クリック」の間隔、そして質問3・4の回答を並べると、止まりがどの型に近いかが見えてきます。直す点は一つだけ決めて、新しい5人前後で確かめてください。