配色を3色に絞ってゲームを作り直すと、何が伝わらなくなるか：区別が消える要素を探す実験設計

この実験で確かめる問いと、3色の決め方

中心の問いは「3色にしたとき、どの要素の組が区別できなくなるか」です。次の三つに分けると、記録が取りやすくなります。

• 区別がつかなくなる組は、どの要素同士か
• つかなくなった組は、静止画でも動いていても区別できないのか、動きがあれば区別できるのか
• 区別できない状態は、ルールを知らない人にとってゲームの失敗につながるか

3色の数え方は先に決めておきます。おすすめは「背景1色＋前景2色」です。背景を数えない決め方もありますが、その場合は「背景以外に3色」となり、実験が別物になります。この記事では、背景を含めて3色と数えます。

• 背景色：画面全体の地。
• 主色：明るさが背景と大きく離れた色。ほとんどの要素がここに入ります。
• 強調色：主色と明るさも色相も離れた色。最も目立たせたい要素だけを担当します。

強調色を何に使うかは、実験の最初の判断です。例えば、触れると失敗する危険物に使うのか、取ると得をするものに使うのか、プレイヤー自身に使うのか。どれを選んでもゲームの読みやすさは変わるので、同じ作品で強調色の割り当てを2通り試すと、比較として面白くなります。

準備するもの

• 対象のゲーム：自分で作ったもの。色をコードやCSSの変数に集めてあると作業が軽くなります。色が各所に直書きされている場合は、先に「色を一か所にまとめる」整理から始めます。
• 画面の記録手段：スクリーンショットと、動いている様子を数秒録画できる機能。
• 要素の棚卸し表：下で説明する表を、表計算でもメモでも構いませんので用意します。
• 協力者：2〜3人が理想です。ルールを知らず、そのゲームを一度も見たことがない人が望ましいです。
• タイマー：誤認までの時間を測るためのものです。スマートフォンのストップウォッチで足ります。

公式作品を題材に練習する場合は、次の観点で作品を開いて確かめられます。実際の色や画面の細部は、作品を開いて確認してください。

• プリズムの道：鏡と色ガラスで灯台に同じ色の光を届ける作品です。色そのものが目的に入っているため、色を3色に絞るとどの部分が成立しなくなるかを考える題材になります。
• 時計じかけの台所：針が緑の範囲に来たら止める作品です。この「緑の範囲」と針や周囲の表示が、色以外の手がかり（位置・形・動き）でも読み取れるかを見ます。
• 小さな軌道：全軌道予測は点線、前回の軌道は細い実線で示されます。線の種類で分けているため、色を減らしたときにこの二つを区別する手がかりが残るかを見ます。

これらは「設計から読み取れること」を考える入口にすぎません。実際にどうなるかは、作品を開いて確かめます。

手順：棚卸し、割り当て、作り直し

手順1　棚卸し表を作る

画面に出る要素をすべて書き出します。自機、敵、弾、足場、危険物、取れるもの、背景の装飾、スコア表示、ボタンなどです。各要素について、色以外の手がかりを「形」「大きさ」「位置」「明るさ」「動き」「ラベルや記号」の欄に記入します。手がかりが空の要素は、色だけで区別されている候補です。

手順2　3色の割り当てを決める

各要素を背景色・主色・強調色のどれにするかを決めます。ここでコードを使うと、割り当てを決めた時点で「同じ色になってしまう組」と「形も同じ組」を自動で列挙できます。次の例は、単独で動く最小構成です。フルカラーと3色をボタンで切り替え、同色になる組を下に出します。

<!doctype html>
<meta charset="utf-8">
<canvas id="c" width="320" height="140"></canvas><br>
<button id="b">フルカラー / 3色</button>
<pre id="log"></pre>
<script>
const TRI={bg:'#14213d',fg:'#f1f1f1',ac:'#ffb703'};
const items=[
 {n:'自機',s:'c',x:40,full:'#4fc3f7',t:'ac'},
 {n:'敵',s:'c',x:100,full:'#ef5350',t:'ac'},
 {n:'コイン',s:'c',x:160,full:'#ffd54f',t:'ac'},
 {n:'足場',s:'r',x:220,full:'#8d6e63',t:'fg'},
 {n:'トゲ',s:'r',x:280,full:'#66bb6a',t:'fg'}
];
let tri=false;
const ctx=c.getContext('2d');
function draw(){
 ctx.fillStyle=tri?TRI.bg:'#1b2a3a';
 ctx.fillRect(0,0,320,140);
 for(const i of items){
  ctx.fillStyle=tri?TRI[i.t]:i.full;
  ctx.beginPath();
  if(i.s=='c')ctx.arc(i.x,70,16,0,7);
  else ctx.rect(i.x-16,54,32,32);
  ctx.fill();
 }
 const dup=[];
 for(let a=0;a<items.length;a++)
  for(let b=a+1;b<items.length;b++){
   const A=items[a],B=items[b];
   if(A.t==B.t)dup.push(A.n+' と '+B.n+
    (A.s==B.s?'：色も形も同じ':'：形だけが手がかり'));
  }
 log.textContent=dup.join('\n');
}
b.onclick=()=>{tri=!tri;draw()};
draw();
</script>

