【Web制作者必見】After Effectsは時代遅れ！？Lottieを使用した超軽量書き出し方法を徹底解説

2026年2月2日

生徒

先生、After Effectsで作ったアニメーションをWebサイトに実装したいんですけど、動画だと重くなってしまいます…何かいい方法はありませんか？

ペン博士

よーく聞くんだぞ。今日はLottieを使った超軽量なアニメーション実装について詳しく解説するぞい！動画の数十分の一のファイルサイズでアニメーションが実装できるんじゃ！

生徒

そんな便利な方法あるんですね！よろしくお願いします！

Webサイトにアニメーションを追加したいとき、GIFや動画ファイルを使うとファイルサイズが大きくなり、ページの読み込み速度が低下してしまいます。そんな課題を解決するのが、Lottie（ロッティ）です。

Lottieを使えば、After Effectsで作成した高品質なアニメーションを、動画の数十分の一のファイルサイズでWebサイトに実装できます。本記事では、Lottieの基本から、ライトウェイトな書き出し方法、最適化テクニック、Web実装まで、実例を交えながら詳しく解説します。

「学習→収入」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

橋本さん
大学在学中にプログラミングに出会い、最初は独学で学ぶも限界を感じ、WithCodeを受講されました。短期集中カリキュラムでプログラミング学習に打ち込んだ結果、見事卒業テストに合格し、案件も獲得。現在はITエンジニアに向けて就職活躍中です

詳しくはこちらの記事をご覧ください。

Lottieとは？

Lottie（ロッティ）は、Airbnbが開発したオープンソースのアニメーションライブラリです。Adobe After Effectsで作成したアニメーションを、JSON形式の軽量データとして書き出し、Web、iOS、Androidなどさまざまなプラットフォームで再生できます。

Lottieの仕組み

Lottieは、After Effectsのアニメーションデータをベクター形式のJSONに変換します。ピクセルベースの動画やGIFと異なり、ベクターデータは数学的な計算で描画されるため、ファイルサイズが圧倒的に小さくなります。

動画（MP4）: 3秒のアニメーション → 約500KB〜2MB
GIF: 3秒のアニメーション → 約300KB〜1MB
Lottie（JSON）: 3秒のアニメーション → 約10KB〜50KB

ファイルサイズの違いは一目瞭然です。Lottieを使えば、ページ読み込み速度を損なわずにリッチなアニメーションを実装できます。

Lottieの特徴

超軽量: 動画やGIFと比べて圧倒的に小さいファイルサイズ
高品質: ベクター形式なので、拡大・縮小しても画質が劣化しない
レスポンシブ: あらゆる画面サイズに対応
インタラクティブ: JavaScriptで再生速度、方向、ループなどを制御可能
クロスプラットフォーム: Web、iOS、Android、Reactなど幅広く対応

Lottieのメリット

1. ページ読み込み速度の改善

Lottieファイルは動画やGIFと比べて90%以上小さいため、ページの読み込み速度が大幅に向上します。これにより、ユーザー体験が改善され、SEOにもプラスの影響を与えます。

2. デザイナーとエンジニアの協業がスムーズ

デザイナーがAfter Effectsで作成したアニメーションを、エンジニアがコードを書かずに実装できます。複雑なアニメーションロジックをデザインツール側で完結させられるため、開発工数が削減されます。

3. あらゆる画面サイズに対応

ベクター形式のため、スマートフォンからデスクトップ、4Kディスプレイまで、どんな解像度でも美しく表示されます。レスポンシブ対応の手間が不要です。

4. アニメーションの動的制御が可能

JavaScriptを使って、再生速度の変更、逆再生、ループ回数の指定、特定フレームへのジャンプなど、柔軟な制御が可能です。ユーザーのアクションに応じたインタラクティブな表現も実現できます。

5. コストパフォーマンスの高さ

ファイルサイズが小さいため、サーバーのストレージコストや帯域幅コストを削減できます。特に、アニメーションを多用するサイトでは大きなコスト削減につながります。

Lottieの書き出し準備

生徒

After EffectsからLottieに書き出すには、何が必要ですか？

