【保存版】「なんかUIが地味…」を解決するLottie入門＋無料素材サイト7選

Last updated at 2026-04-30Posted at 2026-04-30

はじめに

ウェブページを開発していると、こんな風に感じたことはありませんか？

「同じようにCSSを書いているのに、なんで他のサイトは見た瞬間から心地よくて、自分が作った画面はどうにもつまらなく見えるんだろう、、、」

何かすごい技術を使っているのかと思いきや、実はそうでもないんです。あの「スムーズにオシャレな動き」の正体は、たいていの場合 Lottie です。

たとえば、こんな感じのアニメーションです

この記事では、

そもそも Lottie って何なの？
2026年現在の公式推奨の dotLottie でどう使うの？
無料で使えるおすすめのアニメーション配布サイト

をまとめてご紹介します。コピペレベルで「ちょっと良い感じ」のUIに仕上げられるので、ぜひ最後まで読んでいただけると嬉しいです。

Lottie ってそもそも何？

Lottie は フロントエンドのフレームワークではなく、アニメーションのファイルフォーマットと再生のしくみ のことです。

ざっくり言うと、こんな流れになっています。

デザイナーが After Effects でアニメーションを作る
それを JSON ファイル として書き出す
フロントエンドやアプリ側は、Lottie プレーヤーで JSON を読み込んで再生するだけ

GIF や動画と比べたときのメリットも分かりやすいです。

ファイルサイズが小さく軽い
ベクターアニメーションなので、拡大しても画質が落ちない
コードから再生・停止・ループ・速度・色まで動的に変えられる

要するに「軽くてキレイで、しかもプログラムから自由に制御できる」という仕組みです。

`.json` と `.lottie` の違い

公式サイトが紹介している .lottie形式は、JSONや関連リソースをまとめた ZIP圧縮アーカイブで、複数のアニメーションも1ファイルにまとめられます。従来の .json よりさらに軽量で扱いやすいフォーマットです。
最新のプレーヤーはどちらの形式にも対応しているので、好きな方を選んでください。

`dotlottie-wc` と `dotlottie-web` の違い

パッケージ	種類	こういう場合向け
`dotlottie-web`	コアライブラリ（JavaScript API）	JS/TSから細かく制御したい人。フレームワーク等から使う場合の土台
`dotlottie-wc`	Webコンポーネント（カスタムHTMLタグ）	HTMLに `<dotlottie-wc>` を貼るだけで使いたい人。素のHTML、WordPress、CMSなど

どうやって使うの？

ここからは実装例を紹介していきます。

1. HTML ページで使う（Webコンポーネント版）

一番手軽なのが @lottiefiles/dotlottie-wc を使う方法です。シンプルなLPページなどに最適。

CDN経由でサクッと使う

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Lottie example</title>
  </head>
  <body>
    <div class="container">
      <h1>Lottie Animation</h1>
      <dotlottie-wc
        src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
        style="width: 300px; height: 300px;"
        autoplay
        loop>
      </dotlottie-wc>
    </div>
    <script type="module"
      src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js">
    </script>
  </body>
</html>

これだけで動きます。

イメージとしては、こう捉えるとシンプルです。

<dotlottie-wc> = カスタムHTMLタグ。src にアニメーションファイル（.lottie または .json）を指定するだけ。

よく使う属性も覚えやすいものばかり。

属性	説明
`src`	アニメーションファイルのURL（`.lottie` / `.json`）
`autoplay`	自動再生するかどうか
`loop`	ループ再生するかどうか
`speed`	再生スピード
`mode`	再生モード（`forward` / `reverse` / `bounce` など）

ローディングなどのアニメーションを追加したいだけなら、これだけで十分です。

npm経由で使う場合

ビルド環境がある場合は npm からできます。

npm install @lottiefiles/dotlottie-wc

// エントリーファイルで一度importすれば、HTML側で <dotlottie-wc> が使えるようになります
import '@lottiefiles/dotlottie-wc';

2. JavaScript から細かく制御したい場合

「再生タイミングを完全にコントロールしたい」「フレームワークから使いたい」といった場合は、コアライブラリの @lottiefiles/dotlottie-web を直接使います。

インストール

npm install @lottiefiles/dotlottie-web

基本的な使い方

<canvas id="dotlottie-canvas" style="width: 300px; height: 300px;"></canvas>

import { DotLottie } from '@lottiefiles/dotlottie-web';
 
const dotLottie = new DotLottie({
  autoplay: true,
  loop: true,
  canvas: document.querySelector('#dotlottie-canvas'),
  src: 'https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie',
  // .json ファイルでもOK
});

ポイントは以下の通り。

