余白を2倍にするとゲーム画面はどこで間延びするか：窮屈さと寂しさの境界を測る実験設計

何を問い、何を測るか

問いは次の1文にまとめます。「要素の間隔を基準の0.5倍から3倍まで変えたとき、素早く正確に操作できる範囲と、画面がまとまって見える範囲は、どこで重なるか」です。

ここでは「余白」を、隣り合うボタン同士の間隔と、画面の外周の余白の両方に同じ倍率をかけたものと定義します。要素の大きさは変えません。大きさまで変えると、間隔の影響か大きさの影響か分からなくなるためです。

指標は3つに絞ります。

• 探索時間：指定された番号のボタンを見つけて押すまでの時間（ミリ秒）です。間隔が狭すぎても広すぎても遅くなる可能性があります。
• 誤クリック率：指定と違うボタンを押した割合です。窮屈さ側の指標です。
• まとまり感：「同じ集団に見えるか」「窮屈か」「間延びしているか」を、本人が5段階で答える主観の指標です。間延び側はこれでしか拾えません。

探索時間と誤クリック率だけでは、広げすぎた画面の「寂しさ」は見えてきません。広い間隔でも、押す作業自体は案外こなせてしまうことがあるからです。主観評価を必ず併用します。

準備するもの

用意するのは、下のHTMLを1枚保存したファイルと、ブラウザです。外部ライブラリも通信も使いません。スライダーで倍率を変え、「開始」を押すと探すボタンの番号が表示されます。押すたびに倍率・指定番号・正誤・所要時間がコンソールに表で出ます。

<!doctype html>
<meta charset="utf-8">
<title>余白テスト</title>
<style>
  :root { --unit: 8px; --k: 1; }
  body { font-family: sans-serif; margin: 0; background: #1b2733; color: #eee;
         padding: calc(var(--unit) * 2 * var(--k)); }
  #grid { display: grid; grid-template-columns: repeat(4, 64px);
          gap: calc(var(--unit) * var(--k)); }
  button { height: 64px; font-size: 20px; }
  #bar { margin-bottom: 16px; }
</style>
<div id="bar">
  倍率 <input id="k" type="range" min="0.5" max="3" step="0.5" value="1">
  <output id="kv">1</output>
  / 探すボタン：<b id="target">-</b>
  <button id="start" style="height:auto;font-size:14px">開始</button>
</div>
<div id="grid"></div>
<script>
const grid = document.getElementById('grid');
const log = [];
let target = 0, t0 = 0;
for (let i = 1; i <= 16; i++) {
  const b = document.createElement('button');
  b.textContent = i;
  b.onclick = () => {
    if (!target) return;
    const ms = Math.round(performance.now() - t0);
    log.push({ k: +k.value, target, hit: i === target, ms });
    console.table(log);
    next();
  };
  grid.appendChild(b);
}
function next() {
  target = 1 + Math.floor(Math.random() * 16);
  document.getElementById('target').textContent = target;
  t0 = performance.now();
}
document.getElementById('start').onclick = next;
k.oninput = () => {
  document.documentElement.style.setProperty('--k', k.value);
  kv.textContent = k.value;
};
</script>

基準の間隔は8pxです。倍率2なら16px、倍率3なら24pxになります。自分のゲームのUIで確かめたいときは、ボタンの並びを自作の部品に差し替え、間隔を --k で変える形にそろえてください。

そのほか、紙とペン（または表計算）、できれば自分以外の協力者を数人用意します。自分だけで繰り返すと、番号の位置を覚えてしまい、探索時間が実力より短く出ます。

手順

条件をそろえる

画面サイズとブラウザの拡大率は、実験の間ずっと固定します。スマートフォン向けのゲームなら、実機か、実機に近い幅のウィンドウで行います。マウスのクリックと指のタップは操作の精度がまったく違うので、本番の操作方法に合わせてください。

倍率の並べ方

試す倍率は 0.5・1・1.5・2・3 の5段階を基本にします。0.5刻みのスライダーなので、2.5も選べます。境界が2〜3の間にありそうなときだけ追加してください。

倍率は小さい順に並べず、協力者ごとにばらばらの順にします。小さい順だと、慣れによる速さが「間隔が広がったから速くなった」という見かけの効果になるためです。

1倍率あたりの試行

1. 倍率を設定し、練習として5回押します。この5回は記録から外します。
2. 続けて本番を10回行います。コンソールの表から、倍率・正誤・ミリ秒を転記します。
3. 倍率ごとに、次の3つの質問に1〜5で答えてもらいます。「窮屈だった」「間延びしていた」「ひとまとまりの画面に見えた」です。窮屈と間延びは、同じ尺度の両端にせず、別々の質問にします。

