Lottieアニメーションは「軽量」というイメージがあるが、作り方次第でJSONファイルが数MBに肥大化し、描画でCPUをフル使用するほど重くなることもある。この記事では実務で確認した最適化手法を具体的に解説する。
Lottieが重くなる主な原因
- ビットマップ素材のインライン化：PNG・JPEGがbase64でJSONに埋め込まれると1画像で数百KBになる
- 不要なキーフレーム：AEで自動生成された余分なキーフレームがデータ量を増やす
- 複雑なパス：パスポイントが多いシェイプは描画負荷が高い
- 多層のPrecomp：ネストが深いほどJSONが複雑になる
- Canvasレンダラーの非使用：SVGレンダラーは複雑なアニメで描画が遅い
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
ファイルサイズ削減：AEの書き出し前にやること
1. キーフレームの間引き
AEでエクスプレッションを「キーフレームに変換」すると大量のキーフレームが生成される。Bodymovin書き出し前にこれらを手動で削除するか、「Lazy」オプションを使う。
2. ビットマップ素材をシェイプに置き換える
ロゴ・アイコンなど単純なグラフィックはIllustratorでSVG化し、AEにシェイプとしてインポートする。
3. Precompの展開
Bodymovinの「Flatten precomps」オプションを有効にするか、書き出し前に手動でPrecompをアンリンクする。
書き出し後の最適化ツール
lottie-optimizerを使ったCLI最適化
# インストール
npm install -g lottie-optimizer
# 最適化実行
lottie-optimizer input.json output.min.json
# オプション
lottie-optimizer input.json output.json --precision 2 # 小数点以下2桁に丸め
lottie-optimizer input.json output.json --expressions # エクスプレッション保持LottieFiles オンラインオプティマイザー
lottiefiles.comのオンラインツールでJSONをアップロードして最適化できる。品質を調整しながら圧縮率を確認できる。
Pythonで独自最適化スクリプト
import json
import re
def optimize_lottie(input_path: str, output_path: str, precision: int = 3):
with open(input_path, "r", encoding="utf-8") as f:
data = json.load(f)
# 数値の精度を下げる（再帰的に処理）
def round_numbers(obj):
if isinstance(obj, float):
return round(obj, precision)
elif isinstance(obj, list):
return [round_numbers(x) for x in obj]
elif isinstance(obj, dict):
return {k: round_numbers(v) for k, v in obj.items()}
return obj
optimized = round_numbers(data)
with open(output_path, "w", encoding="utf-8") as f:
json.dump(optimized, f, separators=(",", ":"), ensure_ascii=False)
import os
orig_size = os.path.getsize(input_path) / 1024
opt_size = os.path.getsize(output_path) / 1024
print(f"元: {orig_size:.1f}KB → 最適化後: {opt_size:.1f}KB ({100*(1-opt_size/orig_size):.1f}%削減)")
optimize_lottie("animation.json", "animation.min.json", precision=2)描画パフォーマンスの改善
1. SVGからCanvasレンダラーに切り替える
// 複雑なアニメーションにはcanvasレンダラーが有効
lottie.loadAnimation({
container: document.getElementById("lottie"),
renderer: "canvas", // "svg"から変更
loop: true,
autoplay: true,
path: "/animation.json"
});Canvasレンダラーはブラウザのハードウェアアクセラレーションを活用するため、複雑なアニメーションで大幅に高速化できる。ただしSVGの DOM操作ができなくなるため、インタラクティブな操作が必要な場合はSVGのままが良い。
2. Intersection Observerで画面外のアニメを停止
const anim = lottie.loadAnimation({ ... });
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
anim.play();
} else {
anim.pause(); // 画面外では停止してCPUを節約
}
});
},
{ threshold: 0.1 }
);
observer.observe(document.getElementById("lottie"));3. requestAnimationFrameとの同期
// フレームレートを制限する（デフォルト60fps → 30fpsに）
const anim = lottie.loadAnimation({
...
rendererSettings: {
dpr: Math.min(window.devicePixelRatio, 2), // 高解像度デバイスでの負荷制限
progressiveLoad: true,
}
});
// 30fpsに制限
anim.setSpeed(0.5); // 0.5倍速 = 実質30fps相当の更新間隔Reactでのパフォーマンス最適化
import { memo, useMemo } from "react";
import Lottie from "lottie-react";
// memoでコンポーネントの不要な再レンダリングを防ぐ
const LottiePlayer = memo(function LottiePlayer({ src }: { src: string }) {
// useMemoでanimationDataをメモ化
const animationData = useMemo(() => {
return require(`../assets/${src}.json`);
}, [src]);
return (
<Lottie
animationData={animationData}
loop
autoplay
rendererSettings={{ preserveAspectRatio: "xMidYMid slice" }}
/>
);
});最適化前後のパフォーマンス計測
// Chrome DevToolsのPerformanceパネルで計測
// または簡易計測
const start = performance.now();
// アニメーション1秒分の描画
setTimeout(() => {
const duration = performance.now() - start;
console.log(`描画時間: ${duration}ms`);
// 16ms以内なら60fps維持
}, 1000);まとめ：最適化のチェックリスト
- ✅ ビットマップ素材をシェイプに置き換え済みか
- ✅ 書き出し後にlottie-optimizerを実行したか
- ✅ 複雑なアニメーションはcanvasレンダラーを使っているか
- ✅ 画面外のアニメーションはIntersection Observerで停止しているか
- ✅ Reactコンポーネントはmemo・useMemoで最適化されているか
これらを実装するだけで、Lottieアニメーションの体感速度は大幅に改善できる。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。