ダーク／ライトの切り替えでロゴは反転するのか：連動する要素を一覧にする手順

何を「連動」と数えるか

最初に、数える単位を決めます。「ロゴが変わった」という大まかな記録では、あとで比べられません。次の二つを決めておきます。

• 数える対象は要素一つです。 要素とは、ロゴ、ヘッダーの背景、本文の文字、カード、ボタン、入力欄、区切り線、カバー画像、アイコンなど、目で見て一つのまとまりと分かる部品です。
• 比べる状態は二つです。 ライトとダークで、同じ画面、同じ表示幅、同じ言語のまま比べます。

次に、変化の種類を分類しておきます。分類が曖昧だと、同じ現象が別の言葉で記録されて集計できません。次の五つで足ります。

• N、変化の種類：変化なし、見分け方：二枚の画面で、その要素の見た目が同じ
• C、変化の種類：色の差し替え、見分け方：背景色や文字色が変わるが、形は同じ
• I、変化の種類：画像の差し替え、見分け方：見た目が変わり、画像そのものが別の物になっている
• F、変化の種類：フィルタによる反転、見分け方：同じ画像が、処理によって色だけ変わっている
• L、変化の種類：形やレイアウトの変化、見分け方：影が消える、余白が変わるなど、色以外が変わる

I と F は、見た目では判別しづらい組み合わせです。区別する方法は後の節で説明します。まず、この分類のまま、どの要素も必ずどれか一つに入れることを決めておきます。迷った要素は「迷い」と別に印を付けておきます。

記録の取り方：画面と要素と状態で一行

記録は表一枚で足ります。一行は「画面 × 要素」で、列に二つの状態を並べます。

画面 ／ 要素 ／ ライトの見た目 ／ ダークの見た目 ／ 種類(N/C/I/F/L) ／ 迷い

画面は、少なくとも次の四つを対象にすることを勧めます。

1. トップや一覧など、最初に開く画面
2. 作品の詳細画面
3. 入力を伴う画面（ログインや投稿など。入力欄の枠と文字を見られます）
4. 実際に作品を開いて遊んでいる画面

回数は、画面ごとに「ライト→ダーク→ライト」と一往復で足ります。最後にライトへ戻すのは、元に戻るかを確かめるためです。戻った後に最初と違う要素があれば、その行に「戻らない」と書き込みます。

撮影する場合は、表示幅を固定します。幅が変わるとレイアウトが変わり、L の判断が崩れます。ブラウザのウィンドウ幅を一定にし、拡大率も固定します。画面を二枚並べて見比べると、N と C の判定が速くなります。

言語設定も条件の一つです。サイトは日本語と英語の表示切り替えに対応しています。テーマの切り替えと言語の切り替えは別の操作なので、まず日本語で一往復して一覧を作り、その後に英語でも同じ行を確かめます。ここで変わる行があれば、それはテーマではなく言語の影響です。なお、作者が入力した作品名や紹介文は、言語を切り替えても書き換わりません。この性質を使うと、「言語で変わる要素」と「テーマで変わる要素」を切り分けやすくなります。

ロゴが「反転」する三つの仕組みを見分ける

ロゴの扱いは、大きく三つに分かれます。見た目が同じに見えても仕組みが違えば、色付きのロゴや将来の差し替えで挙動が変わります。次の最小のHTMLを手元に保存して、ブラウザで開いてみてください。外部の通信は使いません。

