【完全ガイド】AfterEffects×Lottie×Web：AEアニメーションをWebで動かす全手法

AfterEffectsで作った美しいアニメーションを、ブラウザやアプリで動かしたい—その夢を実現するのがAE → Lottie → Webのワークフローです。

このガイドでは、AfterEffectsのアニメーションをLottie形式でWebに実装するまでの全プロセスを解説します。

Lottieとは何か
AE → Lottie → Webの全体フロー
対応しているAEプロパティ
1. 対応している主な機能
2. 対応していない主な機能
Bodymovinのインストールと設定
1. インストール手順
WebへのLottie実装
1. 方法1: lottie-player（もっとも簡単）
2. 方法2: lottie-web（JavaScriptで制御）
動的なデータ差し替え
ターキーのAE×Lottie SaaSサービス
RemotionとLottieの使い分け
まとめ

Lottieとは何か

LottieはAirbnbが開発したオープンソースのアニメーションフォーマットです。AfterEffectsのアニメーションをJSON形式で書き出し、Web・iOS・Androidで再生できます。

Lottieの特徴：

軽量：MP4やGIFより大幅にファイルサイズが小さい
スケーラブル：ベクター形式なので拡大縮小でも画質が劣化しない
動的制御：JavaScriptからテキスト・色・データを動的に変更できる
クロスプラットフォーム：Web・iOS・Android・React Native対応

AE → Lottie → Webの全体フロー

AfterEffects でアニメーション作成
  ↓
Bodymovin（AEプラグイン）でJSONに書き出し
  ↓
LottieFiles でプレビュー・確認
  ↓
Webページに lottie-player または lottie-web で実装
  ↓
（オプション）JavaScriptでデータを動的に差し替え

対応しているAEプロパティ

LottieはAEのすべての機能に対応しているわけではありません。制作前に対応状況を把握しておくことが重要です。

対応している主な機能

シェイプレイヤー（ベジェ曲線）
テキストレイヤー（フォント・サイズ・カラー・アニメーター）
ソリッドレイヤー
トランスフォーム（位置・回転・スケール・不透明度）
イーズイン/イーズアウト（グラフエディター）
マスク・シェイプパス
画像・Precomp（事前にラスタライズ）

対応していない主な機能

3Dレイヤー（2Dに変換が必要）
一部のエフェクト（MotionBlurなど）
グラデーションメッシュ
Camera・Light

Bodymovinのインストールと設定

Bodymovinは、AEアニメーションをLottie JSONに変換するプラグインです。

インストール手順

AfterEffects → ウィンドウ → エクステンション → Bodymovin（未インストールの場合はAdobe Exchange / ZXP Installerから）
Bodymovinパネルを開く
書き出したいコンポジションを選択
「Render」をクリック

詳細な書き出し手順と注意点はAfterEffects→Lottie変換の完全手順で解説しています。

WebへのLottie実装

方法1: lottie-player（もっとも簡単）

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

<!-- 表示 -->
<lottie-player
  src="animation.json"
  background="transparent"
  speed="1"
  loop
  autoplay
  style="width: 400px; height: 400px;"
></lottie-player>

方法2: lottie-web（JavaScriptで制御）

import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('animation'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json',
});

// 任意のタイミングで制御
animation.pause();
animation.play();
animation.goToAndPlay(30, true); // フレーム30から再生
animation.setSpeed(2); // 2倍速

動的なデータ差し替え

Lottieの最大の強みは、JSON内のテキストや画像をJavaScriptから動的に書き換えられることです。

例：ユーザー名をアニメーションに表示する

// LottieのJSONを読み込んでテキストを置換
fetch('animation.json')
  .then(res => res.json())
  .then(data => {
    // テキストレイヤーを探して書き換え
    modifyLottieText(data, 'USERNAME_LAYER', '田中 太郎');
    lottie.loadAnimation({
      container: document.getElementById('anim'),
      animationData: data,
      renderer: 'svg',
      loop: false,
      autoplay: true,
    });
  });

function modifyLottieText(data, layerName, newText) {
  data.layers.forEach(layer => {
    if (layer.nm === layerName && layer.t) {
      layer.t.d.k[0].s.t = newText;
    }
  });
}

テキスト・画像を動的に差し替える実装の詳細はLottie JSONでテキスト・画像をブラウザから動的に差し替える実装方法をご覧ください。