この記事の対象: Lottieアニメーションの導入を検討中のデザイナー・エンジニア
読了時間: 約6分
GIFは重く、CSSアニメーションでは表現力に限界がある——そんな悩みを解決するのがLottieです。After Effectsで作ったアニメーションを軽量なJSON（または.lottie形式）に変換し、Webやアプリにそのまま組み込めます。この記事では、Lottieの基本から具体的な実装コード、2026年時点でのパフォーマンス最適化までを整理します。
Lottieとは
Lottieは、Airbnbが開発したアニメーション技術です。After Effects → JSON（またはdotLottie） → Web/アプリというワークフローでアニメーションを配信します。
内部的にはSVGまたはCanvasでレンダリングされるため、解像度に依存せず、どの画面サイズでも輪郭がにじまずに表示されます。ラスター画像のように拡大でぼやけることがなく、Retinaディスプレイでも劣化しません。
対応範囲はWeb（HTML/CSS/JS）だけでなく、iOS・Android・React Native・Flutterまで及びます。デザイナーがAfter Effectsで1本作れば、プラットフォームをまたいで同じ動きを再現できる点が最大の強みです。
Lottieを使うメリット
| 項目 | 内容 |
|---|---|
| ファイルサイズ | GIFより大幅に軽くなりやすい（内容によって差が出る） |
| 拡大縮小 | ベクターベースで解像度に依存しない |
| 制御性 | スクロール連動・ホバー再生・特定フレーム停止が可能 |
| 横展開 | Web・iOS・Android・React Nativeで同じデータを使い回せる |
| 編集のしやすさ | 色や速度をコード側から後調整できる |
GIFやMP4を埋め込むアニメーションと比べると、「軽くて」「劣化せず」「あとから制御できる」という3点が明確に優位です。ローディングアイコン、成功・エラーのマイクロインタラクション、ヒーローセクションの装飾など、使いどころは多岐にわたります。
Lottieファイルの作り方
After Effects + Bodymovin / LottieFiles Plugin
- After Effectsでアニメーションを作成
- LottieFiles公式のAfter Effectsプラグイン（旧Bodymovin）をインストール
- JSONまたは
.lottie形式でエクスポート
注意点: After Effectsの全機能がLottieに対応しているわけではありません。エクスポート前に対応レイヤー・対応エフェクトをLottieFilesのドキュメントで確認しておくと、書き出し後に「一部の動きだけ再現されない」という手戻りを防げます。
LottieLabで直接作成
ブラウザベースのLottieアニメーション作成ツールです。After Effectsを持っていなくても、Web上で直接ベクターアニメーションを組み立てられます。簡単なマイクロインタラクションであれば、After Effectsを開かずに完結できるケースも増えています。
LottieFilesから素材を使う
LottieFilesは無料・有料のLottieアニメーション素材ライブラリです。ローディング、アイコン、イラストなど素材が豊富に揃っており、そのまま使用できます。フルスクラッチで作る前に、要件に近い素材が無いか探すだけでも制作時間を短縮できます。
作成から組み込みまでは一直線に見えますが、実務でつまずきやすいのは3番目の軽量化の工程です。書き出しただけのJSONをそのまま本番に載せると、ページの表示速度に影響することがあります。
Webへの組み込み方法
lottie-player（Web Component）
最もシンプルな方法です。HTMLタグとして配置するだけでアニメーションが再生されます。
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
src="/animations/loading.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay>
</lottie-player>
属性オプション
– loop: ループ再生
– autoplay: 自動再生
– hover: ホバー時に再生
– speed: 再生速度（1が等速）
– direction: 再生方向（1: 正方向, -1: 逆方向）
実装のポイント: srcにはJSONだけでなく.lottie形式のファイルも直接指定できます。読み込むファイルの拡張子を変えるだけでよく、コード側の書き方は変わりません。
つまずきやすい点: <script>をCDNから読み込む構成にすると、ネットワークの状態によっては初回描画が遅れます。ファーストビューに置く場合はローカルにバンドルするか、後述の遅延読み込みと組み合わせて体感速度を担保してください。
対応ブラウザ: Chrome・Edge・Firefox・Safariの現行バージョンで動作します（Web Componentsベースのため、極端に古いブラウザは非対応）。
lottie-web（JavaScript）
より細かな制御が必要な場合はlottie-webを使用します。
import lottie from 'lottie-web';
const animation = lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg', // 'svg' or 'canvas'
loop: true,
autoplay: false,
path: '/animations/scroll-icon.json',
});
// スクロール連動で再生
window.addEventListener('scroll', () => {
const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
const frame = scrollPercent * animation.totalFrames;
animation.goToAndStop(frame, true);
});
実装のポイント: goToAndStopに特定のフレーム番号を渡すことで、スクロール量に応じてアニメーションを「進める・戻す」ことができます。スクロール連動の実装自体はposition:stickyが効かない原因と直し方と組み合わせて使う場面も多く、追従要素の内側にLottieを置くケースでは両方の挙動を合わせて確認しておくと安全です。
つまずきやすい点: scrollイベントを間引かずに毎回goToAndStopを呼ぶと、フレームレートが落ちる原因になります。実運用ではrequestAnimationFrameでスロットリングするか、Intersection Observerで画面内にあるときだけ更新するのが安全です。
React用ライブラリ
import Lottie from 'lottie-react';
import animationData from './animations/success.json';
function SuccessAnimation() {
return (
<Lottie
animationData={animationData}
loop={false}
style={{ width: 200, height: 200 }}
/>
);
}
実装のポイント: lottie-reactは内部でlottie-webをラップしているため、onCompleteなどのイベントハンドラをpropsとして渡せます。フォーム送信後の成功アニメーションのように「1回再生して止める」用途に向いています。
対応ブラウザ: いずれのライブラリもモダンブラウザの現行バージョンを前提としています。SVGレンダラーを使う場合はSVG自体のブラウザサポートに準じ、主要ブラウザで問題なく動作します。
パフォーマンスの注意点
- ファイルサイズ: 複雑なアニメーションはJSONの容量が大きくなりがちです。サーバー側でgzip圧縮をかけるだけでも転送量は軽減できます。
- dotLottie形式:
.lottie形式（複数のJSONと画像をひとつにまとめた圧縮パッケージ）を使うと、素のJSONに比べて軽量化できます。lottie-playerもlottie-webも.lottieを直接読み込めるため、既存コードの書き換えはほぼ不要です。 - 遅延読み込み: 画面外のアニメーションはIntersection Observerで検知し、要素がビューポートに入ってから読み込み・再生を開始します。画像 遅延読み込みでLCP 改善で扱っている考え方はLottieにもそのまま応用できます。
- SVG vs Canvas: SVGはDOM要素として描画されるため見た目の精度は高い一方、要素数が多いアニメーションではDOM操作のコストが増えます。同一画面に複数のLottieを並べる場合はCanvasレンダラーへの切り替えを検討してください。
SVGレンダラー
- 輪郭がくっきりして高品質
- 1〜2個程度の単発アニメーション向き
- DOM操作のコストがかかる
Canvasレンダラー
- 大量のアニメーションを同時再生しやすい
- 一覧ページのアイコン群などに向く
- テキスト選択やCSSでの個別装飾がしにくい
1ページに1〜2個であればSVG、一覧ページで多数のLottieを同時に動かすならCanvas、という使い分けが基本の考え方です。
ホバーで動くアイコンやボタンの実装は、ホバーアニメーションのCSS実装で紹介しているCSSだけの手法とLottieのどちらで作るかを比較検討する価値があります。単純な拡大・色変化ならCSS、キャラクターが動くような複雑な表現ならLottie、という切り分けが実務では無難です。
よくある質問
LottieとGIFアニメーションはどちらを使うべきですか
単純なループ動画であればGIFでも成立しますが、ファイルサイズと拡大時の画質を考えるとLottieが有利です。特にRetinaディスプレイでの表示や、色・速度をコード側から調整したい場合はLottieを選んでください。逆に実写映像を使いたい場合はLottieでは表現できないため、動画埋め込みを検討します。
Lottieアニメーションが正しく再生されないのはなぜですか
多くはAfter Effects側で使用したエフェクトやレイヤー効果がLottie側で未対応のケースです。エクスポート前にLottieFilesの対応表を確認し、書き出し後は必ずブラウザで実際の再生を目視確認してください。
モバイルでもLottieは軽快に動きますか
.lottie形式での軽量化とCanvasレンダラーの選択、画面外での再生停止を組み合わせれば、モバイル環境でも大きな負荷にはなりにくいです。ただし複雑なベクター形状が多いアニメーションは、モバイルのCPU性能によっては処理が重くなることがあるため、本番投入前に実機で確認することをおすすめします。
LottieファイルはSEOやAEOの評価に影響しますか
Lottie自体はJavaScriptで描画されるビジュアル要素であり、テキストコンテンツを代替するものではないため、検索評価に直接影響することはほとんどありません。ただしページの表示速度（Core Web Vitals）には関わるため、遅延読み込みなどの最適化は行っておくべきです。サイト全体のAI検索対応まで含めて見直したい場合は、AIO対策・LLMO対策で本当にやることは何か【2026年版】もあわせて確認してください。
After Effectsが無くてもLottieアニメーションは作れますか
作れます。LottieLabのようなブラウザベースの作成ツールを使えば、After Effectsを持っていなくてもシンプルなマイクロインタラクションを組み立てられます。より複雑な表現が必要な場合や、既存の素材を流用したい場合はLottieFilesのライブラリから探すのも有効な手段です。
まとめ
LottieアニメーションをWebへ組み込む際のポイントを整理します。
- After Effects → JSON/.lottie → Webのワークフローでリッチなアニメーションを軽量に配信できる
- lottie-player（HTMLタグ）が最もシンプルな導入方法で、
.lottie形式もそのまま読み込める - lottie-web（JS）を使えばスクロール連動やフレーム単位の制御が可能
- LottieFilesやLottieLabを使えばAfter Effectsが無くても素材を用意・作成できる
- dotLottie形式・遅延読み込み・レンダラーの使い分けでパフォーマンスを確保する
動きの表現をCSSだけで足りない場面まで広げたいときは、GSAPで作るリッチなWebアニメーション入門【2026年版・コード付き】やCSSのscroll-snapでカルーセル実装も合わせて検討すると、実装の選択肢が広がります。
