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

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

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

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に変換するプラグインです。

インストール手順

1. AfterEffects → ウィンドウ → エクステンション → Bodymovin（未インストールの場合はAdobe Exchange / ZXP Installerから）
2. Bodymovinパネルを開く
3. 書き出したいコンポジションを選択
4. 「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でテキスト・画像をブラウザから動的に差し替える実装方法をご覧ください。

Turkey-tipsのAE×Lottie SaaSサービス

Turkey-tipsでは、AE→Lottie→Webの技術をSaaS OEM提供しています。

• ブラウザからテキスト・色・画像を入力するだけでカスタムアニメーション動画が完成
• API経由での動的動画生成
• 企業ブランドに合わせたカスタムテンプレート開発

これらはAfterEffectsの知識がなくても、AE品質のアニメーションをWebアプリとして提供できる仕組みです。

RemotionとLottieの使い分け

どちらもWebで動画・アニメーションを扱う技術ですが、用途が異なります。

• Lottie：Webページに組み込むUIアニメーション・ローディング・アイコンアニメーション
• Remotion：YouTube・SNS投稿用の動画ファイル生成・量産型コンテンツ

RemotionについてはRemotion完全ガイドをご参照ください。

まとめ

AE→Lottie→Webのワークフローは、デザインの品質とWebの利便性を両立させる強力な手段です。一度テンプレートを作ればデータを差し替えて動的に動画・アニメーションを生成できるため、コンテンツ制作の効率が大幅に上がります。

動画DX全体については動画DX完全ガイドもご参照ください。

---

AE×Lottie×WebのSaaS OEM開発・映像制作依頼はTurkey-tipsへ