BLOG

Webサイトにリッチなアニメーションを載せたいけれど、動画だと重すぎるし、GIFだと画質が荒い。そんな悩みを解決するのがLottie（ロッティ）です。Lottieを使用すると、アドビのAfter Effectsで作成した高品質なアニメーションを軽量化してウェブに埋め込むことができます。

2026年現在、弊社サイトのトップページの自社ロゴのアニメーションでもLottieを使用しています。同じアニメーションをmp4やmovで書き出すと2～4MB程度のファイルになってしまいますが、Lottieで書き出すと20KBのJSONファイルと1KBのPNG画像を10枚ほど読み込むだけで済みます。完全にベクターデータで処理できる場合は画像すら必要ありません。

https://a-m-t.co.jp/

今回はAfter Effectsで作成したデータをLottieの形式に変換し、ウェブに埋め込む手順をご紹介します。

はじめに：Lottie（ロッティ）とは？

はじめに、Lottieのおさらいです。Lottieは、After Effectsで作ったアニメーションをJSON形式のテキストデータとして書き出し、Webやアプリで再生する技術です。テキストデータに変換するわけですから、とてつもなく軽量になるというわけです。下記のような特徴から多くのウェブやアプリで採用されています。

• ベクターなので拡大してもボケない（ロゴアニメに最適）
• ファイルサイズが驚くほど軽い
• 背景透過が自由自在

このLottieを使って、After Effectsのアニメーションファイルを軽量な形式に変換し、ウェブに埋め込むところまでやっていきます。

準備するもの

今回準備するものは以下の通りです。After Effects（以下AE）の動画データはサンプルがネット上にもありますのでそれらで試すことも可能です。

• Adobe After Effectsで作成したデータ（.aepファイル）
• Adobe After Effectsのアプリ
• 動画埋め込み先のサーバー環境（もしくは仮想環境）

AEに特化した内容となりますので、別の形式の動画については今回は扱いません。MP4からの変換などは別の機会にご紹介します。

CORS制限に注意する

最近のブラウザはHTMLファイルが自分のパソコン内の別のファイル（JSONファイル）を勝手に読み込むことを「不正な動作」としてブロックしてしまいます。これをCORS制限と呼びます。CORS制限により、本来はローカルで簡単に確認できるはずのものが、一旦サーバーに上げるか、仮想環境を準備しないと正しい挙動を確認できないことがあります。

そのため今回の動作確認の際も、サーバー環境かVS CodeのLive Serverのような仮想環境が必要となります。

Bodymovinプラグインを導入する

AEからLottie（JSON）を書き出すには、AE用の無料のプラグイン「Bodymovin」が必要となります。インストールしていきましょう。

1. Creative Cloudからインストールする

最も簡単なのはAdobe Creative Cloudからインストールする方法です。作業開始前にAfter Effectsのアプリを閉じておきましょう。

Creative Cloudを開き、左メニューから「Stockとマーケット」を選択します。プラグインの一覧が表示されますので、上部の検索窓から「Bodymovin」を検索してください。

候補が表示されます。ピンクのアイコンのBodymovinをクリックします。

Bodymovinのプラグイン情報が表示されます。公開責任者がHernan Torrisi氏となっているものが正しいプラグインです。インストールをクリックします。

OKをクリックして進みます。

プラグインのインストールが始まります。

表示が「インストール済み」に変われば完了です。

2. Adobe Exchangeからインストールする

Adobe Exchangeからインストールすることもできます。Adobe Exchangeはアドビ公式のアプリストア・マーケットプレイスです。こちらはウェブサイトですので直接リンクすることができます。インストール方法はほぼ同じですので省略しますが、下記URLよりインストールすることができます。After Effectsで使う予定Adobeアカウントと同じアカウントでログインしてください。

https://exchange.adobe.com/apps/cc/12557/bodymovin

3. その他のインストール方法

その他にGitHubやaescripts+aepluginsなどのサイトからインストールすることもできます。URLを紹介しておきます。

aescripts+aeplugins
https://aescripts.com/bodymovin/

GitHub
https://github.com/airbnb/lottie-web

Bodymovinを使用してファイルを変換する

それでは変換していきます。準備してあるaepファイルをAfter Effectsで開いてください。

Bodymovingの設定画面を開く

ファイルを開いた状態でメニューから[ウィンドウ]-[エクステンション]-[Bodymovin]を選択します。

エクステンション（プラグインのこと）の中にBodymovinが表示されない場合はプラグインのインストールが失敗している可能性があります。再度インストール状況を確認してください。複数のアカウントを使用している会社などでは、別のアカウントでインストールしていないかを確認してみてください。

