色を1色だけ使ってゲームを作る：形と動きで情報を伝える

この実験で確かめる問い

大きな問いは次の1つです。

前景1色・背景1色の表示で、ゲーム内の情報はどこまで読み取れるか。読み取れないものは、何で補えばよいか。

これを検証できる大きさに分けます。

• 色で区別していたものは何種類あるか。
• それぞれを、形・大きさ・塗りと線・動きのどれで置き換えられるか。
• 置き換えたあと、初見の人は凡例なしで役割を当てられるか。
• 動きに頼った区別は、「動きを抑える」設定のもとでも成り立つか。

最後の項目は見落とされやすい点です。アソバースの公式作品13本は「動きを抑える」設定に対応しています。動きだけに情報を載せた設計は、この設定を使う人には届きません。動きは補助にとどめ、静止画でも読める形を土台にするのが安全です。

準備：単色の定義と情報の棚卸し

最初に「1色」の範囲を決めます。ここが曖昧だと、あとで濃淡や半透明が入り込み、実験になりません。

次の定義をおすすめします。

• 前景は1色、背景は1色です。この2色の組み合わせは自由です。
• 中間の濃淡は使いません。半透明（alpha）も使いません。重ねると中間色が生まれるためです。
• アンチエイリアス（輪郭のぼかし）で生じる細かな濃淡は許容します。

準備するものは次のとおりです。

• 色分けのあるゲームを1本。小さな避けゲーやアイテム集めで十分です。新作でも構いません。
• 情報の棚卸しをする表（紙でもスプレッドシートでも可）。
• 判別テストに付き合ってくれる人。人数は自分で決めます。少人数でも、誤読の種類は拾えます。
• 記録用のタイマーかストップウォッチ。

棚卸しの手順は次のとおりです。ゲーム画面にある、色で区別しているものを全部書き出します。「敵」「取得物」「危険」だけでなく、「選択中」「使用済み」「残り少ない」「味方か敵か」などの状態も含めます。色を抜いた瞬間に迷うのは、むしろこの状態のほうです。

手順1：色の仕事に代わりの手段を割り当てる

棚卸しした項目ごとに、代わりの手段を1つずつ割り当てます。使える手段を整理すると次の表になります。

• 輪郭の形（丸・三角・四角）、向いている情報：種類の区別、弱点：小さいと潰れます
• 大きさ、向いている情報：重要度、脅威度、弱点：当たり判定との混同
• 塗りか線か、向いている情報：実体か領域か、有効か無効か、弱点：細い線は見落とされます
• 点線・縞などの模様、向いている情報：危険、禁止、状態、弱点：密度が高いとちらつきます
• 配置・並び方、向いている情報：所属、グループ、弱点：動くと崩れます
• 動き（揺れ、速度）、向いている情報：生き物らしさ、緊急度、弱点：動きを抑える設定で消えます
• 文字・記号、向いている情報：正確な意味の伝達、弱点：読むのに時間がかかります
• 音、向いている情報：予告、成否、弱点：無音で遊ぶ人には届きません

割り当てには次のルールを置いてください。

1. 1つの情報に主手段を1つ、補助手段を最大1つ決めます。
2. 主手段は静止画で成立するものから選びます。動きは補助に回します。
3. 一緒に画面に出る図形どうしは、形が2つ以上の点（角の数、塗り、大きさなど）で違うようにします。1点だけの違いは、急いで見ると取り違えやすくなります。

「選択中」のような状態は、形そのものを変えるより、外側に輪を足す、四隅に印を付けるといった付加で表すほうが、元の図形の種類を壊しません。

手順2：判別シートを作る

ゲーム本体を作り替える前に、静止した判別シートで読み取りやすさを確かめます。ゲームを動かすと、操作の難しさと表示の読みにくさが混ざってしまうためです。

次のコードは、単色の判別シートの最小例です。取得物は塗りの円、敵は輪郭だけの三角、地雷は点線の輪、プレイヤーは塗りの四角です。敵だけが左右に揺れますが、「動きを抑える」設定がOSやブラウザで有効なら止まります。HTMLファイルに保存してブラウザで開くと動きます。

