Lottieアニメーションの最大の強みは「動的にコンテンツを変更できる」ことです。JSONファイル内のテキストや画像をJavaScriptから書き換えることで、1つのアニメーションテンプレートから無数のバリエーションを生成できます。
動的差し替えが便利なシーン
- ユーザーの名前・スコアを表示する祝福アニメーション
- 商品名・価格が変わる広告バナーアニメーション
- ニュースヘッドラインをリアルタイムで表示するアニメーション
- SNSのプロフィールアニメーション（ユーザー名・アバターを差し替え）
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
Lottie JSONの構造
Lottie JSONの基本構造を理解することが動的差し替えの前提です。
{
"v": "5.9.0",
"fr": 30, // フレームレート
"ip": 0, // 開始フレーム
"op": 90, // 終了フレーム
"w": 800, // 幅
"h": 600, // 高さ
"layers": [ // レイヤー配列
{
"nm": "タイトルテキスト", // レイヤー名
"ty": 5, // タイプ: 5=テキスト
"t": {
"d": {
"k": [
{
"s": {
"t": "Hello World", // ← ここがテキスト
"fc": [1, 0, 0, 1], // フォントカラー（RGBA）
"s": 72 // フォントサイズ
}
}
]
}
}
}
]
}テキストの動的差し替え
シンプルな実装
async function playLottieWithText(containerId, jsonPath, layerName, newText) {
const response = await fetch(jsonPath);
const animationData = await response.json();
// レイヤーを検索してテキストを書き換える
animationData.layers.forEach(layer => {
if (layer.nm === layerName && layer.ty === 5) {
layer.t.d.k.forEach(keyframe => {
if (keyframe.s && keyframe.s.t !== undefined) {
keyframe.s.t = newText;
}
});
}
});
// 変更後のデータでアニメーションを読み込む
lottie.loadAnimation({
container: document.getElementById(containerId),
animationData: animationData,
renderer: 'svg',
loop: false,
autoplay: true,
});
}
// 使用例
playLottieWithText('anim-container', 'congrats.json', 'USER_NAME', '田中 太郎');複数テキストを一括差し替え
function modifyLottieTexts(animationData, replacements) {
// replacements = { 'LAYER_NAME_1': 'new text 1', 'LAYER_NAME_2': 'new text 2' }
animationData.layers.forEach(layer => {
if (layer.ty === 5 && replacements[layer.nm]) {
layer.t.d.k.forEach(keyframe => {
if (keyframe.s) {
keyframe.s.t = replacements[layer.nm];
}
});
}
});
return animationData;
}
// 使用例
const modified = modifyLottieTexts(data, {
'TITLE': '2026年 最新ランキング',
'SUBTITLE': 'おすすめ動画編集ツール',
'SCORE': '98点',
});画像の動的差し替え
Lottie JSON内の画像アセットをBase64またはURLで差し替えることができます。
async function modifyLottieImage(animationData, assetId, newImageUrl) {
// URLから画像を取得してBase64に変換
const response = await fetch(newImageUrl);
const blob = await response.blob();
const base64 = await new Promise(resolve => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(blob);
});
// アセットを差し替える
animationData.assets.forEach(asset => {
if (asset.id === assetId) {
asset.p = base64; // base64のデータURI
asset.u = ''; // パスをクリア
asset.e = 1; // 埋め込みフラグ
}
});
return animationData;
}
// 使用例: 'img_0' というIDの画像をユーザーアイコンに差し替え
const modified = await modifyLottieImage(data, 'img_0', 'https://example.com/user-avatar.jpg');カラーの動的差し替え
ブランドカラーをユーザーごとに変えるケースに便利です。
function modifyLottieColor(animationData, layerName, newColor) {
// newColor = [R, G, B, A] (各値0〜1)
animationData.layers.forEach(layer => {
if (layer.nm === layerName && layer.ty === 5) {
layer.t.d.k.forEach(kf => {
if (kf.s && kf.s.fc) {
kf.s.fc = newColor;
}
});
}
});
}
// 例: テキストカラーを青に変更
modifyLottieColor(data, 'TITLE', [0.2, 0.4, 0.9, 1]);lottie-webの高度な制御
const anim = lottie.loadAnimation({
container: document.getElementById('container'),
animationData: modifiedData,
renderer: 'svg',
loop: false,
autoplay: false,
});
// イベントのリッスン
anim.addEventListener('complete', () => {
console.log('アニメーション完了');
anim.destroy(); // メモリ解放
});
// 特定フレームに移動して再生
anim.goToAndPlay(30, true); // フレーム30から再生
// 速度変更
anim.setSpeed(1.5);サーバーサイドでの動的生成（Node.js）
APIとして動的Lottieを返すサーバーを作ることもできます。
// Express + Node.js の例
app.get('/api/animation', async (req, res) => {
const { username, score } = req.query;
const template = JSON.parse(fs.readFileSync('template.json', 'utf-8'));
modifyLottieTexts(template, {
'USERNAME': username,
'SCORE': score + '点',
});
res.json(template);
});Lottieをさらに活用するには
AE→Lottie変換の基礎はAfterEffects→Lottie変換の完全手順を、Webへの実装全般はAfterEffects×Lottie×Web完全ガイドをご参照ください。
まとめ
Lottie JSONの動的差し替えは、一度作ったアニメーションテンプレートを何通りにも活用できる強力な技術です。SaaS・Webアプリへの組み込みや、パーソナライズされたアニメーション生成に特に効果的です。
Lottieを使ったWebアニメーション・動画SaaSの開発はTurkey-tipsへ
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。