色覚の違いに配慮した色の見分けゲームをAIで作った実録｜「目の検査に見せない」「色だけに頼らない」

色を見分けるゲームなのに、色あいの差は使わなかった

先に結論から。似た色のタイルの中から1枚だけ違う色を探す「色の見分けテスト」を、AI（Claude Code）に作らせた。ブラウザで遊べるミニゲームの4本目になる。

色を見分けるゲームだが、違うタイルは色あい（赤っぽい・青っぽいなど）を変えていない。変えたのは明るさだけだ。
正解・不正解も、色ではなく○・×・「ここ」の印と文字で示す。
仕様に「目の検査に見せない」「色だけに頼らない」の2つが入っていて、それに沿うと、こういう作りに落ち着いた。

作業用のブランチ（本番に混ぜずに作業する分かれ道）を作ってから、ゲーム本体の最初のコミットまで約36分（git の時刻）。
今回は私は寝ていて、題材を選ぶところからAIに任せている。
この回の仕様も、私ではなく、作業を割り振るAI（PM役）が書いた。

色の見分けテストで遊んでみる（無料・登録不要）

題材は、候補表の5番目「色覚 テスト 激ムズ」

このサイトでは、作る題材をキーワード調査から決めている。
9月20日に作った12本の候補表で、5番目にゲームの題材として挙がっていたのが「色覚 テスト 激ムズ」だった。
月720回の検索があり、SEOの難しさを示す指標は34。

同じ表には、もっと大きな「色覚 テスト」（月14,800回）も載っていた。
ただ、こちらの上位には、色覚の検査やセルフチェックのページが目立っていた。遊びのゲームで答える検索ではない。
だから最初から、大きいほうは狙わず、遊びの側の言葉で作ると決めてあった。

作業を始めてすぐ、改めて「色覚 テスト 激ムズ」の上位10件を見た（2026年10月3日、ラッコキーワードで取得）。

• 色覚の検査や、色覚異常のチェックをうたうページが3件
• 残りの7件は、色を見分けたり並べ替えたりする腕試しのクイズと、その紹介ページ

「激ムズ」と付けて検索する人の多くは、腕試しをしたい側だと読める。それでも、同じ検索結果に検査のページが混ざっている。
このゲームが検査のように見えてしまうと、検索した人を誤解させる。ここが今回いちばん気をつけたところになった。

ついでに近い言葉も測り直した。
「色彩感覚 テスト」が月1,600回（難しさ36）で、2026年8月は2,900回まで伸びていた。
似た色を見分ける遊びは、この名前で探されることも多いようだ。
この確認に使ったラッコキーワードの呼び出しは、記事のキーワード選びの分も含めて、クレジットを使うものが3回、消費は計33クレジットだった。

仕様に入っていた2つの約束

この回の仕様は、作業を割り振るAI（PM役）が書いたものだ。
9月20日の候補表に残してあった「検査を探す人向けの大きな言葉は狙わず、遊びの側の言葉で作る」という方針が、仕様では次の2つの約束になっていた。

「目の検査に見せない」

言葉の決まりは次のとおり。

• ページのいちばん上と、結果画面の両方に「これは目の検査ではありません（娯楽のミニゲームです）」と出す
• ゲームの説明で「検査」「診断」を、このゲームが何かを測る意味では使わない
• 結果の称号に、目の良し悪しを表す言葉を使わない。「色の職人型」「微差ハンター型」「じっくり比べ型」のように、見比べ方のタイプとして名づける
• 結果は画面の明るさや設定、部屋の照明で大きく変わる、と結果画面に書く
• 色の見え方について気になることがあるときは、眼科で相談してほしいと書き添える

称号は過去3本と同じく、どの結果にもハズレがない「全タイプ肯定」にしてある。
区切り（レベル21以上なら「微差ハンター型」など）はゲームの中だけの自前の基準だと、ページにも明記した。

「色だけに頼らない」

ウェブの作り方の手引き（WCAG 2.2）には、色を、情報を伝えたり見た目を区別したりする唯一の手段にしない、という基準がある（達成基準1.4.1「色の使用」、レベルA）。
色を見分けるゲームでこれを守るのは矛盾しているようだが、ゲームの中身（色の差）と、遊ぶための情報（どこを押したか、正解はどこか）は分けて考えられる。

