After EffectsからLottieを書き出す方法｜残らない機能を先に知る

Lottieは、アニメーションをJSONとして持ち運べる形式である。

シェイプを表示側で描き直す場合は拡大に強い形式です。

ただし、ラスター画像や重い構成を含むデータまで、常に小容量・無劣化になるわけではありません。

その代わり、After Effectsで作ったものがそのまま残るわけではない。

ここでは、書き出す手順と、落ちる機能、作る前に決めておくことを整理する。

2026年10月3日にLottieFilesとlottie-webの一次資料を照合しました。

自作JSONのブラウザー再生を確認していますが、AEプラグインでの書き出しは実機未検証です。

3秒の自作JSONで再生と受け渡しを確認する

練習ZIPには、横へ移動する赤い円の自作JSON（24・30・60fps）、ローカル再生ページ、公式lottie-web 5.13.0とライセンスを入れました。

AEの書き出し結果ではなく、再生側の確認用データです。

ZIPを展開し、Pythonが使える環境では展開先で次のコマンドを実行してから、ブラウザーでhttp://127.0.0.1:8894/practice-view/を開きます。

python -m http.server 8894 --bind 127.0.0.1

コマンドのハイフンは半角です。

PythonはPATHから起動できる状態にします。

file://で直接開くとJSONを読み込めない場合があります。

確認が終わったらターミナルでCtrl+Cを押してサーバーを止めます。

0・45・89フレームのボタンで位置を比べ、「幅を切り替える」で拡大し、「最初に戻す」で開始位置に戻します。

今回はSVG再生で、0フレームのx=60、45のx=160、89のx≈257.8と、拡大・復元を実際に確認しました。

ボタンはEnterでも操作できます。

同じ2つの位置キーフレームで3秒にしたJSONの実ファイルは24fpsが584バイト、30fpsが584バイト、60fpsが587バイトでした。

JSON全体の桁数による小さな差であり、60fpsが常に約2倍になるという根拠にはなりません。

式をベイクしてキーが増える場合などは別に測ります。

自分のAEコンポを出すときは別名保存し、書き出す前に保存を完了します。

円だけのシェイプでまずローカルJSONを出し、対象プレーヤーで先頭・中間・末尾、ループ境界、背景上の見え方を確認します。

次に画像や式を1つずつ追加します。

LottieFilesへのアップロードやAEPの共有は、ローカル保存の必須手順ではありません。

白紙ならJSONの読み込みエラーと外部画像・フォントの不足を確認します。

動きが違えばfps・開始終了・式の変換を確認し、非対応なら対応するシェイプへ置き換えるか動画・静止画を用意します。

iOS・Androidなどへの受け渡しは各プレーヤーで再確認が必要です。

練習後は元のAEプロジェクトと書き出し設定に戻します。

書き出しはプラグインから行う

Lottieの書き出しは、After Effectsの標準機能ではなく拡張機能から行う。

公式ドキュメントでは、ウィンドウ ＞ 拡張機能 ＞ LottieFiles からプラグインを開くと説明されている。

1. プラグインを開き、上部のExportタブをクリックする
2. プロジェクト内のコンポジションが一覧で出る
3. 1つだけならコンポジション名の横のレンダーアイコンをクリックする
4. まとめて出すならチェックボックスをオンにする（Shiftで範囲選択もできる）
5. Render Settingsで設定を見る
6. Renderボタンを押す

Render Settingsでは、メタデータ、フォントの書き出し、エクスプレッションの変換、画像アセット、非表示レイヤー、ガイドレイヤーの扱いを設定できる。

書き出したあとの保存先

レンダーが終わると、どこへ置くかを選ぶ。

JSONはアニメーションのデータを記述するテキスト形式です。

dotLottie（.lottie）はZIPを使うコンテナー形式で、アニメーションJSON、マニフェスト、必要な画像などをまとめます。

JSONの拡張子だけを.lottieへ変えても変換にはなりません。

渡す先が読み込める形式を先に確かめておく。

残るものと落ちるもの

Lottieが扱える範囲は決まっているため、After Effectsの機能がすべて残るわけではない。

以下はLottieFilesのAEプラグイン向け互換性資料を要約した目安です。

資料自体にも一部項目の追加検証が必要と記載されています。

すべての書き出しツールやプレーヤーに共通する保証ではなく、利用する版とレンダラーで確認してください。

プロパティのアニメーションは、よく使うものがひと通り残る。

一方で、エフェクトはほとんど残らない。

対応しない機能は、書き出しのときに知らせず落ちることがある。

作ったあとで気づくと、組み直しになる。

エクスプレッションは書き出し設定と再生環境で確認する

LottieFilesの互換性資料では、エクスプレッションをキーフレームへ変換する手順が示されています。

一方、lottie-webは一部のエクスプレッションを扱います。

書き出しプラグイン、プレーヤーの種類・版・レンダラーを分けて確認します。

Render Settingsにエクスプレッションの変換という項目があるのは、このためである。

変換されると、計算して動いていたものが、打たれたキーフレームに置き換わる。

ベイクでキー数が増えると、ファイルが大きくなることがあります。

変換前後のデータ量と動きで判断します。

作る前に決めておくこと

公式ドキュメントに、書き出す前のコンポジションの整え方が載っている。

• レイヤー名は連携先から識別しやすい名前にする。小文字とハイフンは運用上の推奨であり、非ASCII文字が形式上すべて禁止されているわけではない
• ロゴやアイコンはラスター画像でなくシェイプレイヤーにする
• 整理のためだけのプリコンポーズはしない（入れ子は表示する側の負担になる）
• エクスプレッションや非対応のレイヤーは、そのまま渡せると判断せず、必要に応じてキー化・シェイプ化・別形式へ置き換える
• ワークエリアを出力範囲に合わせる。範囲外のキーも補間や式から参照される場合があるため、複製したコンポで不要なものだけを除き、範囲内の動きが変わらないか比較する
• フレームレートを決めておく

