スマホで重くならないアニメーション設計のポイント

ハードウェアアクセラレーションを活用する

モバイル端末では、CPUよりもGPUのほうがアニメーション処理に適しています。以下のプロパティを使うことで、GPUによる高速描画が期待できます。

/* transformとopacityはGPU処理される */
.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(0);
  opacity: 1;
}

避けるべきプロパティの例：

/* layoutやpaintが発生しやすく、パフォーマンスに影響 */
.element {
  transition: top 0.3s ease, left 0.3s ease;
}

Point：

transform / opacity を中心にアニメーションを設計しましょう。

requestAnimationFrameを使ったスムーズな制御

JavaScriptでアニメーションを制御する場合は、setInterval や setTimeout よりも requestAnimationFrame を使用することで、ブラウザの再描画タイミングに合わせた滑らかなアニメーションが実現できます。

let start = null;
function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  element.style.transform = `translateX(${Math.min(progress / 5, 100)}px)`;
  if (progress < 500) {
    window.requestAnimationFrame(step);
  }
}
window.requestAnimationFrame(step);

アニメーション対象のDOM数を減らす

モバイルでは多くのDOM要素を一度にアニメーションさせると処理が重くなります。たとえば以下のような非効率なコードは避けましょう。

// ✗ 悪い例：100個の要素に対して個別にアニメーション
document.querySelectorAll('.box').forEach(box => {
  box.classList.add('animate');
});

→ 改善案：親要素にアニメーションクラスを付与し、子要素はCSSで制御。

.parent.animate .box {
  animation: fadeIn 0.3s ease-in forwards;
}

// ○ 良い例：クラス付与は1回だけ
document.querySelector('.parent').classList.add('animate');

Intersection Observerで遅延アニメーション

スクロールアニメーションをすべて初期化時に実行すると、負荷がかかります。代わりに、Intersection Observer を使って、表示された要素だけにアニメーションを適用します。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('in-view');
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}
.in-view {
  opacity: 1;
  transform: translateY(0);
}

アニメーションの頻度・時間を最適化する

• モーダルやドロワーなど、ユーザーの操作に直接影響する要素は「短く・素早く」アニメーション
• 装飾的なアニメーション（背景アニメやローディングなど）は「軽く・簡潔に」

例えば：

/* ✗ 長すぎるとストレスの原因に */
.modal {
  transition: transform 1s ease;
}

/* ○ 推奨：200〜300ms程度 */
.modal {
  transition: transform 0.25s ease;
}

まとめ：スマホで快適なアニメーションを作るには？

スマホでのアニメーションは「軽く、シンプルに」が鉄則です。以下のポイントを押さえて設計しましょう。

• transform / opacity を使ったGPUアニメーションを基本とする
• requestAnimationFrame や Intersection Observer を活用する
• アニメーション対象のDOM数を最小限に
• 頻度と持続時間を見直して、UXに優しい表現を意識する

無理に動きを加えるよりも、目的に合わせて「必要な動きだけ」に絞ることが、快適なモバイル体験への近道です。