あそんでいる間、画面から色が消える ― 残した2つの色と、その理由
トップページには10色のカードが並んでいますが、ゲームをスタートすると画面からほとんどの色が消えます。何を消して、何を残したのか。その線引きをどうやって決め、あとから条件を2つ足すことになった経緯を、開発の記録から振り返ります。
スタートを押すと、画面から色が消える
トップページには10枚のカードが並び、それぞれに違う色がついています。当サイトは、色を使わないサイトではありません。
ところが、どのゲームでもスタートを押した瞬間、画面のほとんどから色が消えます。縞模様（しまもよう）が並ぶ盤面は、灰色一色になります。絵柄マッチを開いて、カードに触れる前と後を見比べると、この切り替わりがよく分かります。
色そのものをやめたわけではありません。ゲーム名と番号を示す見出しの行や、結果画面に出る「次はこれ」には、いまもゲームごとの色がついています。色を置いてよい場所を、あそんでいる画面の中だけ絞っている、というのが実際のところです。
そのうえで、あそんでいるあいだにも、色が残っている場所が2つだけあります。何を消し、何を残したのか。その線引きをどうやって決めたのかを、この記事では書きます。
すぐ隣の色は、縞（しま）の見え方を変えてしまう
色を消す理由は、順応という現象にあります。明るい色をしばらく見つづけたあとに、別のものを見ると、色や明るさの感じ方がわずかに変わる。誰もが日常のどこかで経験している現象です。
このサイトのゲームは、うっすらとしか見えない縞模様を見分けるものです。すぐ横に色があると、目がその色に順応し、縞そのものの見え方が変わってしまいます。薄い縞を見分けるゲームほど、この影響を受けやすくなります。
そのため、ゲーム画面の背景は、明るさも色みもきっちり固定してあります。縞模様は明るい部分と暗い部分が同じ量だけあるので、全体をならすとちょうど中間の明るさの灰色になります。背景をこの灰色にそろえてあるのは、縞模様が背景から浮き上がって見えないようにするためです。
灰色といっても、ほんの少し青みがかっただけの灰色は使っていません。ごくわずかな色でも、画面の広い範囲に敷けば、目はそちらに順応します。文字の色や枠線の色も、あそんでいるあいだだけ、赤みも青みもない、同じ明るさの灰色に置き換えています。
どこまでなら色を置いてよいか、3つの条件で決めた
とはいえ、あそんでいる最中の演出まで無理に色を消すと、味気なくなります。そこで、次の3つをすべて満たすときだけ、色を置いてよいと決めました。
- 0.3秒以内に消えること
- 縞模様が描かれている場所と重ならないこと
- 画面の1割に満たない面積であること
この3つは、それぞれ別の切り口を分担しています。1つ目は色が居座る時間、2つ目は色が縞模様に触れる場所、3つ目は色が占める広さです。3つとも満たしたときだけ、持続しない・触れない・小さいという条件がそろい、色を置いても縞の見え方には響かないと考えました。
この条件に照らして、実際に直した箇所があります。うっすら見えでは、正解・不正解のたびに残っていた色つきの輪を消し、共通の演出にまとめました。迫ってくるでは、撃ち落とせなかったときに画面全体が赤く光る演出をやめました。どんどん小さくでは、撃破した瞬間に画面全体が光る演出をやめ、0.3秒以内で消える粒に変えました。ヘビでは、連なって泳ぐ先頭についていた緑の点線を、色のない線に変えました。
一度決めた条件に、あとから2つ足した
ところが、ヘビの先頭についていた緑の点線を色のない線に変えたあと、実際にあそんでみて、こう感じました。
「狙いの枠があるゲームは、緑色の丸い点線で囲んだほうがいい。ただでさえ地味なので」
これは、さきほどの3つの条件と正面からぶつかります。「持続する色は不可」という決まりに反するからです。ここで、色を消している理由そのものに立ち返りました。色を禁じているのは、順応によって薄い縞の見え方が変わってしまうからです。だとすれば、縞がつねに一番濃い状態で描かれているゲームでは、この心配はそもそも起こりません。
実装を確認すると、絵柄マッチ・ヘビ・迫ってくるの3本は、縞そのものの濃さがつねに最大のまま変わらないゲームでした。そこで条件をもう1つ足しました。「その回のあいだ縞がつねに一番濃く描かれているゲームに限り、持続する色を置いてよい」というものです。これによって、ヘビの先頭の点線は、もとの緑色に戻しました。
この4つ目の条件は、色が消えずに残ることだけでなく、演出の粒がどれだけ長く残るかにも当てはまりました。ヘビが弾ける演出の粒は、いちど0.3秒以内で消えるよう短くしていましたが、この条件に当てはまるとして、もとの長さ（最大0.5秒）に戻しています。絵柄マッチの粒も同じ条件に当てはまりますが、こちらを戻すべきだという声はなかったので、いまも0.3秒以内のまま残っています。
3つの条件を曲げたわけではありません。3つの条件が成り立つ前提そのものが、9本すべてに当てはまるわけではなかった、と気づいたということです。
そしてもう1つ、同じ考え方から5つ目の条件が足されました。うっすら見えでは、答えた直後に0.8秒だけ、正解か不正解かを丸い枠で示しています。緑と赤の色がつき、0.3秒よりずっと長く残るので、3つの条件にも4つ目の条件にも当てはまりません。
それでも構わないと判断した理由は、こうです。順応で縞の見え方が変わるのは、色を見せたあとに縞を見せるときだけです。答えたあとの間は、縞模様がいったん消えている時間です。次の問題は別の場所に、まったく見えない濃さ0から現れます。ですから、この間に色が残っていても、次の見え方には響きません。
そこで「縞模様を出していない時間は、色の決まりの外」という5つ目の条件を足しました。ゲームの外側なら色を使ってよい――待機画面や結果画面に色がついているのと、理屈は同じです。ちがうのは、あちらが場所として外側なのに対して、こちらは時間として外側だという点だけです。同じ考え方で、仲間外れ探しでも、外したときに押した札と正しい札を0.5秒だけ色つきの枠で囲むようにしました。
いまも残っている2つの色
結局、あそんでいるあいだも色が残る場所は2つだけです。
ひとつは、正解・不正解を示す緑と赤の合図です。ただし、これには2つの通り道があります。弾ける粒のように0.3秒以内で消えるものは、最初の条件をそのまま満たしています。うっすら見えや仲間外れ探しの丸い枠のように0.5秒から0.8秒残るものは、5つ目の条件――縞模様を出していない時間だから許される、というほうです。
もうひとつは、画面の下に置かれた、進み具合を示すバーです。バーの色はゲームごとの識別色のままですが、面積は小さく、位置は画面の下端に固定され、濃さも色そのものもあそんでいるあいだ変わりません。縞模様が描かれている場所とも重なりません。
追いかけで出題のたびに光る白いリングは、そもそも色そのものを持たない白なので、この線引きの対象そのものに含まれません。
ここまでの決まりのうち、CSSで指定した色については、公開前の自動チェックが毎回確認しています。しかし、キャンバスに直接描く色は、この自動チェックの対象にできません。そこは、ここに書いた決め事を守ることでしか担保できない部分です。縞模様の濃さの話はコントラストとは？「濃さ」の違いで見え方が変わるしくみに、画面の明るさの話は画面の明るさと見え方に、正解を重ねると何が変わるかは10のゲームは、どこまで難しくなるのかにまとめています。