アソバースのダークモードと動きを抑える設定

OSとブラウザのダークモード設定がサイト表示に影響するしくみ

Webサイトは、OSが「ダークモードを使っている」と報告すると、それをprefers-color-scheme: darkというCSSのメディアクエリで受け取れます。このクエリに対応しているサイトやゲームは、自動的に暗い配色に切り替わります。対応していないページはOS設定に関係なく元の配色のままです。

主要OSでの設定場所は次のとおりです。

• Windows 11：設定 → 個人用設定 → 色 → 「モードを選ぶ」で「ダーク」を選択
• macOS：システム設定 → 外観 → 「ダーク」を選択
• iOS / iPadOS：設定 → 画面表示と明るさ → 「ダーク」
• Android：設定 → ディスプレイ → ダークモードをオン

ブラウザ単体でも上書きできます。Chromeはアドレスバーにchrome://flagsと入力し「Force Dark Mode for Web Contents」を有効にすると、対応・非対応を問わずページを強制的に暗くしますが、色が不自然になることがあります。Firefoxは設定からカラーテーマを変更できます。いずれも公式のヘルプページで最新の手順を確認するのが確実です。

動きを減らす設定（prefers-reduced-motion）とは何か

前庭覚の過敏さや光感受性てんかんなどの理由で、画面のアニメーションやスクロール時の視差効果（パララックス）が不快になる方がいます。そうした利用者のために、OSには「視差効果を減らす」または「アニメーションを減らす」設定があります。

• Windows 11：設定 → アクセシビリティ → 視覚効果 → 「アニメーション効果」をオフ
• macOS：システム設定 → アクセシビリティ → ディスプレイ → 「動きを減らす」をオン
• iOS / iPadOS：設定 → アクセシビリティ → 動作 → 「視差効果を減らす」をオン
• Android：設定 → ユーザー補助 → アニメーションの削除（機種によりメニュー名が異なります）

この設定をオンにすると、CSSのprefers-reduced-motion: reduceメディアクエリを受け取ったWebコンテンツが、アニメーションを停止・簡略化するよう動作を変えます。対応しているゲームやサイトであれば、ふわっと動く演出が瞬時の切り替えに変わるといった効果があります。

アソバースのゲームにこれらの設定が効くかどうかの判断基準

アソバースに投稿されているゲームはHTMLファイルまたはZIPファイルで作られた個別の作品です。メディアクエリへの対応は作品ごとに異なります。OS側で設定を変えても、ゲーム内のコードがそのクエリを読み取っていなければ見た目は変わりません。

判断の目安は次の三点です。

1. OS設定を変えてからページを再読み込みしてみる。ゲームのロビーやタイトル画面の配色が変われば対応済みの作品です。
2. ゲームの説明文やREADMEを確認する。アクセシビリティ対応を明記している作者は、動き抑制やカラーモードに気を配っていることが多いです。
3. 変化がない場合は、OS側でブルーライト軽減や輝度調整を使う。これはソフトウェアの対応とは無関係に機能します。

アソバースの公式作品（オセロ・チェス・ピアノなど13本）については、公式サイトで最新の対応状況を確認してください。

ゲームを作る側が対応するための最低限の実装

アソバースに投稿する作品を作っている方には、メディアクエリへの対応を組み込むことをお勧めします。利用者の設定を尊重するのはアクセシビリティの基本であり、コード量も多くありません。

ダークモード対応の例（CSSのみ）：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
}

動きを抑える対応の例：

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

*セレクタで一括停止する方法は手早いですが、ゲームのロジックにアニメーションが絡んでいる場合（フラッシュで当たり判定を示すなど）は誤動作の原因になります。そうした箇所は個別に@mediaブロックで書き分け、視覚的な演出だけを止めてロジックには触れないようにするのが安全です。

JavaScriptでもwindow.matchMedia('(prefers-reduced-motion: reduce)').matchesで現在の値を取得できるため、Canvas描画やWebGL制御が必要なゲームでも対応できます。ゲームエンジンやAIツールで生成したコードにこの処理がなければ、後から追加する形で問題ありません。

利用者として快適に使うための補助的な方法

OS設定だけで調整しきれない場合、ブラウザの拡張機能を使う選択肢があります。「Dark Reader」のような拡張機能は非対応ページを強制的に暗くできます。ただし色の反転が不正確になることや、ゲームの描画に干渉する場合があるため、プレイ前後で一時的に無効にするのが無難です。

画面輝度そのものを下げるのも有効です。特にモバイル端末では、夜間モード（ブルーライト軽減）と輝度の組み合わせが目の疲れに効果的です。これらはOSの画面表示設定で時刻に応じて自動切換えできます。

次の行動

まずお使いのOSでダークモードと動き抑制の設定を有効にし、アソバースのページをリロードして変化を確認してください。ゲームを作っている方は、上記のCSSメディアクエリを作品に追加してから投稿・再アップロードしてみてください。アソバースへの投稿方法（HTMLまたはZIPファイル）は公式サイトのヘルプで確認できます。

参考資料

• MDN Web Docs「prefers-color-scheme」
• MDN Web Docs「prefers-reduced-motion」
• W3C「Accessibility Guidelines（WCAG）2.1」
• 各OS（Windows・macOS・iOS・Android）の公式アクセシビリティヘルプ