Bodymovingの設定を行う

下記のようなウィンドウが開きます。すぐに変換を行いたいところですが、初期状態では[Render]ボタンが非アクティブとなっておりクリックできません。

最初に変換するコンポジションを選択します。今回のサンプルファイルでは「AMTロゴ_フルセットデータ」と「四角ロゴ」のコンポジションがあり、前者のみ変換したいので「AMTロゴ_フルセットデータ」を選択します。

選択状態となりました。続いて右側の三点メニューをクリックします。

保存先を選択します。指定したフォルダに data.json というJSONファイルと画像一式が書き出されます。デフォルトのファイル名は変更可能です。目的のフォルダを開いた状態で[保存]をクリックします。キャプチャはWindowsの場合です。今回はドキュメントフォルダを選択します。

保存先に同名ファイルがすでにある場合にはこの時点で上書きの可否を聞かれます。今回は[はい]で先に進みます

保存先が確定すると初めて[Render]ボタンがアクティブとなります。通常はこのまま変換を開始しても構いませんが、今回は[Settings]から設定内容を確認してみましょう。「AMTロゴ_フルセットデータ」の横にある歯車のアイコンをクリックします。

設定画面が開きました。初期状態で[Glyphs]と[Standard]にチェックが入っているはずです。Glyhsはヒエログリフなどのグリフですね。通常は初期状態のままで問題ありません。今回は加えて[Demo]を選択してみます。Demoのパネルをクリックします。

Demoが選択状態となり、[Background Color]が選択できるようになります。Demoにチェックを入れた状態でレンダリングを行うと、Jsonファイルとは別にデモ用のhtmlファイルを書き出すことができます。あくまでデモ用のファイルではありますが、ブラウザですぐに動きを確認できるため、今回はあえてチェックしてみます。[Background Color]を選択します。

下記のように背景色を設定できます。これはHTMLの背景色のことです。今回のaepファイルは白ベースのため背景色を#000000 の黒に設定しておきます。[Save]をクリックして保存＆終了します。

レンダリングを行う

準備ができましたのでレンダリングを行います。[Render]ボタンをクリックします。

レンダリングが始まります。終了するとボタンが[Done]に変わりますのでクリックします。

保存先のフォルダを確認します。data.jsonファイルと demoフォルダとimagesフォルダができていることがわかります。先にdemoを確認してみます。

demoフォルダを確認する

demoフォルダを開いてみます。data.html と imagesフォルダができています。試しにindex.html をブラウザで開いてみましょう。

問題なく書き出せているようです。このような白いオブジェクトのアニメーションでしたので、さきほどの設定で背景を黒にしたというわけです。

imagesフォルダの中身も確認してみましょう。12枚のPNG画像が作られています。1KBや2KBの非常に軽量なファイルになっていることが確認できます。

今回のようなテキストベースのアニメーションの場合、aepファイルの作り方によっては画像を一切作成せずに完全にテキストデータのみで処理できることもありますが、今回は画像を伴うレンダリングとして進めます。

data.jsonファイルを確認する

本体のdata.jsonファイルを確認してみます。VS Codeで開いてみます。画像を読み込んで制御していることがなんとなく読み取れるかと思います。

data.jsonのimagesフォルダを確認します。さきほどは/demo/imagesの中身を確認しましたが、今回はdata.jsonファイルがある階層のimagesフォルダになります。中身はさきほどと同じであることが確認できます。

それもそのはずで、さきほどのdemoフォルダのhtmlは今回作成したdata.jsonファイルを埋め込んだhtmlをサンプルとして作ってくれているに過ぎません。そのため動きをすぐに確認したい場合はdemoも書き出して置くと便利です。

ウェブサイトにアニメーションを埋め込む

いよいよウェブサイトに埋め込んでいきます。

ローカル環境での準備

テスト用のフォルダを準備してください。先にフォルダ構成例を示します。今回は下記のような構成でテストを行います。さきほど作成した data.json をルートに、書き出しした画像一式はルートの/images に格納します。

テスト用フォルダのルートに test.html ファイルを作成します。下記は一例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottie アニメーション確認テスト</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
    <style>
        /* ページ全体の背景を黒に設定 */
        body {
            background-color: #000000;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 画面中央に表示させるため */
            overflow: hidden; /* スクロールバーを消す */
        }

        /* Lottieを表示するコンテナのサイズ指定 */
        #lottie-container {
            width: 80%;      /* 画面の8割の幅で表示 */
            max-width: 600px; /* 大きくなりすぎないよう制限 */
            aspect-ratio: 16 / 9; /* AEのコンポ比率に合わせる（適宜調整してください） */
        }
    </style>
