タイミングゲームの判定幅を半分にする：難しさの感じ方の変化

問いを三つに分ける

「判定幅を半分にしたら難しく感じるか」という問いは大きすぎます。次の三つに分けると、記録するものが決まります。

1. 判定幅を段階的に狭めたとき、命中率はどう下がるか。
2. 「難しい」という評価と、「納得できない」という評価は、同じ地点で動くか、別の地点で動くか。
3. 外れたとき、見た目の緑の枠のすぐ外で外れた割合（ニアミスの割合）は、理不尽さの評価と関係があるか。

特に2が核です。難しさは「どれくらい外れるか」ですが、理不尽さは「外れ方に納得できるか」です。評価を一つにまとめず、必ず別々に聞きます。

判定幅は、画面上の長さ（ピクセル）で考えるだけでなく、時間でも考えます。針が一定の速さで動くなら、幅は「緑の範囲を針が通過する時間」に換算できます。通過時間が短くなるほど、押すタイミングのわずかなばらつきが結果に響きます。端末や画面の遅延が一定でない環境では、幅が狭いほどその影響が相対的に大きくなります。この点が後の「誤りやすい点」にも関わってきます。

準備するもの

準備は次の三つです。

• 判定幅を切り替えられるタイミングゲーム。下のコードで最小のものを作れます。
• 記録用の紙かスプレッドシート。
• 一緒に試してくれる人（任意）。一人でも実施できますが、複数人いると境界の個人差が見えます。

コードは、400px幅のバーの上を針が秒速200pxで往復し、中央の緑の範囲で押せば命中とする最小構成です。外部ライブラリは使わず、HTMLファイル一つで動きます。index.html として保存し、ブラウザで開いてください。

<!doctype html>
<meta charset="utf-8">
<title>判定幅テスト</title>
<canvas id="c" width="400" height="50"></canvas>
<p>判定幅(px): <select id="w">
<option>80</option><option>60</option><option>40</option><option>30</option><option>20</option>
</select> <button id="r">記録を出す</button></p>
<p>Spaceキーまたはバーのクリックで押します。</p>
<pre id="o"></pre>
<script>
const ctx=document.getElementById('c').getContext('2d');
const L=400,V=200; // 全長(px)、速度(px/秒)
let log=[];
function pos(t){const p=(t*V)%(2*L);return p<L?p:2*L-p;}
function draw(){
  const W=+w.value,x=pos(performance.now()/1000);
  ctx.clearRect(0,0,L,50);
  ctx.fillStyle='#8c8';ctx.fillRect(L/2-W/2,10,W,30);
  ctx.fillStyle='#222';ctx.fillRect(x-2,5,4,40);
  requestAnimationFrame(draw);
}
function hit(){
  const W=+w.value,d=pos(performance.now()/1000)-L/2;
  log.push({W,d:Math.round(d),ok:Math.abs(d)<=W/2});
  o.textContent=log.slice(-5).map(e=>e.W+' '+(e.ok?'命中':'外れ')+' ずれ'+e.d).join('\n');
}
c.onpointerdown=hit;
document.onkeydown=e=>{if(e.code==='Space'){e.preventDefault();hit();}};
r.onclick=()=>{o.textContent='幅,ずれpx,結果\n'+log.map(e=>[e.W,e.d,e.ok?1:0].join(',')).join('\n');};
draw();
</script>

幅の選択肢は80・60・40・30・20pxです。針の速さが秒速200pxなので、80pxなら通過に約0.4秒、40pxなら約0.2秒かかる計算です。「半分」にあたる比較は80pxと40pxです。60px、30px、20pxは、理不尽さを感じる境界を探るための中間と、さらに狭い段階です。

でたらめに押した場合の命中率の目安も計算しておきます。針が全長400pxのどこにいるかが一様だと考えると、幅÷400です。80pxなら20%、60pxなら15%、40pxなら10%、30pxなら7.5%、20pxなら5%になります。狙って押す場合の成功率はこれより高くなるので、「でたらめとどれだけ離れているか」を読む下限の基準になります。

手順と記録の取り方

実験は条件を一つずつ、同じ流れで繰り返します。

1. 練習として、80pxで20回押します。この記録は分析に使いません。慣れによる上達を、本番の条件に混ぜないためです。
2. 次に、80・60・40・30・20のうち、条件の順番を決めます。80から順に狭める方法のほかに、日を変えて逆順（20から広げる）でも行ってください。順番によって感じ方が変わるかを見られます。
3. 各条件で20回ずつ押します。1回押すごとに、画面にずれと結果が出ます。
4. 20回終わるごとに「記録を出す」を押し、出力をコピーして保存します。このコードの記録は、画面を開いている間だけ残ります。ページを閉じる前に必ずコピーしてください。
5. 各条件が終わったら、すぐ次の三つを紙に書きます。

• 難しさ（1＝易しい〜5＝難しい）
• 納得感（1＝外れたのは納得できない〜5＝外れたのは自分のせいだと思えた）
• 「押した瞬間は合っていたはずなのに外れた」と感じた回数

