マガジン

制限時間を見せるか隠すか:残り時間の表示は行動をどう変えるのか

遊びをつくる

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

振り子と色の異なる円を並べ、ゲームのリズムや間を表す立体作品。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

20秒で的をできるだけ多くクリックするミニゲームを作った場面を考えてみます。画面の隅に「12.3」と減っていく数字を出すと、遊ぶ人は数字を目で追い、残りが少なくなったところで手が速くなるかもしれません。同じゲームから数字を消して、画面の端のバーだけを縮めるとどうでしょうか。さらにバーも消して、時間切れの瞬間にだけ終了を知らせる形にすると、遊ぶ人は何を頼りに動くのでしょうか。 この記事が確かめるのは、残り時間の表示が「焦り」と「集中」のどちらに寄与するかを、自分のゲームで判断するための手順です。表示を変えたときの結果は、遊ぶ人、ゲームの内容、制限時間の長さで変わります。そのため「数字は焦らせる」「隠せば集中できる」といった答えは、ここでは用意しません。代わりに、公式作品の時間の置き方から読み取れる設計の考え方、3条件を比べる実験の設計、そのまま動かせる最小のコードを示します。結果はこの記事には書いてありません。読者の手元で出すものです。

この記事の目次
  1. 問いを三つに分ける
  2. 公式作品の時間の置き方から読み取れること
  3. 3条件を比べる実験の設計
  4. 最小の試作コード
  5. 結果の読み方と起こりやすい誤り
  6. 判断基準:見せる・隠す・形を変える
  7. 次の行動

問いを三つに分ける

「見せるか隠すか」は二択に見えますが、実際は少なくとも三つの問いが重なっています。

  • 正確さ:残り時間をどれだけ正確に知らせるか。秒単位の数字は正確で、縮むバーは大まかです。
  • 注意の置き場所:時間表示が視界のどこにあり、どれだけ目を引くか。中央の大きな数字と隅の細い線では、遊ぶ人の視線の使い方が違ってくるはずです。
  • 判断への必要度:残り時間を知らないと、遊ぶ人が行動を選べないゲームかどうか。

三つ目が最も見落とされやすい点です。残り時間によって「今やるべきこと」が変わるゲームでは、時間を隠すと遊ぶ人は選択の材料を失います。時間が単に終了の合図でしかないゲームなら、隠しても選択は変わらず、体感だけが変わります。

最初に「このゲームで、残り時間は遊ぶ人の判断に使われるか」を自問してみてください。使われるなら、隠す設計は意図的な難しさの追加になります。使われないなら、表示は雰囲気や緊張感の演出であり、評価の基準も「判断の質」ではなく「気持ちの動き」になります。

公式作品の時間の置き方から読み取れること

アソバースの公式作品には、時間の使い方が対照的な2本があります。確認済みの仕様の範囲で、設計から読み取れることを整理します。

紙ひこうき郵便

海辺は36秒で5通、丘は40秒で8通、山は44秒で10通の手紙を集めます。そして最後の6秒で赤い郵便受けへ向かう流れです。風船にぶつかると紙が傷み、3回で終了します。

ここから読み取れるのは、制限時間が単なる終了ラインではなく、「集める」から「届ける」へ行動を切り替える区切りとして組み込まれていることです。最後の6秒という区切りがある以上、遊ぶ人は「いま残りがどのくらいか」を何らかの形でつかむ必要があります。ルート別に秒数と通数が違うので、通数あたりの余裕もルートごとに変わる設計だと読めます。

時計じかけの台所

6つのレシピがあり、材料をレシピ順に入れて火にかけ、針が緑の範囲に来たら止めて配膳します。時間制限なしの「見習い」と、1皿28秒・配膳6秒・ミス3回までの「本番」に分かれています。

ここから読み取れるのは二段構えです。まず時間制限を外して手順とタイミングの感覚を覚えさせ、そのあとで制限を加えます。時間の圧力を、操作を覚える段階から切り離している設計だと読めます。針が緑の範囲に来る瞬間を待つ遊びなので、時間の「長さ」だけでなく「いま狙う位置」を見せる表示も遊びの一部になっています。

作品を開いて確かめる点

どちらの作品も、残り時間が数字で出るのか、バーや針で出るのか、画面のどこに出るのか、残りが少なくなると見た目が変わるのかは、確認済みの情報にありません。この部分は、作品を開いて確かめてください。確かめるときは次の点を見るとよいでしょう。

  • 残り時間は秒数として読めるか、それとも量として見えるか
  • 視線を向けなくても、視界の端で変化に気づけるか
  • 最後の数秒で、表示や音に変化があるか
  • 見習いと本番で、表示の様子は変わるか

この観察メモがあると、次の実験で自作ゲームにどの条件を用意するかを決めやすくなります。

3条件を比べる実験の設計

自作ゲームで答えを出すための設計書です。問いは「残り時間の表示方法を変えると、遊び方と遊んだ感覚はどう変わるか」とします。

条件

同じゲームを、表示だけ変えた3条件で用意します。

  1. 数字:残り秒数を小数1桁で表示する
  2. バー:残りの割合を縮む線で示し、数字は出さない
  3. 非表示:終了するまで残り時間の手がかりを出さない

ゲームの内容、制限時間、的の出方は3条件で完全に揃えます。違いは表示だけにします。

準備するもの

  • 同じゲームの3条件版(次の節のコードが使えます)
  • 遊ぶ人:できれば複数人。自分一人で測る場合は、その限界を理解したうえで進めます
  • 記録用の表(条件、回数、各項目)

記録の取り方

