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は中身がそのまま読める形式で、.lottieはそれをまとめて圧縮したものになる。

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

残るものと落ちるもの

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

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

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

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

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

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

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

LottieFilesの互換性資料では、エクスプレッションをキーフレームへ変換する手順が示されています。一方、lottie-webは一部のエクスプレッションを扱います。書き出しプラグイン、プレーヤーの種類・版・レンダラーを分けて確認します。

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

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

キーフレームが増えるため、ファイルも大きくなる。

作る前に決めておくこと

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

• レイヤー名は小文字とハイフンで意味の分かる名前にする（スペースと非ASCIIは避ける）
• ロゴやアイコンはラスター画像でなくシェイプレイヤーにする
• 整理のためだけのプリコンポーズはしない（入れ子は表示する側の負担になる）
• エクスプレッション、調整レイヤー、カメラ、ライトは使わない
• ワークエリアの外にあるキーフレームを削る
• フレームレートを決めておく

画像の保存は書き出し設定によって異なります。JSON内への埋め込みか、外部画像への参照かを確認し、参照する画像も渡します。.lottieを使う場合も必要なアセットが含まれるか確認します。

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

フレームレートと容量

画面の中の小さなアニメーションなら、24fpsで足りることが多い。

先に60fpsで作ってしまうと、あとから落とすときにキーフレームの位置がずれる。

書き出したものを調べる

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

公式ドキュメントでは、ファイルを開くとJSONを解析し、ダウンロードの横に結果を出すと説明されている。

結果には、使われている機能の名前と、それが入った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メソッドのまとめにも置いている。