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

夜の画面は、どこまで明るくしても夜に見えるのか：暗くしすぎない夜の実験設計

遊びをつくる

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

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

夜のシーンを作るとき、まず手が伸びるのは全体を暗くすることです。黒の半透明を一枚重ねれば、確かに夜らしくなります。ところがその直後に、道と壁の区別がつかない、アイテムが見つからない、文字が読めない、といった問題が出ます。夜らしさを足したつもりが、遊びやすさを引いていた、という状況です。 この記事では「夜らしさ」と「見やすさ」を別々の値として測り、明度（明るさ）をあまり落とさずに夜を感じさせる条件を探します。結果は書きません。同じ盤面から条件違いの画面を4枚作り、数人に見てもらい、読者自身が答えを出すための設計書です。 題材の参考にするのは、公式作品「月夜の配達」です。小包3つ、バッグ2枠、有限の燃料で3つの夜を回る経路パズルで、夜が舞台でありながら、道筋を読み取れなければ成り立たない種類のゲームです。この作品を観察の入口にして、自作の画面で実験します。

この記事の目次
  1. 夜らしさと見やすさを分けて測る
  2. 月夜の配達を観察する
  3. 準備するもの：4条件を同じ盤面で比べる
  4. 手順と記録の取り方
  5. 結果の読み方と起こりやすい誤り
  6. 次の行動

夜らしさと見やすさを分けて測る

「暗くしすぎない夜」を実験にするには、曖昧な言葉を測れる形に直す必要があります。この実験では二つの問いに分けます。

  • 夜らしさ：見た人が、その画面を「夜」だと感じるか。
  • 見やすさ：見た人が、道・壁・目的地を素早く正確に読み取れるか。

暗くするだけの方法は、夜らしさを上げる代わりに見やすさを下げやすいと考えられます。一方、色味や光の置き方を変えれば、明度を保ったまま夜らしさを上げられるかもしれません。これはあくまで仮説です。確かめる対象は、次の4つの要素のどれが夜らしさを担うのかです。

  1. 全体の明度（暗さそのもの）
  2. 色相（青や紫への寄せ方）と彩度（鮮やかさ）
  3. 光源まわりだけが明るいという明暗の偏り
  4. 道と壁の明度差（コントラスト）

ここで一点、注意があります。HSLの明度（L）が同じでも、色相が違えば目に感じる明るさは変わります。青は同じLでも暗く見えやすい色です。「明度を保つ」とは何を保つのかを最初に決めておきます。この実験では、道と壁の比（コントラスト比）を保つことを目標にします。文字については、WCAGなどのアクセシビリティ指針が目安として示す4.5:1が一つの参照点になります。ゲームの盤面にそのまま当てはまる基準ではありませんが、道と壁の比を測るときの物差しとして使えます。

月夜の配達を観察する

実験の前に、夜を舞台にした作品が何を優先しているのかを観察します。確認済みの情報から読み取れるのは、次のような設計上の事実です。

  • 燃料は有限で、1区間につき燃料1を使います。一手の重みが大きいので、プレイヤーは経路を落ち着いて読む必要があります。
  • 「残り最短距離」の表示や「次の一歩を照らすヒント」、「一歩戻る」があります。画面は、経路の情報を読み取るためのものです。

つまり、夜の雰囲気を出しつつも、道筋を読めなくしない作りが求められているゲームだと考えられます。これは設計から読み取れることであり、実際の色の数値や光の描き方は、作品を開いて確かめてください。なお、公式作品のカバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。画面の参考にするときは、必ずプレイ画面を見ます。

観察の手順は次のとおりです。

  1. 作品を開き、1つ目の夜を遊ぶ場面を用意します。
  2. 道、壁、小包、目的地を、それぞれ何で見分けているかを書き出します。色の違いか、明るさの違いか、形の違いかを分けて書きます。
  3. 「夜だ」と感じさせている要素を3つまで挙げます。
  4. ヒントを使ったとき、画面の何が変わるかを確かめます。
  5. 画面を開発者ツールや画像編集ソフトでスクリーンショットにして、グレースケール化します。色を抜いても道と壁を区別できるかを見ます。

最後のグレースケール化は、色だけに頼った区別になっていないかの確認になります。色覚の多様性への配慮の点検にもなります。

準備するもの：4条件を同じ盤面で比べる

比べるときは、盤面を一つに固定し、見た目の条件だけを変えます。盤面まで変えると、どちらの影響か分からなくなります。

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

  • 比較用の盤面（8×8程度の簡単な経路図で足ります）
  • 4つの条件を切り替えられる画面
  • 評価者（自分以外の数人。人数は多いほうが傾向を見やすくなります）
  • 記録用の表計算シート

条件は次の4つです。

  • A 昼、内容：基準。色や明度をいじらない
  • B 暗くするだけ、内容：色相はそのまま、明度だけ下げる
  • C 青寄せ、内容：色相を青側へ寄せ、彩度を少し下げる。明度の下げ幅は小さくする
  • D 青寄せ＋灯り、内容：Cに加え、光源の近くだけ明度を上げる

次のコードは、この4条件を切り替える最小構成です。HTMLファイルとして保存してブラウザで開けば動きます。数値は仮の値なので、自分の画面に合わせて変えてください。

