responsive-adaptive

レスポンシブで適応性のあるタイミング

レスポンシブなタイミングでは、デバイスの性能、移動距離、ユーザーの好み、インタラクションの種類といったコンテキストに応じて、時間を調整します。どの状況にも合う単一の時間設定はありません。

適応性のあるモーションのためのディズニーの原則

コンテキストに応じた適用

スカッシュとストレッチ：デバイスに応じて拡大縮小します。モバイルでは、変形に使える画面領域が少ないため、控えめにします。

予備動作：タッチデバイスでは短くします。タッチ操作のユーザーは、マウス操作のユーザーより素早い反応を期待します。

演出：ビューポートに合わせて調整します。画面が小さい場合は、演出に集中させ、同時に動く要素を減らします。

ストレート・アヘッドとポーズ・トゥ・ポーズ：同じ手法を使い、時間を調整します。ポーズはそのままに、タイミングを調整します。

後追いとオーバーラップ：移動距離に比例させます。移動距離が長いほど、後追いにかける時間を長くします。

スローインとスローアウト：イージングの強さを調整します。アニメーションが速いほど、イージングを鋭くします。

弧：軌跡は同じで、速度を変えます。弧の形はそのままに、軌跡をたどる時間を変えます。

二次アクション：モバイルでは減らします。パフォーマンスを維持するため、同時に動くアニメーションを減らします。

タイミング：適応させる変数です。タイミングを変え、原則は維持します。

誇張：画面が小さいほど抑えます。ビューポートや要素のサイズに比例させます。

立体感のある描画：パフォーマンスを考慮します。性能の低いデバイスでは、3D トランスフォームを減らします。

魅力：コンテキストに合わせます。デスクトップでちょうどよく感じるものでも、モバイルでは遅く感じることがあります。

適応戦略

距離に基づく時間設定

/* Base duration for reference distance */
--base-duration: 300ms;
--base-distance: 100px;

/* Duration scales with distance */
/* 50px travel = 200ms, 200px travel = 450ms */

function getDuration(distance) {
  const baseDuration = 300;
  const baseDistance = 100;
  return Math.min(600, baseDuration * Math.sqrt(distance / baseDistance));
}

デバイスに基づく時間設定

/* Desktop - full duration */
.transition { transition-duration: 400ms; }

/* Tablet - slightly faster */
@media (max-width: 1024px) {
  .transition { transition-duration: 350ms; }
}

/* Mobile - faster for perceived responsiveness */
@media (max-width: 768px) {
  .transition { transition-duration: 250ms; }
}

ユーザーの好みに基づく時間設定

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Reduce motion, don't eliminate */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 100ms;
    transform: none; /* Only opacity fades */
  }
}

コンテキストに応じたルール

コンテキスト	時間の調整
タッチデバイス	デスクトップより 25% 短くする
ビューポートが小さい	デスクトップより 20% 短くする
移動距離が長い	基準より 50% 長くする
移動距離が短い	基準より 30% 短くする
ユーザーが動きを減らす設定を選択	即時または最小限にする
低電力モード	50% 短くするか、無効にする
高頻度のアクション	最短の時間を使用する
初回表示	標準の時間を使用する
インタラクションの繰り返し	時間を短くする

実装パターン

:root {
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

@media (max-width: 768px) {
  :root {
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 100ms;
    --duration-slow: 150ms;
  }
}

重要なポイント

優れたアニメーションは、タイポグラフィと同じように適応します。あるサイズやコンテキストで機能するものが、別の条件でも機能するとは限りません。固定値ではなく、システムを構築しましょう。さまざまなコンテキストでテストしてください。時間は定数ではなく、変数です。