アニメーションとCore Web Vitalsの関係：LCP・CLSに悪影響を与えない実装方法

LCPに配慮したアニメーションの設計

遅延アニメーションはLCPの妨げになる

LCPは「ページの主要コンテンツが視認されるまでの時間」を示す指標です。例えばヒーロー画像や見出しテキストなどをフェードインで後から表示させると、LCPの測定タイミングが遅れ、スコアが悪化する可能性があります。

NG例：CSSのアニメーションでLCP対象要素を遅らせる

.hero-image {
  opacity: 0;
  animation: fadein 1s ease-in 0.5s forwards;
}

改善例：アニメーションなしで即表示、スクロール後に動かす

.hero-image {
  opacity: 1;
}

// Intersection Observerでスクロール後にアニメーションを適用
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    entry.target.classList.add('animate');
  }
});
observer.observe(document.querySelector('.hero-image'));

CLSを引き起こさないアニメーション手法

レイアウトを変更するアニメーションは避ける

CLSは「表示中のレイアウトが意図せずズレる量」を示します。特に、heightやmargin、paddingの変更をアニメーションで行うと、予期せぬレイアウトシフトが発生します。

NG例：高さを後からアニメーションで付ける

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion-content.open {
  height: auto;
}

※height: autoはトランジションできないため、シフトが発生しやすくなります。

改善例：あらかじめ最大の高さを予約

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-content.open {
  max-height: 500px; /* 予測される最大の高さを設定 */
}

パフォーマンスに優しいアニメーションの原則

TransformとOpacityを使う

GPUによる最適化が効くtransformやopacityを用いたアニメーションは、LCPやCLSに与える影響が少ないとされています。

推奨例：スライドとフェードを組み合わせたアニメーション

.card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

Intersection Observerと組み合わせて、初期描画に影響を与えず、スクロール後にスムーズにアニメーションを適用できます。

まとめ：Core Web Vitalsに優しいアニメーションとは？

アニメーションを取り入れる際は、以下のポイントを意識することで、LCPやCLSといった指標に悪影響を与えずに、快適なユーザー体験を提供できます。

• ファーストビューの主要要素はアニメーションさせず即表示
• transformとopacityを使い、レイアウトを変えない
• heightやmarginの変更は避け、max-heightで制御
• Intersection Observerを使い、表示後にアニメーションを適用

視覚的な魅力と高速な表示を両立させるためには、「いつ」「どこで」アニメーションを使うかが鍵です。