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

色を使わずに「危険」を伝える：形・動き・音の代わり

遊びをつくる

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

同じ色と視点でそろえた木、宝箱、キツネの素材を、色鉛筆で描いたイラスト。
記事のテーマをもとに制作したAI生成イラスト。

敵の弾、触れるとミスになる障害物、踏むと終わる床。ゲームには「触れてはいけないもの」がつきもので、多くの場合、最初に思いつくのは赤です。ところが、赤と緑の見分けにくさを持つ人や、明るさの差が小さい画面、屋外の強い光の下のスマートフォンでは、その赤が背景に溶けることがあります。赤を塗ったから伝わるはず、という前提は、一度外して確かめる価値があります。 この記事が確かめるのは「色を取り除いたとき、形・動き・音は、赤の代わりをどこまで務められるか」です。結果を先に述べることはしません。読者が小さなテストページを作り、条件を変えながら反応時間と誤クリックを記録し、自分のゲームで何を足すべきかを自分のデータで判断できる設計書として進めます。 ここでの「代わり」は、色を禁止するという意味ではありません。赤を残したまま、赤を見なくても同じ情報が取れる状態を作る、という考え方です。

この記事の目次
  1. 問いの立て方：何を比べるのか
  2. 準備するもの
  3. 手順：テストページを作って回す
  4. 記録の取り方
  5. 結果の読み方
  6. 起こりやすい誤り
  7. 自分のゲームに持ち込む
  8. 次の行動
  9. 参考資料

問いの立て方：何を比べるのか

比べるのは、危険な対象を見つけて選ぶまでの速さと正確さです。問いは次のように絞ります。

  • 同じ位置・同じ大きさ・同じ明るさで、色だけが違うとき、危険は見分けられるか。
  • 色を使わず、形だけにしたとき、見分けられるか。
  • 形に動きを足すと変わるか。さらに音を足すと変わるか。

比較する条件は次の4つにします。

  • 赤のみ、危険な対象の見た目：赤い丸、他の対象：灰色の丸
  • 形、危険な対象の見た目：灰色の三角、他の対象：灰色の丸
  • 形＋動き、危険な対象の見た目：灰色の三角がゆっくり拡大縮小、他の対象：灰色の丸（静止）
  • 形＋動き＋音、危険な対象の見た目：上に加えて、表示と同時に短い音、他の対象：灰色の丸（静止）

「赤のみ」には落とし穴があります。赤と灰色の明るさ（明度）が離れていると、色覚に関係なく、明るさの差で見分けられてしまいます。色だけの条件にするなら、グレースケール表示にしても赤と灰色が近い明るさになるように調整した版と、調整していない版を別条件として用意すると、色と明るさの効果を切り分けられます。

準備するもの

  • テスト用のHTMLファイル1つ（次の節のコードを保存します）。
  • グレースケールで画面を確認する手段。ブラウザの開発者ツールに、色覚の見え方をエミュレートする機能（Chromeの場合は「レンダリング」パネルの色覚の欠陥のエミュレート）があります。CSSの filter: grayscale(1) を body に付けるだけでも簡易確認になります。
  • 協力者。できれば複数人にお願いし、見え方が違う人が含まれていれば理想的です。ただし色覚の特性を尋ねることは任意の申告にとどめ、答えたくない人に聞かない配慮が必要です。自分ひとりで行うなら、エミュレーターを切り替えた複数の見え方で自分が回す形になります。
  • 記録用の表（紙でもスプレッドシートでも構いません）。
  • 音の条件のために、音量を一定にできる環境（イヤホンの有無や音量を記録に残します）。

手順：テストページを作って回す

4つの丸が並び、そのうち1つだけが「危険」役です。危険の位置は毎回ランダムにし、危険を見つけてクリックするまでの時間をミリ秒で記録します。条件は4つで、各10回ずつ、条件の順番はランダムにします。誤クリックも記録します。

