モーションとアニメーションのアクセシビリティ完全ガイド：酔い・注意散漫・発作リスクを避けて「心地よく伝わる動き」を設計する（WCAG 2.1 AA）
概要サマリー（先に要点）
- アニメーションは体験を豊かにしますが、使い方を誤ると 酔い（めまい）・注意散漫・不安・発作リスク につながり得ますの。
- 基本は ①必要な動きだけ ②短く弱く ③勝手に動かさない ④止められる ⑤
prefers-reduced-motionを尊重 の5原則。- とくに注意すべきは 点滅（フラッシュ）・大きな移動（パララックス）・自動再生動画・ループするスケルトン。
- この記事には、実務でそのまま使える 設計チェックリスト／CSSサンプル／UIパターン（スピナー・スケルトン・トースト・スクロール） をまとめています。
対象読者（具体）：UI/UXデザイナー、フロントエンドエンジニア、デザインシステム担当、動画/広告実装担当、プロダクトマネージャー、QA/テスター、編集者
アクセシビリティレベル：WCAG 2.1 AA 準拠を目標（関連：2.3.x 点滅、2.2.x タイミング、1.4.13 動きのトリガ、2.1.x キーボード、4.1.2 状態通知 など）
1. はじめに：動きは“演出”ではなく“情報”になってしまう
Webの動きは、つい「かっこよさ」や「今っぽさ」のために入れたくなりますよね。けれど利用者の中には、画面が大きく動くと めまい・吐き気・頭痛 を感じる方がいますし、認知特性のある方は動きで注意が奪われて 内容理解が途切れる こともあります。光の点滅が発作の引き金になる方もいらっしゃいますの。
つまり、モーションは“装飾”のつもりでも、利用者にとっては 避けられない刺激 になり得る、ということ。だからこそ、アクセシビリティの観点では「動かすかどうか」を慎重に判断し、動かすなら 弱く・短く・制御可能 にする必要があります。
本記事では、動きを使いながらも、誰にとっても安心できる設計へ落とし込む方法を、実務の言葉で丁寧にまとめますね。
2. まず押さえる“5原則”：動きをアクセシブルにする最短ルール
2.1 原則①：動きは「必要なときだけ」
動きが“意味”を持つのは、たとえば
- 開閉した（アコーディオン、メニュー）
- 追加された（カートに入った、項目が増えた）
- 状態が変わった（保存完了、エラー）
など、変化を伝えるとき。
逆に、本文の背景が常にゆらゆら動く、ヒーローが勝手にズームする…は、伝えるべき情報ではありませんの。
2.2 原則②：短く、弱く、滑らかに（でも“ぬるぬる”しすぎない）
- 目安：150〜250ms（UIの小さな遷移）
- 大きな移動は避け、フェードやサイズ変化を最小に
- ループは原則避ける（負担が積み上がります）
2.3 原則③：ユーザーの操作なしに動かさない
自動再生や自動スクロールは、認知負荷や不安を増やします。
やむを得ず動かすなら、停止ボタンや 閉じる を必ず用意しますの。
2.4 原則④：止められる／抑えられる（制御手段）
「停止」「一時停止」「閉じる」「モーションを減らす」など、ユーザーが主導権を持てる形が理想です。
2.5 原則⑤：prefers-reduced-motion を尊重する
OSで「動きを減らす」を設定している方に対して、動きを抑えた体験を提供します。
これは“親切”というより、現代のWebでは 最低限の礼儀 に近い感覚ですわ。
3. いちばん危険：点滅（フラッシュ）と発作リスク（WCAG 2.3）
3.1 点滅は「派手な演出」だけの問題ではない
- 警告を赤白でパカパカ点滅
- スケルトンUIが強く明滅
- バナーがフラッシュのように切り替わる
こうした実装は、意図せず閾値を超えることがあります。
3.2 安全側の設計
- 点滅表現を避け、静的な強調（枠、アイコン、太字）へ
- どうしても注意喚起が必要なら、点滅ではなく
- 「重要」ラベル
- アイコン＋テキスト
- 余白と見出し
で目立たせますの
4. パララックス（視差スクロール）・大きな移動は“酔い”の主犯
4.1 なぜパララックスが苦手な人がいるの？
背景と前景が別速度で動くと、視覚情報と体の感覚がズレて、酔いに近い状態になることがあります。
とくに、画面いっぱいに動く演出ほど影響が大きいですの。
4.2 代替案：動かさなくても“奥行き”は作れる
- 影（シャドウ）
- 境界線・余白
- 静的なイラスト
- タイポグラフィの階層
こうした手段で、情報の強弱は十分に付けられます。
5. prefers-reduced-motion 実装：基本のCSSテンプレ
5.1 全体で「動きを弱める」基本形
/* 通常のアニメーション */
.fade-in { animation: fadeIn 200ms ease-out; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 動きを減らす設定の利用者には、アニメーションを止める/弱める */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
この“全体抑制”は強力ですが、重要な遷移まで潰す可能性があるため、プロダクトによっては「対象クラスのみ停止」の方が安全な場合もありますの。
5.2 実務でおすすめ：危険な動きだけ確実に止める
- パララックス
- 大きな移動（スライドインで画面全体が動く）
- ループするローディング演出
- 自動スクロール
これらを優先的に抑制すると、体験の破綻が少なく導入できます。
6. UIパターン別：アクセシブルな動きの設計レシピ
6.1 スピナー（読み込み中）
やりがち問題：スピナーだけで状況が分からない／動きが強い
対策：テキストを必ず併記し、動きを抑制
<div role="status" aria-live="polite">
<span class="spinner" aria-hidden="true"></span>
読み込み中です…
</div>
.spinner {
width: 20px; height: 20px;
border: 3px solid #ddd;
border-top-color: #555;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; }
}
6.2 スケルトンUI
やりがち問題：強い明滅・無限ループで疲れる
対策：コントラスト低め、動きはゆっくり、または静止
.skeleton {
background: #eee;
position: relative;
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.skeleton::after { animation: none; }
}
6.3 トースト通知（保存完了など）
やりがち問題：勝手に消える／読めない速度／フォーカスが奪われる
対策：成功はrole="status"で静かに、重要エラーはrole="alert"で確実に
- 成功通知：短く、割り込みすぎない
- エラー通知：消えない、またはユーザーが閉じられる
6.4 アコーディオン・メニューの開閉
やりがち問題：大きくスライドしすぎる／開閉が分からない
対策：高さ変化は最小、状態はテキストやアイコンでも示す
（ARIAは前回の記事の「Disclosure」を基本に）
6.5 自動切り替えカルーセル（スライダー）
結論：自動再生は避けるのが安全ですの。
どうしても使うなら、最低限：
- 停止ボタン（常に見える）
- キーボード操作（前へ/次へ/停止）
- 自動切替は遅め、フォーカス中は停止
prefers-reduced-motion: reduceで自動切替を停止
7. スクロール演出：scroll-behavior: smooth の扱い方
スムーススクロールは便利ですが、苦手な方もいます。
prefers-reduced-motion が reduce の場合は auto に戻すのが基本です。
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
また、クリックした瞬間に画面が大移動する場合は、移動先にフォーカスを当てる（tabindex="-1"を使うなど）ことで、キーボード利用者の位置喪失を防ぎますの。
8. コンテンツ制作（編集・広報）で起きやすい“動きの罠”
8.1 埋め込み（SNS・広告・動画）
外部埋め込みは、意図せず自動再生や点滅を含むことがあります。
- 重要ページ（手続き・申請・支払い）では埋め込みを控えめに
- 埋め込み領域に「停止」「ミュート」などのコントロールがあるか確認
- 代替として、テキスト要約やリンクを用意する
8.2 GIFアニメ
GIFは軽い気持ちで置けますが、ループし続ける刺激になります。
- 目的が「説明」なら、静止画＋手順文のほうが優しい
- どうしてもGIFなら、短く、点滅を避け、可能なら動画化して停止可能に
9. デザインシステムに落とし込む：モーション・トークンという考え方
前回の「デザインシステム」記事とつなぐなら、モーションもトークン化すると安定します。
--motion-fast: 150ms--motion-base: 200ms--motion-slow: 250ms--easing-standard: ease-out--easing-emphasis: cubic-bezier(...)
そして、ルールを文章で固定しますの。
- “画面全体が動く演出は禁止”
- “自動再生は禁止（例外は停止ボタン必須）”
- “reduce設定ではループ系を停止”
こうしておくと、担当者が変わっても事故が増えにくいです。
10. 5分スモークテスト：動きのアクセシビリティ最小チェック
- 重要操作に、勝手に動く要素（自動スクロール・自動再生）がない
- 点滅（強いフラッシュ）がない
- 大きなパララックスや画面全体の移動がない（またはreduceで止まる）
- ローディングはテキストで「読み込み中」が分かる
- スケルトンが明滅しすぎない／reduceで止まる
- カルーセルがあるなら停止でき、reduceで自動が止まる
- スムーススクロールはreduceで無効化される
- 重要通知は
status/alertで伝わり、すぐ消えない（または閉じられる）
11. 対象読者にとっての価値（具体）
- めまい・片頭痛・乗り物酔いのような症状が出る方：動きの抑制により、サイトを“体調を崩さず”利用しやすくなります。
- 認知特性のある方：注意が動きに奪われにくくなり、文章理解や手続き完了が安定します。
- スクリーンリーダー利用者：必要な通知が
status/alertで届き、状態変化を取りこぼしにくくなります。 - 高齢者・疲労時の利用者：刺激が減り、落ち着いて情報を追えます。
- 開発・運用チーム：ルールをトークン化・テンプレ化することで、更新のたびに“動き事故”が起きにくくなります。
12. アクセシビリティレベルの評価（本記事の到達点）
- WCAG 2.1 AA に直結する主要観点
- 2.3.x（点滅）：発作リスクを避ける
- 1.4.13（動きのトリガ）：ホバー/フォーカスで発生する動きを制御し、抑制できるように
- 2.2.x（タイミング）：自動で消える通知・自動切替の扱いに配慮
- 2.1.1（キーボード）：停止/閉じる操作がキーボードで可能
- 4.1.2（名前・役割・値）：状態通知（
status/alert）の適切化
prefers-reduced-motionへの対応はWCAGの単独要件としては書かれ方が異なる場合もありますが、実務上は AAを“実体験として守る”ための強力な手段として定着しています。
13. まとめ：動きは“やさしく制御できる情報”にする
- 動きは必要なときだけ。装飾目的の常時モーションは避ける。
- 短く、弱く、ユーザー操作に連動させる。
- 点滅は避け、注意喚起は静的な手段で。
- パララックスや大移動は酔いの原因。代替で奥行きを作る。
prefers-reduced-motionを尊重し、ループやスムーススクロールを抑制する。- スピナー・スケルトン・通知・カルーセルは、テンプレ化して事故を防ぐ。
動きは、使いどころを選べば、とても分かりやすい“手がかり”になります。
だからこそ、誰にとっても安心な範囲で、静かに、丁寧に。あなたのプロダクトの動きが、心地よく伝わるものになりますように。