「動きを抑える」を作り込む：演出を減らしても伝わる設計

先に決めること：減らすのは「動き」であって「情報」ではありません

「動きを抑える」は、多くのOSやブラウザに用意されている設定です。画面の揺れ、大きな拡大縮小、視差スクロール、激しい点滅などが、気分の悪さや集中の妨げにつながる人のための設定です。ゲーム側はこの設定を読み取り、演出を切り替えられます。

ここで基準を一つ決めます。「演出を全部消す」のではなく、「動きが担っていた役割を残す」ことです。役割は大きく3種類に分けられます。

• 知らせる役割：ミス、得点、残り時間の変化など、状態の変化を伝えます。
• 導く役割：次に見る場所や押す場所を示します。
• 飾る役割：雰囲気を出すだけで、なくても遊びに支障がありません。

飾る役割の演出は、設定が有効なら思い切って減らせます。知らせる役割と導く役割は、動き以外の手段で必ず残します。この仕分けが、以降の手順の土台です。

アソバースの公式作品13本とサイト本体も「動きを抑える」設定に対応しています。ただし、作品ごとに何がどう変わるかは、この記事では述べません。手順4で、自分の目で比べる方法を示します。

手順1：演出を棚卸しして、役割で仕分ける

まず、自分のゲームにある動く表現をすべて書き出します。コードを開いてアニメーション、トランジション、タイマーで動かしている処理を検索すると、拾いやすくなります。見つけたものを次の表の形で整理します。

• ミス時の画面揺れ、役割：知らせる、設定が有効なときの方針：揺れをやめ、枠線の形・文字で伝える
• 得点の飛び散るパーティクル、役割：飾る、設定が有効なときの方針：数を大きく減らすか、なくす
• 背景の視差スクロール、役割：飾る、設定が有効なときの方針：静止させる
• 次に押すボタンの点滅、役割：導く、設定が有効なときの方針：点滅をやめ、太い枠や印で示す
• 残り時間のゲージの伸縮、役割：知らせる、設定が有効なときの方針：動きは緩めても、数値や長さは残す

書き出すときのコツは、1行ごとに「この演出がなくなったら、プレイヤーは何がわからなくなるか」を一文で書くことです。答えが「特にない」なら飾る役割です。「失敗したことがわからない」なら知らせる役割で、代わりの手段が必要になります。

ここで書き出した表が、手順3で用意する代替手段の一覧になります。

手順2：設定を読み取り、切り替えの入口を一つにする

次に、設定を読み取る仕組みを作ります。ポイントは3つです。

1. ブラウザの prefers-reduced-motion を読み、初期値にします。
2. ゲーム内にも切り替えスイッチを置き、利用者が上書きできるようにします。
3. 演出を出すかどうかの判断を、1つの変数（下のコードでは calm）に集約します。

判断が複数の場所に散らばると、片方だけ直し忘れる事故が起きます。入口を一つにしておけば、後から演出を足しても、確認する場所が増えません。

次のファイルをHTMLとして保存し、ブラウザで開いてください。外部ライブラリは使っていません。

<!doctype html>
<meta charset="utf-8">
<style>
#stage{width:240px;height:100px;border:6px solid #888;
 display:grid;place-items:center;font:20px sans-serif}
#stage.miss{border-color:#c00;border-style:dashed}
#stage.shake{animation:shake .3s}
@keyframes shake{25%{translate:-8px 0}75%{translate:8px 0}}
</style>
<div id="stage">待機中</div>
<button id="hit">ミスする</button>
<label><input type="checkbox" id="calm">動きを抑える</label>
<script>
const stage = document.getElementById('stage');
const calm = document.getElementById('calm');
const mq = matchMedia('(prefers-reduced-motion: reduce)');
let life = 3;
calm.checked = mq.matches;
mq.addEventListener('change', e => calm.checked = e.matches);
function miss(){
  life = Math.max(0, life - 1);
  stage.textContent = 'ミス 残り' + life;
  stage.classList.add('miss');
  if (!calm.checked){
    stage.classList.remove('shake');
    void stage.offsetWidth;
    stage.classList.add('shake');
  }
}
document.getElementById('hit').onclick = miss;
</script>

このコードの要点を確認します。calm.checked が判断の入口です。ミスの処理では、文字の更新と枠線の変化は常に実行し、揺れだけを calm が偽のときに足しています。「情報は常に出し、動きだけを条件にする」という書き方が、この記事の核になる形です。

void stage.offsetWidth; の1行は、同じアニメーションを連続で再生し直すための定番の書き方です。これがないと、2回目以降のミスで揺れが再生されないことがあります。

設定の保存についても触れておきます。アソバースにアップロードした作品内の localStorage や sessionStorage は、一時メモリーとして働く互換処理です。ページを閉じても残る保存だとは考えないでください。このコードのように、毎回OSの設定を読んで初期値にする作りなら、保存に頼らずに済みます。ゲーム内のスイッチの値を次回以降も引き継ぎたい場合は、クラウドセーブ（ログイン中に使える機能です）の扱いを、現在の案内で確認してください。

