After Effects Bodymovin（Lottie）でアニメーションを自動書き出しする手順

BodymovinとLottieとは——After Effectsとフロントエンドをつなぐ技術
Bodymovin・Lottie・After Effectsの関係を整理する
Bodymovinのインストール手順
1. 方法1：Adobe Exchange経由でインストールする（推奨）
2. 方法2：GitHubから手動インストールする
Bodymovinでアニメーションを書き出す手順
バッチ書き出しを自動化するスクリプトの使い方
LottieFilesを使って書き出しを自動化・配信する
MP4動画との比較：Lottieを選ぶメリット
まとめ

BodymovinとLottieとは——After Effectsとフロントエンドをつなぐ技術

After Effectsで作成したモーショングラフィックスをWebやアプリで動かしたいと思ったことはありますか？通常、After Effectsの出力はMP4などの動画ファイルですが、それではWebページに埋め込んだ際にインタラクティブな制御ができず、ファイルサイズも大きくなりがちです。

この問題を解決するのがBodymovinというAfter Effects用のフリープラグインです。Bodymovinを使うと、After EffectsのアニメーションをJSON形式で書き出すことができ、このJSONをLottieというJavaScriptライブラリで再生することでWeb・iOS・Androidで軽量かつ高品質なアニメーションを実現できます。

現在ではAirbnb、Google、Uberなどの大手企業がLottieを採用しており、アプリのローディングアニメーション・マイクロインタラクション・イラストアニメーションに広く使われています。

Bodymovin・Lottie・After Effectsの関係を整理する

ツール名	役割	使う場面
After Effects	アニメーションの制作環境	デザイン・アニメーション作成
Bodymovin（AEプラグイン）	AEアニメーションをJSON形式に書き出す	書き出し・変換作業
Lottie（ライブラリ）	JSONアニメーションをWeb/アプリで再生	フロントエンド実装・アプリ組み込み
LottieFiles（サービス）	LottieアニメーションのプレビュークラウドとAPI	チームでの共有・管理・自動配信

Bodymovinのインストール手順

方法1：Adobe Exchange経由でインストールする（推奨）

After Effectsを起動し、メニュー「ウィンドウ」→「エクステンション」→「Adobe Exchange」を開く
検索バーに「Bodymovin」と入力する
Bodymovinをクリックして「インストール」ボタンを押す
インストール完了後、「ウィンドウ」→「エクステンション」→「Bodymovin」で起動できる

方法2：GitHubから手動インストールする

GitHub（github.com/airbnb/lottie-web）からBodymovinの最新リリースをダウンロードする
ZIPを展開し、build/extension/bodymovin.zxpファイルを取り出す
Adobe Extension Manager（またはaescripts + aeplugins Manager App）でZXPファイルをインストールする

Bodymovinでアニメーションを書き出す手順

ステップ1：After Effectsでアニメーションを準備する

Bodymovinで書き出す際には、After Effectsのレイヤー構成に制約があります。書き出し前に以下の点を確認してください。

ラスター画像（PNGなど）はシェイプレイヤーに変換するか、Bodymovinの埋め込み設定を使う
3Dレイヤー・カメラ・ライトは書き出しに非対応（2Dアニメーションのみ）
エクスプレッションは一部サポート外のものがある（wiggle・loopOutは対応）
グラデーション・マスク・トリムパスは対応している

ステップ2：Bodymovinパネルから書き出す

「ウィンドウ」→「エクステンション」→「Bodymovin」を開く
書き出したいコンポジションが一覧に表示されるので、対象を選択する
「…」ボタンから出力フォルダーを指定する
設定アイコン（歯車）をクリックしてオプションを確認する
「Render」ボタンをクリックするとJSONファイルが生成される

ステップ3：書き出し設定のオプション

Split multiple compositions：コンプが複数ある場合に個別のJSONとして書き出す
Embed Images：画像をBase64でJSON内に埋め込む（ファイルを1つにまとめたい場合）
Export to .dotLottie：新形式の.dotlottieとして書き出す（gzip圧縮でサイズ削減）

バッチ書き出しを自動化するスクリプトの使い方

フォルダー内の複数AEPファイルのBodymovinを一括書き出ししたい場合は、After Effectsのスクリプトと組み合わせることで自動化できます。以下はExtendScript（.jsx）を使ってすべてのコンポジションをBodymovin書き出しする概要です。

// After Effects ExtendScript
var project = app.project;
var comps = [];
for (var i = 1; i <= project.numItems; i++) {
  if (project.item(i) instanceof CompItem) {
    comps.push(project.item(i));
  }
}
// Bodymovin APIを呼び出してJSONを書き出す
// ※ Bodymovinのext変数経由で呼び出し（ドキュメント参照）
alert("Found " + comps.length + " compositions.");

LottieFilesを使って書き出しを自動化・配信する

LottieFilesはLottie/Bodymovinアニメーションのクラウド管理・配信サービスです。APIを使えば書き出し済みのJSONをアップロードし、WebアプリやiOS/Androidに自動配信するパイプラインを構築できます。

LottieFiles Workflow API：デザインチームがAEで書き出し → APIでアップロード → 開発チームがAPIでJSONを取得 → 実装という一連のフローを自動化
CDN配信：LottieFiles上のアニメーションはCDNから高速配信されるため、Webサイトのパフォーマンスを維持できる

MP4動画との比較：Lottieを選ぶメリット

比較項目	Lottie（JSON）	MP4動画	GIF
ファイルサイズ	非常に小さい（KB〜数十KB）	大きい（MB単位）	中程度（MB単位）
スケーラビリティ	ベクター（無限に拡大可）	解像度依存	解像度依存
インタラクティブ制御	可能（一時停止・速度変更・逆再生）	限定的	不可
透過背景	対応（アルファチャンネル）	要HEVC/WebM	対応

まとめ

Bodymovin（Lottie）の活用は、モーション制作者がWeb・アプリ開発者とのコラボレーションを深めるための最もシンプルで効果的な手段のひとつです。AfterEffectsのアニメーションをJSONで書き出すだけで、軽量・スケーラブルなアニメーションがあらゆるプラットフォームで再生できるようになります。

After Effectsをまだ利用していない方は、After Effects公式ページから無料体験を開始し、Bodymovinによる書き出し自動化に挑戦してみてください。