画面の四隅に何を置くか：視線の動きと配置の実験

先に決める：何を「見つけるまでの時間」と呼ぶか

測りたいのは「注視点から視線を動かして、標的を見つけ、クリックするまで」です。ここでの標的は、ゲームでいえば「見落とされたくない情報」の代役です。形は黄色い丸1個にして、色・大きさ・背景を全試行で同じにします。

問いは一つに絞ります。

• 比較するもの：標的の出る位置（左上・右上・左下・右下の4通り）
• 測るもの：標的が現れてからクリックされるまでの時間（ミリ秒）
• 固定するもの：標的の大きさ、色、背景、画面サイズ、ブラウザのズーム、画面からの距離、使う端末

見つけやすさの差は、大きさや色の差と混ざりやすい性質があります。位置の効果を見るなら、位置以外は動かさないのが原則です。

また、この実験が答えるのは「静止した画面で、中央を見ている状態から探す」場合に限られます。動きの激しいゲーム中は、視線が操作対象に引き寄せられます。その場合の結果は、この実験を拡張した別の問いになります（最後の節で触れます）。

準備するものと条件の固定

用意するものは次のとおりです。

• ブラウザが動くPCまたはタブレット（全員同じ端末を使います）
• 下に示すHTMLを保存した1ファイル（corner-test.html など）
• 協力者。自分だけで測らず、できれば複数人に頼みます。3〜5人でも傾向は見えますが、人数が多いほど個人差の影響が薄まります
• 結果を貼る表計算ソフト

自分1人で測ると、場所を覚えてしまい、「どこに出るか」を予測して待つようになります。この実験の測定対象は「予測しない状態での発見の速さ」なので、予測が混ざった測定は別の問いの答えになってしまいます。協力者にも、四隅のどこに出るかは毎回ランダムだと伝えておきます。

環境は次のようにそろえます。

• ブラウザを全画面表示にして、ズームは100%に固定する
• 画面の明るさと部屋の明かりを全員で同じにする
• 通知が出ないようにして、他のアプリを閉じる
• 協力者ごとに、画面からの距離を同じくらいにする

手順：測定ページと進め方

測定ページは次のとおりです。画面中央の「+」を注視点とします。「+」をクリックすると、0.8〜1.8秒のランダムな待ち時間のあとに、四隅のどれかに丸が現れます。丸をクリックするまでの時間を記録します。

「+」をクリックしてから次を始める作りにしたのは、毎回マウスを画面中央に戻すためです。前の試行で隅にあったマウスの位置が、次の試行の速さに混ざるのを防げます。

<!doctype html>
<meta charset="utf-8">
<style>
body{margin:0;height:100vh;overflow:hidden;background:#222;color:#fff;font:16px sans-serif}
#f{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:32px;padding:12px 24px;cursor:pointer}
#t{position:absolute;width:48px;height:48px;border-radius:50%;background:#ffd24a;display:none;cursor:pointer;z-index:2}
#o{position:absolute;left:10px;top:60px;bottom:10px;overflow:auto;font-size:12px}
</style>
<div id="f">+</div><div id="t"></div><pre id="o"></pre>
<script>
const M=24,S=48,REP=10,W=innerWidth,H=innerHeight;
const pos={左上:[M,M],右上:[W-M-S,M],左下:[M,H-M-S],右下:[W-M-S,H-M-S]};
const t=document.getElementById('t'),f=document.getElementById('f'),o=document.getElementById('o');
let queue=null,rows=[],cur,t0,busy=false;
function shuffle(a){for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]]}return a}
f.onclick=()=>{
  if(busy)return;
  if(!queue)queue=shuffle(Object.keys(pos).flatMap(c=>Array(REP).fill(c)));
  if(!queue.length)return;
  busy=true;cur=queue.pop();
  setTimeout(()=>{t.style.left=pos[cur][0]+'px';t.style.top=pos[cur][1]+'px';t.style.display='block';t0=performance.now()},800+Math.random()*1000);
};
t.onclick=()=>{
  rows.push(cur+','+Math.round(performance.now()-t0));
  t.style.display='none';busy=false;
  if(!queue.length)o.textContent='隅,ミリ秒\n'+rows.join('\n');
};
</script>

進め方は次のとおりです。

1. ファイルをブラウザで開き、全画面にします。画面サイズは読み込み時に取得するので、全画面にしてから再読み込みします。
2. 協力者には「中央の『+』を見て、クリックしてください。丸が出たらできるだけ早くクリックします」とだけ伝えます。
3. 最初の4回は練習として扱います。この回のデータは分析から外すため、表計算で最初の4行を除きます。
4. 1人あたり四隅を各10回、計40回です。全部終わると、画面左に「隅,ミリ秒」の表が出ます。
5. 表示をコピーして表計算ソフトに貼り、協力者の名前（または番号）の列を足します。協力者が変わるたびにページを再読み込みしてください。

40回は、一息で終えられる長さを考えた目安です。疲れが出てきたと感じたら、休憩を入れるか回数（コード先頭の REP）を減らします。ただし、全員で回数は同じにします。

記録の取り方

記録の単位はミリ秒で、1試行につき1行（隅・時間）です。協力者ごとの表を一つにまとめ、「協力者／隅／ミリ秒」の3列にします。

集計には平均より中央値を使います。クリックが一度遅れる（よそ見をしていた、など）と、平均は大きく引きずられます。中央値ならその影響を受けにくくなります。

集計表は、次の形で作ります（中身は測定後に埋めます）。

• A、左上の中央値：、右上の中央値：、左下の中央値：、右下の中央値：
• B、左上の中央値：、右上の中央値：、左下の中央値：、右下の中央値：
• C、左上の中央値：、右上の中央値：、左下の中央値：、右下の中央値：

隅ごとの10回について、最小値と最大値も併記します。後で述べるように、「同じ隅でもどれだけぶれるか」が判断の物差しになるからです。

明らかなよそ見や、協力者が「今のは見ていなかった」と申告した試行は、除外するかどうかを測定前に決めておきます。結果を見てから除外すると、都合のよい結論に寄ってしまうためです。除外した場合は、何件除いたかも記録します。

結果の読み方と、よくある誤り

表がそろったら、次の順に読みます。

1. 人ごとに最速の隅を見る。 協力者の間で最速の隅が同じなら、位置の傾向がある可能性があります。人によって違えば、位置より個人の癖が効いていると考えられます。
2. 隅の間の差と、同じ隅のぶれを比べる。 隅の間の差が、同じ隅の10回の幅（最小〜最大）より小さければ、配置の差は誤差の範囲かもしれません。差が幅を明らかに超えるなら、位置の影響を疑えます。
3. 上下と左右にまとめ直す。 左側（左上＋左下）と右側、上側と下側に分けて中央値を比べると、四隅のばらつきの中に、縦横どちらかの傾向が見えることがあります。

結果を自分のゲームへ当てはめるときは、次の考え方を使います。

• 速く見つかった隅は、頻繁に確認してほしい情報（残り時間など）の置き場所の候補になります
• 見つかるまでが遅かった隅には、見落としても困らない情報を置く方法があります。ただし、そこに大事な情報を置く場合は、色・大きさ・動きなど別の手段で補う必要があります
• 隅の間に差がほぼ見られなかった場合は、この条件では置き場所より他の要素（大きさ・色・動き）の方が効くかもしれません。その場合は次の実験で、標的の大きさや色を変えます

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

• 順序の偏り。 隅の順番を固定すると、慣れや疲れが特定の隅に集中します。このページは順序をランダムにしていますが、自分で改造するときも、順序は必ず混ぜてください。
• 手の移動時間が混ざる。 クリックまでの時間には、視線の移動だけでなく、マウスを動かす時間も含まれます。「+」をクリックしてから始める構成は、この影響を減らすためです。さらに厳密にしたい場合は、丸の中に数字を出して数字キーで答えさせる方式に変えると、手の移動を除けます。
• 画面サイズの違い。 画面が違うと、中央から隅までの距離が変わります。比較する協力者の間では端末を共通にし、端末を変えた測定は別の実験として扱います。
• 隅の余白の違い。 このページでは隅から24pxの位置に標的を置きます。実際のゲームの表示位置が隅から離れている場合は、M の値を変えて測り直してください。
• 協力者の人数が少ない。 数人の結果では、個人差が偏って見えることがあります。傾向が出たと思っても、断定せずに「この条件、この人たちでは」と書いておきます。
• 静止画面での結果を動きのあるゲームへそのまま当てはめる。 静止状態の結果は、操作中の画面にそのまま持ち込めるとは限りません。確かめたいなら、実際のゲームの中で、HUDの位置だけを切り替えて遊び比べます。

次の行動

まず上のHTMLを保存して、自分で数回動かし、動作を確認してください。そのうえで、協力者を数人集めて四隅を測り、中央値と最小〜最大の幅を表にします。位置に差が見えたら、次は標的を数字やアイコンに変えて同じ手順を繰り返すと、自分のゲームの表示に近づけられます。

アソバースに自作ゲームを公開する場合、ゲームはiframeの中で表示されます。実際にどの大きさで表示されるかは、投稿前の表示確認の段階で、自分の目で隅の位置を確かめておくと安心です。