1回のプレイごとに、次の項目を記録します。

  • 合計の成功数
  • 時間帯別の成功数(前半・後半・最後の5秒など)
  • プレイ直後の主観評価:「焦った」を1〜5点で
  • プレイ直後の主観評価:「集中できた」を1〜5点で
  • 一言メモ(「最後に慌てた」「いつ終わるか分からず手が止まった」など)

回数は、1人あたり各条件5回以上を目安にします。1回だけでは偶然の差と区別できません。

順序の扱い

同じ人が3条件を続けて遊ぶと、慣れの影響が条件の差に混ざります。たとえば「数字→バー→非表示」の順だけで遊ぶと、後ろの条件ほど上達して見えます。人ごとに順序を入れ替え、最初に練習プレイを数回して慣れの影響を減らしてください。遊ぶ人が一人しかいない場合は、日を分けて順序を変えて繰り返すのが次善策です。

最小の試作コード

3条件を切り替えて20秒遊べる、単独で動くHTMLです。保存して、ブラウザで開くだけで使えます。終了時に、合計数と最後の5秒の数、各クリックの時刻を表示します。

html
<!doctype html>
<meta charset="utf-8">
<select id="mode"><option value="num">数字</option>
<option value="bar">バー</option><option value="none">隠す</option></select>
<button id="start">開始</button>
<div id="t"></div>
<div id="bar" style="width:300px;height:12px;background:#ddd">
<div id="fill" style="height:100%;background:#47a"></div></div>
<button id="target" style="position:absolute;display:none">●</button>
<pre id="log"></pre>
<script>
const LIMIT = 20000, $ = id => document.getElementById(id);
let t0 = 0, hits = [], id = 0;
function place() {
  $("target").style.left = 20 + Math.random() * 300 + "px";
  $("target").style.top = 160 + Math.random() * 200 + "px";
}
$("start").onclick = () => {
  const mode = $("mode").value;
  t0 = performance.now(); hits = [];
  $("target").style.display = "block"; place();
  $("log").textContent = "";
  $("t").style.display = mode === "num" ? "block" : "none";
  $("bar").style.display = mode === "bar" ? "block" : "none";
  clearInterval(id);
  id = setInterval(() => tick(mode), 100);
};
$("target").onclick = () => {
  hits.push(Math.round(performance.now() - t0) / 1000); place();
};
function tick(mode) {
  const left = LIMIT - (performance.now() - t0);
  if (left <= 0) return finish(mode);
  $("t").textContent = (left / 1000).toFixed(1);
  $("fill").style.width = (left / LIMIT * 100) + "%";
}
function finish(mode) {
  clearInterval(id);
  $("target").style.display = "none";
  const late = hits.filter(s => s >= 15).length;
  $("log").textContent = `${mode}: 合計${hits.length} 最後の5秒${late}\n` + hits.join(", ");
}
</script>

的が出る位置は毎回ランダムなので、移動距離の差が成績に混ざります。厳密に比べたい場合は、位置の並びを固定する改造を加えると、条件間の公平さが上がります。

結果の読み方と起こりやすい誤り

記録がたまったら、次のように読みます。これは解釈の枠組みであり、結果を予言するものではありません。

  • 後半・最後の5秒の成功数が条件で大きく違う:時間表示が遊ぶ人のペース配分に影響している可能性があります。数字条件だけ最後に増えるなら、残り時間が行動の切り替えに使われているということです。
  • 非表示条件で合計数が下がり、主観の焦りも下がる:緊張は和らいだが、ペースの調整手段を失った可能性があります。ゲームがペース調整を要求するなら、ここは設計の再検討点です。
  • 条件間で成績に差がなく、主観の評価だけが違う:表示は成績ではなく気分を変えています。気分の差を狙うゲームなら、目的に合っています。
  • 人によって傾向が逆:平均だけで決めず、どんな遊び方の人にどの表示が合うかを見ます。

起こりやすい誤りは次のとおりです。

  1. 回数が少ない:1〜2回の差を結論にしてしまう。
  2. 順序の偏り:最後に遊んだ条件が上手く見えるだけの可能性を見落とす。
  3. 作った本人だけで測る:ゲームの癖を知っているため、初見の遊び方と違う結果になる。
  4. 表示以外も変わってしまう:数字条件だけ文字の描画で処理が重くなる、といった副作用が出る。
  5. 成功数だけを見る:楽しさや納得感は成績に出ないため、主観評価と一言メモを必ず残す。

判断基準:見せる・隠す・形を変える

実験の結果をどう設計に戻すかの目安です。

  • 残り時間で行動を切り替える(終盤に目的地へ向かうなど)、検討する表示:数字、または区切りが分かる表示
  • 手順を覚えてもらう段階、検討する表示:制限を外す、または弱い表示にする
  • 緊張感そのものが目的、検討する表示:バーや音など、数字より大まかな表示
  • 時間切れの意外性が目的、検討する表示:非表示。ただし不公平に感じられない説明が必要

非表示を選ぶ場合は、「いつ終わるか分からない」ことをルールの説明に含めておくのが安全です。知らされないまま時間切れになると、遊ぶ人は難しさではなく不公平さを感じやすくなります。また、実験で結果が出ても、一つの数値で結論を決めず、最初に確かめた「この表示は判断に使われるか」に戻って決めてください。

次の行動

まず、「紙ひこうき郵便」と「時計じかけの台所」を開き、残り時間がどう見えるかを前述の4つの観点でメモしてください。そのうえで、上のコードを自分のゲームの主要な動作に差し替え、3条件を各5回以上、順序を変えて遊んでみてください。結果を表にして、成功数と主観評価の両方を並べたとき、どちらの条件がゲームの狙いに近いかを選べば、表示の方針が決まります。