ペン博士

Bodymovin（ボディムービン）というプラグインが必要じゃ。無料で使えるぞい！

必要なツール

Adobe After Effects: アニメーション作成ツール
Bodymovinプラグイン: Lottie形式への書き出しプラグイン（無料）
ZXP Installer: プラグインをインストールするツール

Bodymovinプラグインのインストール手順

ステップ1: ZXP Installerのダウンロード

ZXP Installerは、After EffectsやPhotoshopのプラグインをインストールするためのツールです。

公式サイト（https://aescripts.com/learn/zxp-installer/）にアクセス
お使いのOS（Windows/Mac）に応じたバージョンをダウンロード
ダウンロードしたファイルを実行してインストール

ステップ2: Bodymovinのダウンロード

GitHubのBodymovinリポジトリ（https://github.com/airbnb/lottie-web）にアクセス
「build」セクションから最新版のbodymovin.zxpファイルをダウンロード

ステップ3: Bodymovinのインストール

1. ZXP Installerを起動

2. ダウンロードしたbodymovin.zxpファイルをZXP Installerのウィンドウにドラッグ&ドロップ

3. インストール完了のメッセージが表示されたら成功

ステップ4: Bodymovinパネルの表示

1. After Effectsのメニューバーから「ウィンドウ」→「エクステンション」→「Bodymovin」を選択

2. Bodymovinパネルが表示されれば準備完了

After EffectsからLottieへの書き出し手順

生徒

After EffectsからLottieへの書き出しの手順を知りたいです！

ペン博士

うむ。ここでは、After EffectsからLottieへの書き出し手順を解説するぞ！

ステップ1: アニメーションの準備

Lottieに書き出す前に、After Effects上でアニメーションを最適化しておくことが重要です。

レイヤー名を英語にする

Lottieは日本語のレイヤー名に対応していないため、すべてのレイヤー名を英語に変更します。

悪い例:
- 背景レイヤー
- ボタン_アニメーション
- テキスト（日本語）

良い例:
- background_layer
- button_animation
- text_english

シェイプレイヤーを使用する

Lottieはシェイプレイヤーに最適化されています。可能な限り、画像ではなくシェイプレイヤーで作成しましょう。

コンポジションサイズの設定

コンポジションのサイズは、実際に表示するサイズに合わせます。無駄に大きなサイズは避けましょう。

推奨サイズ: 512×512px、1000×1000px、1920×1080pxなど
アスペクト比: 正方形（1:1）または16:9が扱いやすい

ステップ2: Bodymovinでの書き出し

Bodymovinパネルを開く（ウィンドウ → エクステンション → Bodymovin）
書き出したいコンポジションを選択
Bodymovinパネルで「Select」ボタンをクリックし、コンポジションを追加
コンポジション名の横にある「…」ボタンをクリックし、書き出し先フォルダを指定
「Settings」（歯車アイコン）をクリックして、書き出しオプションを設定

「Render」ボタンをクリックして書き出し開始
書き出しが完了すると、指定したフォルダにdata.jsonファイルが生成されます

重要な書き出しオプション

「Glyphs」: テキストレイヤーを使用している場合はチェック
「Hidden」: 非表示レイヤーを含める場合はチェック（通常はオフ推奨）
「Demo」: プレビューHTMLファイルを生成（確認用に便利）
「Split」: 画像を別ファイルとして書き出す（画像使用時）

ライトウェイトな書き出しのコツ

生徒

Lottieファイルをさらに軽量化する方法はありますか？

ペン博士

もちろんじゃ！いくつかの最適化テクニックを使えば、ファイルサイズをさらに削減できるぞい！

1. シェイプレイヤーを優先する

画像を含むLottieファイルは、ファイルサイズが大きくなります。可能な限りシェイプレイヤーで表現しましょう。

データ種類	ファイルサイズ	画質
シェイプのみ	5KB〜30KB	完璧（ベクター）
シェイプ + 画像1枚	50KB〜200KB	良好
複数の画像	200KB〜1MB	普通

2. キーフレームを減らす