html
<!doctype html>
<meta charset="utf-8">
<canvas id="c" width="320" height="320"></canvas>
<p>
<button data-m="day">A 昼</button>
<button data-m="dark">B 暗く</button>
<button data-m="blue">C 青寄せ</button>
<button data-m="lamp">D 青寄せ+灯り</button>
</p>
<script>
const g = document.getElementById('c').getContext('2d');
const S = 40, K = {dark: 0.3, blue: 0.75, boost: 35};
const map = ["WWWWWWWW","WPPPWGGW","WWWPWGGW","WPPPPPPW",
             "WPWWWWPW","WPPPPWPW","WWWWPPPW","WWWWWWWW"];
const base = {W: [30,25,35], P: [40,35,70], G: [120,40,45]};
const lamp = {x: 4, y: 3};
let mode = 'day';
function col(t, x, y) {
  let [h, s, l] = base[t];
  if (mode == 'dark') l *= K.dark;
  if (mode == 'blue' || mode == 'lamp') {
    h = h + (225 - h) * 0.7; s *= 0.7; l *= K.blue;
  }
  if (mode == 'lamp') {
    const d = Math.hypot(x - lamp.x, y - lamp.y);
    l += Math.max(0, (3 - d) / 3) * K.boost;
  }
  return `hsl(${h} ${s}% ${Math.min(l, 95)}%)`;
}
function draw() {
  map.forEach((r, y) => [...r].forEach((t, x) => {
    g.fillStyle = col(t, x, y);
    g.fillRect(x * S, y * S, S, S);
  }));
}
document.querySelectorAll('button').forEach(b =>
  b.onclick = () => { mode = b.dataset.m; draw(); });
draw();
</script>

Wは壁、Pは道、Gは目的地のつもりです。自作ゲームがある場合は、その画面に条件違いを実装すると、実際の遊びに近い結果が得られます。

手順と記録の取り方

評価は二段階に分けます。印象と、課題の成績です。

第一段階：印象を聞く

  1. 評価者に4条件を、毎回違う順番で1枚ずつ見せます。順番は評価者ごとに入れ替えます。
  2. 見せるたびに、次の2つを1〜5の5段階で答えてもらいます。「夜らしさ」と「道の見やすさ」です。
  3. 条件名は伏せます。「暗い」「青い」などの先入観を避けるためです。

第二段階：課題を解いてもらう

  1. 盤面上の2点を決め、「入口からゴールまで、通路を何マスで行けるか」を数えてもらいます。
  2. 答えるまでの秒数と、正誤を記録します。
  3. 条件ごとに、ゴールの位置を変えた課題を2〜3問ずつ用意します。同じ問題を繰り返すと、慣れで成績が変わってしまうからです。

記録は、表計算シートに1回答を1行で入れます。

  • 評価者ID
  • 条件（A〜D）
  • 提示順
  • 夜らしさ（1〜5）
  • 見やすさ（1〜5）
  • 課題の所要秒数
  • 正誤

さらに、評価者ごとに環境も控えておきます。画面の明るさ設定、部屋の明るさ（昼の窓際か、夜の室内か）、使った端末です。後で「条件の差」なのか「環境の差」なのかを切り分けるために使います。

あわせて、画像から道と壁の比を測っておきます。ブラウザの開発者ツールに表示されるコントラスト比などで、条件ごとの「道と壁の比」を1つずつ記録します。印象評価と数値を並べて見るためです。

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

集計は、条件ごとの平均で十分です。平均を比べるときは、次の見方で判断します。

  • BとCで夜らしさが近く、Cのほうが見やすさや課題成績が良ければ、色相を寄せる方法が、明度を落とさずに夜を表す手段として働いていると読めます。
  • DがCより夜らしさで上回るなら、光源まわりの明暗の偏りが夜らしさを足していると考えられます。ただし、見やすさがCより下がっていないかも併せて見ます。
  • Aに近い条件でも「夜」と答える人が多いなら、明度よりも色の印象が支配的だと読めます。
  • BがA並みに見やすい場合は、暗くする幅が足りない可能性があります。K.darkを下げて再実験します。
  • 評価者ごとの差が大きく、条件の差が見えないときは、評価者の数か課題の数が足りていません。結論を急がず、追加の回答を集めます。

起こりやすい誤りも挙げておきます。

  • 順番効果：最初に見た画面が基準になり、後の画面の評価が引きずられます。提示順を入れ替えて防ぎます。
  • 環境の混入：画面の明るさや部屋の明かりが違うと、夜らしさの感じ方が変わります。環境を揃えるか、記録して後から分けて見ます。
  • 自分の目への慣れ：作った本人は、暗い画面に慣れて見やすいと感じがちです。評価は他人に頼みます。
  • 変えすぎ：色相、彩度、明度を一度に変えると、どれが効いたのか分からなくなります。差が出たら、一要素ずつ戻して原因を切り分けます。
  • 動きの混入：光が点滅したりゆれたりする演出を重ねると、静止画の比較ではなくなります。まず静止画で比べ、演出は後から足します。動きを抑える設定に配慮する必要もあるため、光の動きは最後に検討します。

次の行動

まず「月夜の配達」を開き、道・壁・目的地を何で見分けているかを書き出してください。続けて、上のコードで4条件を作り、身近な数人に提示順を変えながら見てもらいます。夜らしさと見やすさを別々に記録すれば、自分のゲームに必要な暗さの下限が見えてきます。

マガジン一覧に戻る