Lottie（ロティ）は、Adobe After Effects（AE）で作成したアニメーションを JSON 形式で書き出し、Web・iOS・Android・React Native などの各プラットフォームでネイティブにレンダリングできるようにする仕組みおよびライブラリ群の総称です。2017 年に Airbnb のエンジニアリングチームが OSS として公開し、デザイナーとエンジニアの分業を一気に楽にした「アニメーション配信の標準フォーマット」として広く普及しました。AE 上の Bodymovin プラグインで JSON を書き出し、各プラットフォームの Lottie ライブラリで再生する、というワークフローが定着しています。
この記事の目次
- Lottie の仕組みとフォーマット
- Web での具体的な使い方
- メリットと制約
- LottieFiles エコシステムと運用
- まとめ
Lottie の仕組みとフォーマット
Lottie のワークフローは、まずモーションデザイナーが After Effects 上でアニメーションを制作し、Bodymovin というプラグインを使って JSON ファイルとして書き出すところから始まります。この JSON にはレイヤー構造、シェイプの頂点情報、キーフレームの値、イージング曲線、トランスフォーム、マスクなどがすべて記述されています。出力された JSON はテキストファイルなので、軽量で diff も取りやすく、CDN 経由で簡単に配信できます。
再生側では、Web 向けには lottie-web、iOS 向けには lottie-ios、Android 向けには lottie-android といった公式ライブラリが各プラットフォームに用意されており、JSON を解釈してネイティブの描画 API（SVG / Canvas / HTML / CALayer / Drawable）でレンダリングします。これにより、画像や動画として書き出すよりも遥かに軽量で、解像度フリーかつインタラクティブに制御できるアニメーションを各環境に届けられます。
Web での具体的な使い方
Web で Lottie を使う場合、最も一般的なのは LottieFiles 社が提供する lottie-player という Web Component を使う方法です。
近年は dotLottie（.lottie 拡張子）と呼ばれる圧縮アーカイブ形式も普及してきました。これは Lottie JSON と関連リソース（画像など）を zip でまとめたもので、ファイルサイズを大幅に削減できます。再生にはやはり LottieFiles 社の dotlottie-player を使います。CDN とブラウザキャッシュとの相性も良く、複数のアニメーションを軽量に配信したい LP やマイクロサイトで採用が進んでいます。
メリットと制約
Lottie の最大のメリットは、デザイナーが慣れた After Effects 上で表現したアニメーションを、ベクター品質のままアプリやサイトで再生できる点です。動画として書き出した場合に比べてファイルサイズが小さく、レイヤーごとに色や速度を JavaScript で動的に変えたり、特定のセグメントだけ再生したり、ホバーで反転再生したりといったインタラクションも自由に組み込めます。スクリーンサイズが多様なモバイル UI に強く、ローディング画面、空状態（Empty State）の演出、オンボーディングのチュートリアル動画などで広く使われています。
一方で、AE のすべての機能が Lottie に対応しているわけではない点には注意が必要です。一部のエフェクト、3D レイヤー、複雑なブレンドモード、特定のテキスト機能などは未対応または不完全な対応であり、Bodymovin 書き出し時に警告が出ることもあります。重量級の長尺アニメーションや、何千ものシェイプを毎フレーム計算するような JSON は、低スペック端末では描画が重くなる場合もあります。プロジェクト初期にデザイナーとエンジニアで Lottie の制約を共有しておくことが、後の手戻り防止に効きます。
LottieFiles エコシステムと運用
Lottie の周辺エコシステムは、LottieFiles 社が大きく牽引しています。同社が運営する LottieFiles サイトでは、無料・有料のアニメーション素材が大量に公開されており、ブラウザ上で色やセグメントを微調整したうえでダウンロードしたり、ホストしたりできます。Figma プラグインや Adobe Express、Sketch のプラグインも提供されており、デザイナーが普段使うツールから直接 Lottie をプレビュー・取得できる導線が整っています。
運用上は、ライセンス確認（有料素材を商用利用する際の条件など）、JSON のサイズ削減（不要レイヤーの整理、画像の SVG 化）、低スペック端末でのフレームレート検証、ループの自然さの確認、reduce-motion 設定を尊重した再生制御などが重要なポイントになります。アクセシビリティの観点から、ユーザーがアニメーションを抑制したい場合には自動再生を停止する、または静止画にフォールバックする実装をしておくと丁寧です。
まとめ
Lottie は、After Effects で作ったベクターアニメーションを JSON として書き出し、Web やモバイル上で軽量に再生する仕組みです。デザイナーとエンジニアの分業を大きく前進させ、ベクター品質・小さなファイルサイズ・インタラクティブ制御を両立できる点が魅力で、LottieFiles を中心としたエコシステムも充実しています。UI のアクセントから本格的な演出まで、現代の Web/モバイルアプリで欠かせない技術になっています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント