投稿する
マガジン
著者：アソバース編集部公開：更新：約12分で読めます

同じゲームを白背景と黒背景で遊ぶと、見やすさはどう変わるか：自分で測る実験設計

遊びをつくる

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

明暗の異なる色見本と拡大鏡で、ゲーム画面のコントラストを表すイラスト。
記事のテーマをもとに制作したAI生成イラスト。

暗い背景に灰色の敵弾を置いたゲームを、昼間の明るい部屋で遊ぶ場面を考えてみます。作った本人は弾の位置が分かっていても、初めて遊ぶ人は見失うかもしれません。背景を白に変えれば解決しそうですが、今度は黄色い文字が背景に溶ける可能性があります。この記事は、背景の明暗で「文字の読み取り」と「動くものの発見」にどれだけ差が出るかを、自分のブラウザで測る実験の設計書です。 測るのは、画面に現れた数字を見つけて、その数字のキーを押すまでの時間と、押し間違いの回数です。この2つなら、背景を白と黒に切り替えるだけで比べられます。動く数字と止まった数字の両方を用意するので、「文字の見つけやすさ」と「動くものの見つけやすさ」を別々に確かめられます。 この記事に結果は載せていません。差が出るかどうか、出るならどちらが有利かは、あなたの画面と目で決まります。ここでは問いの立て方、準備、手順、記録、結果の読み方、誤りやすい点を順に示します。

この記事の目次
  1. 何を変えて、何を揃えるか
  2. 準備するもの：最小の測定ページ
  3. 手順
  4. 記録の取り方
  5. 結果の読み方
  6. 誤りやすい点
  7. 次の行動
  8. 参考資料

何を変えて、何を揃えるか

背景の明暗を比べるときの落とし穴は、背景を変えると前景色とのコントラスト比も一緒に変わることです。コントラスト比は、2色の相対輝度（明るさを人間の知覚に近づけて数値化したもの）の比で、WCAG（W3Cのウェブアクセシビリティ指針）では通常の文字に4.5:1以上が目安とされています。

灰色の文字を白と黒の背景に置くと、片方だけ比が高くなりがちです。そのため問いを2つに分けます。

  • 問いA：コントラスト比をほぼ揃えたとき、背景の明暗だけで見つけやすさは変わるか。
  • 問いB：同じ前景色を使い回したとき、背景を変えると見つけやすさはどう変わるか。

問いAには、#767676 の灰色を使います。この色は白に対しても黒に対しても、概算でどちらも約4.5:1になることで知られています。問いBには、黄色の #ffcc00 を使います。概算で白に約1.5:1、黒に約14:1と大きく偏るため、「色を決めてから背景を変えた」ゲーム制作でありがちな状況を再現できます。数値は検算してみてください。WCAGで定義されている相対輝度の式に当てはめれば、手計算でも、コントラスト比を計算するツールでも確かめられます。

変える要素は3つです。

  • 背景、水準：白、黒
  • 動き、水準：静止、横に動く
  • 前景色、水準：#767676、#ffcc00

組み合わせは2×2×2で8ブロックになります。数字の大きさ、出現位置の範囲、待ち時間、動く速さはすべて固定します。

準備するもの：最小の測定ページ

用意するのは、ブラウザと、下のコードを保存した1つのHTMLファイルです。ファイル名は test.html などにして、ブラウザで開きます。外部ライブラリもサーバーも不要です。

html
<!doctype html>
<meta charset="utf-8">
<title>見やすさテスト</title>
<style>body{margin:0}canvas{display:block}</style>
<canvas id="c" width="640" height="400"></canvas>
<script>
const q=new URLSearchParams(location.search);
const bg=q.get("bg")==="black"?"#000":"#fff";
const move=q.get("move")==="1";
const fg="#"+(q.get("fg")||"767676");
const ctx=c.getContext("2d");
let t0=0,x=0,y=0,vx=0,digit=0,wait=true,log=[];
function draw(){
  ctx.fillStyle=bg;ctx.fillRect(0,0,640,400);
  if(!wait){
    x+=vx;if(x<0||x>610)vx=-vx;
    ctx.fillStyle=fg;ctx.font="28px sans-serif";
    ctx.fillText(digit,x,y);
  }
  requestAnimationFrame(draw);
}
function next(){
  wait=true;
  setTimeout(()=>{
    digit=Math.floor(Math.random()*10);
    x=20+Math.random()*560;y=40+Math.random()*320;
    vx=move?(Math.random()<.5?-3:3):0;
    t0=performance.now();wait=false;
  },500+Math.random()*1000);
}
function done(){
  const r=log.slice(5),ok=r.filter(a=>a[1]).map(a=>a[0]).sort((a,b)=>a-b);
  alert("中央値 "+ok[Math.floor(ok.length/2)]+" ms／誤り "+(r.length-ok.length)+" 回");
}
addEventListener("keydown",e=>{
  if(wait||!/^\d$/.test(e.key))return;
  log.push([Math.round(performance.now()-t0),+e.key===digit]);
  if(log.length<25)next();else{wait=true;done();}
});
draw();next();
</script>

条件はアドレスの末尾で指定します。たとえば test.html?bg=black&move=1&fg=ffcc00 は、黒背景で、動く黄色の数字になります。fg の値には # を付けません。ブラウザによってファイルを直接開いたときに末尾の指定が効かないことがあります。その場合は、コード冒頭の bg、move、fg の3行を直接書き換えてください。

