technical-constraints

技術的な制約

アニメーションの意図を保ちながら、プラットフォームの制約に対応します。

問題の兆候

• 対象のブラウザーでアニメーションが動作しない
• モバイルデバイスでアニメーションを処理できない
• フレームワークの制約により実装できない
• ファイルサイズの制約（Lottie、スプライト）
• メール／制約のある環境での要件

原則に基づく診断

ストレート・アヘッドとポーズ・トゥ・ポーズ

問題：実行時の計算コストが高すぎます
対策：アニメーションを事前に計算します。JavaScript によるフレームごとの処理（ストレート・アヘッド）より、CSS キーフレーム（ポーズ・トゥ・ポーズ）を使用します。

ソリッドドローイング

問題：複雑な形状がレンダリングの問題を引き起こします
対策：形状を簡素化します。SVG パスより CSS の図形を使用します。3D ではポリゴン数を減らします。

タイミング

問題：デバイス間でタイミングを統一できません
対策：相対単位を使用します。対象の中で最も遅いデバイスでテストします。JavaScript では requestAnimationFrame の使用を検討します。

副次的なアクション

問題：予算の都合で不可欠なアニメーションしか実装できません
対策：主要なアクションを優先します。制約がある場合は、まず副次的なアニメーションを削ります。

ステージング

問題：画面の表示領域が限られています
対策：その場でアニメーションさせます。レイアウトに影響しないトランスフォームを使用します。制約のあるプラットフォームでは、デフォルトで視差効果を減らす設定を検討します。

すぐにできる対策

1. JavaScript より CSS を使用する - ブラウザーによる最適化の効果が高まります
2. プログレッシブエンハンスメント - アニメーションがなくても基本機能が動作するようにします
3. 機能検出 - アニメーションを実行する前に、対応状況を確認します
4. フォールバック状態 - 非対応のブラウザー向けに静的な代替表示を用意します
5. アニメーションライブラリを遅延読み込みする - 初期レンダリングを妨げないようにします

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

• 対象のブラウザー／デバイスを一覧にする
• caniuse.com で機能の対応状況を確認する
• サポート対象の中で最も古いブラウザーでテストする
• アニメーションがバンドルサイズに与える影響を測定する
• フォールバック時の操作性に問題がないことを確認する
• アニメーションを無効にしてテストする
• フレームワークのアニメーション機能を確認する
• サーバーでレンダリングする代替手段（GIF、動画）を検討する

コードパターン

// Feature detection
const supportsAnimation =
  'animate' in Element.prototype &&
  CSS.supports('transform', 'translateZ(0)');

if (supportsAnimation) {
  element.animate(keyframes, options);
} else {
  element.classList.add('final-state');
}

// Progressive enhancement
@supports (animation: name) {
  .element {
    animation: fadeIn 200ms ease-out;
  }
}

プラットフォーム別のヒント

• メール：GIF または静止画像を使用します
• iOS Safari：-webkit- プレフィックスをテストします
• 古い Android：アニメーションを簡素化します
• ローエンドデバイス：prefers-reduced-motion を代理指標として使用します