</head>
<body>

    <div id="lottie-container"></div>

    <script>
        const animation = lottie.loadAnimation({
            container: document.getElementById('lottie-container'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'data.json',
            // ↓この1行を追加してください
            assetsPath: 'images/' 
        });
    </script>
</body>
</html>

冒頭のscriptタグでLottieのCDNを読み込み、後半の<script></script>の部分で今回作成したdata.jsonファイルを読み込んでいます。

最重要である data.json および imagesフォルダは下記でパスを指定しています。異なる構成でテストする場合は適宜書き換えてください。

    <script>
        const animation = lottie.loadAnimation({
            container: document.getElementById('lottie-container'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'data.json', /* data.jsonファイルのパスをここで指定
            // ↓この1行を追加してください
            assetsPath: 'images/'  /* imagesフォルダのパスをここで指定
        });
    </script>

サーバーでの動作確認

test.htmlをブラウザに放り込めば動作テストできそうなものですが、前述したCORS制限により、多くの環境ではローカルのまま確認はできません。Vite / React / Dockerなどホットリロード付きのローカル環境があれば、そちらで確認すればOKです。

上記のような環境を用意していない場合は、ローカルで準備したファイル群をサーバーにアップして動作確認を行います。

WordPressに組み込む場合にはLocalで仮想環境を構築する

現実問題として、Lottieの動画を組み込む先がhtmlファイルであることの方が少ないかと思います。WordPerssのphpファイルに組み込む場合にはLocal＋WordPressでローカル環境を作っておけば、今回のような動作テストも簡単に行えます。

Localの使用方法については以前に記事にしていますので参考にしてみてください。

Lottieは誰が作った？

今やWebアニメーションのスタンダードとなったLottieですが、これを開発したのは意外にもWeb制作会社ではなく、あのAirbnbのエンジニアチームです。といっても国内ではピンと来ない方も多いかもしれません。

世界最大の民泊プラットフォーム「Airbnb」

エアビーアンドビーと読みます。Airbnbといえば「民泊サイト」の先駆者。世界中で宿泊施設や体験を提供しており、米国ではもはや「旅行の際の当たり前の選択肢」として不動の地位を築いています。日本でも、インバウンド需要の高まりとともに、地方活性化や新しい旅の形を支えるインフラとして広く展開されています。

https://www.airbnb.jp/

なぜAirbnbがアニメーション技術を？

彼らがLottieを開発した理由は、非常にシンプルかつ切実なものでした。

世界中で使われる彼らのアプリを、「どの国でも、どんなに通信環境が悪い場所でも、最高のデザインで届けたい」と考えたとき、従来の動画やGIFではファイルサイズが重すぎたのです。そこで彼らは、After Effectsのデータを「軽量なコード（JSON）」に変換し、アプリ上で再現する仕組みをオープンソースとして公開しました。

一企業の課題から生まれたこの技術は、今や世界中のクリエイターが愛用する、Webの表現を自由にするツールとなったのです。

https://lottiefiles.com/

まとめ：Webアニメーションの新機軸「Lottie」で一歩先のサイト制作を

After Effectsで作ったアニメーションを、魔法のように軽く、美しくWebサイトに実装できる「Lottie」。 これまでの動画やGIFによる実装と比べると、その差は歴然です。最後に、なぜ今Lottieが選ばれているのか、優位性についてまとめます。

1. PageSpeed Insights スコアへの貢献

現代のWeb制作において、ページの読み込み速度はSEOに直結する重要な指標です。今回の例では画像ありのものを使用しましたが、AFの作り方次第では完全にシェイプとして扱えるため、その差はより大きくなります。HTTPリクエストを削減できるため、GoogleのPageSpeed Insightsでのスコア改善に大きく貢献します。

2. 「ボケない」ベクタークオリティ

MP4の動画は容量がネックとなり、アニメーションGIFでは解像度が問題となります。Lottieは数学的な「点と線」のデータ（ベクター形式）なので、どんなに拡大しても、どれだけ高精細なディスプレイで見ても、常にロゴの輪郭はくっきりとしたままです。今回のように画像を伴う場合でも、画像そのものをPNGからSVGに差し替えてしまえば、クオリティは担保されます。

3. 自由自在なコントロール

動画やGIFは「ただ流すだけ」になりがちですが、Lottieはプログラム（JavaScript）と親和性が高いため、以下のような高度な演出も可能です。

• 背景の完全透過（黒背景でも白背景でも、なじませるのが簡単）
• ホバー（マウスを乗せた時）だけ動かす
• スクロールに合わせてアニメーションを進める

ぜひ、今回ご紹介した手順で、Lottieをサイトに組み込んでみてください。