<canvas id="c" width="320" height="200"></canvas>
<script>
const g=document.getElementById('c').getContext('2d');
const FG='#f2e6c9',BG='#14212b';
const still=matchMedia('(prefers-reduced-motion: reduce)').matches;
function draw(t){
  g.fillStyle=BG;g.fillRect(0,0,320,200);
  g.strokeStyle=g.fillStyle=FG;g.lineWidth=2;
  // 取得物：塗りの円
  g.setLineDash([]);g.beginPath();g.arc(60,60,9,0,7);g.fill();
  // 敵：輪郭だけの三角。動ける場合だけ左右に揺れる
  const dx=still?0:Math.sin(t/300)*14;
  g.beginPath();g.moveTo(200+dx,48);g.lineTo(211+dx,69);
  g.lineTo(189+dx,69);g.closePath();g.stroke();
  // 地雷：点線の輪
  g.setLineDash([3,3]);g.beginPath();g.arc(120,150,12,0,7);g.stroke();
  // プレイヤー：塗りの四角
  g.setLineDash([]);g.fillRect(250,140,16,16);
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
</script>

自分のゲームの図形に置き換えて使います。シートには次の2つの版を用意します。

• 版A（静止）：すべての図形を止めた状態です。
• 版B（動きあり）：動かす予定の図形を、実際の動きで動かした状態です。

版Aは、シート側で still を常に true にするなどして作ります。この2版の差が、「動きがどれだけ区別を支えているか」を示します。

手順3：読み取りテストと記録

テストは凡例なしで行います。ゲーム内に説明文が出る場合でも、まず説明なしで見せます。初見で読めるかを確かめる実験だからです。

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

1. 版Aを5秒間見せ、図形ごとに「触れたらどうなりそうか」を答えてもらいます。選択肢は「集める」「避ける」「自分」「わからない」にします。
2. 同じ人に版Bを見せ、同じ質問をします。順番の影響を避けるため、版Aから始める人と版Bから始める人が半々になるようにします。
3. 図形の配置は毎回入れ替えます。位置で覚えられるのを防ぐためです。
4. 各条件で3回以上繰り返します。

記録する単位は「図形ごと・テスターごと・回ごと」です。表の列は次のようにします。

• 図形名
• 版（AかB）
• 回
• 答え（集める／避ける／自分／わからない）
• 正誤
• 迷った秒数（おおよそで可）
• 取り違えた相手の図形（誤答のとき）

「取り違えた相手」の列が最も役に立ちます。三角と四角が混同されるのか、点線の輪と実線の輪が混同されるのかがわかると、直す場所が1か所に絞れるからです。

版A・版Bのあとに、短い聞き取りも1つ入れます。「どの図形で一番迷いましたか。何を手がかりにしましたか」と尋ねます。手がかりの言葉は、形なのか動きなのか、本人の言葉で書き留めます。

結果の読み方と誤りやすい点

集めた記録は、次の基準で読みます。

• 版Aで誤読が少ない図形：主手段が静止画で成立しています。そのまま採用します。
• 版Aで誤読が多く、版Bで減る図形：動きに頼った区別です。動きを抑える設定では消えるので、形・塗り・大きさのどれかを足して、版Aでも読めるようにします。
• 版A・版Bとも誤読が多い図形：手段が弱いか、他の図形と似すぎています。「取り違えた相手」の列を見て、その相手と2点以上違うように作り直します。
• 正答でも迷った秒数が長い図形：読めてはいますが、急ぐ場面では間に合わない可能性があります。ゲームの速さと照らして判断します。

直す順番は、形、大きさ、塗りと線、模様、動きの順をおすすめします。動きは最後に回します。それでも残る情報は、文字や音で補います。たとえば「残り少ない」という緊迫感は、図形だけでは伝えきれないことがあります。

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

• 濃淡の混入：影や半透明、グラデーションを入れると、1色の条件が崩れて比較になりません。
• 点滅による区別：点滅は単色でも目立ちますが、光に敏感な人への配慮が必要です。一般的な指針では、1秒間に3回を超える点滅を避けるよう示されています。詳しくはWCAGの該当箇所で確認してください。
• 細い線に頼ること：点線や細い輪郭は、小さい画面で潰れます。実機の小さい画面でも見てください。
• 作者本人をテスターにすること：自分が作った図形は、凡例なしでも意味がわかってしまいます。初見の人の答えを優先します。
• 操作の難しさとの混同：ゲームを遊ばせながら測ると、読み取りの失敗と操作の失敗が区別できません。まずは静止シートで測ります。
• 記録を見ずに印象で直すこと：誤読の相手が記録にあるのに、別の図形を直してしまう例があります。「取り違えた相手」の列に従って直してください。

また、色が持っていた情報のうち、単色化で「失われたまま補えなかったもの」も表の末尾に書いておいてください。補えなかったと記録することも、設計の判断です。そのゲームでは不要な情報だったのか、別の仕組みを足すべきなのかを、後から振り返れます。

アソバースの公式作品の中では、「プリズムの道」が色ガラスで灯台へ同じ色の光を届ける光学パズルです。色そのものがルールの核にある例として、「色を1色にしたらこのパズルの何が成立しなくなるか」を考える題材になります。色が飾りの作品と、色が規則の作品とで、単色化の難しさがどう違うかを自分の棚卸し表の視点で考えてみてください。この部分は、作品を開いて確かめることになります。

次の行動

まず自分のゲーム（または小さな試作）の画面を見て、色で区別しているものを全部書き出してください。次に、上のコードを自分の図形に置き換えて判別シートを作り、初見の人に5秒だけ見せてください。記録表の「取り違えた相手」の列が埋まったら、最初に直すべき1か所が見えてきます。

完成したゲームはアソバースに投稿できます。HTMLを直接アップロードするか、ZIPにして直下に index.html を置いてください。紹介文には、使った1色の組み合わせと、色の代わりに使った手段を書いておくと、遊ぶ人の読み方の助けになります。

参考資料

• Web Content Accessibility Guidelines (WCAG) 2.2（W3C）：達成基準「色の使用」「3回の閃光、または閾値以下」
• Understanding WCAG 2.2（W3C WAI）：上記基準の解説