LottieアニメーションをWebに組み込む方法【2026年版】

この記事の対象: Lottieアニメーションの導入を検討中のデザイナー・エンジニア
読了時間: 約5分

Webサイトにリッチなアニメーションを追加したいが、GIFは重いし、CSSアニメーションでは表現に限界がある——そんなときの解決策がLottieです。

LottieはAfter Effectsで作成したアニメーションを軽量なJSON形式に変換し、Webやモバイルアプリに組み込める技術です。この記事では、Lottieの作り方からWebへの組み込みまでを解説します。

Lottieとは

Lottieは、Airbnbが開発したアニメーション技術で、After Effects → JSON → Web/アプリのワークフローでアニメーションを配信します。

内部的にはSVGまたはCanvasでレンダリングされるため、解像度に依存せず、どの画面サイズでも美しく表示されます。

Lottieを使うメリット

軽量: GIFの1/10〜1/100のファイルサイズ
拡大縮小OK: ベクターベースで解像度に依存しない
インタラクション対応: スクロール連動やホバーでの再生制御が可能
クロスプラットフォーム: Web、iOS、Android、React Nativeで同じアニメーションを使用可能

Lottieファイルの作り方

After Effects + Bodymovin

After Effectsでアニメーションを作成
Bodymovinプラグインをインストール
JSONファイルとしてエクスポート

注意: After Effectsのすべての機能がBodymovinに対応しているわけではありません。対応状況はLottieFilesのドキュメントで確認してください。

LottieLabで直接作成

ブラウザベースのLottieアニメーション作成ツール。After Effectsを持っていなくても、Web上で直接Lottieアニメーションを作成できます。

LottieFilesから素材を使う

LottieFilesは無料・有料のLottieアニメーション素材ライブラリです。ローディング、アイコン、イラストなど豊富な素材が揃っており、そのまま使用できます。

Webへの組み込み方法

lottie-player（Web Component）

最もシンプルな方法。HTMLタグとして配置するだけでアニメーションが再生されます。

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player
  src="/animations/loading.json"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px;"
  loop
  autoplay>
</lottie-player>

属性オプション:
– loop: ループ再生
– autoplay: 自動再生
– hover: ホバー時に再生
– speed: 再生速度（1が等速）
– direction: 再生方向（1: 正方向, -1: 逆方向）

lottie-web（JavaScript）

より細かな制御が必要な場合はlottie-webを使用します。

import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg', // 'svg' or 'canvas'
  loop: true,
  autoplay: false,
  path: '/animations/scroll-icon.json',
});

// スクロール連動で再生
window.addEventListener('scroll', () => {
  const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  const frame = scrollPercent * animation.totalFrames;
  animation.goToAndStop(frame, true);
});

React用ライブラリ

import Lottie from 'lottie-react';
import animationData from './animations/success.json';

function SuccessAnimation() {
  return (
    <Lottie
      animationData={animationData}
      loop={false}
      style={{ width: 200, height: 200 }}
    />
  );
}

パフォーマンスの注意点

ファイルサイズ: 複雑なアニメーションはJSONが数百KBになることがある。gzip圧縮で軽減
dotLottie形式: .lottie形式（圧縮版）を使うとJSONの60〜90%軽量化
遅延読み込み: 画面外のアニメーションはIntersection Observerで遅延再生
SVG vs Canvas: SVGはDOM操作が重いが品質が高い。大量のアニメーションにはCanvasレンダラーを検討

まとめ

LottieアニメーションのWebへの組み込みポイントをまとめます。

After Effects→JSON→Webのワークフローでリッチなアニメーションを軽量に配信
lottie-player（HTMLタグ）が最もシンプルな導入方法
lottie-web（JS）でスクロール連動やインタラクティブ制御が可能
LottieFilesで無料素材も豊富に入手可能
dotLottie形式で更なる軽量化が可能