<!doctype html>
<meta charset="utf-8">
<title>ロゴ反転の3方式</title>
<style>
:root{--bg:#fff;--fg:#222}
:root[data-theme=dark]{--bg:#161a20;--fg:#eee}
body{background:var(--bg);color:var(--fg);font:16px sans-serif;padding:1rem}
.row{display:flex;gap:1rem;align-items:center;margin:1rem 0}
svg,img{width:48px;height:48px}
.a svg{color:var(--fg)}
[data-theme=dark] .b img,[data-theme=dark] .c img{filter:invert(1)}
</style>
<button id="t">テーマ切り替え</button>
<div class="row a"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="20" fill="currentColor"/></svg>A: 文字色に追従する図形</div>
<div class="row b"><img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23000'/%3E%3C/svg%3E">B: 黒い画像を反転</div>
<div class="row c"><img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23f80'/%3E%3C/svg%3E">C: 橙の画像を反転</div>
<script>
const r=document.documentElement;
document.getElementById("t").onclick=()=>{
  r.dataset.theme=r.dataset.theme==="dark"?"light":"dark";
};
</script>

ボタンを押すと、三つの円がどう変わるかを自分の目で確かめられます。確かめる観点は次の通りです。

• A（図形が文字色に追従）: 円が背景に合わせた明るい色になります。ロゴの色が文字色と常に連動するため、色付きにはできません。単色のロゴ向きです。
• B（黒い画像を反転）: 黒い円が明るい円になります。黒一色の画像なら、反転は便利な近道に見えます。
• C（色付きの画像を反転）: 橙の円は、橙の反対側にあたる別の色へ変わります。反転は明るさだけでなく色相も動かすため、ブランドの色を保ちたいロゴでは、意図しない色になる典型例です。

実際のサイトのロゴがどれに当たるかは、開発者ツールで調べられます。ブラウザの検査機能でロゴを選び、次の順に見ます。

1. ロゴが画像（img）か、埋め込みの図形（svg）か、背景画像かを確認します。
2. テーマを切り替えたとき、画像の参照先（src）が変わっていれば I です。
3. 参照先が同じままで、スタイルに反転や明るさを変えるフィルタが付いていれば F です。
4. 図形の塗りが文字色に追従していれば、色の差し替え（C）に分類します。

この三つのどれにも当たらず、切り替えても見た目が同じなら N です。N は欠点ではありません。ライトでもダークでも読める色のロゴなら、変えないことが最も安全な設計になる場合もあります。

「ロゴ以外」を拾う：見落としやすい要素

一覧の価値は、ロゴより周辺の要素で出ることが多いです。次の要素は、取り残されやすい代表例です。拾い漏れを防ぐため、チェックリストとして使ってください。

• 透過部分のある画像: 背景が透明な画像は、ライトでは自然でも、ダークでは周囲に白い縁が残って見えることがあります。
• 影: ライトでは奥行きを出す影が、ダークでは見えなくなり、カードの境目が消えることがあります（L に分類します）。
• 入力欄と区切り線: 背景と同化して枠が見えなくなっていないかを確認します。
• アイコン: 文字は変わってもアイコンだけが暗い色のままの場合があります。
• ブラウザ標準の部品: スクロールバー、チェックボックス、選択メニューなどです。サイト側の指定がなければ、ブラウザの既定の見た目のままになります。
• フォーカスの枠: キーボードで移動したときに出る枠が、両方のテーマで見えるかを確認します。矢印キーやEnterで操作できる作品では、この確認が実際の操作性に直結します。

文字の読みやすさには、広く参照される目安があります。W3CのWCAGは、通常の文字で背景との明るさの比を4.5:1以上、大きな文字や操作部品の境界で3:1以上を求めています。比は無料の計算ツールで測れます。判定は「基準を満たすか」を各行に追記するだけでかまいません。ライトでは満たしてもダークで満たさない行が出るかどうかが、この分析の収穫になります。

作品の中まで追うときの注意

サイトのテーマと、遊んでいる作品の中の見た目は、別の層の話です。アソバースの作品は、サンドボックス付きのiframeで実行され、アップロードされたコードはメインサイトとは別のオリジンから配信されています。ブラウザの仕組みとして、親のページに設定した色の指定が、そのまま子の中に届くわけではありません。したがって、「サイトをダークにしたら作品の中もダークになるか」は、作品ごとに実装されているかどうかで決まります。公式の13作品がそれぞれどう振る舞うかは、この記事では確認できていません。作品を開いて確かめてください。

作品ごとに確かめるときは、次の項目を一覧に足します。

• 作品の起動前の画面（カバー画像や説明）は、テーマで変わるか
• 起動後のゲーム画面は、変わるか。変わらないなら N
• 作品のタイトルの文字組みは、ライトでもダークでも読めるか。公式作品では、縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風と、作品ごとに文字組みが異なります。同じ操作の影響を、作品ごとに比べる題材になります
• カバー画像は生成されたアートワークで、ゲーム画面のスクリーンショットではありません。そのため、カバーが暗い雰囲気でも、ゲーム本編がその通りとは限りません。見た目の連動を見るときは、この二つを混同しないでください

また、サイトには「動きを抑える」設定もあります。テーマの設定とは別の項目なので、一緒に変えると原因が分かりません。テーマの一覧を作るときは動きの設定を固定し、動きの設定を確かめるときはテーマを固定します。一度に動かす条件は一つだけにします。

一覧の読み方：何を見て何を判断するか

表が埋まったら、種類ごとに行数を数えます。数える単位は「画面ごと」「要素ごと」の二通りで十分です。結果を読む基準を、先に決めておきます。

• N が多く、かつ両テーマで読める: 連動が少なくても問題ではありません。N の行は、基準の比で確認します。
• C が多い: 色の変数で一括管理されている可能性があります。切り替えの整合は取りやすい状態です。
• I や F がロゴに集中している: ロゴの扱いが特別であることを示します。色付きロゴが F なら、色相の変化が起きていないか、見た目で確認します。
• 「戻らない」「迷い」が残る: 状態の保持や、読み込み途中の表示を疑います。切り替え直後だけ一瞬ちらつく場合は、読み込みの順序が関わっていることがあります。画面を再読み込みして、同じ状態が保たれるかも追記します。
• L の行が少ない: 影や境目が色の変更に頼っていることになります。ダークで境目が消えていないかを、比の測定で確かめます。

誤りやすい点もまとめます。

• ブラウザやOSの設定が「自動」の場合、サイト内の切り替え操作とは別に、端末の設定にも影響を受けることがあります。検証の途中で端末側の設定を変えないでください
• 一回だけの観察で決めつけないでください。画面ごとに往復を一回、日本語と英語で各一回行い、同じ行が一致するかを見ます
• 拡大率を変えると、画像が別のサイズのものに差し替わる場合があります。表示幅と同様に、拡大率も固定します

次の行動

まず、ロゴとヘッダーだけの小さな表を作ってください。ライトとダークで一往復し、種類を N、C、I、F のどれかに分類するだけで、最初の一覧になります。余裕があれば、記事内のコードを保存して、三つの方式の違いを自分の画面で確かめてみてください。その後、気になる作品を一つ開き、サイトのテーマとの連動の有無を、同じ表の行として追加してください。

参考資料

• W3C「Web Content Accessibility Guidelines (WCAG)」のコントラストに関する達成基準
• MDN Web Docs「prefers-color-scheme」