motion-sickness

動揺病の予防

Disney の原則を用いて、前庭系を刺激する要因を安全に取り除きます。

問題の兆候

• ユーザーからめまいや吐き気の報告がある
• ナビゲーション中に方向感覚を失う
• ユーザーが特定の機能を避ける
• 画面が大きいほど苦情が増える
• 視差効果やズーム効果で問題が起きる

危険なパターン

以下は前庭反応を引き起こします。

• 大規模なズームアニメーション
• 視差スクロール（特に複数レイヤー）
• 全画面回転
• 急激な方向転換
• 背景の連続的な動きやループする動き
• スクロールジャッキング

原則ごとの診断

誇張

問題：動きが大げさすぎます
修正：変形の規模を小さくします。サイズの変化は最大 10～20％にします。全画面ズームは避けます。

弧を描く動き

問題：曲線的な動きは追跡時の負担になります
修正：機能的な UI では直線的な動きを使います。弧を描く動きは、小さく任意の要素にのみ使用します。

後追いの動き

問題：行き過ぎる動きがむち打ちのような効果を生みます
修正：ナビゲーションからバウンスや行き過ぎる動きを取り除きます。臨界減衰のスプリングまたはイーズアウトを使います。

二次的な動き

問題：複数の要素が動くと混乱を招きます
修正：主要な動きは 1 つに制限します。視差レイヤーを取り除きます。

ゆっくり始まり、ゆっくり終わる動き

問題：加速のパターンが方向感覚を失わせます
修正：一貫性があり、予測可能なイージングを使います。急激な速度変化は避けます。

すぐにできる修正

1. prefers-reduced-motion を尊重する - 必須です
2. 視差効果を取り除く - よくある誘因です
3. ズーム遷移を避ける - 代わりにフェードを使います
4. 動きを小さく保つ - 移動距離は 100px 未満にします
5. スクロールジャッキングをしない - スクロールはそのままスクロールさせます

トラブルシューティングのチェックリスト

• アニメーションは prefers-reduced-motion を尊重していますか？
• 100px を超えて動く要素はありますか？
• ズーム効果はありますか？
• 視差効果はありますか？取り除きましょう。
• 連続するアニメーションやループするアニメーションはありますか？
• ユーザーは動きを一時停止または無効化できますか？
• 大型ディスプレイでテストしてください（動きが増幅されます）
• 5 分以上連続してテストしてください

安全な代替手段

誘因となる動き	安全な代替手段
ズーム遷移	フェード＋わずかな拡大縮小（最大 5％）
視差スクロール	静止表示または単一レイヤー
回転	フェードまたはスライド
バウンス／スプリング	イーズアウト（行き過ぎなし）
ページ全体のスライド	クロスフェード

コードパターン

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .parallax {
    transform: none !important;
  }
}

/* Safe default motion */
.safe-transition {
  transition: opacity 200ms ease-out;
  /* Avoid: transform with large values */
}