色覚の違いをシミュレーターで確かめる：自作ゲームの画面を通す

1. 問いを「色の役割の棚卸し」に変える

「色覚シミュレーターで見る」だけでは、何を見ればよいか決まりません。最初にゲーム画面の中で、色が担っている役割を書き出します。

書き出す単位は「ペア」です。「AとBを見分けられないと困る」という組を一行にします。

• プレイヤー側と敵側の見分け
• 正解と不正解、安全と危険のような状態表示
• 属性、種類、チームなどの分類
• 選択中と未選択
• 残り時間や耐久などのゲージ。色が変わる境目に意味がある場合

公式作品で考えるなら、次のような場面が棚卸しの対象になります。どう見えるかは、作品を開いて確かめてください。

• 「プリズムの道」は、鏡と色ガラスで灯台へ同じ色の光を届けるパズルです。色そのものがルールの中心にあるので、色の組み合わせがすべてペアの候補です。
• 「時計じかけの台所」は、針が緑の範囲に来たら止めて配膳します。緑の範囲と針と背景の関係がペアになります。
• 「紙ひこうき郵便」は、最後の6秒で赤い郵便受けへ向かいます。赤い郵便受けと周囲の背景の関係がペアになります。

これらは棚卸しの考え方を示す例です。実際に区別できるかどうかは、この記事では述べません。

自作ゲームでは、画面の状態ごとに分けて書くのがおすすめです。タイトル、プレイ中、ゲームオーバー、設定画面など、状態が変わると色の役割も変わります。一つの状態に10〜20ペアあっても構いません。

2. 準備するもの

用意するものは次の4つです。

1. 検証したいゲームの画面（実際に動く状態）
2. 色覚の見え方を変換する手段
3. 下のテスト用ページ（明度だけを見る補助）
4. 記録シート

変換の手段

Chrome系ブラウザの開発者ツールには、色覚の特性を模した表示を試す機能が用意されている場合があります。「レンダリング」パネルの中に、赤系・緑系・青系の見分けにくさや、色がほぼ見えない状態などを選ぶ項目があります。名称や場所は版によって異なることがあるので、お使いの版で確認してください。

SVGの feColorMatrix に変換行列を入れて自作する方法もあります。その場合は、行列の値を出典のわかる資料から取り、「近似であること」を記録に残してください。値を目分量で作ると、シミュレーターとしての意味が失われます。

どの方法でも、シミュレーションは目安です。見えにくさの程度は人によって違い、ディスプレイの明るさや環境光でも変わります。「これで確認できたから大丈夫」とは言い切れません。

明度だけを見る補助ページ

色相の違いを消して明度の差だけで判断できるかを見るために、index.html と同じフォルダにテスト用ページを置いて使います。

<!doctype html>
<meta charset="utf-8">
<title>色テスト</title>
<style>
 body{margin:0;font:14px sans-serif}
 #bar{padding:8px;background:#eee}
 iframe{width:100%;height:calc(100vh - 44px);border:0}
</style>
<div id="bar">
 <button data-f="none">元の色</button>
 <button data-f="grayscale(1)">グレー</button>
 <button data-f="grayscale(1) contrast(0.5)">グレー・低コントラスト</button>
</div>
<iframe id="g" src="index.html"></iframe>
<script>
 const g=document.getElementById('g');
 document.querySelectorAll('button').forEach(b=>{
  b.onclick=()=>{g.style.filter=b.dataset.f;};
 });
</script>

ファイルを直接開くとゲームが動かない場合は、お使いの環境で通常ゲームを確認している手順に合わせてください。

3. 手順：同じ画面を条件ごとに通す

手順の流れ

1. ゲームを、棚卸しした状態の一つに進めます。
2. 元の色で画面を確認し、ペアに印をつけます。
3. 変換を一つ選んで、同じ画面をもう一度見ます。
4. ペアごとに「すぐ区別できる」「少し迷う」「区別できない」の3段階で記録します。
5. 変換を切り替えて、3〜4を繰り返します。
6. 状態を変えて、1〜5を繰り返します。

変換の条件は、赤系の見分けにくさ、緑系の見分けにくさ、青系の見分けにくさ、色がほぼ見えない状態、そして上のテストページのグレーの5種類が目安です。

