AEの映像をmp4ではなくLottie（JSON）で書き出して動的に編集する方法
After Effectsで映像を作ったら、mp4で書き出すのが当たり前だと思っていませんか？修正が来るたびにAEを開いてレンダリングし直す。100本単位の量産なんて手作業では不可能。その問題を解決するのがLottieです。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
mp4書き出しの限界
mp4は「完成品」です。書き出した後にテキストを1文字変えるだけでも、AEを開いて修正してレンダリングし直す必要があります。重いプロジェクトなら1回のレンダリングに30分以上。
結婚式のエンドロールのように、同じテンプレートで名前と写真だけ変えて量産するケースでは、テンプレートの修正が入った瞬間に全本やり直しになります。
Lottieとは：JSONベースのアニメーション
Lottieは、AEのアニメーションをJSON形式で書き出すフォーマットです。mp4との最大の違いは以下の通りです。
| 項目 | mp4 | Lottie（JSON） |
|---|---|---|
| 形式 | ピクセルベースの動画 | JSONベースのアニメーション |
| 修正 | 再レンダリング必須 | プログラムから動的に編集可能 |
| 容量 | 数十MB〜 | 数十KB〜数百KB（100分の1） |
| 拡大 | 劣化する | ベクターで劣化なし |
AEからの書き出し方法
書き出しにはBodymovinプラグインを使います。LottieFiles公式サイトから無料でインストールできます。
手順
- AEのメニューから ウィンドウ → 拡張機能 → Bodymovin
- 書き出したいコンポジションを選択
- Glyphs設定をOFFに（テキスト差し替え用）
- Renderボタン → JSONファイルが出力
非対応エフェクトと回避策
AEの全機能がLottieに変換できるわけではありません。
| AE機能 | 対応状況 | 回避策 |
|---|---|---|
| トランスフォーム（位置/スケール/回転） | ◎ 完全対応 | — |
| シェイプレイヤー | ◎ 完全対応 | — |
| テキストレイヤー | ○ ほぼ対応 | フォント埋め込み注意 |
| エクスプレッション | △ 一部対応 | キーフレームにベイク |
| 3Dレイヤー/カメラ | ✕ 非対応 | 2Dに変換 |
| パーティクル系 | ✕ 非対応 | PNG連番化 |
Web上での再生
lottie-webライブラリを読み込むだけで、数行のJavaScriptで再生できます。
<script src="https://unpkg.com/lottie-web"></script>
<script>
lottie.loadAnimation({
container: document.getElementById('animation'),
renderer: 'svg',
loop: true,
autoplay: true,
path: './animation.json'
});
</script>動的差し替えの実装
Lottieの最大の強みは、JSONだからプログラムで中身を書き換えられること。
// テキストを動的に差し替え
const json = await fetch('./template.json').then(r => r.json());
json.layers.forEach(layer => {
if (layer.nm === 'groom_name') {
layer.t.d.k[0].s.t = '太郎';
}
});
// → ブラウザがリアルタイムで反映テキストだけでなく、シェイプの塗り色、線色、不透明度、サイズも全て書き換え可能です。
CSV × Lottie × Remotion で量産システムを構築
AEで作ったテンプレートをLottie化して、CSVから100組分のデータを読み込み、全自動で動画を量産するシステムを組めます。
- CSVに新郎新婦の名前・写真パス・挙式日を入力
- PythonスクリプトがJSONのテキストを差し替え
- Remotionでmp4にレンダリング
- 自動納品
人間がやることはCSVに名前を入力するだけ。プログラムが90%の量産を担い、人間は最後の10%の品質確認だけで済みます。
実運用SaaS
この仕組みは実際に2つのSaaSとして稼働しています。
- NONNOFILM App（ブライダル向け）
- memorius.jp（葬儀メモリアル向け）
どちらも式場スタッフが写真と名前を入力するだけで、AEで作ったクオリティのムービーが自動生成されます。
まとめ
- AEの映像はmp4ではなくLottie（JSON）で書き出す
- JSONだからプログラムでテキスト・色を動的に差し替え可能
- CSV × Lottie × Remotion で全自動量産できる
- 属人的なスキルを仕組み化してSaaS化する = ハイブリッド・クリエイティブDX
同じような自動化の仕組みに興味がある方は、サービス一覧や開発実績もチェックしてみてください。
ツール導入で終わらない「本当のDX」を、一緒に作りませんか
AE→Lottie→Remotionの動画自動生成から、業務プロセス全体の自動化まで。
自分で作って動かしている仕組みを、あなたのビジネスにも実装します。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。