ダークモードでカバーはどう見えるか：両方で確かめる

問いを三つに分け、準備する

「ダークモードでは見づらい」という感想は、そのままでは直せません。原因が輪郭なのか文字なのか大きさなのかで、直し方が変わるからです。そこで、次の三つの問いに分けます。

1. 輪郭の問い：カバーの外縁が背景に溶けていないか。画像の端が背景色に近いと、枠が消えて形が崩れて見えます。
2. 文字の問い：カバーにタイトルなどの文字が入っているなら、その文字は両方のテーマで読めるか。
3. 縮小の問い：小さく表示されたとき、何の絵か、どんな雰囲気のゲームかが分かるか。

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

• カバー画像の候補を1〜3案。比較したい案がなければ1案で構いません。
• ライトとダークを切り替えられる環境。アソバースの表示切り替えを使います。
• 端末は最低2種類。PCとスマートフォンなど、画面の大きさと明るさが違うものを選びます。
• 記録用の表（後述）と、画面のキャプチャを撮る手段。
• 可能であれば、画像を作った本人ではない人を3人以上。

比較の見本として、アソバースの公式作品のカバーを並べて見る手もあります。公式13作品のカバーは生成したアートワークで、ゲーム画面のスクリーンショットではありません。タイトルの文字組みも作品ごとに違い、縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風などがあります。文字組みの違うカバーがライトとダークでそれぞれどう見えるかを先に眺めておくと、自分のカバーのどこを見ればいいのか、観察の目が整います。ただし、どの作品がどう見えるかはここでは書きません。作品一覧を開いて確かめてください。

手順1：模擬ページで当たりをつける

本番の前に、手元で画像を明暗の背景に並べる簡単なページを作ります。サイトを開かなくても、大まかな傾向を先に知るためです。次のHTMLを1つのファイルに保存してブラウザで開き、画像ファイルを選ぶと、明るい背景と暗い背景に3つの大きさで並びます。