この例の「自機・敵・コイン」は、3色にすると同じ強調色の同じ形になります。一覧には「色も形も同じ」と出るので、区別が消えると予想できる組が最初に見つかります。「形だけが手がかり」と出た組は、形の差が小さい場合には見分けづらくなる可能性があります。自分のゲームの要素に書き換えて試します。

手順3　実際のゲームを作り直す

コード上の一覧を見るだけでは足りません。実際のゲームで、次の順に作業します。

1. ゲーム内の色指定を、背景色・主色・強調色の三つに差し替えます。
2. 影、半透明、グラデーション、点滅による色変化は、3色以外の中間色を生みます。実験中は一度すべて無効にします。後で戻すかどうかは結果を見て決めます。
3. 文字やアイコンも3色のどれかに割り当てます。

作り直しの直後に、動かす前の静止画を1枚保存します。動いている間の録画も数秒残します。

記録の取り方と結果の読み方

記録する単位

比較の単位は「要素の組」です。棚卸し表の要素から、同じ画面に同時に出る組を選びます。組ごとに次の表を埋めます。

• 例：敵、要素B：例：コイン、3色で同色か：はい、色以外の手がかり：形が違う（大きさは同程度）、静止画で見分けられるか：記入、動画で見分けられるか：記入、協力者の誤認（回数/試行）：記入

協力者には、組ごとに最低5回、画面を見せます。見せる時間は1秒程度に固定します。5回は、一度の見間違いで結論を出さないための目安です。回数は設計者が決めてよく、全員に同じ回数・同じ時間を使うことが重要です。見せ方は、毎回順番をランダムにして、AかBかを指さしてもらう形が単純です。

もう一つ、実際にプレイしてもらう場面も用意します。ルールの説明は最小限にして、3分程度遊んでもらい、「予想外にミスした瞬間」をその場で言ってもらうか、画面録画に印を付けます。静止画テストでは出ない、動きの中の誤認がここで見つかります。

結果の読み方

組ごとの結果を、次の三つの型に分けて読みます。

• 静止でも区別できる：色以外の手がかりが十分に働いています。3色化の影響が小さい組です。
• 動くと区別できる：動きに依存しています。静止した瞬間（一時停止、画面が止まる場面、小さな画面）では読めなくなる可能性があるため、注意の印を付けます。
• 協力者が誤認する：優先して直す組です。特に、一方が「取る」で他方が「避ける」のように、行動が逆になる組は最優先です。

誤認がどれだけ出れば失敗とみなすかは、実験前に決めます。例えば「5回中1回でも誤認したら要修正」とするのか、「2回以上なら要修正」とするのかです。結果を見てから基準を動かすと、都合のよい読み方になってしまいます。

直し方の選択肢

区別が消えた組には、色以外の手がかりを足します。優先順は次の順番がおすすめです。

1. 形を変える（円と三角、丸と十字など）
2. 明るさを大きく離す（主色の中で明暗を分けるのではなく、使える色数の範囲で）
3. 模様や縁取りを付ける（塗りつぶしと線画、斜線など）
4. 大きさを変える
5. 位置や動きの規則で分ける（常に地面にいる、必ず揺れる、など）
6. 記号やラベルを足す

直したら、同じ手順でもう一度記録します。最初と直した後の表を並べれば、どの手がかりが効いたかが読めます。

起こりやすい誤り

作った本人だけで判定する。 作者は全要素の意味を知っているため、色が同じでも見分けられてしまいます。協力者がいない場合は、日を置いてから、要素の意味を忘れた状態で自分の録画を見直します。それでも完全な代わりにはなりません。

グレースケール化と3色化を同じものとして扱う。 グレースケール化は、色相を落として明るさだけを残す変換です。3色化は、使う色そのものを限定する変換です。色覚の多様性を確かめたい場合は、専用のシミュレーション機能や、色覚特性に配慮した配色の資料を併用します。

画面や環境の違いを無視する。 明るさや画面の種類が違えば、色の見え方は変わります。ある機器でだけ見分けられた結果は、他の機器では当てはまらない可能性があります。協力者には、できるだけ違う端末で見てもらいます。

中間色が混ざる。 拡大縮小、アンチエイリアス、半透明は3色以外の色を作ります。実験の初期は無効にして、実験の後に戻した場合の見え方を別に確認します。

1回の結果で形を決める。 試行回数が少ないと偶然に左右されます。誤認が出た組と出なかった組の両方について、回数を増やして確かめます。

3色にすること自体が目的になる。 3色で全部が読めるようにするのが目標ではありません。区別が消えた要素を見つけ、色以外の手がかりを足すことが目的です。直した後に色を増やしても構いません。その場合は、色を取り除いても読める状態が土台に残っているかを確認します。

次の行動

まず、自分のゲームの要素を棚卸し表に書き出し、色以外の手がかりが空の要素に印を付けてください。次に、上のコードを自分の要素に書き換えて、同色になる組を一覧にします。最初の1組だけでも、友人に1秒だけ画面を見せて、見分けられるかを記録してみてください。

参考資料

• W3C「Web Content Accessibility Guidelines（WCAG）2.2」：色だけに頼らない情報伝達と、非テキスト要素のコントラストに関する考え方
• カラーユニバーサルデザインに関する公的機関・団体の配色ガイド