Lottie｜JSONで動く軽量アニメ形式と素材の入手先

Lottie（ロッティー）は、アニメーションを 1 つの JSON（JavaScript Object Notation: データを記述するためのテキスト形式）として表したファイル形式です。中身は画像ではなく、図形・色・動きの座標を文字で書いたデータで、これを各種プレイヤーが読み込んで動きを再生します。Airbnb の公開ライブラリ lottie-web は、自身を「After Effects のアニメーションを Bodymovin で JSON に書き出し、ネイティブに描画するためのライブラリ」と説明しています（airbnb/lottie-web（GitHub））。

01.結論：Lottieとは何か

結論として、Lottie は JSON で記述された、オープンなベクターアニメの形式です。要点は次の 5 つです。

• 中身は JSON：図形と動きを文字で書いたテキストデータです。
• ベクター：拡大しても粗くならず、動画や GIF より軽く済みます。
• コードで制御できる：再生・速度・色などをプログラムから扱えます。
• オープンな標準：Airbnb 発で、いまは Linux Foundation 傘下のコミュニティ（LAC）が仕様を策定しています。
• どこでも再生：Web・iOS・Android・Flutter 向けのプレイヤーがそろっています。

成り立ちはシンプルです。デザイナーが After Effects などで作ったアニメを、Hernan Torrisi 氏が開発したプラグイン Bodymovin が JSON に書き出し、それを Airbnb のライブラリがネイティブに描画する——この仕組みを Airbnb が 2017 年に公開しました。発表では「After Effects のアニメをリアルタイムに描画し、静的な素材と同じ手軽さでアニメを使えるようにするライブラリ」と説明されています（Airbnb Engineering「Introducing Lottie」）。名前は影絵アニメの先駆者 Charlotte「Lotte」Reiniger にちなみます。

いまは 1 社の仕組みではなく、オープンな標準です。仕様の策定は Linux Foundation 傘下の Lottie Animation Community（LAC）が担い、2024 年 9 月に Lottie 仕様 v1.0 が公開されました（Linux Foundation のプレスリリース、Lottie Animation Community）。

02.なぜ軽くて綺麗なのか（JSON×ベクター）

Lottie が軽くて綺麗なのは、中身が「画像」ではなく「図形と動きの設計図」だからです。GIF や MP4 は各コマを点（ピクセル）の集まりで持つのに対し、Lottie は図形と動きをベクターで記述します。Airbnb も、画面サイズごとに重い画像を用意する従来のやり方を置き換えるものだと述べています（Airbnb Engineering「Introducing Lottie」）。

そのうえで、設計図であることから次の利点も生まれます。

• プログラムで制御できる：再生・停止・速度・再生位置（フレーム）や図形の色をコードから扱え、スクロールやホバーに合わせて動かせます。
• どこでも動く：Web・iOS・Android・Flutter など、各プラットフォーム向けのプレイヤーがそろっています。

03.ファイル形式：Lottie JSON と dotLottie

Lottie のファイル形式には、生の .json と、圧縮してまとめた .lottie（dotLottie）の 2 種類があります。Lottie JSON は、After Effects のコンポジション（レイヤー・図形・トランスフォーム・キーフレーム）の構造をほぼそのまま写したテキストです（Lottie 仕様（Layers））。

dotLottie（.lottie）は、1 つ以上の Lottie JSON に画像・テーマ・ステートマシンをまとめた ZIP ベースのコンテナです。複数のアニメや付随ファイルを 1 つに束ねられ、生の JSON より小さく持ち運べます（dotLottie 仕様）。用途ごとの違いは次のとおりです。

どちらを使うかは、再生に使うプレイヤーが .lottieに対応しているかで決まります。まず生の JSON で動かし、画像入りや複数アニメを 1 つにまとめたくなったら dotLottie を検討する、という順序が扱いやすいです。

04.「Lottie」と「LottieFiles」は別物

名前が似ているので混同されがちですが、「Lottie」と「LottieFiles」は別物です。Lottie は前述のとおりアニメの形式とライブラリ（Airbnb 発、いまは LAC が標準化）を指します。一方の LottieFiles は、その素材を配るマーケットと、作成・編集・テスト用のツールを運営する独立した企業です。Airbnb が運営しているわけではありません。