倍率5段階なら、1人あたり本番50回です。短時間で終わるので、疲れによる影響も小さく抑えられます。

記録の取り方

記録は1人ごとに、倍率の行を作って書き込みます。

• 0.5、探索時間の中央値(ms)：、誤クリック(回/10)：、窮屈(1-5)：、間延び(1-5)：、まとまり(1-5)：
• 1、探索時間の中央値(ms)：、誤クリック(回/10)：、窮屈(1-5)：、間延び(1-5)：、まとまり(1-5)：
• 1.5、探索時間の中央値(ms)：、誤クリック(回/10)：、窮屈(1-5)：、間延び(1-5)：、まとまり(1-5)：
• 2、探索時間の中央値(ms)：、誤クリック(回/10)：、窮屈(1-5)：、間延び(1-5)：、まとまり(1-5)：
• 3、探索時間の中央値(ms)：、誤クリック(回/10)：、窮屈(1-5)：、間延び(1-5)：、まとまり(1-5)：

探索時間は平均ではなく中央値で見ます。うっかり見失った1回が極端に長くなり、平均を引っ張るためです。誤クリックは割合に直すより、10回中の回数のまま書くほうが、回数の少ない実験では読み違えにくくなります。

主観評価は、押した直後の印象を書いてもらいます。倍率をすべて終えてから思い出して答えると、最後に見た画面の印象に引きずられます。

結果の読み方

3つの指標を横に並べ、倍率ごとに次の順で読みます。

1. 窮屈側の下限を探す：誤クリックが目立ち、「窮屈」の点が高い倍率はどこまでかを見ます。そこより小さい倍率は候補から外します。
2. 間延び側の上限を探す：「間延び」の点が上がり、「まとまり」の点が下がり始める倍率を見ます。そこより大きい倍率は候補から外します。
3. 残った範囲を比べる：残った範囲の中で、探索時間の中央値が短い倍率を選びます。

結果の型ごとの判断は、次のとおりです。

• 窮屈側と間延び側の範囲が重なる：重なった範囲が使える間隔です。その中央付近を採用し、端は避けます。
• 重ならない（候補が残らない）：間隔以外が原因です。ボタンが大きすぎる、要素が多すぎる、画面が小さすぎるなどを疑い、要素数や大きさを変えて再実験します。
• 探索時間がほとんど変わらないが、主観だけ変わる：操作性は倍率に鈍く、見た目の印象だけが動いています。ゲームの雰囲気（詰まった緊迫感か、ゆったり感か）で選んで構いません。
• 協力者ごとに境界がずれる：個人差の範囲に収まるなら、全員が許容できる範囲の共通部分を採ります。共通部分がないなら、設定で間隔を切り替えられる仕様も検討してください。

「2倍は間延び」という結論を先に決めて読まないことが大切です。倍率だけでなく、要素の大きさとの比で決まるからです。ボタンの幅64pxに対して間隔16pxなら、間隔は幅の4分の1です。この比で記録しておくと、別のUIに応用するときに役立ちます。

誤りやすい点

• 全体の大きさも一緒に変わっている：このHTMLは倍率を上げると、グリッド全体が広がります。「間隔」の効果と「全体が大きくなってスクロールが必要になった」効果が混ざります。切り分けたいときは、全体の幅を固定した版を別に作り、ボタンの大きさを間隔に合わせて縮めて、もう一度同じ手順を行ってください。
• 画面の外に押し出される：倍率3で一部のボタンが見えなくなると、探索時間が極端に伸びます。画面に収まっているかを必ず確認してください。
• 番号の位置を覚える：同じ配置で繰り返すと、記憶で押せてしまいます。協力者を替える、ボタンの並びをシャッフルする、番号の代わりに絵柄や色を使うなどで対処します。
• 自分の作品への思い入れ：作った本人は、どの画面も「ちょうどいい」と感じがちです。主観評価は、できるだけ初見の人に回答してもらいます。
• 回数が少なすぎる：1倍率10回では、個々の数値の小さな差に意味はありません。見るのは、倍率を変えたときに傾向が逆転するかどうかです。小さな差で優劣をつけず、大きな落ち込みや急な変化だけを拾ってください。
• 端末の違いを無視する：パソコンで決めた間隔を、そのままスマートフォンに持っていくと、指の太さの影響で窮屈さの下限が変わります。両方で測る時間がないなら、タップ操作が主になる端末を優先してください。

次の行動

まず上のHTMLを保存し、倍率1と2だけで5回ずつ押して、「窮屈」と「間延び」を別々に1〜5で書いてみてください。それで違いが見えたら、倍率5段階と協力者を加えて本番に進みます。決まった間隔は自分のゲームのCSSに入れ、アソバースの投稿画面の表示確認で、PCとスマートフォンの幅の両方を見て最終確認すると安心です。