フィードバックと装飾的な演出を分ける
CSSではメディア機能 prefers-reduced-motion を使ってユーザーの設定を検出し、必要に応じてスクリプトで動かす演出にも同じ設定を適用します。たとえば、背景のズームを繰り返す演出は削除しつつ、成功を知らせる短い色やテキストの合図は残します。モーションを減らした結果、必要な情報まで気づかないうちに失われないようにします。プレイヤーが何が変わったか、次に何をすればよいかを理解できるようにしてください。
すべてのアニメーションを機械的に削除しないでください。移動するターゲットはゲームプレイである可能性がありますが、衝突後のカメラの揺れは装飾的な場合があります。位置やタイミングに必要な動きを保持し、可能な場合は別の明確な信号を提供します。 MDN は、この設定では不要な動きを減らすか置き換えることを要求していると説明しています。
トランジションと反復エフェクトをテストする
メニュー、読み込み、カメラの切り替え、勝敗の表示、長いプレイ中に繰り返す効果まで、体験全体の動きを確認します。CSSアニメーションをひとつ無効にするだけでは、JavaScriptやcanvasで描く動きを制御できない場合があります。すべての描画方法で設定を統一し、プレイ中にシステム設定が変わっても急激な切り替わりを避けてください。
OSのモーション軽減設定を有効にし、プレイヤーが引き続きターゲットの位置を把握し、ヒットを認識し、状態の切り替わりを理解できるか確認します。CSS、スクリプト、canvasの演出をまとめてテストします。MDNはこのメディア機能と、設定が有効な場合に代替スタイルを指定する方法を説明しています。
ブラウザゲームでのモーションの削減についての質問
モーションを減らすと、ゲーム内のすべての動きを停止する必要がありますか?
いいえ、プレイしたり状態を伝えたりするには、ある程度の動きが不可欠です。不要なエフェクトを削減または置き換えて、タイミング、場所、フィードバックを理解するための明確な方法を維持します。
ページはどのように設定を検出するのでしょうか?
CSS は、prefers-reduced-motion メディア機能を使用できます。スクリプトまたはキャンバスの効果には、視覚的なプレゼンテーションの一貫性を保つために、同等の環境設定パスが必要です。
関連情報
古い情報を見つけましたか？ 訂正を連絡