画像の保存は書き出し設定によって異なります。

JSON内への埋め込みか、外部画像への参照かを確認し、参照する画像も渡します。

.lottieを使う場合も必要なアセットが含まれるか確認します。

そのため、写真を1枚入れるだけで容量の傾向が変わる。

フレームレートと容量

必要な滑らかさはアニメーションの速度と再生環境で変わります。

24・30・60fpsを候補に、実際の表示サイズと対象プレーヤーで比較してください。

コンポジションのfpsを変えても、すべてのキーフレームが自動的に別の秒位置へ移るわけではありません。

ただし、新しいフレーム境界との関係やフレーム数に依存する式、書き出し側の処理で見え方が変わる可能性があるため、開始・終了・ループを再確認します。

書き出したものを調べる

プラグインには、書き出したLottieが何の機能を使っているかを調べる仕組みがある。

公式ドキュメントでは、プラグインのWorkspace内でLottieファイルを開くとJSONを解析し、Download欄の横に結果を表示すると説明されている。

結果には、使われている機能の名前と、それが入ったLottieの仕様のバージョンが並ぶ。

さらに、主要な再生側での対応の可否も示される。

• lottie-web
• dotlottie-web
• lottie-android
• lottie-ios
• Skottie

渡す先がiOSのアプリなのかWebなのかで、使える機能が違う。

手元のブラウザーで動いたから大丈夫、とは言えない。

確かめる順番

1. 渡す先の再生環境を決める
2. 使う予定の機能が一覧で対応しているかを見る
3. レイヤー名とフレームレートを決めてから作る
4. 書き出して、使われている機能を調べる
5. 渡す先の環境で実際に再生して見比べる

最後を飛ばすと、手元では動くのに渡した先で崩れる、という形になる。

まとめ

• 書き出しはウィンドウ ＞ 拡張機能 ＞ LottieFiles のExportタブから行う
• 保存先は手元の .lottie / .json か、ワークスペースを選べる
• 調整レイヤー、カメラ、ライト、グロー、パーティクルは残らない
• LottieFilesの手順ではエクスプレッションをキーフレームに変換し、渡す先のプレーヤーで動きを確認する
• 画像を使う場合は埋め込み・外部参照の設定と、渡すファイルの不足を確認する
• 書き出したあと、使われている機能と再生側の対応を調べられる

対応範囲は書き出し側と再生側で異なります。

以下の公式資料とlottie-webのレンダラー別一覧を確認し、渡す先で再生します。

書き出しの手順はLottieFiles公式のExporting compositions as Lottieにある。

対応の一覧はLottie compatibilityにまとまっている。

作る前の整え方はPreparing compsに載っている。

After Effectsの操作はAfter Effectsメソッドのまとめにも置いている。

よくある質問：After EffectsからLottieを書き出すとき

LottieはAfter Effectsの内容がそのまま残りますか？

残りません。

Lottieはアニメーションをjsonとして持ち運べる形式ですが、Lottieが扱える範囲は決まっているため、After Effectsの機能がすべて残るわけではありません。

公式ドキュメントに、対応の程度が一覧で載っています。

書き出しは、どこから行いますか？

LottieFilesのプラグインから行います。

公式ドキュメントでは、「ウィンドウ」＞「拡張機能」＞「LottieFiles」からプラグインを開くと説明されています。

上部のExportタブをクリックし、コンポジションを選んで、Render Settingsで設定を見てからRenderボタンを押します。

.lottieと.jsonは、どう違いますか？

JSONはテキスト形式のアニメーションデータです。

.lottieはJSONやマニフェスト、画像などをまとめるZIPベースの形式です。

拡張子だけを変更するのではなく、対応ツールで書き出し、プレーヤーが形式と仕様の版を扱えるか確認します。

エフェクトやレイヤーは、どこまで対応しますか？

記事の一覧では、シェイプ・ソリッド・テキスト（基本）・ネストしたコンポジション・ヌルは対応し、調整レイヤー・カメラ・ライトは対応しません。

エフェクトは、グローやパーティクル系は対応せず、ドロップシャドウは基本的なものだけです。

対応しない機能は、書き出しのときに知らせず落ちることがあります。

画像を使うときの注意点は？

ラスター画像は対応しますが、ファイルが重くなります。

JSON内への埋め込みか、外部画像への参照かを確認し、参照する画像も渡します。

.lottieを使う場合も、必要なアセットが含まれるか確認してください。

写真を1枚入れるだけで、容量の傾向が変わります。

フレームレートは、何fpsにすればよいですか？

24・30・60fpsを候補に、動きの速さと対象プレーヤーで判断します。

fps変更だけでキーの秒位置が必ずずれるわけではありませんが、フレーム境界や式、書き出しによる違いを確認してください。

容量もfpsだけでは決まらないため、同じ内容の実ファイルで比較します。

書き出したLottieが、渡す先で再生できるかは、どう確かめますか？

プラグインには、書き出したLottieが使っている機能を調べる仕組みがあり、主要な再生側（lottie-web・dotlottie-web・lottie-android・lottie-ios・Skottie）での対応の可否も示されます。

ただし、手元のブラウザーで動いたから大丈夫とは言えません。

最後に、渡す先の環境で実際に再生して見比べてください。

この記事の確認範囲は？

2026年10月3日にLottieFilesとlottie-webの一次資料を照合しました。

自作JSONのブラウザー再生は確認していますが、AEプラグインでの書き出しは実機未検証です。