時間の見せ方を変えると何が変わるのか：数字・バー・色・音を自分の手で比べる

4方式を、確かめられる仮説として整理する

まず、各方式について「何が得意そうか」「どこが弱そうか」を仮説として置きます。これは検証前の見立てで、結論ではありません。

• 数字、得意そうなこと：秒数をそのまま読める、確かめたい弱点：読むために視線と注意が必要
• バー、得意そうなこと：残りの割合を一目で掴める、確かめたい弱点：細かい秒数は読みにくい
• 色、得意そうなこと：安全・注意・危険の段階が伝わる、確かめたい弱点：色の見分けにくい人がいる。境目が曖昧
• 音、得意そうなこと：視線を使わずに伝わる、確かめたい弱点：音を出せない環境や、聞こえない場合に伝わらない

色と音には、アクセシビリティ上の注意もあります。色だけ、音だけで重要な情報を伝えると、伝わらない遊び手が出ます。アソバースの公式作品でも、記憶ゲームの「こだまの森」は音なしで遊べると案内されています。測定では、方式ごとの強みに加えて、単独で使ってよいかどうかも見ておきます。

測定用の最小プロトタイプ

測るのは「残りがちょうど3秒になったと思った瞬間にボタンを押す」という課題です。押した瞬間の実際の残り時間と3秒の差が小さいほど、その表示は残り時間を読み取りやすいと考えられます。次のコードは、単独で動くHTMLです。保存して、ブラウザで開くだけで使えます。

<!doctype html><meta charset="utf-8">
<body style="font:20px sans-serif;text-align:center">
<p><select id="m"><option>数字</option><option>バー</option><option>色</option><option>音</option></select>
<button id="s">スタート</button> <button id="p">今!</button></p>
<div id="n" style="font-size:64px;height:80px"></div>
<div style="width:300px;height:20px;border:1px solid;margin:auto"><div id="b" style="height:100%;background:#48a"></div></div>
<p id="r"></p>
<script>
const $=id=>document.getElementById(id);let t0,run,ac,next;
function beep(){const o=ac.createOscillator(),g=ac.createGain();o.frequency.value=600;g.gain.value=.1;
 o.connect(g);g.connect(ac.destination);o.start();o.stop(ac.currentTime+.08)}
$('s').onclick=()=>{ac=ac||new AudioContext();t0=performance.now();run=true;next=0;$('r').textContent='';tick()};
$('p').onclick=()=>{if(!run)return;run=false;const left=10-(performance.now()-t0)/1000;
 $('r').textContent=$('m').value+' 誤差 '+(left-3).toFixed(2)+'秒'};
function tick(){if(!run)return;const now=performance.now(),left=Math.max(0,10-(now-t0)/1000),m=$('m').value;
 $('n').textContent=m=='数字'?left.toFixed(1):'';
 $('b').style.width=m=='バー'?left*10+'%':'0';
 document.body.style.background=m=='色'?'hsl('+left*12+',70%,80%)':'';
 if(m=='音'&&now>=next){beep();next=now+100+left*100}
 if(left<=0){run=false;$('r').textContent='時間切れ'}else requestAnimationFrame(tick)}
</script>

各方式の中身は次のとおりです。

• 数字：残り秒数を小数第1位まで表示します。
• バー：幅が10秒かけて0%まで縮みます。
• 色：背景が緑から赤へ連続して変わります（hsl値は残り秒数に12を掛けたものです）。
• 音：短いビープを鳴らし、残りが減るほど間隔が短くなります。間隔は残り10秒で約1.1秒、0秒付近で約0.1秒です。

表示に出るのは「誤差」で、正なら早押し（残りがまだ3秒より多い）、負なら遅押しです。方式を切り替えるときは、ほかの方式の表示が残っていないことも確認してください。

記録の取り方

結果を読む前に、記録の形を決めておきます。次の手順を勧めます。

