画面の中の「夜」はどう作られているか：色と明るさの錯覚

夜は「暗さ」ではなく「差」でできている

明るさの感じ方には、同時対比という現象があります。同じ灰色でも、白い背景に置くと暗く、黒い背景に置くと明るく見えます。つまり画面で夜を作るときは、全体を黒に近づけるだけでは足りません。「明るい部分」と「暗い部分」の差を、見る人の目に作る必要があります。

夜らしさを出す道具は、おおまかに3つあります。

• 明度を下げる：全体の明るさを抑えます。
• 彩度を下げ、色相を青寄りにする：鮮やかな色を減らし、青みのある暗い色でまとめます。暗い場所では青系が相対的に明るく感じられる傾向（プルキンエ現象）が知られており、夜が青で描かれやすい理由の一つとされています。
• 明るい点を小さく残す：街灯や月明かりのような小さな明部を置くと、その周囲が暗く見えます。

3つ目が錯覚の中心です。画面の大半が同じ暗さでも、一点に光があるだけで、残りは「夜の暗がり」として読まれます。

月夜の配達の設計から読み取れること

確認できる事実を並べます。

• 小包は3つ、バッグは2枠で、燃料は有限（1区間で燃料1）です。
• 3つの夜があり、経路を考えるパズルです。
• ヒントには、残り最短距離の表示と、次の一歩を照らす機能があります。
• 一歩戻ることができます。各夜の最少区間数はプレイ中だけ記録されます。

ここで目を引くのは、ヒントが「照らす」と表現されている点です。夜の暗がりの中で、光が次に進む場所を教える役割を持っていると読み取れます。光は雰囲気づくりだけでなく、情報を渡す手段にもなっている、という設計の方向です。

もう一点、パズルとしての性質も関係します。燃料が有限なので、迷う時間が長いほど「どこを通れるか」を画面から読み取る負担が大きくなります。暗さと読みやすさは、両立させるべき課題になります。ただし、画面のどこをどう暗くしているか、ヒント表示の見た目がどう変わるかは、確認済み事項にありません。この部分は作品を開いて確かめてください。

注意点として、カバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。色の調査には必ずゲーム画面を使います。

自分で確かめる観察の設計

「少ない色で暗さを表している」という見立てが当たっているかは、自分で数えれば分かります。結果は人によって、画面の設定によっても違います。以下は結果を書かずに、手順だけを示します。

準備するもの

• 月夜の配達を開いた端末
• スクリーンショットを撮る手段
• 色を読み取れるツール（画像編集ソフトのスポイト、ブラウザの開発者ツールなど）
• 記録用の表（役割・場所・色・明るさの印象）

手順

1. 3つの夜それぞれで、スクリーンショットを1枚ずつ撮ります。ヒントを使える場面では、使う前と後で計2枚にします。
2. 画面の要素を「背景」「通れる道」「通れない場所」「小包」「ヒントの光」のような役割に分けます。実際の作品の要素に合わせて名前を変えてかまいません。
3. 役割ごとに3か所ずつ色を読み取ります。ひとつの役割で値がどれだけばらつくかを見るためです。
4. 読み取った色を明るい順に並べ、青寄りか、無彩色寄りか、暖色寄りかをメモします。
5. 画像をグレースケール（白黒）にして、役割が見分けられるかを確認します。
6. 部屋の照明を点けた場合と消した場合、画面の明るさを変えた場合で、同じ画面を見比べて印象を記録します。

結果の読み方

• 役割の数より、実際に使われている色の系統が少ないなら、色の種類を絞って夜を表していると読めます。
• 同じ役割でも場所によって値が少しずつ違うなら、光の届き具合による明るさの段階が付けられていると読めます。
• ヒント前後の画面で、明るい領域の位置や広さが変わるなら、光が情報として使われていると読めます。
• グレースケールで役割の区別がつかなくなるなら、その区別は色相に頼っています。反対に区別できるなら、明暗の差だけで伝わる作りです。

起こりやすい誤り

