AfterEffectsで作ったアニメーションをWebで動かす——これがLottieのコアな価値だ。Reactとの組み合わせは特に相性がよく、コンポーネントベースで再利用可能なアニメーションを簡単に実装できる。この記事では実務レベルの実装パターンを解説する。
必要なパッケージ
npm install lottie-react
# または軽量版（コントロール機能なし）
npm install @lottiefiles/react-lottie-playerあなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
基本的な使い方
// components/LottieAnimation.tsx
import Lottie from "lottie-react";
import animationData from "../assets/my-animation.json";
export function LottieAnimation() {
return (
<Lottie
animationData={animationData}
loop={true}
autoplay={true}
style={{ width: 300, height: 300 }}
/>
);
}再生コントロール：useRefで操作する
import Lottie, { LottieRefCurrentProps } from "lottie-react";
import { useRef } from "react";
export function ControllableAnimation() {
const lottieRef = useRef<LottieRefCurrentProps>(null);
return (
<div>
<Lottie
lottieRef={lottieRef}
animationData={animationData}
loop={false}
autoplay={false}
/>
<button onClick={() => lottieRef.current?.play()}>再生</button>
<button onClick={() => lottieRef.current?.pause()}>一時停止</button>
<button onClick={() => lottieRef.current?.stop()}>停止</button>
<button onClick={() => lottieRef.current?.setSpeed(2)}>2倍速</button>
</div>
);
}スクロール連動アニメーション
スクロール位置に合わせてアニメーションを再生する実装は、LPや紹介ページで効果的だ。
import { useEffect, useRef, useState } from "react";
import Lottie, { LottieRefCurrentProps } from "lottie-react";
export function ScrollLinkedAnimation() {
const lottieRef = useRef<LottieRefCurrentProps>(null);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleScroll = () => {
if (!containerRef.current || !lottieRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const windowHeight = window.innerHeight;
// 要素が画面内にある割合（0〜1）
const progress = Math.max(0, Math.min(1,
(windowHeight - rect.top) / (windowHeight + rect.height)
));
// フレーム数を取得して割合を掛ける
const totalFrames = lottieRef.current.getDuration(true) ?? 0;
lottieRef.current.goToAndStop(progress * totalFrames, true);
};
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<div ref={containerRef} style={{ height: "200vh" }}>
<div style={{ position: "sticky", top: "20vh" }}>
<Lottie
lottieRef={lottieRef}
animationData={animationData}
autoplay={false}
loop={false}
/>
</div>
</div>
);
}LottieFilesからアニメーションを動的に読み込む
import { useState, useEffect } from "react";
import Lottie from "lottie-react";
interface Props { animationUrl: string; }
export function DynamicLottie({ animationUrl }: Props) {
const [animationData, setAnimationData] = useState<object | null>(null);
useEffect(() => {
fetch(animationUrl)
.then(res => res.json())
.then(setAnimationData);
}, [animationUrl]);
if (!animationData) return <div>Loading...</div>;
return <Lottie animationData={animationData} loop autoplay />;
}
// 使用例
<DynamicLottie animationUrl="https://assets.lottiefiles.com/packages/lf20_xxx.json" />JSON内のテキスト・カラーを動的に変更する
Lottie JSONの構造を直接操作することで、テキストや色をReactのstateで動的に変更できる。
// Lottie JSONのカラーを動的に変更するユーティリティ
function changeLottieColor(
animationData: any,
layerName: string,
newColor: [number, number, number] // RGB 0〜1
): any {
const clone = JSON.parse(JSON.stringify(animationData));
const layers = clone.layers ?? [];
layers.forEach((layer: any) => {
if (layer.nm === layerName) {
// ソリッドレイヤーの場合
if (layer.sc) {
const [r, g, b] = newColor;
layer.sc = `#${Math.round(r*255).toString(16).padStart(2,"0")}${Math.round(g*255).toString(16).padStart(2,"0")}${Math.round(b*255).toString(16).padStart(2,"0")}`;
}
}
});
return clone;
}
// 使用例
const brandedAnimation = changeLottieColor(rawAnimationData, "Background", [0.2, 0.6, 1.0]);パフォーマンス最適化：不要な再レンダリングを防ぐ
// useMemoでanimationDataをメモ化
import { useMemo } from "react";
export function OptimizedLottie() {
const animationData = useMemo(() => require("../assets/animation.json"), []);
return <Lottie animationData={animationData} loop autoplay />;
}AfterEffectsからの書き出し品質を上げるコツ
- シェイプレイヤー中心で作る：ビットマップ素材はLottieで重くなる
- エクスプレッションは最小限に：サポートされていないエクスプレッションは無視される
- Precompを展開して書き出す：Bodymovinプラグインの「Flatten precomps」オプションを使う
- フレームレートは24fpsで統一：Webでは24fpsが標準的で軽量
まとめ
lottie-reactを使えば、AfterEffectsで作ったアニメーションをReactコンポーネントとして再利用できる。スクロール連動・動的カラー変更・動的テキスト差し込みも実装可能で、Webサービスのブランドアニメーションとして非常に有効だ。まずは基本的な再生コントロールから試してほしい。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。