LottieFilesを初めて触ったとき、AfterEffectsのプロジェクトファイルがJSONの塊になっているのを見て「これは使える」と直感した。あれから数年、今ではWebのアニメーション素材として欠かせないリソースになっている。
この記事では、LottieFilesの基本的な使い方から、実務で使える素材の探し方、Webサイトへの実装方法まで解説する。
LottieFilesとは何か
LottieFilesはAirbnbが開発したオープンソースのアニメーション形式「Lottie」を活用したプラットフォームだ。AfterEffectsで作ったアニメーションをBodymovinプラグインでJSON形式に書き出したものがLottieファイルで、LottieFilesはそのJSONアニメーションをアップロード・共有・配布するサービスだ。
特徴は3つ：
- 軽量：GIFの10分の1以下のファイルサイズ
- スケーラブル：ベクターベースなのでどんな解像度でも劣化しない
- インタラクティブ：JavaScriptで再生速度・ループ・停止を自在に制御できる
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
LottieFilesで素材を探す：実務で使える検索のコツ
LottieFilesのライブラリには数十万点のアニメーションがある。全部が使えるわけではないが、コツを押さえると目当ての素材が早く見つかる。
コツ1：英語キーワードで検索する
日本語での検索はヒット数が少ない。「ローディング」より「loading」、「成功」より「success」で検索した方が選択肢が広い。
コツ2：Freeフィルターをかける
商用利用の場合は必ず「Free」フィルターをかける。ライセンスが「Lottie Simple License」のものは商用利用可・帰属不要なので使いやすい。
コツ3：アニメーションをプレビューして「ループ」を確認する
Webに埋め込む場合、ループアニメーションの方が使いやすいことが多い。プレビューを再生して自然にループしているものを選ぶ。
Web実装の方法：lottie-webライブラリ
<!-- CDNで読み込む場合 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<div id="lottie-container" style="width:200px; height:200px;"></div>
<script>
const animation = lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg', // 'canvas' or 'html' も選択可
loop: true,
autoplay: true,
path: '/animations/success.json' // JSONファイルのパス
});
// 速度を変える（1.0が標準速）
animation.setSpeed(1.5);
// 特定フレームで停止
animation.addEventListener('enterFrame', (e) => {
if (e.currentTime >= 60) animation.pause();
});
</script>React実装：lottie-react
npm install lottie-react
import Lottie from 'lottie-react';
import successAnim from './success.json';
export const SuccessIcon = () => (
<Lottie
animationData={successAnim}
loop={false}
style={{width: 120, height: 120}}
onComplete={() => console.log('アニメーション完了')}
/>
);AfterEffectsで作ったアニメーションをLottie化する
既製品のLottieファイルではなく、AfterEffectsで作った独自アニメーションをLottie化する場合の流れだ。Bodymovinの設定で迷う点が多いので、実際のポイントを整理しておく。
- サポートされないAEエフェクト：ブラー系エフェクトのほとんど、3Dレイヤー、ルミナンスマット系は書き出し時に無視される。Lottie化を前提としたアニメーションはシェイプとマスクで作ることが基本
- フレームレート：24fpsで作ると滑らかさが維持されてファイルサイズも抑えられる
- フォント：テキストレイヤーはアウトライン化してからエクスポートする（フォントが埋め込まれないため）
ブライダルテンプレートの一部をLottie化してWebの予約ページに埋め込んだ経験がある。ロゴアニメーションやローディングアニメーションとして活用したが、GIFと比べてページの読み込みが体感で明らかに速くなった。
LottieFilesの有料プラン：必要かどうかの判断基準
LottieFilesには無料プランと有料プランがある。無料プランでも実装機能は十分使える。有料プランが必要になるのは「自作アニメーションを非公開でチームで共有したい」「Lottie Creatorでブラウザ上から直接アニメーションを編集したい」という場合だ。商用プロジェクトなら月額$19のIndividualプランで大半のニーズをカバーできる。
まとめ
LottieFilesは「AfterEffectsとWebの橋渡し」として機能する重要なプラットフォームだ。AEの技術があれば、既製品ライブラリだけでなく独自のアニメーションを自在にWeb展開できる。特にSPA（シングルページアプリケーション）やLPのUX向上に大きく貢献するので、Webクリエイターとの協業案件では必ず提案するようにしている。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。