UIモーションのアクセシビリティ設計｜停止、代替、動作削減の実装ガイド

アニメーションは、操作の結果や画面の変化を伝える助けになります。
一方で、大きな移動、点滅、止められない自動再生は、めまい、注意散漫、発作リスク、情報の見落としにつながります。

モーションアクセシビリティとは、動きを見られない人や減らしたい人にも、同じ情報と操作手段を届ける設計です。
判断の軸は「何を伝える動きか」「止められるか」「動きがなくても伝わるか」の三つです。

最初に押さえる四つの判断

• 目的：動きが状態変化、位置関係、進捗のどれを伝えるのかを決めます。
• 負荷：大きな移動、ズーム、視差、点滅、反復を必要最小限にします。
• 制御：自動で続く動きには、一時停止、停止、非表示などの手段を用意します。
• 代替：色、形、テキスト、フォーカス、読み上げ通知を組み合わせ、動きだけに意味を担わせません。

動きの目的を一文で説明できない場合は、削除しても操作や理解に影響しない可能性があります。
装飾として残すなら、利用者が減らせる状態を先に設計します。

WCAG 2.2で関係する基準

WCAG 2.2の基本を確認したうえで、モーションに直接関係する達成基準を分けて考えます。

点滅は「1秒間に3回以下なら常に安全」という意味ではありません。
レベルAの2.3.1には閃光の明るさや面積に関する閾値があり、判断が難しい場合は点滅そのものを避けるほうが確実です。

達成基準2.3.3の対象と実装は、「2.3.3 インタラクションによるアニメーション」の解説でも確認できます。

目的から動きと代替手段を決める

先にアニメーションの秒数やイージングを決めると、装飾が目的になりやすくなります。
画面が伝えるべき変化を特定し、動き、静的な手掛かり、操作方法を対応させます。

時間や移動距離に、すべてのUIへ適用できる万能な数値はありません。
画面サイズ、要素の大きさ、操作頻度、利用環境を踏まえ、短く予測しやすい初期値から実機で調整します。

体調と注意への負荷を減らす

大きな移動とズーム

画面の広い範囲が移動するパン、ズーム、視差表現は、前庭機能に関係する不快感のきっかけになることがあります。
位置関係を伝える必要があるときは、移動距離を短くし、フェードや静的な表示と組み合わせます。

点滅と反復

警告や注目を点滅だけで伝える設計は避けます。
アイコン、見出し、説明文を併用すれば、動きを止めても意味が残ります。
常に揺れるボタンや脈動する背景も注意を奪い続けるため、反復を止める条件を決めます。

音と振動

音や振動を組み合わせる場合も、一つの感覚だけを情報の受け取り口にしません。
ミュート、停止、強度の調整と、画面上のテキストを用意します。

prefers-reduced-motionを実装する

prefers-reduced-motionは、利用者が端末で動きを減らす設定を有効にしているかをCSSで受け取るためのメディア特性です。
この設定を検出したら、不要な移動や拡大縮小を止め、必要な状態変化は即時表示や穏やかな代替表現に置き換えます。

.dialog-panel {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.dialog-panel.is-entering {
  opacity: 0;
  transform: translateY(0.75rem);
}

@media (prefers-reduced-motion: reduce) {
  .dialog-panel {
    transform: none;
    transition: none;
  }

  .decorative-loop {
    animation: none;
  }
}

この180ミリ秒は実装例であり、推奨値を一律に示すものではありません。
通常表示と動作削減表示の両方で、内容が欠けず、操作結果が分かることを確認します。

すべての要素へ一括してanimation: noneを指定すると、進捗や状態変化まで見えなくなる場合があります。
止める対象と残す情報をコンポーネントごとに決めるほうが安全です。

場面別の設計ポイント

カルーセルとニュースティッカー

• 自動で動かす必要があるかを最初に見直します。
• 一時停止、再開、前へ、次への操作を分かりやすい名称で用意します。
• 現在の項目と総数をテキストでも示します。
• 停止後に勝手に再開しないよう、利用者の選択を保ちます。

モーダルとオーバーレイ

• 登場時の拡大や奥行き表現を抑えます。
• 開いた直後のフォーカス位置、Tabキーの移動範囲、Escキーで閉じる動作、閉じた後のフォーカス復帰を確認します。
• 背景の暗転だけで前面の状態を伝えず、見出しと適切なHTML構造を用意します。

フォーカス設計の詳しい確認方法は、キーボード操作とフォーカス表示の実務ガイドを参照してください。

トースト通知とエラー

• 成功、注意、エラーを色だけで区別せず、短い文とアイコンを添えます。
• 必要な通知はrole='status'やライブリージョンの利用を検討し、読み上げが重複しないかを実機で確認します。
• エラーには、起きたことだけでなく次に取れる操作を書きます。
• 自動で消える通知は、読む前に消えないか、履歴や再表示手段が必要かを確認します。

ドラッグ操作と並べ替え

ドラッグだけに依存せず、「上へ移動」「下へ移動」などのボタンでも並べ替えられるようにします。
移動後は、新しい位置をテキストや読み上げで伝えます。

グラフと学習コンテンツ

描画アニメーションを見なくても値と関係を理解できるよう、見出し、凡例、データラベル、要約を残します。
チュートリアルでは、動かす対象を現在の手順に絞り、字幕や文章による手順も用意します。

短時間で行う実機テスト

1. 通常設定で確認する：各モーションの目的を説明できるか、操作を待たせていないかを確認します。
2. 端末の「動きを減らす」を有効にする：主要画面を巡回し、情報や操作が欠けていないかを確認します。
3. キーボードだけで操作する：モーダル、カルーセル、通知、並べ替えを最後まで操作します。
4. 読み上げを確認する：状態変化が伝わるか、同じ通知を重複して読まないかを確認します。
5. 停止状態を保つ：自動再生を止めた後、別の操作や画面更新で意図せず再開しないかを確認します。

短時間の確認は見落としを減らす入口です。
公開後も変更のたびに試験対象へ戻せるよう、確認項目と担当を決めておきます。
継続的な確認の組み立て方は、Webアクセシビリティを継続改善する運用ガイドでも解説しています。

レビュー用チェックリスト

• □ 動きの目的を一文で説明できる
• □ 大きな移動、ズーム、視差、点滅、反復を見直した
• □ 自動で続く動きを一時停止、停止、非表示にできる
• □ prefers-reduced-motion: reduceで不要な動きを減らした
• □ 動きを止めても、状態と操作結果がテキストや形で伝わる
• □ キーボードで同じ操作を完了できる
• □ フォーカスの表示、移動、復帰を確認した
• □ 通知の読み上げが欠落または重複していない
• □ モバイル端末と拡大表示でも負荷や表示崩れがない
• □ コンポーネント変更後に再試験する運用がある

動きを減らしても情報は減らさない

アクセシブルなモーション設計は、アニメーションをすべて禁止することではありません。
目的のある動きだけを残し、停止手段と静的な代替を用意することで、動きを好む人にも減らしたい人にも操作結果を伝えられます。

設計、実装、実機テストを分けずに扱うことが、見た目だけでは発見しにくい問題を減らします。

この記事に関連する株式会社greedenの取り組み

動きを減らしても情報を欠かさない設計には、実装前の整理と継続的な確認が要ります。株式会社greedenは、Webアクセシビリティ支援を通じ、迷いにくく操作しやすいWebサイトづくりを後押しします。