Lottie アニメーションとは

Adobe After Effects で作ったベクターアニメーションを JSON 形式で書き出し、軽量な専用プレイヤーで再生する仕組み。

概要

Lottie（ロッティー）は、Adobe After Effects で作ったアニメーションを「Bodymovin」というプラグインで JSON ファイルに書き出し、 lottie-web や dotLottie といった専用のプレイヤーで再生する仕組みです。動画ファイルと違って拡大してもぼやけず、ファイルサイズも軽いままアニメーションを再生できるため、ローディングアイコンやオンボーディング画面の演出でよく使われます。このサイトのデモは外部ライブラリを読み込まない方針のため、CSS と SVG だけで作った簡易的なループアニメーションで代用しています。

別名

表記ゆれ：Lottie、JSON アニメーション

AI への伝え方

「Lottie アニメーションを再生できるようにして」と伝えると、lottie-web（JavaScript ライブラリ）や <lottie-player>（Web Components 版）を使った実装を提案してもらえます。アニメーション自体は After Effects と Bodymovin プラグインで作る前提の仕組みなので、「JSON ファイルはデザイナーから受け取る想定」と伝えておくと話がスムーズです。

似たパーツとの違い

「キーフレームアニメーション」は CSS の @keyframes で作る、コードで完結する動きです。Lottie はデザインツール側でアニメーションを作り、そのデータを再生する仕組みである点が大きく異なります。

デモ

CSS/SVG で作った代替のループアニメーション

コード

HTML

<!--
  実際の Lottie では、以下のように外部ライブラリと JSON ファイルを読み込んで再生します
  (このデモではライブラリを読み込まないため、下の CSS/SVG アニメーションで代用しています)。

  1) lottie-web を使う場合:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
    <div id="lottie-target"></div>
    <script>
      lottie.loadAnimation({
        container: document.getElementById("lottie-target"),
        path: "/animations/example.json",
        loop: true,
        autoplay: true
      });
    </script>

  2) dotLottie の Web Component を使う場合:
    <script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0/dist/dotlottie-wc.js"></script>
    <lottie-player src="/animations/example.lottie" autoplay loop></lottie-player>
-->
<div class="lottie-demo">
  <svg class="lottie-demo__icon" viewBox="0 0 100 100" width="100" height="100" aria-hidden="true">
    <circle class="lottie-demo__ring" cx="50" cy="50" r="34" fill="none" stroke="#0017c1" stroke-width="8"
      stroke-linecap="round" stroke-dasharray="160 214" />
  </svg>
  <p>CSS/SVG で作った代替のループアニメーション</p>
</div>

CSS

.lottie-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  font-family: sans-serif;
  color: #666666;
  font-size: 13px;
  text-align: center;
}

.lottie-demo__ring {
  transform-origin: center;
  animation: lottie-demo-spin 1.2s linear infinite;
}

@keyframes lottie-demo-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lottie-demo__ring {
    animation: none;
  }
}