AfterEffectsで作ったアニメーションをWebで使う方法は複数ある。LottieはJSONを使うが、SVGを直接アニメーションさせる方法もある。この記事では、AEからSVGアニメーションを書き出すアプローチと、GSAPとの連携まで解説する。
AEからWebへの書き出し：3つの方法の比較
| 方法 | ファイル形式 | 特徴 | 適した用途 |
|---|---|---|---|
| Bodymovin（Lottie） | JSON | 最も普及・ライブラリ豊富 | UIアニメーション全般 |
| Lottie SVG | SVG+JS | SVGとして埋め込める | シンプルなロゴアニメ |
| CSS/SVGアニメーション書き出し | SVG+CSS | 軽量・依存なし | シンプルな繰り返しアニメ |
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
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が対応していないエクスプレッションを使っている場合は事前に確認・修正が必要になる。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。