実務上は、LottieFiles がエコシステムの中心にいるのは確かです。圧縮形式 dotLottie の整備や、Web で再生するためのプレイヤー（@lottiefiles/dotlottie-web）なども LottieFiles が手がけています。ただし規格はオープンなので、素材も再生も LottieFiles だけに縛られるわけではありません。

05.ライセンス：無料素材は商用利用できるのか

素材を使ううえで最初に気になるのがライセンスです。LottieFiles の無料素材の多くは「Lottie Simple License」で提供されます。LottieFiles のライセンスページによると、このライセンスはダウンロード・複製・改変・公開・配布・表示を、商用利用を含めて許可し、クレジット表記（帰属）は必須ではない（ただし作者への配慮として推奨）という内容です（Lottie Simple License）。

いくつか条件もあります。素材を再配布・公開する場合は同じライセンス条件を引き継ぐ必要があり、改変したものも派生物として同じ条件で扱われます。また、LottieFiles から素材を集めて同種・競合のサービスを作る目的での収集は認められていません。プレミアム（Pro）素材は別の条件になるため、無料素材か有料素材かを取り違えないようにします（商用利用と帰属の扱いはLottieFiles のヘルプでも説明されています）。

06.素材の入手先（LottieFiles以外も）

既製の Lottie アニメは、まず LottieFilesで探すのが手早い方法です。検索して気に入ったアニメを Lottie JSON または .lottie でダウンロードでき、GIF・MP4 での書き出しもできます。character・loading・explainerのような英語のキーワードで探すと目的の素材に当たりやすくなります。

ただ、規格がオープンなので、同じ Lottie 形式は LottieFiles 以外でも流通しています。タッチや作風の幅を広げたいときや、ライセンス条件で選びたいときは、次のようなサイトも候補になります。料金やクレジット表記の要否は変わりうるので、各サイトの公式ページで最新を確認してください。

07.使い方：再生する側と作る側

Lottie の使い方は、「すでにある .jsonを再生する側」と「アニメを作って書き出す側」に分かれます。素材を使うだけなら前者だけで足ります。

再生する：プレイヤー

再生は、各プラットフォーム向けのプレイヤー（ライブラリ）で行います。Web なら、Airbnb のオープンソース lottie-web を使うか、LottieFiles の dotLottie プレイヤーを Web コンポーネントとして読み込む方法が手軽です。主なプレイヤーは次のとおりです。ライセンスはライブラリごとに異なるので、導入時に各リポジトリの LICENSE を確認してください。

Web での最短の例は、lottie-web で .jsonを読み込んで再生する方法です。コンテナ要素を 1 つ用意し、ファイルのパスを指定するだけで動きます。

import lottie from "lottie-web";

lottie.loadAnimation({
  container: document.getElementById("anim"), // 表示先の要素
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/animations/hello.json", // 書き出した Lottie JSON
});

.lottie（dotLottie）を再生したい場合や、React・Vue などで使いたい場合は、LottieFiles の dotLottie プレイヤーを使うと、対応形式や枠組みに合わせやすくなります。

作る：書き出しツール

オリジナルのアニメを作る側は、デザインツールで動きを付けて Lottie に書き出します。代表的なのは、After Effects に Bodymovin または LottieFiles のプラグインを入れて書き出す方法です。ほかに、Figma のプラグイン、ブラウザ完結の LottieLab、前述の SVGator などからも書き出せます。作成から書き出し、再生までの流れはおおむね次のようになります。

08.ユースケース：Web制作・アプリ・動画

Lottie は、Web 制作・アプリ・動画の 3 方向で使えます。

Web制作

軽さとコード制御のしやすさが効く場面です。コーポレートサイトやランディングページで、次のような演出に使われます。

• ローディング表示・ファーストビューの動く演出
• アイコンやボタンのマイクロインタラクション（ホバーやクリックへの小さな反応）
• ロゴアニメーション・スクロールに連動した動き
• 採用ページの背景キャラクターなどの装飾

実際に動かすとイメージしやすいので、無料の Lottie（ローディング表示）を 1 つ埋め込みます。下のアニメーションは .json を読み込んで再生しているだけで、動画ファイルではありません。

アプリ

もともと Airbnb がアプリ UI のために作った経緯があり、モバイルとの相性が良い形式です。Airbnb は発表記事で、アプリ内通知・全画面のイラスト・レビュー画面のアニメーションといった UI 演出に使っていると述べています（Airbnb Engineering「Introducing Lottie」）。iOS・Android それぞれに公式プレイヤーがあり、同じ素材を両 OS で使い回せます。