記録の取り方

記録の単位は「ペア × 変換条件 × 画面の状態」です。次のような表を作ります。

• プレイ中、ペア：味方と敵、元の色：、赤系：、緑系：、青系：、グレー：、勝敗に関わるか：はい
• プレイ中、ペア：ゲージの色の境目、元の色：、赤系：、緑系：、青系：、グレー：、勝敗に関わるか：はい
• ゲームオーバー、ペア：背景と文字、元の色：、赤系：、緑系：、青系：、グレー：、勝敗に関わるか：いいえ

各セルには「○（すぐ区別）」「△（迷う）」「×（区別できない）」を入れます。

動きのある場面は、静止画だけでは足りません。敵が動いている瞬間、エフェクトが重なる瞬間、ゲージが変わる瞬間は、変換を有効にしたまま実際に3回ほどプレイして記録します。1回では偶然に左右されます。

4. 自分の目に頼らない：ブラインド判定

この実験で最も起こりやすい誤りは、制作者自身が元の色を知っていることです。「あれは敵だ」と知っているので、変換後の画面でも敵だと読み取ってしまいます。区別できていないのに、できているつもりになります。

これを避ける方法として、ブラインド判定があります。

1. ペアの二つの色で、同じ形の画像を二枚作ります。AとBとします。
2. 変換をかけた状態で、AかBのどちらか一枚だけをランダムに見せます。
3. 見た人に「AかBか」を答えてもらいます。
4. これを10回繰り返し、正答数を数えます。

でたらめに答えても、正答は平均で5回前後になります。10回のうち9回以上当たるなら区別できていると見てよい、というのが一つの目安です。5〜6回程度なら、ほぼ区別できていない可能性が高いと考えます。この基準はあくまで簡易的な目安です。厳密な検定ではありません。

ペアの色名を事前に教えないこと、順番をランダムにすること（コインやサイコロで決める）、問いを繰り返すうちに答えを覚えてしまわないよう形や位置を毎回少し変えることが、判定を甘くしないための要点です。

5. 結果の読み方と直し方

記録表を埋めたら、×と△が並んだ行を探します。優先順位は次のように考えます。

• 勝敗に関わるペアが×または△、判断：最優先で直す
• 全条件で×のペア、判断：色の調整だけでは足りない可能性が高い。別の手がかりを足す
• 特定の変換条件でだけ×のペア、判断：色の組み合わせ自体を見直す
• グレーでだけ×のペア、判断：明度差を付ける（暗い色と明るい色にする）
• 勝敗に関わらず装飾の色、判断：後回しでよい

色以外の手がかりを足す

色を変えるより、色以外の情報を足すほうが確実なことが多くあります。

• 形を変える（丸と四角、塗りと枠など）
• 模様や線の太さを足す
• 文字や記号を添える
• 位置を固定する（敵は常に右側など）
• 明るさの差をはっきり付ける

修正したら、同じ手順をもう一度通します。直したことで別のペアが見にくくなる場合があるためです。

起こりやすい誤り

• シミュレーターを通した画面を「その人の見え方そのもの」と思い込む。実際の見え方は個人ごとに異なります。
• 一つの変換でだけ確認して終える。見分けにくい色の組は、変換の種類によって違います。
• 静止画だけを確認する。動いている間や、重なっている間の見え方は別に確認します。
• 色覚の特性を持つ人の確認の代わりにする。可能なら、実際にプレイしてもらう機会を持つのが最も確かな方法です。

アソバースでは、作品投稿は入力、表示の確認、公開の3段階で進みます。表示を確認する段階で一度、この手順を通しておくと、公開前に気づける箇所が増えます。公開後も内容の更新ができるので、遊び方の説明に「色だけに頼らない手がかり」を書き足すこともできます。

次の行動

まず、自作ゲームの最も重要な画面を一つ選び、色が役割を持つペアを5つ書き出してください。そのうえで、開発者ツールの変換とテストページのグレーを通し、記録表を埋めます。勝敗に関わるペアが一つでも×になったら、色を変える前に、形・位置・文字のどれを足せるかを考えてみてください。

参考資料

• Chrome DevTools 公式ドキュメント（レンダリング機能）
• カラーユニバーサルデザイン機構（CUDO）の色使いに関する案内