描画先は <canvas> 要素（裏でWebAssemblyを使って高速描画してくれます）
src には .lottie または .json のURLを指定
戻り値の dotLottie インスタンスで自由に制御できる

再生コントロール

GIF と比べた一番大きなメリットがここです。インスタンスメソッドで好きなタイミングに制御できます。

// 手動で再生
dotLottie.play();
 
// 一時停止
dotLottie.pause();
 
// 停止
dotLottie.stop();
 
// 特定フレームへジャンプ
dotLottie.setFrame(30);
 
// 再生スピードを変える
dotLottie.setSpeed(1.5);

これを使えば、たとえばこんなことが普通にできます。

フォーム送信が成功したタイミングでアニメーションを再生する
API のレスポンスが返ってきてから動きを表示する
ステータスごとに別のアニメーションに切り替える

3. Vue プロジェクトで使う（公式コンポーネント）

Vue では公式の @lottiefiles/dotlottie-vue を使うのが一番楽です。

インストール

npm install @lottiefiles/dotlottie-vue

コンポーネントで使う

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
</script>
 
<template>
  <DotLottieVue
    style="height: 300px; width: 300px"
    src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie"
    autoplay
    loop
  />
</template>

これだけで、コンポーネントがマウントされたタイミングで自動的にアニメーションが流れます。

イベントを制御する

getDotLottieInstance() で内部のインスタンスを取り出せば、再生イベントなどを制御できます。

<script setup>
import { onMounted, ref } from 'vue';
import { DotLottieVue } from '@lottiefiles/dotlottie-vue';
 
const playerRef = ref(null);
 
onMounted(() => {
  if (playerRef.value) {
    const dotLottie = playerRef.value.getDotLottieInstance();
 
    dotLottie.addEventListener('complete', () => {
      console.log('アニメーション完了！');
    });
 
    dotLottie.addEventListener('frame', ({ currentFrame }) => {
      console.log('現在のフレーム:', currentFrame);
    });
  }
});
</script>
 
<template>
  <DotLottieVue
    ref="playerRef"
    src="https://path-to-lottie.lottie"
    autoplay
    loop
  />
</template>

主なイベントは load / play / pause / complete / loop / frame あたりを覚えておけばだいたい使えます。

無料で使えるLottie配布サイト7選

正直、開発者として、一からアニメーションを制作するのは手間もコストもかかります。ありがたいことに、ネット上には無料で使える Lottie アニメーションがたくさんあります。日常的な用途には、以下のサイトで大体カバーできます。

1. LottieFiles（公式・まずはここ）

Lottie 公式のプラットフォームです。
無料アニメーションが豊富で、オンラインでプレビューしたり色を変更したりも可能。ダウンロードすればそのまま標準的なJSON / .lottie ファイルが手に入ります。

🔗 https://lottiefiles.com/

2. IconScout

🔗 https://iconscout.com/

3. Storyset（Freepik 提供）

ブラウザ上で直接編集できるイラスト & Lottieアニメーションを提供しています。色を変えたり要素を入れ替えたりしてからエクスポートできるので、デザインに自信がない人でも「ちゃんとカスタムしたっぽい」雰囲気を出せます。

🔗 https://storyset.com/

4. LottieFlow

Web向けのアニメーションが中心です。

🔗 https://finsweet.com/lottieflow

まとめ

Lottie が解決してくれるのは、結局のところ 「ページの体験」 の問題だと思っています。
複雑なアニメーションロジックを書けなくても体験を向上できるのは何よりです。
「動きが地味でちょっと寂しいな」と感じているページがあれば、ぜひ Lottie を試してみてください。

参考リンク

@lottiefiles/lottie-player や lottie-web は 現在は非推奨（deprecated） で、メンテナンスもされていません。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【保存版】「なんかUIが地味…」を解決するLottie入門 ＋ 無料素材サイト7選

はじめに

Lottie ってそもそも何？

.json と .lottie の違い

dotlottie-wc と dotlottie-web の違い

どうやって使うの？

1. HTML ページで使う（Webコンポーネント版）

CDN経由でサクッと使う

npm経由で使う場合

2. JavaScript から細かく制御したい場合

インストール

基本的な使い方

再生コントロール

3. Vue プロジェクトで使う（公式コンポーネント）

インストール

コンポーネントで使う

イベントを制御する

無料で使えるLottie配布サイト7選

1. LottieFiles（公式・まずはここ）

2. IconScout

3. Storyset（Freepik 提供）

4. LottieFlow

5. Creattie

6. Lordicon

7. Lottielab

まとめ

参考リンク

【保存版】「なんかUIが地味…」を解決するLottie入門＋無料素材サイト7選

`.json` と `.lottie` の違い

`dotlottie-wc` と `dotlottie-web` の違い