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のインストール手順（Adobe Exchange経由・推奨）
- After Effectsを起動し、メニュー「ウィンドウ」→「エクステンション」→「Adobe Exchange」を開く
- 検索バーに「Bodymovin」と入力する
- 「インストール」ボタンを押す
- インストール完了後、「ウィンドウ」→「エクステンション」→「Bodymovin」で起動できる
Bodymovinでアニメーションを書き出す手順
書き出し前の確認事項
- 3Dレイヤー・カメラ・ライトは書き出しに非対応（2Dアニメーションのみ）
- ラスター画像はシェイプレイヤーに変換するか埋め込み設定を使う
- エクスプレッションは一部サポート外（wiggle・loopOutは対応）
書き出し手順
- 「ウィンドウ」→「エクステンション」→「Bodymovin」を開く
- 書き出したいコンポジションを選択する
- 「…」ボタンから出力フォルダーを指定する
- 「Render」ボタンをクリックするとJSONファイルが生成される
書き出し設定のオプション
- Embed Images：画像をBase64でJSON内に埋め込む（ファイルを1つにまとめたい場合）
- Export to .dotLottie：新形式の.dotlottieとして書き出す（gzip圧縮でサイズ削減）
- Split multiple compositions：コンプが複数ある場合に個別のJSONとして書き出す
MP4動画との比較：Lottieを選ぶメリット
| 比較項目 | Lottie（JSON） | MP4動画 | GIF |
|---|---|---|---|
| ファイルサイズ | 非常に小さい（KB〜数十KB） | 大きい（MB単位） | 中程度（MB単位） |
| スケーラビリティ | ベクター（無限に拡大可） | 解像度依存 | 解像度依存 |
| インタラクティブ制御 | 可能（一時停止・速度変更・逆再生） | 限定的 | 不可 |
| 透過背景 | 対応（アルファチャンネル） | 要HEVC/WebM | 対応 |
LottieFilesを使って書き出しを自動化・配信する
LottieFilesのWorkflow APIを使えば、デザインチームがAEで書き出し→APIでアップロード→開発チームがAPIでJSONを取得→実装という一連のフローを自動化できます。CDN配信にも対応しているため、Webサイトのパフォーマンスを維持しながらアニメーションを配信できます。
まとめ
Bodymovin（Lottie）の活用は、モーション制作者がWebや開発チームとのコラボレーションを深めるための最もシンプルで効果的な手段のひとつです。After EffectsのアニメーションをJSONで書き出すだけで、軽量・スケーラブルなアニメーションがあらゆるプラットフォームで再生できるようになります。After Effectsをまだ利用していない方は、After Effects公式ページから無料体験を開始し、Bodymovinによる書き出し自動化に挑戦してみてください。
コメント