Lottieとは何か、なぜ選ばれるのか
サイトに「動き」を入れたいとき、GIFや動画を使うと容量が重くなり、読み込みが遅くなってしまいます。Lottieは、Adobe After Effectsで作ったアニメーションを「bodymovin」というプラグインでJSON形式に書き出し、軽量なJavaScriptライブラリで再生する仕組みです。拡大しても劣化しないベクターベースなので、ロゴの描画アニメーションやローディング表示、アイコンの小さな動き（マイクロインタラクション）といった用途にとても向いています。ファイルサイズも数十KB程度に収まることが多く、画像を何枚も読み込むよりずっと軽くなります。
本記事では、無料素材を探すところから、実際にページへ組み込み、最後に容量を管理するところまでを順番に解説します。
手順1: 無料のLottie素材を探す
最初から自分でアニメーションを作る必要はありません。まずは無料素材サイトを使ってみましょう。
- LottieFiles: 最大手の素材サイトで、検索窓に「loading」「success」「arrow」など欲しい動きのキーワードを入れると候補が一覧表示されます。プレビューで動きを確認し、ライセンス表記（商用利用可かどうか）を必ず確認してから「Download Lottie JSON」でJSONファイルを保存します。
- 探すときのコツは、具体的な動詞で検索することです。「ローディング」だけでなく「ドット ローディング」「チェックマーク 完了」のように絞り込むと、サイトのトーンに合う素材が見つかりやすくなります。
- 色を自サイトに合わせたい場合は、LottieFiles上の簡易エディタで配色を変更してから書き出せる素材もあります。コードを一切書かずに色だけ変えられるので、デザインの統一感を保ちやすいです。
手順2: ページにライブラリを読み込む
次に、JSONを再生するためのライブラリを読み込みます。代表的なのは軽量なlottie-webです。CDN経由で読み込む場合は、<script>タグを1行追加するだけで準備が整います。
再生用の土台として、HTML側に空の<div>を1つ用意します。このdivが、アニメーションが描画される「舞台」になります。サイズはCSSで指定し、幅と高さを決めておくと、読み込み中にレイアウトが崩れるのを防げます。
手順3: アニメーションを初期化する
ライブラリの読み込みが終わったら、JavaScriptで初期化します。指定するポイントは次の4つです。
- container: さきほど用意した
divの要素 - renderer: 通常は
svgを指定します（くっきり表示され、拡大縮小にも強いため） - loop: 繰り返し再生するかどうか
- autoplay: 読み込み直後に自動で再生を始めるかどうか
パス(path)にJSONファイルの場所を指定すれば、ページを開いたときにそのアニメーションが動き出します。ボタンを押したときだけ再生したい場合は、autoplayをfalseにしておき、クリックイベントの中で再生命令を呼び出す形にすると、ユーザーの操作に合わせた自然な動きになります。
手順4: 表示タイミングを調整する
すべてのアニメーションを読み込み直後に動かしてしまうと、画面がせわしなく見えてしまいます。実際の現場では、次のような使い分けがよく行われます。
- ページ最上部のロゴや見出しは、読み込み直後に短く再生して「入り」の印象を作る
- カードやアイコンは、スクロールして画面に入ってきたタイミングで再生を始める
- ボタンのアイコンは、マウスを乗せたときだけ再生する（ホバー時に再生、離れたら最初のフレームへ戻す）
スクロール連動で再生したい場合は、要素が画面内に入ったかどうかを監視する仕組みと組み合わせるのが定番です。画面外にある間は再生を止めておくことで、見えない場所で無駄にアニメーションが動き続けるのも防げます。
実際の見せ方のイメージは、下記のデモでも確認できます。ロゴが線から描かれていくような動きや、アイコンが弾力を持って変化する動きは、Lottieが得意とする領域です。
手順5: ファイル容量を管理する
Lottieは軽量とはいえ、素材によっては数百KBを超えることもあります。特にパスの数が多い複雑なイラストや、長い時間のアニメーションは重くなりがちです。容量を管理するためのチェックポイントは次のとおりです。
1. 使う場所を絞る: ページ内で動かす箇所は多くても2〜3箇所に留め、それ以外は静止画やCSSアニメーションに任せる 2. JSONの中身を確認する: テキストエディタで開き、不要なレイヤーや使っていない画像参照が残っていないか確認する。素材サイトからダウンロードしたものは、編集時の作業用レイヤーが残っていることがある 3. 遅延読み込みを使う: ページ読み込み直後にすべてのJSONを取得せず、画面に近づいたタイミングでfetchするようにすると、初期表示が速くなる 4. 複数アニメーションをまとめて配置するページでは、合計の読み込み量を確認する: 1つ1つは軽くても、積み重なると重くなるため、ページ全体での合計サイズを都度チェックする習慣をつけると安心です
アイコンが並んでそれぞれ少しずつ動くような表現も、容量を気にしながら組めば軽快な印象を保てます。
まとめ
Lottieは「素材を探す→ライブラリを読み込む→初期化する→表示タイミングを整える→容量を管理する」という5つの手順で、誰でも無理なく導入できます。最初は既存の無料素材を1つ試してみて、再生タイミングの違いだけでも体験してみると、自分のサイトに合う使い方のイメージがつかみやすくなります。重くなりがちな動画やGIFの代わりに、軽くて滑らかな動きをページに加える選択肢として、ぜひ検討してみてください。