AfterEffects→Lottie変換の完全手順【Bodymovin対応・よくあるトラブル解決集】

AfterEffectsで作ったアニメーションをLottieに変換する際、「書き出したけど動かない」「表示が崩れる」というトラブルが起きがちです。このガイドでは、変換の全手順と、よくある問題の解決方法を詳しく解説します。

事前確認：AEプロジェクトのLottie対応チェック

すべてのAE機能がLottieに対応しているわけではありません。書き出す前に以下を確認します。

問題になりやすいプロパティ

• 3Dレイヤー：2Dに変換するか、3Dの雰囲気はスケール/位置アニメで表現
• エフェクト（グロー・ブラーなど）：多くはLottie非対応。代替手法を検討
• モーションブラー：対応していないため、設定をOFFにする
• フォント：サーバーで利用できるフォントを使用するか、シェイプに変換
• ネストされたPrecomp：基本的に対応しているが、深くネストすると問題が出ることがある

Bodymovinプラグインの設定

インストール方法

Bodymovinはaescripts.comまたはAdobe Exchangeからインストールできます。

1. ZXPインストーラーを使ってBodymovinをインストール
2. AEを再起動
3. ウィンドウ → エクステンション → Bodymovinを開く

書き出し設定のポイント

Bodymovinパネルの設定で重要なオプション：

• Settings → Glyphs：フォントをグリフ（シェイプ）として書き出す → フォント依存なし
• Assets：画像を埋め込む（inline=true）か外部ファイル化するかを選択
• Bodymovin version：最新版を使用

書き出し手順

1. 書き出すコンプをBodymovinパネルの一覧から選択
2. 右側の「…」から保存先フォルダを指定
3. 「Render」をクリック
4. 完了後、指定フォルダにJSONファイル（および画像フォルダ）が出力される

LottieFilesでのプレビュー確認

書き出したJSONをすぐにブラウザで確認するにはLottieFiles Previewが便利です。

• JSONファイルをドラッグ&ドロップするだけでプレビュー
• アニメーションの一時停止・再生速度変更が可能
• 公開・共有もできる

よくある問題と解決方法

問題1：テキストが表示されない

原因：使用フォントがブラウザ側にインストールされていない

解決：Bodymovinの「Glyphs」設定でフォントをシェイプとして書き出す

問題2：色が違う

原因：AE側でリニアカラー設定を使用している場合、Lottie側でガンマが異なる

解決：AEのプロジェクト設定でsRGBに変更してから書き出す

問題3：アニメーションがカクつく（Webで）

原因：JSONファイルが大きすぎるか、レイヤー数が多すぎる

解決：不要なレイヤーを削除、画像を最適化、フレームレートを下げる（60fps→30fps）

問題4：特定のエフェクトが再現されない

原因：Lottie非対応エフェクトを使用

解決：エフェクトを使わずシェイプアニメーションで表現するか、PreRenderしてラスタライズ

画像の扱い方

Lottie JSONに画像を含める方法は2つあります：

方法1: 外部ファイル（デフォルト）

animation.json
images/
  img_0.png
  img_1.png

サーバーにフォルダごとアップロードする必要があります。

方法2: Base64インライン埋め込み（推奨）

Bodymovinの「Assets → Inline assets」をONにすると、画像がBase64でJSONに埋め込まれます。ファイル管理が楽になりますが、JSONサイズは増加します。

ファイルサイズ最適化

• 使用していないプリコンプ・レイヤーを削除
• キーフレームを減らす（イーズカーブを使いフレーム数を削減）
• 高解像度画像はリサイズしてから埋め込む
• lottie-compress等のツールでJSON最適化

WebへのLottie実装については

変換したLottieをWebに実装する方法はAfterEffects×Lottie×Web完全ガイドをご参照ください。テキスト・画像の動的差し替えはLottie JSONで動的差し替えをする方法で詳しく解説しています。

まとめ

AE→Lottie変換で最も重要なのは「Lottieが対応している機能の範囲内でAEを使う」ことです。制作前にチェックリストを確認することで、書き出しトラブルを大幅に減らせます。

---

AE×Lottieを活用したWebアニメーション・動画SaaSの制作依頼はTurkey-tipsへ