遊ぶための情報は、すべて色以外でも伝えることにした。

• 正解したタイルには「○」、選んで違っていたタイルには「×」の印を出す。印は白地に黒の文字で、タイルの色に左右されない
• ミスしたときは、正しいタイルに「ここ」の印と、白と黒の二重の太い枠を付ける
• そのうえで「5行5列で、周りより少し暗い色でした」のように、場所と明るいか暗いかを文字でも出す

出典: Web Content Accessibility Guidelines (WCAG) 2.2（W3C 勧告・2024年12月12日版、2026年10月9日確認）

違いを「明るさの差」にした理由と、難しさの物差し

色あいの差の感じ方は、人によって違いがある。
違うタイルを色あいの差で作ると、見え方の違いによって有利不利が出やすいし、それこそ検査に近い性質を帯びてしまう。
そこで、違うタイルは色あいと鮮やかさをそろえたまま、明るさだけをずらすことにした。
明るいか暗いかは毎回ランダム、色あいも毎回ランダムだ。

明るさの物差しには「OKLab」という色の表し方の明るさ（L）を使った。
人の目が感じる明るさや色あいの差に近づくように作られた色の表し方で、考案者の公開資料にも、知覚される明るさ・鮮やかさ・色あいをうまく予測できるよう設計した、という趣旨の説明がある。
白を100%、黒を0%とした明るさの物差しで、違うタイルをどれだけずらすかをレベルごとに決めた。

差はレベル1の18%から、レベル30の0.8%まで、同じ割合ずつ小さくしている。

難しいのは最後の数レベルだ。画面の色は、赤・緑・青をそれぞれ0〜255の数値で表す。
レベル30の問題を2万問作らせたところ、約96%が、この数値でたった2〜3段階の差だった。
小さすぎると、数値に丸めたときに2色がまったく同じになってしまう。
そこで、丸めたあとに同じ色になったら明るさを少しずつ足して、必ず違う色にする作りにした。
各レベル2,000問、30レベルで計6万問を作らせて確かめ、同じ色になった問題は0件だった。

ここは正直に書いておきたい。明るさの差にしたほうが有利不利が出にくい、というのは考え方としての判断で、色の見え方に違いがある人に遊んでもらって確かめたわけではない。

出典: Björn Ottosson「A perceptual color space for image processing」（2020年12月23日、2026年10月9日確認）

遊びやすさのために足したもの

AIへの作業の指示には「既存のゲームの作りにそろえる」と入れてあり、過去3本で決めてきた約束（記録は端末の中だけ、ゲームのページで広告のスクリプトを読み込まない、ボタンは44px以上、動きを減らす設定への配慮、結果が出たら読む位置を結果の見出しへ移す、実在しない平均値を作らない）は今回もそのまま引き継いだ。
題材に合わせて足したのは次の4つだ。

始めるレベルを選べる。 「激ムズ」と付けて検索する人は、いきなり難しいところを試したいはずだ。
スタート画面で初級（レベル1から）・中級（6から）・上級（13から）・激ムズ（21から）を選べるようにした。

くっきり表示。 タイルの枠を太い黒線にして、○・×・「ここ」の印を大きくする設定だ。タイルどうしの境目が見えやすくなる。
色の差（ゲームの難しさ）は変えない。端末の「コントラストを上げる」設定がオンなら、最初からオンで始まる。

キーボードで遊べる。 最大49枚のタイルをTabキーで1枚ずつ渡るのは大変なので、矢印キーでタイルの間を動き、EnterかSpaceで選ぶ作りにした。

できないことは、できないと書く。 画面の色を見比べるゲームなので、読み上げソフトだけでは遊べない。
タイルに色の名前を読み上げさせると答えがわかってしまうからだ。
ここは配慮で埋めるのではなく、スタート画面とページの説明に「読み上げだけでは遊べません」と書いた。

