Webサイト制作やアプリ開発でリッチなアニメーションを使いたいけれど、ファイルサイズやコーディングの難易度が気になる…。そんな方におすすめなのが、Adobe After Effectsで作成したアニメーションをLottie形式で書き出す方法です。

Lottieは、動画編集ツールなどで作成したアニメーションを軽量かつ高品質でWebサイトやアプリへ簡単に埋め込める技術です。視覚的なインパクトを与えつつ、ページの表示速度を損なわないことから、多くのデザイナーや開発者に支持されています。アニメーションを効果的に活用することで、ユーザーの目を引くだけでなく、ブランドイメージの向上やユーザー体験の向上につながります。

本記事では、Adobe After Effectsで作成したアニメーションをLottie形式で書き出す手順から、Webサイトやアプリに使用する方法、注意点までをわかりやすく解説します。
「サイトに動きをつけてトレンド感を演出したい」「デザイン性をもっと高めたい」と感じている方は、ぜひ参考にしてみてください。

Lottieとは？初心者向けに簡単紹介

Lottieは、Adobe After Effectsなどで作成したアニメーションを軽量で高品質なJSON形式のデータとして書き出し、Webサイトやアプリに簡単に埋め込める技術です。特別なコーディングの知識がなくても複雑なアニメーションをそのまま再現できる点が大きな特徴で、自分で動画編集ができるデザイナーにおすすめです。
さらに、SVG（Scalable Vector Graphics）というWebに適したベクターファイル形式をもとに作成するため、拡大縮小しても品質が劣化しないというメリットもあります。

Lottieの基本的な仕組みや、Studioでの活用方法については、以下の記事でも詳しく解説しています。Lottieの基本知識や導入のメリットが理解できるので、Lottieの活用を検討している方にはぜひ参考にしていただきたい内容です。

Lottieとは？Studio×Lottieで魅力的なアニメーションを実現する方法！

Lottieのメリット

Lottieのメリットは、以下の点です。

ファイルサイズが軽いため、ページの表示速度を損なわない
従来のアニメーションファイル形式（GIFやMP4）と比較して、Lottieは非常に軽量です。JSON形式で書き出されたアニメーションはテキストデータで構成されているため、Webサイトでの読み込みが速く、外出先やモバイル環境でも快適に表示されます。
SVGベースで高解像度を実現
JSON形式のLottieアニメーションは、SVGファイルをもとにしたベクターデータのため拡大縮小しても品質が劣化しません。Webサイトやアプリに最適なアニメーション形式といえるでしょう。
多くのツールと連携
Adobe After Effects、Figma、Studioなど多くのツールと連携しているため、デザイナーにとって非常に使いやすいのが特徴です。これらのツールと連携することで、デザイナーがコーディングの知識がなくても高品質なアニメーションを実装できるため、作業効率が大幅に向上します。

弊社での活用事例

平田タイルグループホールディングス株式会社

https://hiratatileg-hd.co.jp/

本件では洗練されたデザイン演出のためにLottieアニメーションを導入しました。ファーストビューやお問い合わせなど、赤いグラデーションの線が動くアニメーション部分で活用しています。サイト全体に動きのある演出を取り入れることにより、ブランドの高級感を引き立てています。

AfterEffectからLottie形式でアニメーションを書き出す方法

Lottieアニメーションの作成には、AfterEffectsのプロジェクトをJSONファイルで書き出す必要があります。この作業には、無料のプラグインBodymovinを使用します。

書き出しに必要なプラグインBodymovinの準備

Bodymovinは、AfterEffectsで作成したアニメーションをLottie対応のJSONファイルに変換するためのプラグインです。これを使うことで、複雑なアニメーションもコード不要でWebサイトやアプリに組み込めます。注意点として、AfterEffectsでデフォルトで実装されていない機能のため、プラグインをインストールする必要があります。

インストール方法はいくつかありますが、本記事では私が行ったGitHubからダウンロードする手順をご紹介します。

1.ZXP Installerをインストールする

まずはじめに、GitHubからダウンロードするにはZXP Installerという外部ツールが必要です。
ZXP Installerとは、AfterEffects用の拡張機能（.zxpファイル）を簡単にインストールできるツールです。

下記リンクから無料でダウンロード・インストールができます！

ZXP Installer

2.GitHubからプラグインをダウンロードする

次にBodymovinの公式リポジトリ（GitHub）から、拡張ファイル（.zxp形式）をダウンロードします。

https://github.com/airbnb/lottie-web/tree/master/build/extension

ページ内の赤枠箇所[bodymovin.zxp]をクリック

ダウンロードボタンをクリックしてファイルを保存

3.ZXP InstallerでBodymovinをインストール

最後に、ZXP Installerを起動し、ダウンロードしたファイルをドラッグ＆ドロップで追加します。インストールが完了すると、AfterEffects内でBodymovinの利用が可能になります。