キーフレームの数が多いほど、JSONファイルのデータ量が増えます。必要最小限のキーフレームでアニメーションを作成しましょう。

最適化のコツ

イージング（Easy Ease）を活用して、中間キーフレームを削減
直線的な動きは、開始と終了の2つのキーフレームのみで表現
不要なキーフレームは削除

3. レイヤー数を最小限にする

レイヤーの数もファイルサイズに影響します。統合できるレイヤーは統合しましょう。

静止している複数のシェイプは、1つのシェイプレイヤーにまとめる
不要なヌルオブジェクトを削除
ガイドレイヤーは書き出し前に削除

4. シンプルなパスを使用する

複雑なパス（アンカーポイントが多いシェイプ）は、データ量が増えます。可能な限りシンプルなパスで表現しましょう。

パスの最適化方法

Illustratorで作成したパスは、「オブジェクト」→「パス」→「単純化」で最適化
After Effectsで不要なアンカーポイントを削除

5. フレームレートを調整する

フレームレートが高いほど、滑らかなアニメーションになりますが、ファイルサイズも大きくなります。

推奨フレームレート: 30fps（標準）、24fps（軽量）
避けるべき: 60fps（大きすぎる）

6. アニメーションの長さを短くする

アニメーションが長いほど、データ量が増えます。3秒〜5秒程度に収めるのが理想的です。

Lottieの最適化ツール

1. LottieFiles（オンラインツール）

LottieFiles（https://lottiefiles.com/）は、Lottieファイルを最適化できる無料のWebサービスです。

主な機能

Optimize: JSONファイルを自動で最適化し、ファイルサイズを削減
Preview: ブラウザ上でLottieアニメーションをプレビュー
Edit: 色やサイズをオンラインで編集
Share: URLでアニメーションを共有

使い方

LottieFilesにアクセス
書き出したJSONファイルをアップロード
「Optimize」ボタンをクリック
最適化されたファイルをダウンロード

最適化の効果: 平均で20〜40%のファイルサイズ削減が期待できます。

2. lottie-compress（コマンドラインツール）

Node.jsを使った最適化ツールです。複数のファイルを一括で最適化できます。

# インストール
npm install -g lottie-compress

# 使用例
lottie-compress input.json output.json

Lottieの非対応機能と回避策

ペン博士

LottieはすべてのAfter Effectsの機能をサポートしているわけではない。非対応の機能と、その回避策を理解しておくのじゃ！

生徒

はい、わかりました！よろしくお願いします！

非対応機能一覧

機能	対応状況	回避策
グラデーション	部分対応	シンプルなグラデーションのみ使用
画像	対応	ファイルサイズ増加に注意
エフェクト	ほぼ非対応	シェイプレイヤーで代替
3Dレイヤー	非対応	2Dで表現を工夫
調整レイヤー	非対応	個別のレイヤーで調整
トラックマット	対応	そのまま使用可能
ブレンドモード	部分対応	標準的なモードのみ使用

よくある問題と解決法

問題1: グラデーションが正しく表示されない

原因: 複雑なグラデーション（3色以上、放射状など）は正しく変換されない場合があります。

解決法:

2色のシンプルな線形グラデーションを使用
グラデーションを画像として書き出す（ただしファイルサイズ増加）
複数のシェイプレイヤーを重ねてグラデーション効果を再現

問題2: エフェクトが反映されない

原因: After Effectsのエフェクト（ぼかし、グローなど）はLottieに変換されません。

解決法:

エフェクトの代わりに、シェイプレイヤーで同様の効果を作成
CSSやJavaScriptで同等のエフェクトを実装

問題3: テキストが表示されない

原因: 使用しているフォントがシステムにインストールされていない。

解決法:

Bodymovinの設定で「Glyphs」オプションをオンにする（フォントをベクター化）
テキストをシェイプに変換（右クリック → 「シェイプを作成」）

WebサイトへのLottie実装方法

生徒

Lottieの具体的な実装方法を知りたいです！

ペン博士

いい心がけじゃ！ここでは、WebサイトへのLottie実装方法を解説するぞ！

方法1: lottie-webライブラリを使用（推奨）