1回ごとではなく、条件ごとにまとめて聞くのがポイントです。1回ごとに評価を挟むと、プレイのリズムが崩れ、タイミングの感覚自体が変わってしまいます。ただし、回数の自己申告は押した直後の感覚が薄れる前に書いてください。気になった外れだけ、紙に印を付けておく方法も有効です。

スプレッドシートに貼ったら、次の列を足します。

• 条件ごとの命中率（命中回数÷20）
• ずれの大きさの絶対値÷（幅÷2）。1以下なら命中、1を超えた分が外れの大きさです。
• ニアミス率。外れた試行のうち、ずれの絶対値が（幅÷2）の1.25倍以内に収まる割合です。緑の枠のすぐ外で外れた割合を表します。

結果の読み方

条件ごとに、命中率・難しさ・納得感・「合っていたのに外れた」回数が並びます。ここから次の三つの型を確かめます。

型A：命中率が下がり、納得感は保たれている。 難しいけれど公平に感じられている状態です。外れた原因を自分の操作に結びつけられているので、練習で上達する余地を感じやすい形です。

型B：命中率の下がり方は小さいのに、納得感が下がる。 数字上は難しくなっていないのに、外れに納得できない状態です。この場合は、見た目の枠と実際の判定の間にずれがないか、入力や表示の遅れが幅に対して無視できなくなっていないかを疑います。コードでは、押した瞬間の針の位置で判定していますが、画面に描かれているのは最大1フレーム前の位置です。幅が狭いほど、この差が「合っていたのに」の感覚につながりやすくなります。

型C：ニアミス率が高い条件で、「合っていたのに」の回数が増える。 枠のすぐ外で外れる場面が続くと、人は「あと少しだった」「枠の見た目がずれている」と感じやすくなります。ニアミス率と自己申告の回数が同じ条件で動くなら、理不尽さの正体はそこにある可能性があります。

境界は次のように探します。納得感が、ある条件を境に目に見えて下がるなら、その手前の条件が「厳しいが納得できる」限界です。逆に、どの条件でも納得感が変わらないなら、この速さと幅の範囲では境界が見えなかったことになります。その場合は幅を10pxなどさらに狭めるか、速さを変えて再度試します。ただし、幅と速さを同時に変えてはいけません。どちらの影響か切り分けられなくなるためです。

20回では偶然のばらつきが大きいので、1回の結果で結論を出さないでください。同じ条件を別の日にもう一度行い、傾向が重なるかを確かめると、判断の根拠が強くなります。

誤りやすい点

実験の結果を曇らせる原因を挙げます。

• 練習効果。 80pxを最初にやると、後の条件は「慣れた状態」で受けることになります。順序を入れ替えた実施を必ず加えてください。
• 疲れと集中。 100回以上続けると、後半の条件が不利になります。条件の間に休憩を挟みます。
• 入力方法の違い。 Spaceキーとクリック（タップ）では、遅延の出方が違うことがあります。比較する間は一方に固定してください。
• 見た目と判定の不一致。 描画する緑の幅と、判定に使う幅が異なると、納得感の評価が壊れます。コードでは両方が同じ変数 W を使っているので、改造するときもここを分けないでください。
• 罰則の同時変更。 外れたら減点やゲームオーバーにする仕組みを加えると、緊張が増して難しさの感じ方が変わります。まず罰なしで測り、次に罰を足した条件を別に測ります。
• 自己申告の揺れ。 「理不尽」という言葉は人によって幅があります。「押した瞬間は合っていたと思ったのに外れた」という具体的な言い方で数えると、ぶれが小さくなります。

既存のゲームで同じ視点を試す

コードを書かなくても、「針が緑の範囲に来たら止める」タイプのゲームで、同じ観察ができます。アソバースの公式作品「時計じかけの台所」は、材料をレシピ順に入れて火にかけ、針が緑の範囲に来たら止めて配膳するゲームです。時間制限のない「見習い」と、1皿28秒・配膳6秒・ミス3回までの「本番」があります。

見習いと本番で、緑の範囲の見た目や針の動きがどう違うかは、この記事では断定できません。作品を開いて確かめてください。確かめるときの観察項目は次のとおりです。

• 緑の範囲の見た目の幅は、レシピ（料理）によって変わるか。
• 見習いと本番で、外れたときの納得感は違うか。違うなら、その差は幅によるものか、時間制限とミス回数の緊張によるものか。
• 100点評価のうち、減点されたときの「なぜ」を自分で説明できるか。

説明できる外れは、型Aに近い体験です。理由が分からない外れが続くなら、型Bや型Cを疑う手がかりになります。

自作のコードを他の人にも試してもらいたい場合は、index.html として、アソバースに投稿する方法があります。HTMLの直接アップロードか、公開済みURLを使い、入力、表示の確認、公開の順に進みます。公開にはメールアドレスの確認が必要です。投稿した作品のlocalStorageは一時メモリー扱いなので、記録の保存は「記録を出す」でコピーする方式のままにしておくと確実です。

次の行動

まず上のコードを保存し、80pxと40pxの2条件だけ、各20回で試してください。難しさ・納得感・「合っていたのに外れた」回数を紙に書き、命中率と並べて見ます。数字の差より納得感の差のほうが大きい条件があれば、そこがあなたの「理不尽の境界」の手がかりです。次に60pxや30pxを足して、境界を細かく絞り込んでください。