AfterEffectsでSVGアニメーションを書き出す方法：Bodymovin・GSAP連携まで

AfterEffectsで作ったアニメーションをWebで使う方法は複数ある。LottieはJSONを使うが、SVGを直接アニメーションさせる方法もある。この記事では、AEからSVGアニメーションを書き出すアプローチと、GSAPとの連携まで解説する。

AEからWebへの書き出し：3つの方法の比較

Bodymovinプラグインでの書き出し手順

1. プラグインのインストール

Adobe Exchange MarketplaceまたはBodymovin GitHubからプラグインをダウンロードし、AEの「ウィンドウ > エクステンション」からインストールする。

2. AEプロジェクトの準備

Lottie書き出しに向くAEのレイヤー構成：

• シェイプレイヤー：最も安定。ほぼすべてのプロパティがサポート
• テキストレイヤー：フォントがWebで使えるものか確認が必要
• ソリッドレイヤー：色とマスクのみ対応
• フッテージ（映像・PNG）：base64でJSONに埋め込まれるためファイルサイズが増大

3. 書き出し設定

// Bodymovinパネルでの設定
- Composition: 書き出すコンポジションを選択
- Destination: 出力先フォルダ
- Options:
  ✅ Glyphs（テキストをシェイプに変換）
  ✅ Hidden Layers（非表示レイヤーを除外）
  ✅ Optimize（不要データを削除）
  □ Assets（外部素材の参照方法）

LottieSVGとしてHTMLに埋め込む

<!-- lottie-web を使った埋め込み -->
<div id="animation-container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const animation = lottie.loadAnimation({
    container: document.getElementById("animation-container"),
    renderer: "svg",  // "svg" | "canvas" | "html"
    loop: true,
    autoplay: true,
    path: "/animations/my-animation.json"
  });
</script>

GSAPとSVGの組み合わせ：AEなしでSVGをアニメート

AEからLottieとして書き出した後、GSAPを使って更に細かいインタラクションを追加できる。

import { gsap } from "gsap";
import lottie from "lottie-web";

// Lottieアニメーション読み込み
const anim = lottie.loadAnimation({
  container: document.getElementById("lottie-container"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "/my-animation.json"
});

// GSAPでスクロール連動
gsap.to(anim, {
  currentFrame: anim.totalFrames - 1,
  ease: "none",
  scrollTrigger: {
    trigger: "#lottie-container",
    start: "top center",
    end: "bottom center",
    scrub: true,
    onUpdate: (self) => {
      anim.goToAndStop(anim.totalFrames * self.progress, true);
    }
  }
});

SVG書き出しでよくある問題と解決策

問題1：フォントが正しく表示されない

Bodymovinの書き出し時に「Glyphs」オプションを有効にする。テキストがシェイプに変換されるためフォント依存がなくなる。ただしファイルサイズが増加する。

問題2：グラデーションが崩れる

ラジアルグラデーションは一部のブラウザで表現が異なることがある。Linearグラデーションまたはソリッドカラーへのフォールバックを検討する。

問題3：エクスプレッションが無視される

Lottieはすべてのエクスプレッションをサポートしていない。wiggle・inPoint・value・timeは対応しているが、複雑なevalを使ったエクスプレッションは書き出しに失敗する。

ファイルサイズ最適化

# lottie-minifyを使った圧縮
npm install -g lottie-minify
lottie-minify input.json output.min.json

# または lottie-optimizerで最適化
# https://lottiefiles.com/lottie-to-gif  （オンラインツール）

AEからSVGを直接書き出す（Lottie経由でない方法）

AEにはSVGの直接書き出しは標準搭載されていないが、プラグイン「Overlord」を使うとAEのシェイプをIllustratorやFigmaに転送でき、そこからSVGとして書き出せる。静的なSVGをGSAPやCSS Animationでアニメートするフローに有効だ。

まとめ

AEからのSVGアニメーション書き出しの現時点のベストプラクティスは「Bodymovin（Lottie JSON）+ lottie-web（SVGレンダラー）+ GSAPでインタラクション追加」の組み合わせだ。Lottieが対応していないエクスプレッションを使っている場合は事前に確認・修正が必要になる。

あわせて読みたい

• AE×Lottie×Web完全ガイド
• Lottieアニメーションのパフォーマンス最適化：ファイルサイズ削減と描画高速化
• After Effectsエクスプレッション入門：動きをコードで制御する基礎から…
• Lottie × React：WebアプリにLottieアニメーションを組み込む…
• 動画DX完全ガイド
• Remotion完全ガイド