1ブロックは25回の出題で、最初の5回は練習として集計から外します。残りの20回について、正解した試行の反応時間の中央値と、誤りの回数が最後に表示されます。平均ではなく中央値を使うのは、うっかり遅れた1回の影響を受けにくいからです。

手順

  1. 画面の明るさを固定します。自動調光やナイトモード（色温度を変える機能）は切ります。部屋の照明も、実験中は変えません。
  2. 8ブロックの実施順を決めます。毎回同じ順だと、慣れや疲れが特定の条件に偏ります。条件を書いた紙片を引いてランダムにするか、前半と後半で順序を逆にする方法があります。
  3. 1ブロックごとに、画面から30秒ほど目を離して休みます。白と黒を切り替えた直後は、目が明るさに慣れるまでの影響が残るためです。
  4. 数字が出たら、できるだけ速く、かつ正確に数字キーを押します。同じ手の同じ指の置き方で通します。
  5. 同じ8ブロックを、別の日か時間を空けてもう1周します。この2周目が、結果を読むときの「ばらつきの物差し」になります。

1周は8ブロックで、200回の出題です。休憩を含めても、長時間にはならない見込みです。疲れたら日を分けてかまいません。その場合は、どの日にどのブロックをやったかを記録に残します。

記録の取り方

ブロックが終わるたびに、次の項目を1行にまとめます。紙でも表計算でも構いません。

  • 周回（1周目か2周目か）と、その周の何番目に行ったか
  • 背景、動き、前景色
  • 中央値（ms）
  • 誤りの回数（20回中）
  • メモ（画面の明るさの設定、部屋の明るさ、眠気や疲れなど）

単位は「1ブロックにつき中央値1つ、誤り数1つ」です。ブロックごとに表示される2つの値だけで足りるので、20回分の生の値を書き写す必要はありません。生の値まで調べたい場合は、done の中に console.log(log) を足すとブラウザの開発者ツールで見られます。

結果の読み方

最初に見るのは、条件間の差ではなく、同じ条件を2周やったときの中央値のずれです。たとえば、白背景・静止・灰色のブロックが1周目と2周目で何ms違ったかを、8条件すべてで確かめます。このずれが、あなたの測定そのもののばらつきの目安になります。

次に、背景の白と黒を比べます。ここでは次のように判断します。

  • 白と黒の差が、同じ条件の周回間のずれと同程度か小さい場合は、この測定では差があるとは言えません。
  • 白と黒の差が周回間のずれより明らかに大きく、2周とも同じ向きに出ている場合は、背景の影響を疑う根拠になります。
  • 1周目と2周目で向きが逆になる場合は、順序や慣れの影響の可能性が高く、結論を出さずに周回を増やします。

問いAと問いBの読み方は次のとおりです。

  • 問いA（#767676）で差が小さいのに、問いB（#ffcc00）で大きく開いた場合は、見やすさを決めていたのは背景の明暗そのものよりコントラスト比だった、と解釈できます。
  • 問いAでも差が残る場合は、明暗の違い自体が効いている可能性があります。ただし、この実験だけで理由までは断定できません。

静止と動きの比較も同じ手順で読めます。動く条件のほうが静止より速く見つかる場合も、遅くなる場合もありえます。どちらになるかは、あなたの測定結果で決まります。誤りの回数も合わせて見てください。速くても誤りが多ければ、見つけやすいのではなく、当てずっぽうに近いのかもしれません。

誤りやすい点

  • 期待が入る：「黒のほうが見やすいはず」と思って臨むと、無意識に押し方が変わります。実施順をランダムにして、集計は最後にまとめて行います。
  • 表示の遅れ：数字が描かれるフレームと計測開始の間に、画面の更新間隔分（60Hzなら約16ms）のずれが生じることがあります。このずれは全条件に同じように乗るので、条件間の比較では大きな問題になりません。ただし、単体の絶対値として他の人の結果と比べるのは避けてください。
  • 色の見え方の個人差：色覚の特性や年齢で、同じ色の見え方は変わります。他の人に頼む場合は、その人の結果を別々に読み、平均して1つの結論にまとめないでください。
  • 練習効果：同じ位置の数字を繰り返し見ると慣れます。最初の5回を除外しているのはそのためですが、それでも後半のブロックが速くなる傾向が出ることがあります。順序をランダムにする理由もここにあります。
  • 一般化のしすぎ：数字1文字の検出は、実際のゲームの弾よけや盤面の把握とは違います。得られるのは「この課題での傾向」であって、あなたのゲームの正解ではありません。

次の行動

まず #767676 の2ブロック（白背景と黒背景、静止）だけを、2回ずつ実施してみてください。10分もかからずに、自分の環境で背景の影響がばらつきを超えるかどうかの見当がつきます。差が見えたら、自作ゲームの敵・弾・文字の色を、背景に対してコントラスト比で確かめ、明るい背景と暗い背景の両方で遊んで見直してみましょう。

参考資料

  • W3C「Web Content Accessibility Guidelines（WCAG）2.x」達成基準1.4.3 コントラスト（最低限）および相対輝度・コントラスト比の定義
マガジン一覧に戻る