html
<!doctype html><meta charset="utf-8">
<style>
#f{display:flex;gap:24px;margin:24px}
.i{width:90px;height:90px;border-radius:50%;background:#888}
.red{background:#c33}
.shape{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.move{animation:p 1s ease-in-out infinite alternate}
@keyframes p{to{transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.move{animation:none}}
</style>
<button id=s>開始</button> <span id=m></span><div id=f></div>
<script>
const C=[['red'],['shape'],['shape','move'],['shape','move','sound']];
let order=C.map((_,i)=>i).sort(()=>Math.random()-.5),log=[],n=0,t0,d,ac;
const f=document.getElementById('f'),m=document.getElementById('m');
function next(){
 if(n>=order.length*10){console.table(log);m.textContent='終了：コンソールに表を出しました';f.innerHTML='';return}
 const c=C[order[Math.floor(n/10)]];d=Math.floor(Math.random()*4);
 f.innerHTML='';
 for(let k=0;k<4;k++){const e=document.createElement('div');e.className='i';
  if(k==d)c.forEach(x=>x!='sound'&&e.classList.add(x));
  e.onclick=()=>{log.push({cond:c.join('+'),trial:n%10+1,ms:Math.round(performance.now()-t0),ok:k==d});n++;next()};
  f.appendChild(e)}
 if(c.includes('sound')){const o=ac.createOscillator();o.connect(ac.destination);o.start();o.stop(ac.currentTime+.15)}
 t0=performance.now();
}
document.getElementById('s').onclick=()=>{ac=new AudioContext();next()};
</script>

このコードの要点は次のとおりです。

  • 「開始」ボタンの中で AudioContext を作っています。ブラウザは、利用者の操作なしに音を鳴らすことを制限しているためです。
  • 動きは1秒ごとにゆっくり拡大縮小するだけで、点滅はさせていません。
  • 「動きを抑える」設定（prefers-reduced-motion）がオンの端末では動きが止まります。この場合、「形＋動き」は「形」と同じ見え方になるため、設定をオフにした状態でテストするか、その差を記録に残してください。
  • 結果は開発者ツールのコンソールに表で出ます。ブラウザを閉じると消えるので、必要なら表をコピーして保存します。

回し方は、まず通常表示で1周します。次にグレースケール（またはエミュレーター）をかけて、もう1周します。「赤のみ」の調整版を試す場合は、.red の色を灰色と近い明るさのものに差し替えて、別の条件として扱います。

記録の取り方

記録する項目は、次の6つで足ります。

  1. 協力者の識別（名前ではなく番号）
  2. 画面の見え方（通常、グレースケール、エミュレーターの種類）
  3. 条件（赤のみ／形／形＋動き／形＋動き＋音）
  4. 試行番号（1〜10）
  5. 反応時間（ミリ秒）
  6. 正誤（危険を選べたか）

単位は「1試行1行」です。コンソールの表をそのまま貼れば、列が揃います。音の条件では、音量とイヤホンの有無を別に一行メモしてください。

回数については、各条件10回で足りるかどうかを最初から決めつけないことです。ばらつきが大きいと感じたら、同じ条件をもう一周足して、中央値が安定するか確かめてください。

結果の読み方

平均ではなく中央値で見ます。1回だけ極端に遅い試行（よそ見、画面の切り替わり）が平均を引きずるからです。判断は次の順に進めます。

  1. 誤クリックを先に見る。 条件ごとに、危険以外を選んだ割合を出します。速くても外している条件は、伝わっているとは言えません。
  2. 条件ごとの中央値を並べる。 正解の試行だけで出します。
  3. 差とばらつきを比べる。 条件間の中央値の差が、同じ条件内の最速と最遅の幅より小さければ、その差は偶然の範囲と考えて、結論を保留します。
  4. 見え方を変えた回と比べる。 「赤のみ」で、通常表示とグレースケール表示のあいだに大きな違いが出る場合は、赤に頼っている度合いが大きいということです。調整版の明度が離れていないかも確認します。
  5. 音の効果は誤クリックと分けて読む。 音が鳴った時点で、画面を見る前に反応が始まることがあります。速くなっても、位置を取り違えているなら、音は「何かが起きた」と知らせているだけで、「どれが危険か」を伝えていません。

読み取りの目安をまとめます。

  • 形だけで誤クリックが少なく、中央値も安定しているなら、色を外しても危険の位置は伝わっている可能性が高いと考えられます。
  • 形だけでは遅い、または外す場合は、動きや音を足したときにどの指標が改善するかを見て、足す価値を決めます。
  • どの条件でも協力者ごとの差が大きい場合は、条件の差より個人差が効いています。協力者を増やすか、見え方の違いごとに分けて見る必要があります。

起こりやすい誤り

実験の設計で最も崩れやすいのは、条件のあいだで「色以外」も一緒に変わってしまうことです。

  • 面積の違い。 丸と三角は、同じ幅と高さでも面積が違います。目立ちやすさが形ではなく大きさの差になっていないか、サイズを調整して見比べてください。
  • 順序の影響。 同じテストを繰り返すと慣れて速くなります。条件の順番をランダムにしているのはそのためですが、コードの並べ替えは簡易的なものなので、厳密に行うなら、協力者ごとに順番を手動で割り振る方法もあります。
  • 位置の癖。 危険がいつも左端にあると、そこを先に見る癖が出ます。位置のランダム化が効いているか、記録から偏りを確認してください。
  • 動きの安全性。 点滅は避けます。一般に、1秒間に3回を超える点滅は避けるのが目安とされています（WCAGの「3回のせん光」に関する基準）。ゆっくりした拡大縮小でも、動きが苦手な人はいます。「動きを抑える」設定のときの代わりの表現を、最初から用意しておくと安全です。
  • 音だけに頼る。 音は、聞こえない環境や、消音で遊ぶ人には届きません。音は補助にして、形と動きだけでも成り立つ状態を基準にします。
  • 色の別名を作る。 色を変えたあと、「青は安全」「黄色は注意」のように色の意味を増やすと、同じ問題が再現します。色を使うなら、形や記号とセットにします。

自分のゲームに持ち込む

テストで得たデータは、危険表現の優先順位に変換できます。たとえば次のような判断です。

  • 形だけでも見分けられる → 形を土台にして、色は補強に回す。
  • 動きを足すと改善する → 動きを標準にし、「動きを抑える」設定のときは枠線や模様に置き換える。
  • 音が位置の特定を助けていない → 音は注意喚起に限り、位置は画面で伝える。

アソバースの公式作品にも、危険がミスに直結する設計があります。たとえば「紙ひこうき郵便」では風船にぶつかると紙が傷み、3回で終了します。「時計じかけの台所」には、本番でミスが3回までというルールがあります。こうした「触れてはいけないもの」が画面上でどう見分けられるかは、作品を開き、グレースケールやエミュレーターをかけて確かめてください。この部分は作品を開いて確かめるのが確実です。

次の行動

まず上のコードを保存し、通常表示とグレースケール表示で、自分で1周ずつ回してみてください。コンソールの表から、条件ごとの誤クリックと中央値を並べれば、自分のゲームの危険表現がどの手がかりに支えられているかが見えてきます。そのうえで、いま作っているゲームの「危険」を一つ選び、形・動き・音のどれを足すかを決めて、同じ手順で再確認してください。

参考資料

  • Web Content Accessibility Guidelines（WCAG）達成基準1.4.1「色の使用」
  • Web Content Accessibility Guidelines（WCAG）達成基準2.3.1「3回のせん光または閾値以下」
  • Chrome DevTools ドキュメント「色覚の欠陥のエミュレート」
  • MDN Web Docs「prefers-reduced-motion」
マガジン一覧に戻る