1. 各方式を1回ずつ練習します。練習の記録は集計に入れません。
2. 本番は各方式5回ずつ、合計20回とします。
3. 方式の順番は固定しません。「数字→バー→色→音」と毎回同じ順にすると、慣れや疲れが特定の方式に偏ります。紙に順番をランダムに書いておくか、日ごとに逆順にします。
4. 1回ごとに、方式名・誤差・緊張感（1〜5の自己評価）を表に書きます。緊張感は押した直後に付け、他の方式と見比べて付け直すのは避けます。
5. 方式ごとに「誤差の絶対値の平均」と「最大と最小の差（ばらつき）」を出します。誤差の符号つき平均も出しておくと、早押しの癖か遅押しの癖かが分かります。

自分一人の測定では、結果は自分の癖が強く出ます。数人に協力してもらえるなら、同じ手順で行ってください。それでも少人数の傾向にとどまり、一般的な結論にはなりません。

結果の読み方

数字が出たら、分かりやすさ（誤差）と緊張感の2軸で並べます。次のように読むと、次の一手が決まります。

• 誤差が小さく、緊張感も高い方式なら、読みやすく急かす力もあります。切迫した場面の主表示に向きます。
• 誤差が小さく、緊張感が低い方式は、読み取りやすいが余裕を感じさせます。落ち着いて遊ばせたい場面や、入門段階の主表示に向きます。
• 誤差が大きく、緊張感が高い方式は、焦るのに読めない状態です。難しさがゲームの面白さではなく、不満になる恐れがあります。補助表示を足す候補です。
• 誤差も緊張感も低い方式は、存在感が薄い表示です。大きさ、変化の速さ、コントラストを見直す余地があります。

次に、組み合わせを同じ手順で測ります。たとえば「数字＋色」にしたとき、数字単独より誤差が小さくなるかを見ます。ここでも、色だけに頼らない構成かどうかを併せて確認してください。

注意したい誤りもあります。

• 画面を見る角度やブラウザの描画の遅れで、数十ミリ秒の誤差は出ます。方式同士を比べる目的なら、同じ環境で測ればほぼ問題にはなりません。
• 音モードは、ブラウザの音量や出力先の影響を受けます。毎回同じ条件にそろえてください。
• 5回の平均が近い場合は、差があるとは言わないでおきます。回数を増やしても差が小さければ、その方式の差はゲーム設計上、他の要素より小さいと判断できます。
• 緊張感は慣れると下がります。後半に回した方式が不利にならないよう、順番の入れ替えが必要です。

公式作品の時間設計から読み取れること

確認済みの範囲で、アソバースの公式作品に見られる時間の使い方も見ておきます。ここでは表示の細部ではなく、設計から読み取れることだけを取り上げます。

「紙ひこうき郵便」は、海辺が36秒で5通、丘が40秒で8通、山が44秒で10通を集め、最後の6秒で赤い郵便受けへ向かいます。時間の総量だけでなく、「最後の6秒」で遊び手の目的が切り替わる設計です。時間を単なるカウントダウンにせず、行動を変える合図として使っていると読み取れます。残り時間をどの方式で見せているか、6秒前に何かが変わるかは、作品を開いて確かめてください。

「時計じかけの台所」には、時間制限のない見習いと、1皿28秒・配膳6秒・ミス3回までの本番があります。針が緑の範囲に来たら止める遊びなので、時間の判断が針と色の範囲で示される場面があると分かります。制限なしの段階で判断の感覚を身につけ、本番で時間の圧力が加わる流れだと読み取れます。時間表示の工夫を測るときも、まず圧力のない状態で表示を理解させ、その後に制限を足すという順は参考になります。

どちらの作品も、時間の表示手段が数字なのか、バーなのか、色なのか、音なのかは、確認済みの範囲では分かりません。作品を開いて、残り時間が何で伝わっているかを観察し、自分の測定結果と照らしてみてください。

次の行動

上のコードを保存して、まず各方式を練習1回、本番5回ずつ試し、誤差と緊張感の表を作ってください。次に、「紙ひこうき郵便」か「時計じかけの台所」を開き、残り時間がどの方式で伝わっているかを書き出します。最後に、自分のゲームの時間表示を、結果の読み方の4分類のどこに置くかを決めてください。