AfterEffectsを再起動し、[ウィンドウ] → [エクステンション] → [Bodymovin] が表示されているか確認します。正常に表示されていればインストール成功です。

Bodymovinの使い方と書き出し手順

アニメーションを作成したら、AfterEffectsの拡張機能を使うための準備をします。（今回はAfterEffectでのアニメーション作成方法は割愛させていただきます）

[編集]→[環境設定]→[スクリプトとエクスプレッション]から、[スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可]にチェックを入れます。こちらにチェックを入れないと、Bodymovinが表示されていても使えないことがあるため、必ず行いましょう。

準備を終えたら、[ウィンドウ] → [エクステンション] → [Bodymovin] を選択し、パネルを開きます。
パネルを開いたら、以下の手順で書き出しを行います。

①[Selected]にチェックを入れ、歯車マークの[Setting]から設定を編集します。（今回は特に変更していません）
②右側の[...]マークをクリックし、任意の書き出し先を設定してください。
➂最後に[Render]ボタンをクリックしたら、書き出しが完了します。

注意点として、書き出し先を設定しないと[Render]ボタンをクリックしても反応しなかったため、忘れずしっかりと設定するようにしましょう。

書き出したJSONファイルをWebやアプリで使う方法

書き出したJSONファイルをLottieとして簡単に使う方法を紹介します。

まず、Lottie公式サイトを開き、ログインしてください。ログイン後、[ダッシュボードへ]ボタンをクリックします。

ダッシュボードへ移動したら、画面右側にある[Upload animations]ボタンをクリックし、先ほど書き出したJSONファイルをドラッグ＆ドロップで追加します。

追加されたら、[Enable Asset CDN]をオンにし、[Asset link]をコピーすることで、WebサイトにLottieを埋め込むためのコードを取得することができます。取得したコードをHTMLやJavaScriptなどでWebサイトに埋め込むことで、作成したアニメーションを表示させることができます。

これを参考に、ぜひご自身のプロジェクトで試してみてください！

また、LottieをStudioに埋め込む方法はこちらの記事で詳しく解説していますので、興味のある方はご覧ください。

Lottieとは？Studio×Lottieで魅力的なアニメーションを実現する方法！

ちなみに、今回作成したLottieアニメーションはこちらになります。

%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2F%40dotlottie%2Fplayer-component%402.7.12%2Fdist%2Fdotlottie-player.mjs%22%20type%3D%22module%22%3E%3C%2Fscript%3E%0A%3Cdotlottie-player%20src%3D%22https%3A%2F%2Flottie.host%2F4083bb22-b6d0-40b1-bbb4-281cb0191fbb%2F9oFAqknJbT.lottie%22%20background%3D%22transparent%22%20speed%3D%221%22%20style%3D%22width%3A%201005%3B%20height%3A%20auto%22%20loop%20autoplay%3E%3C%2Fdotlottie-player%3E

書き出し時の注意点

AfterEffectsではさまざまな機能やエフェクトを表現できますが、残念ながらLottieに対応していない機能もあります。私が試した表現だと、画像とグラデーション、AfterEffects特有のエフェクトは正しく書き出すことができませんでした。ただ、Lottie CreatorというほかのLottie作成ツールを活用したところ、グラデーションをなんとか書き出すことができたので、対応方法はありそうです。

また、LottieはJSONファイル（JavaScriptというプログラム言語におけるオブジェクトの書き方を元に作られたテキスト形式のデータフォーマット）として書き出されるため、特殊文字や日本語は使わず、レイヤー名を英語に設定しておくことをおすすめします。（AfterEffectsを英語版にすることで、グラデーションを書き出すことができるという記事も見かけたことがありますが、私は上手くできませんでした…）

使いたい機能がサポートされているか、詳しくは公式のサポート表を参考にしてください。

https://airbnb.io/lottie/#/supported-features

まとめ

Adobe After Effectsで作成したアニメーションは、Lottie形式で書き出すことで、軽量かつ高品質で簡単に、Webサイトやアプリに埋め込むことができます。特別なコーディングスキルがなくても、複雑な動きをシンプルに再現できるため、デザイナーにとって非常に使いやすい技術です。

本記事では、Lottieの基本的な仕組みやメリット、AfterEffectsのプラグインを使用した具体的な書き出し手順、注意点について解説しました。

Lottieを活用することで、制作の流れがぐっと効率的になるだけでなく、表現の幅も大きく広がります。デザイナーとしてLottieを使いこなせるようになれば、プロジェクトの表現の幅や魅力がさらに高まり、ユーザーの目を引く印象的なデザインを提供できるようになるでしょう。

本記事が、Lottieを始めるきっかけになったり、新しいアイデアを生むヒントになれば嬉しいです。ぜひ本記事を参考に、ご自身のプロジェクト取り入れてみてください！