動画

Lottie をそのまま動画形式として配るというより、GIF・MP4 に書き出して素材として使う形が中心です。

• LottieFiles などのツールから GIF・MP4 に書き出せる
• 軽量な Web 用と、動画編集に載せる用で同じアニメを使い回せる
• まずは「書き出して動画素材として使う」ところから始めると扱いやすい

09.プログラム・AIから扱う：公開APIと生成

Lottie は中身が JSON なので、人手で探して貼るだけでなく、プログラムや AI エージェントから扱う道も開けています。素材を「探す」側と「作る」側の両方で、自動化の選択肢が増えてきました。

公開APIで検索する

LottieFiles は、公開アニメを検索できる GraphQL の API を提供しています。エンドポイント graphql.lottiefiles.com の searchPublicAnimations クエリは、API キーなしで公開アニメを検索でき、結果には再生用の URL も含まれます（本記事の確認時点は 2026 年 6 月。認証の要否は変わりうるため、最新はLottieFiles Developer Portalで確認してください）。画面で 1 つずつ探す代わりに、キーワードから候補をまとめて引けるため、AI エージェントに素材探しを任せる、といった使い方ができます。

# 認証なしで公開アニメを検索（キーワード: loading）
curl -s https://graphql.lottiefiles.com/ \
  -H "Content-Type: application/json" \
  -d '{"query":"query($q:String!){ searchPublicAnimations(query:$q, first:1){ edges { node { id name lottieUrl } } } }","variables":{"q":"loading"}}'

なお、画風によっては検索結果に偏りがあります。たとえば白黒の線画キャラクターのような素材は LottieFiles の検索では拾いにくく、用途によっては前述の IconScout のような別のサイトの方が画風がそろっている、ということもあります。

AIでLottieを生成する

「探す」だけでなく「作る」側にも、AI を使う選択肢が出てきています。コーディングエージェント向けに、Lottie を生成するスキルが公開されており、たとえば diffusionstudio/lottie は「Claude Code や Codex で本番向けの Lottie を生成する」ためのスキルとして配布されています（diffusionstudio/lottie（GitHub））。LottieFiles 自身も、タイミングやイージングといったモーション設計の原則を AI エージェントに教える motion-design-skill を公開しています（LottieFiles/motion-design-skill（GitHub））。現状はモーショングラフィックス寄りで、複雑なキャラクターの動きをどこまで作れるかは用途次第ですが、素材を「探す・加工する」だけだった選択肢に「生成する」が加わりつつあります。

10.注意点・落とし穴

• 「LottieFiles＝Airbnb 運営」ではない：規格が Airbnb 発というだけで、LottieFiles は別の独立企業です。素材サイトの運営主体とライセンスは別々に確認します。
• 素材ごとにライセンスが違う：無料でも、Lottie Simple License 前提のものと、クレジット表記が必要なもの、プレミアムのものが混在します。商用で使う前に必ず確認します。
• プレイヤーによって再現に差が出ることがある：凝ったエフェクトや一部の機能は、再生に使うプレイヤーの対応状況によって見え方が変わる場合があります。仕様 v1.0 で共通化が進んでいますが、本番で使う環境で実際に再生して確認するのが確実です。
• .json と .lottie の対応状況に注意：dotLottie（.lottie）は対応プレイヤーが必要です。手元のプレイヤーがどちらに対応しているかを確認してから形式を選びます。

11.よくある質問（FAQ）

12.まとめ

Lottie は、ベクター図形と動きを記述した JSON ベースのオープンなアニメ形式です。点の集まりではなく設計図を持つため、動画や GIF より軽く、拡大しても綺麗で、再生や色をコードから制御できます。形式には生の Lottie JSON と、画像などを束ねた dotLottie（.lottie）があります。素材は LottieFiles が中心ですが、規格がオープンなので IconScout・MotionElements・Icons8・Lordicon など他のサイトでも手に入ります。無料素材の多くは Lottie Simple License で商用利用でき、クレジット表記も必須ではありませんが、素材ごとの条件は確認しておくと安全です。Web 制作・アプリ・動画のどれでも使える、扱いやすいアニメ素材です。