タイルの数は、スマホでも1枚が指で押しやすい大きさに収まる7×7を上限にした。
7×7のときだけタイルのすき間を2pxに詰めていて、1枚の幅は、幅360pxの画面で45.1px、375pxで47.3px。
ただ、幅320pxの小さな画面では39.4pxになり、約束の44pxには届かない。
8×8にするとさらに小さくなるので、7×7で止めた（すき間を詰めたのは、後で書く粗探しの指摘を受けてから）。

公開前は、本番で見えない形にしておく

作った夜は、公開するかどうかを後で決める前提で、本番では見えない形にしておいた。
このサイトの記事には、下書き（status: draft）を本番に出さない仕組みがある。
ゲームのページにはそれが無かったので、同じ考え方を当てはめた。

• 本番用のビルドでは、ゲームのページが404（見つかりません）になる。手元の開発用の画面でだけ表示される
• 念のため、検索エンジンに載せない指定（noindex）も付ける
• サイトマップ、ナビ、トップページ、ほかのゲームからのリンクにはまだ足さない
• 本番用のビルドには、ゲーム本体のプログラムそのものを含めない（最初は404にしただけで、ここが抜けていた。後の粗探しの節に書く）

公開するときに何を足すかは、ページのファイルの先頭に手順として書き残した。
ゲームは10月7日に、その手順どおり404と検索エンジンに載せない指定を外し、サイトマップ、トップページ、ほかのゲームからのリンクを足して公開した。
この制作記録は、それより後の公開になる。

検収——スクリーンショットで見つけた4件

自動の操作で通しプレイをさせて、次のことを確かめた。

• 正解のタイルを素早く2回押しても、進むのは1レベルだけ（ここでは、スタートのボタンの2度押しは確かめていなかった。後の節で書く）
• 正解の印が出ている間に別のタイルを押しても、ミスに数えない
• ミスすると「次へ」のボタンへ、結果が出ると称号の見出しへ、読む位置が移る
• 端末に残るのは、自己ベストと「くっきり表示」の設定の2件だけ
• ゲームのページで広告のスクリプトが読み込まれていない
• 幅320pxと375pxの画面で、横にはみ出さない

動くかどうかは、ここまでで確かめられる。ところが、画面を撮って眺めると直すところが4件出てきた。どれもコミットの前に直している。

1. 設定のボタンの文字が折り返して崩れていた。 スマホの幅で「くっきり表示（タイルの枠と印を太く）オフ」が入りきらず、「オフ」が縦に割れていた。ボタンは「くっきり表示 オン／オフ」だけにして、説明は下の小さな文に分けた。
2. ミスしたあとの「次へ」が画面の外にあった。 ページの上に注意書きがあるぶん、盤面が下にずれ、スマホでは答えの説明と「次へ」が画面の外に出ていた。スタートした瞬間に盤面を画面の上へ合わせるようにして、幅375px・高さ667pxの小さめのスマホでも、盤面と「次へ」が1画面に収まるのを確かめた。
3. くっきり表示で「ここ」の印が縦に割れていた。 7×7で枠を太くすると、タイルの中に「ここ」の2文字が入りきらず、1文字ずつ縦に並んでいた。印は折り返さず、タイルからはみ出してもいいように中央に重ねる形に変えた。
4. キーボードで動かしたときの枠が見えていなかった。 矢印キーでタイルを動いても、いまどこにいるかを示す枠が出ていなかった。作業したAIの説明では、見た目の部品の設定どうしが打ち消し合って、枠の線が「なし」になっていたという。コードの上では枠の設定が入っていても、画面では出ていない。撮って初めてわかる種類の不具合だ。

4件目は、キーボードで遊べるようにわざわざ作り込んだ部分で起きた。
キーボードで操作はできていたので、動作の確認だけなら合格になる。
見た目の確認をしなければ、キーボードで遊ぶ人だけが、自分がどこにいるかわからないまま出していたことになる。

別のAIに粗探しをさせたら、さらに6件

最初のコミットと記事の下書きのあと、作業を割り振るAIが、作ったのとは別のAIに粗探し（反証）だけを頼んだ。
スマホの画面の大きさや操作を変えて実際に動かし、「主張と違うところ」を探させる役だ。
見つかったのは次の6件で、どれも直して、同じ手順で確かめ直した。

1. スタートを素早く2回押すと、始まった瞬間にミスになる。 押した場所の真下に大きなタイルが出るので、2回目のタップがそのタイルに当たって判定されていた。幅375px・高さ667pxのスマホの設定で、押す間隔と「動きを減らす」設定を変えた6通りすべてで起きた。「もう一度挑戦する」の2度押しでも、4回中4回、2回目がタイルに当たった。ボタンを押した直後の0.4秒は、タイルへの入力を受け付けないようにした。直したあと、実際の間隔が0.1〜0.34秒の2度押しで、ミスが出ないことを確かめた。
2. Windowsのコントラスト テーマで、タイルが全部白になる。 コントラスト テーマ（画面の色をはっきりした色に置き換える設定）では、ブラウザがタイルの色まで置き換えてしまい、盤面が真っ白で遊べなかった。タイルの色だけは置き換えさせない指定を入れ、コントラスト テーマのときは「くっきり表示」を最初からオンにした。
3. 1枚もクリアせずに終わると「自己ベスト: レベル0」「自己ベスト更新！」が出る。 クリアなしは記録なしとして扱い、保存もしないようにした。
4. 幅360pxの画面で、7×7のタイルが43.4pxになり、44pxに届かない。 ページには「375px前後で44px以上」と書いていたが、360pxは確かめていなかった。7×7のときだけすき間を詰めて45.1pxにした。
5. ミスのあと、「ここ」の印が違うタイルの真ん中をほぼ覆う。 答えを見せるための印が、肝心の「違う色」を隠していた。タイルが小さい盤面では、印をタイルの左上の角に小さく出すようにした。
6. 下書きのゲームが、本番用のビルドで中身ごと読めた。 ページは404（見つかりません）になる作りだったが、本番用にビルドすると、その404のページの中にゲームのタイトルや説明が残り、ゲーム本体のプログラムも一緒に配られる形になっていた。このまま公開の作業をしていれば、ソースを見るだけで称号の名前まで読めたことになる。本番用のビルドではゲーム本体ごと含めない形に直し、手元で本番用にビルドして、タイトルも称号も出てこないことを確かめた。

1件目は、検収のリストに「正解のタイルを素早く2回押しても、進むのは1レベルだけ」と書いてあったのに起きた。
確かめていたのはタイルの2度押しで、スタートのボタンの2度押しではなかった。
「確かめた」と書いたことの範囲が、思っていたより狭かったことになる。

git に残った時刻

git に残るのは、ブランチを作った時刻とコミットの時刻だけだ。
作業したAIの報告では、最初の約36分の中に、キーワードの確認、実装、型チェック、画面の確認と4件の直しまでが入っている。
この記事の下書きと粗探しは、そのあとだ。

4本並べると、こうなる。

測り方がそろっていないので、時間で比べることはできない。
今回長く見えるのは、キーワードの確認と、画面を撮ってからの直し4件が、最初のコミットより前に入っているからだと思う（題材を選んだのはブランチを作る前なので、この36分には入っていない）。

まとめ: 配慮は「書く」「撮って確かめる」「粗探しさせる」のセット

色を見分けるゲームでも、遊ぶための情報は色以外で伝えられる。
今回は違いを明るさの差だけにして、正解・不正解を○・×・「ここ」の印と文字で示した。
「目の検査に見せない」ための言葉の決まりも、作る前に仕様として書いた。

そのうえで効いたのは、画面を撮って眺めることと、別のAIに粗探しをさせることだった。
キーボードの枠が出ていない不具合は、動作の確認だけでは見つからなかった。
コントラスト テーマで盤面が真っ白になる不具合は、作った側の確認の範囲にそもそも入っていなかった。
配慮は書いて終わりではなく、撮って確かめ、別の目で粗探しをするところまでがひとまとまりだと思う。

出来上がったゲームはこちら。記録は端末の中にだけ残り、外には送られない。

色の見分けテストで遊ぶ（無料・スマホ対応）

1本目の顛末は反射神経テストの実録に、仕様書だけで作らせた2本目は動体視力テストの制作記録に書いた。
3本目は記憶力テストの制作記録、5本目は空間認識テストの制作記録にある。
AIだけで作って公開したものの一覧はバイブコーディングの始め方にまとめている。