Lottieは、アニメーションをJSONとして持ち運べる形式である。
動画と違って、表示する側が図形を描き直すため、拡大しても粗くならず、容量も小さい。
その代わり、After Effectsで作ったものがそのまま残るわけではない。
ここでは、書き出す手順と、落ちる機能、作る前に決めておくことを整理する。
内容は2026年9月20日にLottieFilesの公開ドキュメントを確認したもので、実機での再現は含まない。
書き出しはプラグインから行う
Lottieの書き出しは、After Effectsの標準機能ではなく拡張機能から行う。
公式ドキュメントでは、ウィンドウ ＞ 拡張機能 ＞ LottieFiles からプラグインを開くと説明されている。
- プラグインを開き、上部のExportタブをクリックする
- プロジェクト内のコンポジションが一覧で出る
- 1つだけならコンポジション名の横のレンダーアイコンをクリックする
- まとめて出すならチェックボックスをオンにする（Shiftで範囲選択もできる）
- Render Settingsで設定を見る
- Renderボタンを押す
Render Settingsでは、メタデータ、フォントの書き出し、エクスプレッションの変換、画像アセット、非表示レイヤー、ガイドレイヤーの扱いを設定できる。
書き出したあとの保存先
レンダーが終わると、どこへ置くかを選ぶ。
| 置き方 | 出るもの |
|---|---|
| 手元に保存する | .lottie または .json を指定した場所へ |
| ワークスペースへ上げる | LottieFiles上のフォルダーへ（AEPも一緒に置ける） |
jsonは中身がそのまま読める形式で、.lottieはそれをまとめて圧縮したものになる。
渡す先が読み込める形式を先に確かめておく。
残るものと落ちるもの
Lottieが扱える範囲は決まっているため、After Effectsの機能がすべて残るわけではない。
公式ドキュメントに、対応の程度が一覧で載っている。
| レイヤー | 対応 |
|---|---|
| シェイプレイヤー | 対応する |
| ソリッドレイヤー | 対応する |
| テキストレイヤー（基本） | 対応する |
| テキストレイヤー（高度なアニメーター） | 一部だけ |
| ラスター画像 | 対応するがファイルが重くなる |
| ネストしたコンポジション | 対応する |
| ヌルオブジェクト | 対応する |
| 調整レイヤー | 対応しない |
| カメラレイヤー | 対応しない |
| ライトレイヤー | 対応しない |
| 3Dレイヤーの回転や奥行き | 一部だけ |
プロパティのアニメーションは、よく使うものがひと通り残る。
| プロパティ | 対応 |
|---|---|
| 位置・スケール・回転・不透明度 | 対応する |
| アンカーポイント | 対応する |
| ストロークと塗り | 対応する |
| トリムパス | 対応する |
| リピーター | 対応する |
| グラデーション | 一部だけ |
一方で、エフェクトはほとんど残らない。
| エフェクト | 対応 |
|---|---|
| ドロップシャドウ | 基本的なものだけ |
| ティントや塗りつぶし | 動かない色なら |
| ぼかし | 制限がある |
| グロー | 対応しない |
| パーティクル系 | 対応しない |
対応しない機能は、書き出しのときに知らせず落ちることがある。
作ったあとで気づくと、組み直しになる。
エクスプレッションは残らない
公式ドキュメントでは、エクスプレッションは対応せず、キーフレームへの変換が必要だと説明されている。
Render Settingsにエクスプレッションの変換という項目があるのは、このためである。
変換されると、計算して動いていたものが、打たれたキーフレームに置き換わる。
キーフレームが増えるため、ファイルも大きくなる。
作る前に決めておくこと
公式ドキュメントに、書き出す前のコンポジションの整え方が載っている。
- レイヤー名は小文字とハイフンで意味の分かる名前にする（スペースと非ASCIIは避ける）
- ロゴやアイコンはラスター画像でなくシェイプレイヤーにする
- 整理のためだけのプリコンポーズはしない（入れ子は表示する側の負担になる）
- エクスプレッション、調整レイヤー、カメラ、ライトは使わない
- ワークエリアの外にあるキーフレームを削る
- フレームレートを決めておく
ラスター画像は、Lottieの中にPNGとして埋め込まれる形になる。
そのため、写真を1枚入れるだけで容量の傾向が変わる。
フレームレートと容量
| フレームレート | 容量の目安 |
|---|---|
| 24fps | 最も小さい |
| 30fps | 標準 |
| 60fps | 24fpsの約2倍 |
画面の中の小さなアニメーションなら、24fpsで足りることが多い。
先に60fpsで作ってしまうと、あとから落とすときにキーフレームの位置がずれる。
書き出したものを調べる
プラグインには、書き出したLottieが何の機能を使っているかを調べる仕組みがある。
公式ドキュメントでは、ファイルを開くとJSONを解析し、ダウンロードの横に結果を出すと説明されている。
結果には、使われている機能の名前と、それが入ったLottieの仕様のバージョンが並ぶ。
さらに、主要な再生側での対応の可否も示される。
- lottie-web
- dotlottie-web
- lottie-android
- lottie-ios
- Skottie
渡す先がiOSのアプリなのかWebなのかで、使える機能が違う。
手元のブラウザーで動いたから大丈夫、とは言えない。
確かめる順番
- 渡す先の再生環境を決める
- 使う予定の機能が一覧で対応しているかを見る
- レイヤー名とフレームレートを決めてから作る
- 書き出して、使われている機能を調べる
- 渡す先の環境で実際に再生して見比べる
最後を飛ばすと、手元では動くのに渡した先で崩れる、という形になる。
まとめ
- 書き出しはウィンドウ ＞ 拡張機能 ＞ LottieFiles のExportタブから行う
- 保存先は手元の .lottie / .json か、ワークスペースを選べる
- 調整レイヤー、カメラ、ライト、グロー、パーティクルは残らない
- エクスプレッションは残らず、キーフレームへの変換が要る
- ラスター画像はPNGとして埋め込まれ、容量が増える
- 書き出したあと、使われている機能と再生側の対応を調べられる
この記事は2026年9月20日時点の公開ドキュメントの記載に基づいている。
書き出しの手順はLottieFiles公式のExporting compositions as Lottieにある。
対応の一覧はLottie compatibilityにまとまっている。
作る前の整え方はPreparing compsに載っている。
After Effectsの操作はAfter Effectsメソッドのまとめにも置いている。