lottie-webは、Airbnbが公式に提供するJavaScriptライブラリです。

HTMLとJavaScriptの実装例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lottie Animation</title>
  <style>
    #lottie-container {
      width: 400px;
      height: 400px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div id="lottie-container"></div>

  <!-- lottie-webライブラリを読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

  <script>
    // Lottieアニメーションを読み込み
    const animation = lottie.loadAnimation({
      container: document.getElementById('lottie-container'), // アニメーションを表示する要素
      renderer: 'svg', // レンダラーの種類（svg、canvas、htmlから選択）
      loop: true, // ループ再生
      autoplay: true, // 自動再生
      path: 'data.json' // JSONファイルのパス
    });
  </script>
</body>
</html>

コード解説

container: アニメーションを表示するHTML要素
renderer: svg（推奨）、canvas、htmlから選択
loop: trueでループ再生、falseで1回のみ再生
autoplay: trueで自動再生、falseで手動再生
path: JSONファイルのパス（相対パスまたは絶対パス）

方法2: LottieFiles Player（より簡単）

LottieFiles Playerを使えば、1行のHTMLタグでLottieアニメーションを実装できます。

<!-- LottieFiles Playerを読み込み -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<!-- アニメーションを表示 -->
<lottie-player
  src="data.json"
  background="transparent"
  speed="1"
  style="width: 400px; height: 400px;"
  loop
  autoplay
></lottie-player>

属性の説明

src: JSONファイルのパス
background: 背景色（transparentで透明）
speed: 再生速度（1が標準、2で2倍速）
loop: ループ再生を有効化
autoplay: 自動再生を有効化

アニメーションの動的制御

JavaScriptを使って、アニメーションを動的に制御できます。

// アニメーションを一時停止
animation.pause();

// アニメーションを再生
animation.play();

// アニメーションを停止
animation.stop();

// 特定のフレームにジャンプ
animation.goToAndStop(50, true); // 50フレーム目で停止

// 再生速度を変更
animation.setSpeed(2); // 2倍速

// 再生方向を変更
animation.setDirection(-1); // 逆再生

実務での活用例

生徒

Lottieはどんな活用例があるのですか？

ペン博士

良い質問じゃ！ここでは、実務の主な4つの活用例を紹介するぞ！

1. ローディングアニメーション

ページ読み込み中に表示するローディングアニメーションは、Lottieの最も一般的な用途です。

引用元 : LottieFiles ページローディングアニメーション

2. ヒーローセクションのアニメーション

ファーストビューに配置するメインビジュアルとして、Lottieアニメーションを使用できます。

引用元 : LottieFiles ヒーロー・セクションアニメーション

3. マイクロインタラクション

ボタンのホバーエフェクトや、フォーム送信の成功通知など、ユーザーアクションに応じた小さなアニメーションを実装できます。

引用元 : LottieFiles マイクロインタラクションアニメーション

4. データ可視化

統計データやグラフをアニメーション化し、視覚的に分かりやすく表現できます。

引用元 : LottieFiles データの可視化と分析アニメーションパック

トラブルシューティング

生徒

Lottieを実装するにあたってトラブルシューティングのことも知りたいです！

ペン博士

うむ。ここでは、主なトラブルシューティングを3つ紹介するぞい！

問題1: アニメーションが表示されない

原因と解決法:

JSONファイルのパスが間違っている → パスを確認
lottie-webライブラリが読み込まれていない → scriptタグを確認
container要素のサイズが0 → CSSでサイズを指定

問題2: アニメーションがカクカクする

原因と解決法:

JSONファイルが大きすぎる → 最適化ツールで圧縮
レンダラーの選択ミス → svgをcanvasに変更
複数のアニメーションが同時再生 → 再生タイミングをずらす

問題3: モバイルで表示が崩れる

原因と解決法:

サイズが固定されている → max-width: 100%でレスポンシブ対応
アスペクト比が保たれていない → CSSでaspect-ratioを指定

#lottie-container {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1; /* 正方形を維持 */
}

生徒