<!doctype html>
<meta charset="utf-8">
<title>カバー模擬確認</title>
<style>
 body{margin:0;font-family:sans-serif}
 .row{display:flex;gap:16px;padding:16px;flex-wrap:wrap;align-items:flex-end}
 .light{background:#f6f6f6;color:#222}
 .dark{background:#181818;color:#eee}
 img{display:block}
 figure{margin:0}
</style>
<input type="file" id="f" accept="image/*">
<div class="row light" id="a"></div>
<div class="row dark" id="b"></div>
<script>
const sizes=[320,160,80];
document.getElementById('f').onchange=e=>{
 const file=e.target.files[0]; if(!file) return;
 const url=URL.createObjectURL(file);
 for(const id of ['a','b']){
  const row=document.getElementById(id); row.textContent='';
  for(const w of sizes){
   const fig=document.createElement('figure');
   const img=new Image(); img.src=url; img.width=w;
   const cap=document.createElement('figcaption'); cap.textContent=w+'px';
   fig.append(img,cap); row.append(fig);
  }
 }
};
</script>

注意してほしいのは、この背景色がアソバースの実際の色ではないことです。サイトの背景色、カードの枠、角丸、画像の切り取り方は、このページでは再現できません。ここで分かるのは、あくまで「画像そのものが明るい背景と暗い背景の両方で破綻しないか」という素の傾向です。

見る順番も決めておきます。まず320pxで輪郭と文字を見ます。次に80pxまで縮めて、手元から少し離れ、何の絵か分かるかを見ます。透過PNGを使っている場合は、透明な部分の下に背景色が透けるので、ここで差が出やすくなります。

手順2：実際のサイトで両方のテーマを見る

模擬ページで当たりをつけたら、サイト上で確かめます。確認の場所は、作品の一覧に並ぶ小さな表示と、作品ページの大きな表示の二つです。この二か所では周囲の背景も大きさも違うので、別の条件として扱います。

投稿の流れは「入力→表示の確認→公開」の3段階で、下書き保存もできます。表示の確認の段階で、カバーがどの大きさ・どの場所で見えるのか、テーマを切り替えて確かめられるのかは、現在の投稿画面で確認してください。カバー画像の形式や推奨サイズなどの仕様も、この記事では断定しません。投稿画面の案内を見てください。

公開後に確かめる場合は、次の順で進めます。

1. 一方のテーマで、一覧と作品ページのカバーを端末ごとに見て、キャプチャを撮ります。
2. サイトの表示切り替えで、もう一方のテーマに変えます。
3. 同じ画面、同じ位置、同じ端末で、もう一度キャプチャを撮ります。
4. 端末を替えて、1〜3を繰り返します。

公開内容は更新でき、非公開にもできます。カバーを差し替えたら、同じ手順をもう一度行い、前後を比べます。

人に見てもらう場合は、カバーの載った画面を約5秒だけ見せ、画面を閉じてから「どんなゲームだと思ったか」「画像の中に文字はあったか、何と書いてあったか」を聞きます。画像を作った本人は中身を知っているので、見えているつもりになりがちです。何も説明せずに聞くのがコツです。

記録の取り方と結果の読み方

記録は、条件の組み合わせごとに1行ずつ書きます。条件は「テーマ（2）×端末（2以上）×表示場所（一覧・作品ページ）×候補案（1〜3）」です。1案、端末2種なら、2×2×2＝8行になります。時間帯を変えて2回見ると、画面の明るさや環境光による揺れを確認できます。

• 輪郭、記録の単位：1行につき○・△・×、判定の目安：外縁がはっきり分かれば○、一部が溶ければ△、形が崩れれば×
• 文字、記録の単位：読めた最小の表示サイズ（px）または「読めない」、判定の目安：一覧の大きさで読めるかを別に記録
• 縮小時の判別、記録の単位：見た人が答えた内容を原文のまま、判定の目安：狙った雰囲気と一致したかを○・×で併記
• 備考、記録の単位：気づいた点を一言、判定の目安：端末の明るさ設定なども書く

判定の基準は、見る前に決めておきます。後から基準を動かすと、見たい結果に引き寄せてしまうからです。文字については、明るさの差（コントラスト比）の目安が参考になります。ウェブの読みやすさの指針では、通常の文字で4.5：1、大きな文字で3：1が一つの目安とされています。画像内のロゴ的な文字は厳密な適用対象ではないので、読みやすさを考える手がかりとして使ってください。

集まった記録は、次のように読みます。

• 一方のテーマだけ輪郭が×になる：画像の外縁の色が、そのテーマの背景に近いと考えられます。外縁に別の色の縁取りを足す、余白を設ける、主役を中央に寄せる、といった直しが候補になります。直したら同じ手順で再確認します。
• 両方で輪郭は○だが、小さいと判別できない：テーマの問題ではなく縮小の問題です。要素を減らす、主役を大きくする、細い線や小さな文字を省く方向で見直します。
• 文字が一方のテーマでだけ読めない：文字色と、その後ろの画像との明暗差が足りない可能性があります。文字の背後を暗く（または明るく）する、文字を太くする、といった調整を試します。
• 全部が○：その案は両方のテーマで役目を果たしています。ただし、見てもらった人の答えが狙いと食い違っていないかも見ます。見やすいことと、伝わることは別だからです。
• 端末で結果が割れる：画面の明るさや色の出方の差かもしれません。一つの端末だけで判断せず、割れた条件を備考に残し、多くの端末で破綻しない案を選びます。

複数の案を比べているなら、○の数だけで決めないでください。一覧の小さな表示で判別できるかを優先し、同点なら見てもらった人の答えが狙いに近い案を選ぶ、というように、順位のつけ方も先に決めておくと迷いません。

起こりやすい誤り

結果を歪めやすい点をまとめます。記録を取る前に一度確認してください。

• サイトの設定とOSの設定の食い違い：端末側がダーク設定でも、サイト側の表示がライトのままかもしれません。どちらの設定が表示に効いているかは、実際に切り替えて画面で確かめます。確かめずに「ダークで見た」と記録すると、条件がずれます。
• ブラウザの自動ダーク化：ブラウザの機能や拡張機能が、ページや画像の色を強制的に変えることがあります。確認用のブラウザでは、そうした機能を切っておきます。
• 古い画像が残る：カバーを差し替えた直後は、キャッシュ（一時的に保存された古いデータ）のせいで前の画像が見えることがあります。再読み込みをして、画像が変わっていることを確かめてから記録します。
• キャプチャの圧縮で差が見えなくなる：画面を撮った画像を、メッセージアプリなどで送ると、圧縮で色や細部が変わります。比較は元のファイルで行います。
• 自分の目だけで判断する：作った本人は、画像の意図を知っているので、小さなカバーでも補って見てしまいます。第三者に見せる手順を省かないでください。
• 一つの条件の結果を全体に当てはめる：PCのライトで良かったからといって、スマートフォンのダークでも良いとは限りません。記録表の空欄を埋めてから結論を出します。
• 基準を後から動かす：「ここまでなら許容」を見た後で決めると、判定が甘くなります。手順1の前に、○・△・×の基準を書いておきます。

次の行動

まず手元のカバー画像で、手順1の模擬ページを開き、明るい背景と暗い背景で320pxと80pxを見比べてください。気になる点があれば、記録表に条件と判定を書き込み、直して再確認します。サイトでの見え方は、投稿画面の表示の確認や公開後のページで、ライトとダークの両方を切り替えて確かめてください。

参考資料

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