手順3：演出ごとに代わりの伝え方を用意する

棚卸しの表を見ながら、「知らせる」「導く」役割の演出に代替手段を割り当てます。割り当ての基本は、一つの情報を複数の経路で伝えることです。

知らせる演出の置き換え

手順2のコードでは、ミスを次の3つで伝えています。

• 文字：「ミス 残り2」と、結果を言葉と数で示します。
• 枠線の色：灰色から赤に変えます。
• 枠線の形：実線から破線に変えます。

色だけに頼らないのが重要です。色の見分けが難しい人や、画面が明るい場所で遊ぶ人にも、形と文字が届きます。動きを抑えたい人と色の見分けが難しい人は、別の条件ですが、同じ作りで両方に配慮できます。

導く演出の置き換え

「次に押すボタンが点滅する」演出は、点滅をやめて、太い枠線、矢印の印、「次はここ」という短い文字に置き換えます。点滅は、設定の有無にかかわらず、1秒間に3回を超える強い明滅を避けるのが一般的な指針です。設定が有効なときは、点滅そのものを使わない方針が安全です。

飾る演出の置き換え

パーティクルや視差スクロールは、設定が有効なら止めるか、数を減らします。「少し減らす」より「止める」ほうが、確認が簡単です。減らす量の基準を決めにくいからです。

残してよい動きの考え方

動きを全部消す必要があるとは限りません。短いフェードのように、移動や拡大を伴わない変化は残す、という判断もあります。ただし、どこまで残すかは対象の人によって感じ方が違います。迷うときは、ゲーム内のスイッチを「演出を最小にする」意味にそろえておき、利用者が選べる形にするのが無難です。

手順4：設定を切り替えて確かめる

実装したら、次の手順で確かめます。結果は、自分の環境で見て判断してください。

1. 手順2のファイルを開き、OSの「動きを抑える」設定を切り替えます。設定の場所はOSごとに異なります（Windowsでは「アニメーション効果」、macOSでは「視差効果を減らす」、iOSでは「動作を減らす」などが該当します）。
2. ページを再読み込みして、チェックボックスの初期値が設定に追従するか見ます。ブラウザによっては、再読み込みなしで追従することもあります。
3. 設定が無効の状態で「ミスする」を押し、揺れと、枠線・文字の変化が両方出るか見ます。
4. 設定が有効の状態で同じ操作をし、揺れが出ないこと、枠線・文字の変化は同じように出ることを見ます。
5. 画面を見ずに（または音を消して）「いま何が起きたか」を説明できるか、自分に問います。説明できなければ、伝える手段が足りません。

自分のゲームでは、次の観点を足してください。

• 全場面の通し確認：棚卸しの表の行ごとに、設定が有効な状態でその場面を起こし、情報が欠けていないか見ます。
• ゲーム内スイッチとOS設定の関係：OSで有効にしてからゲーム内で無効に戻せるか、逆も動くかを見ます。
• アソバース上での確認：作品をアップロードしたあと、実際の再生画面でも手順2〜4を繰り返します。ゲームはsandbox付きのiframeで実行されるため、設定の読み取りがローカルと同じに動くかは、実際に確かめるのが確実です。

起こりやすい誤り

• 演出を消すだけで情報も消える：揺れを消した結果、ミスに気づけなくなります。手順1の「なくなったら何がわからなくなるか」の問いで防げます。
• 判断が散らばる：揺れ、パーティクル、背景で別々に設定を読むと、一部だけ演出が残ります。変数は一つにします。
• 設定の変更が反映されない：起動時に一度しか読まないと、遊んでいる途中の切り替えに追従しません。コードの change イベントの購読が、その対策です。
• 動きの代わりに音だけに頼る：音を出せない環境や、音を消している人には届きません。文字と形を主、音を従にします。
• ゲームの難しさが変わる：動きの手がかりに頼る場面（タイミングを合わせるなど）は、演出を消すと難しくなることがあります。針の位置や時間の残りなど、判断に必要な情報は、動かない形でも読み取れるようにします。

アソバースの公式作品で試すなら、たとえば風船にぶつかる場面のある「紙ひこうき郵便」や、針が緑の範囲に来たら止める「時計じかけの台所」のように、タイミングや失敗を伝える場面がある作品が比べやすいでしょう。サイトの「動きを抑える」設定を切り替えて同じ場面を遊び、何が変わり、何が変わらないかを書き留めてみてください。その差が、自作の仕分けの参考になります。

次の行動

まず自分のゲームで、演出を5つ書き出し、それぞれを「知らせる・導く・飾る」に分けてください。次に、「知らせる」演出が1つでも動きだけに頼っていないか、設定を有効にして確かめます。足りなければ、手順2のコードの形で、文字と枠線の変化を先に足してください。

参考資料

• MDN Web Docs「prefers-reduced-motion」
• W3C「Web Content Accessibility Guidelines (WCAG) 2.1」の達成基準 2.3.1（3回のせん光、または閾値以下）と 2.3.3（インタラクションによるアニメーション）