Lottieって、こんなに簡単に軽量なアニメーションが実装できるんですね！早速After Effectsで作ったアニメーションを書き出してみます！

ペン博士

その通りじゃ！Lottieは動画やGIFと比べて圧倒的に軽量で、ユーザー体験を損なわずにリッチなアニメーションを実装できるんじゃ。まずはシンプルなアニメーションから始めて、徐々に複雑な表現に挑戦するんじゃぞ！

生徒

はい！ポートフォリオサイトにLottieアニメーションを実装して、デザインスキルをアピールします！ありがとうございました！

まとめ

本記事では、After EffectsからLottieへのライトウェイト書き出し方法について、実装例を交えながら詳しく解説しました。

重要なポイントは以下の通りです。

・Lottieの特徴：動画の数十分の一のファイルサイズで、高品質なアニメーションを実装可能
・書き出しツール：Bodymovinプラグインを使ってAfter EffectsからJSON形式に変換
・軽量化のコツ：シェイプレイヤーの優先、キーフレームの削減、レイヤー数の最小化が重要
・最適化ツール：LottieFilesやlottie-compressでさらにファイルサイズを削減
・非対応機能：エフェクトや3Dレイヤーは使えないため、シェイプレイヤーで代替
・Web実装：lottie-webライブラリまたはLottieFiles Playerで簡単に実装

WithCodeで学んだHTML・CSS・JavaScriptの基礎知識に、Lottieの技術を組み合わせれば、どんな複雑なアニメーションでも軽量に実装できます。

Lottieは、ページ速度を犠牲にせずに、ユーザーに驚きと感動を与えられる強力な技術です。ぜひ実際のプロジェクトで活用し、印象的なWebサイトを作成してください。

WithCodeを体験できる初級コース公開中！

初級コース（¥49,800）が完全無料に！

期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →

この記事を書いた人

WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

【Web制作者必見】After Effectsは時代遅れ！？Lottieを使用した超軽量書き出し方法を徹底解説

Lottieとは？

Lottieの仕組み

Lottieの特徴

Lottieのメリット

1. ページ読み込み速度の改善

2. デザイナーとエンジニアの協業がスムーズ

3. あらゆる画面サイズに対応

4. アニメーションの動的制御が可能

5. コストパフォーマンスの高さ

Lottieの書き出し準備

必要なツール

Bodymovinプラグインのインストール手順

ステップ1: ZXP Installerのダウンロード

ステップ2: Bodymovinのダウンロード

ステップ3: Bodymovinのインストール

ステップ4: Bodymovinパネルの表示

After EffectsからLottieへの書き出し手順

ステップ1: アニメーションの準備

レイヤー名を英語にする

シェイプレイヤーを使用する

コンポジションサイズの設定

ステップ2: Bodymovinでの書き出し

重要な書き出しオプション

ライトウェイトな書き出しのコツ

1. シェイプレイヤーを優先する

2. キーフレームを減らす

最適化のコツ

3. レイヤー数を最小限にする

4. シンプルなパスを使用する

パスの最適化方法

5. フレームレートを調整する

6. アニメーションの長さを短くする

Lottieの最適化ツール

1. LottieFiles（オンラインツール）

主な機能

使い方

2. lottie-compress（コマンドラインツール）

Lottieの非対応機能と回避策

非対応機能一覧

よくある問題と解決法

問題1: グラデーションが正しく表示されない

問題2: エフェクトが反映されない

問題3: テキストが表示されない

WebサイトへのLottie実装方法

方法1: lottie-webライブラリを使用（推奨）

HTMLとJavaScriptの実装例

コード解説

方法2: LottieFiles Player（より簡単）

属性の説明

アニメーションの動的制御

実務での活用例

1. ローディングアニメーション

2. ヒーローセクションのアニメーション

3. マイクロインタラクション

4. データ可視化

トラブルシューティング

問題1: アニメーションが表示されない

問題2: アニメーションがカクカクする

問題3: モバイルで表示が崩れる

まとめ

WithCodeを体験できる初級コース公開中！

初級コース（¥49,800）が完全無料に！

この記事を書いた人

関連記事

– service –WithCodeの運営サービス