• JPEG圧縮の画像では、境目の色が混ざります。可能ならPNGで保存し、境目を避けて読み取ります。
• ダークモードや夜間モード（画面を暖色寄りにする機能）が有効だと、見た目の色が実際の描画色と変わります。確認前に切っておきます。
• 1枚の画面だけで全体を判断しないことです。3つの夜の結果は別々に扱います。

小さな夜景を作って、錯覚を再現する

観察だけでなく、手を動かすと理解が深まります。下のコードは、3色で描いた昼の迷路に、暗い青の幕と光の円を重ねて夜にする最小の例です。月夜の配達の実装ではなく、考え方を試すための別物です。HTMLファイルに保存してブラウザで開くと動きます。

<canvas id="c" width="320" height="320"></canvas>
<label><input type="checkbox" id="n" checked> 夜にする</label>
<script>
const cv = document.getElementById('c'), g = cv.getContext('2d');
const n = document.getElementById('n');
const rows = [
  '########',
  '#..#...#',
  '#.##.#.#',
  '#....#.#',
  '###.##.#',
  '#...P..#',
  '#.####.#',
  '########'];
const col = {'#':'#7a6a55', '.':'#e6d8a8', 'P':'#d9483b'};
let x = 160, y = 160;
function draw() {
  rows.forEach((r, j) => [...r].forEach((ch, i) => {
    g.fillStyle = col[ch];
    g.fillRect(i * 40, j * 40, 40, 40);
  }));
  if (n.checked) {
    const d = g.createRadialGradient(x, y, 20, x, y, 110);
    d.addColorStop(0, 'rgba(8,14,44,0)');
    d.addColorStop(1, 'rgba(8,14,44,0.88)');
    g.fillStyle = d;
    g.fillRect(0, 0, 320, 320);
  }
}
cv.onpointermove = e => {
  const b = cv.getBoundingClientRect();
  x = e.clientX - b.left; y = e.clientY - b.top; draw();
};
n.onchange = draw;
draw();
</script>

定義した色は昼の3色と、夜の幕の1色だけです。それでも幕の透明度が中心から外へ変わるので、画面には連続した明暗の段階が生まれます。これが「少ない色で暗さを表す」ときの基本の形です。

ここから、次の3つを変えて見比べます。

1. 幕の濃さ：0.88 を 0.6 と 0.97 に変えます。道がどこまで読み取れるか、赤い小包がいつ見つけにくくなるかを確かめます。
2. 幕の色：8,14,44 を、色味のない 10,10,10 に変えます。夜の印象がどう変わるかを比べます。
3. 光の半径：110 を小さくして、通れる道を探す難しさがどう変わるかを見ます。光の範囲は、見える情報の量そのものです。

自作の夜に応用するときの判断基準

夜の場面を自分のゲームに入れるときは、次の点を確認します。

• 操作に必要な情報は、暗さに埋もれていないか。 文字や操作対象は、背景との明るさの差を十分に取ります。文字のコントラスト比についてはWCAGに基準（通常の文字で4.5:1）があり、ゲーム画面にも目安として使えます。
• 色だけで区別していないか。 色の見え方には個人差があります。形や明るさの差も併せて使います。
• 動く光は控えめにできるか。 揺らめく明かりや点滅は、「動きを抑える」設定を選ぶ人には負担になります。アソバースの公式13作品はこの設定に対応しており、投稿作品でも同じ配慮ができます。
• 光の範囲は難易度の一部になっていないか。 光が届く範囲を狭めると、考える材料が減ります。パズルでは意図せず理不尽になることがあるため、ヒント機能の有無とあわせて調整します。

次の行動

月夜の配達を開き、3つの夜からひとつ選んで、役割ごとの色を記録する表を作ってみてください。続けて、上のコードで幕の濃さを2通り試すと、画面の明暗の組み立てがつかめます。自作の夜景があるなら、グレースケールにして見え方を確かめるところから始めると、修正点が見つかります。

参考資料

• W3C「Web Content Accessibility Guidelines（WCAG）」（コントラストに関する達成基準）