はじめに
Lottieファイルを入れるとき、挿入方法に迷ったことはありませんか？
実は方法によって、パフォーマンスや実装のしやすさが変わります。
本記事では、Lottieの挿入パターンを比較しながら整理します。
方法1: lottie-web を使う（標準的・高機能）
最もカスタマイズ性が高く、ポピュラーな方法です。
インストール
pnpm add lottie-web
実装例
<div id="lottie-container"></div>
<script>
import lottie from "lottie-web";
lottie.loadAnimation({
container: document.getElementById("lottie-container"),
renderer: "svg",
loop: true,
autoplay: true,
path: "/animations/your-file.json", // public/ 以下に置く
});
</script>
Lottie ファイル（.json）は public/animations/ に置いてください。
方法2: dotlottie-web を使う（最新・軽量）
最近のトレンドで、従来のJSON形式よりもファイルサイズが小さい .lottie 形式を扱えます。
パフォーマンスを極限まで高めたいプロジェクトにはこちらがおすすめ。
インストール
pnpm add @lottiefiles/dotlottie-web
※ または、もっとシンプルな @dotlottie/player-component をWeb Componentsとして読み込む方法もあります。
実装例
<canvas id="lottie-canvas" style="width: 300px; height: 300px;"></canvas>
<script>
import { DotLottie } from "@lottiefiles/dotlottie-web";
new DotLottie({
canvas: document.getElementById("lottie-canvas"),
src: "/animations/your-file.lottie",
loop: true,
autoplay: true,
});
</script>
徹底比較：どちらを選ぶべき？
| 項目 | lottie-web (JSON) | dotlottie (Web Components) |
|---|---|---|
| 導入コスト | 普通（JSの記述が必要） | 非常に低い（タグを貼るだけ） |
| ファイルサイズ | 普通 | 圧倒的に軽い（推奨） |
| レンダリング | SVG (ベクターで綺麗) | Canvas (高速・低負荷) |
| 制御性 | ◎ スクロール同期・セグメント再生 | 〇 再生・停止・スピード調整 |
| 導入の決め手 | 複雑な演出をしたい時 | LPの表示速度を優先する時 |
導入ワンポイント
-
Lottieファイルは public/ へ
src/ に置くとビルドプロセスが複雑になるため、画像と同様に public/animations/ フォルダを作って管理するのが最もシンプルで安全です。 -
client:visible の活用（React等併用時）
もしReactコンポーネントとして切り出すなら、Astroのアイランドを利用して とすれば、ユーザーの画面に映るまでJSの読み込みを遅延させることができ、Lighthouseのスコアを最大化できます。 -
dotlottie のメリット
dotlottieを採用することは「アセットのスリム化」に直結するので、サービスの強みとして語りやすいですよ。