AIと一緒にアニメーションを作ろう！Text-to-Lottie（diffusionstudio/lottie）で始める、超かんたんモーショングラフィックス入門

目　次

Text-to-LottieのPodcast
はじめに：Webサイトに「動き」をプラスしてみませんか？
第1章：そもそも「Lottie（ロッティー）」ってなに？初心者向けにやさしく解説
1. Lottieが圧倒的に優れている4つの理由
第2章：Text-to-Lottieがもたらす革命！AIエージェントに「アニメーションの魔法」を覚えさせよう
1. エージェント・スキル（Agent Skill）とは？
第3章：かんたん3ステップ！Text-to-Lottieのセットアップと動かし方
第4章：AIから思い通りの動きを引き出す！5つの「プロンプト黄金ルール」
第5章：もっと知りたい！Skottieプレイヤーの秘密と初心者が絶対につまずく「真っ白画面」対策
1. 1. 調整つまみを自在に操る「スロット（Slots）」の仕組み
2. 2. 初心者が絶対につまずく「画面が真っ白に！」を防ぐための注意点
  1. 対策A：形状は必ず「グループ（"ty": "gr"）」という部屋に入れて配置すること
  2. 対策B：カラーコードや255表記を使わず、「0.0〜1.0」で記述すること
第6章：実際にWebサイトやアプリでアニメーションを再生しよう！
1. 1. シンプルなWebサイト（HTML/JavaScript）で使用する場合
2. 2. React Native（スマートフォンアプリ開発）で使用する場合
おわりに：AIはあなた専属の強力なアニメーター
参考資料

Text-to-LottieのPodcast

下記のPodcastは、Geminiで作成しました。

はじめに：Webサイトに「動き」をプラスしてみませんか？

私たちが毎日見ているWebサイトやスマートフォンアプリにおいて、ボタンを押したときのちょっとした反応（マイクロインタラクション）や、ページの読み込み中に表示されるローディングアニメーションは、ユーザーの体験をより豊かにし、楽しさを与えてくれる重要な要素です。洗練された動きが加わるだけで、サイト全体のクオリティや信頼性は劇的に向上します。

しかし、これまでのアニメーション制作には、デザイン専用ソフト（Adobe After Effectsなど）の高度な技術を習得するか、複雑なJavaScriptコードを自力で何行も記述する必要があり、初心者にとっては非常にハードルが高い領域でした。

そのような背景の中、近年大きな注目を集めているのが、生成AIの力を借りて言葉（テキストプロンプト）だけでプロ品質のアニメーションを自動生成する「Text-to-Lottie」というアプローチです。特に、オープンソースのライブラリである「diffusionstudio/lottie」は、AIエージェントと開発者をつなぐ優れた架け橋として大きな話題を呼んでいます。

本記事では、初心者の方にも分かりやすいように、Lottieの基本理念から、Text-to-Lottieを自分のパソコンで動かすためのセットアップ手順、AIから美しい動きを引き出すためのプロンプトのコツ、そして実際にWebサイトで再生するプログラムの記述方法まで、丁寧に詳しく解説します。AIを強力なデザインパートナーに迎え、動きのある魅力的なWebサイト作りを一緒に楽しんでいきましょう。

第1章：そもそも「Lottie（ロッティー）」ってなに？初心者向けにやさしく解説

まずは、本技術の主役である「Lottie（ロッティー）」について説明します。Lottieとは、Adobe After Effectsなどで作成したアニメーションを、テキストベースの「JSON（ジェイソン）」というデータ形式に変換し、モバイルアプリやWebブラウザ上で直接かつ滑らかに描画できるようにしたオープンソースのライブラリ、およびそのファイル形式のことです。

これまでは、アニメーションをWebで表示するためにGIF形式の画像やMP4形式の動画が使われてきましたが、Lottieはそれらに比べて驚くほどの強みを持っています。

Lottieが圧倒的に優れている4つの理由

1. 驚くほどファイルサイズが小さい

Lottieファイルは、画像をドットの集まりとして保存するのではなく、形状や軌跡を計算式（テキスト）として記録するため、データ容量が極めて軽量です。GIFアニメーションや動画ファイルと比較すると、ファイルサイズが10分の1から50分の1以下になることも珍しくありません。これにより、Webサイトの読み込み速度（ページスピード）を一切遅くすることなく、快適な表示環境を維持できます。

2. どれだけ拡大してもぼやけない美しさ（ベクター形式）

Lottieは「ベクター形式」と呼ばれる技術を使用しています。スマートフォンの高解像度なディスプレイ（Retinaディスプレイなど）や、大型の4Kモニターでアニメーションを大きく引き伸ばして表示しても、エッジがギザギザになったり画質が劣化したりすることがなく、常にクッキリと美しく描画されます。

3. プログラムで自由自在に操れる

Lottieはただ再生されるだけの動画とは異なり、中身がコード（JSONデータ）でできているため、JavaScriptなどのプログラミング言語から細かくコントロールできます。たとえば、「ユーザーがマウスを乗せたときに再生する」「スクロールの量に合わせてアニメーションを進行させる」「クリックされたら色を変化させる」といった、ユーザーの操作に反応する高度な仕組み（インタラクティブ機能）を簡単に実装できます。

4. 1つのファイルでどこでも動く（マルチプラットフォーム）

AIやデザイナーが作成したLottieのJSONファイルは、iOSアプリ、Androidアプリ、Webサイト、さらにはクロスプラットフォーム向けフレームワーク（React Nativeなど）など、ほぼすべての環境において同じファイルでそのまま再生することができます。各システム用にアニメーションを作り直す必要がないため、開発の効率が劇的に高まります。

従来の画像・動画形式とLottieの仕様や得意分野を比較した結果を、以下の表にまとめました。

特徴・項目	GIFアニメーション	MP4動画	Lottie (JSON形式)
ファイルサイズ	非常に大きい（数MB〜数十MB）	大きい（数MB〜）	極めて小さい（数十KB〜数百KB）
画質（拡大時）	荒く、ぼやける	ビットレート制限により劣化する	ベクターデータのため、常に最高画質
プログラムによる制御	不可能（自動ループのみ）	再生、一時停止などの簡易制御のみ	完全な再生制御、色やテキストの動的変更が可能
主な用途	簡易的なSNS用ループ画像	実写映像、長尺のシネマティック動画	UIのマイクロインタラクション、ロゴ、ローディング表示
プラットフォーム対応	ほぼ全環境に対応	ブラウザやOSのコーデック制限あり	iOS、Android、Web、React Native等で完全対応

第2章：Text-to-Lottieがもたらす革命！AIエージェントに「アニメーションの魔法」を覚えさせよう

このように素晴らしい特徴を持つLottieですが、JSONの中身は非常に複雑な数値や座標の配列で構成されており、人間が自力でコードを書いて編集することはほぼ不可能でした。デザインソフトを使って書き出すにしても、専門技術の学習に多大な時間が必要でした。

この常識を打ち破ったのが、diffusionstudio/lottie（Text-to-Lottie）プロジェクトです。このツールは、AIコーディングアシスタント（Claude Code、Cursor、Codexなど）に対して「Lottieアニメーションを作成・修正する専門知識」を授けるためのプラグイン、すなわち「エージェント・スキル（Agent Skill）」として設計されています。

エージェント・スキル（Agent Skill）とは？

AIに「HTMLを書いて」と頼むと、AIは一般的な知識から推測してプログラムを書きますが、複雑なLottieのファイルフォーマット（Bodymovin形式）に関しては、書き方を間違えて画面が真っ白になってしまうエラーが頻繁に発生していました。

そこで、Vercel Labsが提唱する「オープンなエージェント・スキル仕様」に基づき、Lottie生成に必要な命令セット（SKILL.md）をAIに読み込ませます。このファイルをAIにインストールすることで、AIの頭脳は「プロのモーションデザイナーとしての振る舞い」や「エラーを絶対に起こさない完璧なJSONの構造設計」を瞬時に理解します。これによって、AIエージェントは開発者からの「ローディング画面を作って」といった大雑把なテキストでのリクエストに対しても、正しく美しく動作するコードを出力できるようになるのです。

開発者が使用するAIエージェントや開発環境に応じて、このスキルは各エージェントの設定フォルダに自動配置されます。参考までに、主要なAIコーディングエージェントにおけるスキルの保存先を以下の表にまとめました。

AIエージェント名	コマンドオプション名	プロジェクト内でのスキル保存先フォルダ	グローバル（パソコン全体）での保存先
Claude Code	`claude-code`	`.claude/skills/`	`~/.claude/skills/`
Cursor	`cursor`	`.cursor/skills/`	`~/.cursor/skills/`
Codex	`codex`	`.codex/skills/`	`~/.codex/skills/`
Continue	`continue`	`.continue/skills/`	`~/.continue/skills/`
Gemini CLI	`gemini-cli`	`.gemini/skills/`	`~/.gemini/skills/`

第3章：かんたん3ステップ！Text-to-Lottieのセットアップと動かし方

では、実際にあなたのパソコンでText-to-Lottieを動かしてみましょう。必要な手順はたったの3ステップです。コマンドプロンプトやターミナルを開いて、順番に進めてみてください。

なお、事前準備として、お使いのパソコンに Node.js（バージョン16以上）がインストールされている必要があります。

ステップ1：お使いのAIエージェントに「Lottieスキル」を追加する

まずは、お使いのAIアシスタントにスキルをインポートします。ターミナルで以下のコマンドを実行するだけです。

Bash

npx skills add diffusionstudio/lottie

このコマンドを動かすだけで、AIエージェントの内部機能がアップデートされ、Lottieアニメーションの作り方をマスターします。

ステップ2：アニメーション開発用のプレビュー環境（ハーネス）を作る

次に、AIが生成したアニメーションを画面で見ながら検証するための環境（検証用プロジェクト）をパソコン上に構築します。この検証環境には、ブラウザで動作するプレビュープレイヤーが含まれています。

以下のコマンドをターミナルに入力して、検証プロジェクトのフォルダを作成し、中に入りましょう。ここではテンプレートファイルをダウンロードするために degit コマンドを使用します。

Bash

# 1. テンプレートを「my-animation」というフォルダ名で複製してダウンロードします
npx degit diffusionstudio/lottie my-animation

# 2. 作成されたプロジェクトのフォルダに移動します
cd my-animation

フォルダの中に入ったら、動作に必要な外部ソフトウェア群（パッケージ）をインストールします。

Bash

# 3. 必要なライブラリをまとめてパソコンにセットアップします
npm install

この npm install コマンドを実行すると、少し専門的なバックグラウンド処理（postinstallスクリプト）が自動的に実行されます。このプロジェクトでは、Googleの超高速なグラフィックス描画エンジンである「Skia（CanvasKit）」をWeb上で動かすため、WebAssemblyファイル（canvaskit.wasm）が必要になります。インストール時に、scripts/copy-canvaskit.mjs というプログラムが自動的に走り、ライブラリの内部から public/ フォルダへこの必要なファイルを自動的にコピーしてくれます。これにより、開発者は面倒な初期設定をすることなくプレビューエンジンを利用できます。

ステップ3：開発サーバーを立ち上げて、AIに指示を出す

すべてのインストールが完了したら、いよいよ動作を確認します。以下のコマンドを入力してください。

Bash

npm run dev

コマンドを実行すると、開発用サーバーが起動し、ターミナルにプレビュー用のURL（例えば、http://localhost:5173 など）が表示されます。このURLをブラウザ（Chromeなど）で開きましょう。ブラウザにフルスクリーン表示のLottieプレイヤーが現れます。

この状態で、AIエージェント（CursorやClaude Codeなど）に対して、「Lottieアニメーションを作って」と指示を出してみてください。

AIはあなたの指示を解釈し、プロジェクトフォルダ内の public/lottie.json というファイルに向けてアニメーションコードを書き込みます。検証用のサーバー（Viteと呼ばれる技術を使用しています）は、このファイルが更新されたことを瞬時に感知し、画面を自動的に最速でリロード（ホットリロード）してくれます。

つまり、チャットでAIに指示を送り、保存キーを押すたびに、ブラウザ上に表示されているアニメーションがあなたの指示どおりにリアルタイムで動くようになるのです。

第4章：AIから思い通りの動きを引き出す！5つの「プロンプト黄金ルール」

AIは非常に賢いですが、単に「おしゃれな動きを作って」と指示するだけでは、自分の思い描いたイメージと少しズレてしまうことがあります。そこで、公式リポジトリのガイドラインに沿った、AIに伝えるべき5つの「プロンプト黄金ルール」を紹介します。このテクニックを知っておくだけで、得られるアニメーションの完成度が格段に向上します。

1. ベースとなる情報（画像やデータ）をAIに見せる（Grounding）

何もない場所から動きを生み出すよりも、「FigmaからエクスポートしたこのSVGイラストのパス情報をベースにしてほしい」というように、実在するデータやURLをAIに提供すると、仕上がりが圧倒的に洗練されます。

良い例：「https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg にあるSVGファイルの軌跡（パス）の情報を参考に、なめらかに線が描かれていくLottieアニメーションを作ってください」

2. モーションデザインの正しい言葉を指示に含める

動きの滑らかさを決める「緩急（イージング）」の指定を具体的に行います。等速で不自然にカチカチ動くアニメーションを避け、プロのような有機的な動きにするために、モーションデザインの専門用語を使います。

効果的な用語：ease-in（だんだん速くなる）、ease-out（だんだん遅くなる）、ease-in-out（動き始めと終わりがゆっくりになる）

3. カメラマンになったつもりで「空間の動き」を伝える

プロが制作するアニメーションには、キャラクターだけでなく「画面全体のカメラ移動（カメラワーク）」のテクニックが使われています。AIに対してカメラのズームイン、ズームアウト、カメラの横移動（パン）といった空間的な指示を含めることで、ダイナミックで立体感のあるシーンを作ることができます。AIは複数のレイヤーをまとめたグループの変形（グループトランスフォーム）を用いて、このカメラの動きをシミュレートしてくれます。

4. あとから調整できる「つまみ（コントロール）」をリクエストする

Lottieアニメーションの背景色や、グラフィックの色、線の太さなどを、プログラムを書き換えることなくプレイヤー画面の「スライダー」や「カラーピッカー」から調整したい場合は、あらかじめそのようにAIに指示します。

指示の例：「図形の中心にある円の色と、図形全体のスケール値を後から調整できるように、専用の『スロット』を作成してコントロールパネルに表示させてください」

5. 秒数（duration）とフレームレート（FPS）をきっちり指定する

アニメーションが何秒で1周するのか、1秒間に何回画面を書き換えるのかを正確に記述します。

指示の例：「フレームレートはスムーズな動きを表現するために 60fps とし、全体の再生時間はちょうど 3秒（合計180フレーム）でシームレスにループするように設計してください」

第5章：もっと知りたい！Skottieプレイヤーの秘密と初心者が絶対につまずく「真っ白画面」対策

このText-to-Lottieプレイヤーは、一般的なWeb向けLottieエンジン（lottie-web）ではなく、WebAssemblyをフル活用したより高機能な描画モジュールである Skottie（スコッティー） を搭載しています。この優れた再生エンジンによって実現している、特別な仕組みを深掘りしてみましょう。

1. 調整つまみを自在に操る「スロット（Slots）」の仕組み

前の章で触れた、プレビュー画面上の「調整スライダー」や「カラーピッカー」などのコントロールパネルは、Skottieが持つ「スロット」という特別な機能を利用しています。

AIはJSONファイルの最上部に、以下のような定義コード（スロット）を記述します。

JSON

{
  "v": "5.7.0",
  "fr": 60,
  "w": 512,
  "h": 512,
  "slots": {
    "ballColor": {
      "p": { "a": 0, "k": [0.2, 0.6, 1.0, 1.0] }
    },
    "ballSize": {
      "p": { "a": 0, "k": 120 }
    }
  }
}

この定義を元に、スロットのデータ構造（p）の内容から、表示すべき画面コントローラーをプレイヤーが自動判断して構築します。スロットとコントロールパネルの対応関係は以下のようになっています。

スロットに定義された値の種類	ブラウザ上で描画されるUIコントロールパーツ
スカラー値（1つの数値、例：`120`）	数値を動かすためのスライダーコントロール
RGBA配列（0〜1の色の配合、例：`[0.2, 0.6, 1, 1]`）	直感的に色を選べるカラーピッカー
Vec2（2つの数値のセット、例：`[x, y]`）	X軸とY軸の調整用の 2連数値入力ボックス
テキスト（文字列、例：`"Hello"`）	アニメーション内の文字をその場で書き換える文字入力欄

さらに、public/controls.json という特別な設定ファイルを用意することで、これらのスライダーのラベル名を日本語に書き換えたり、最小値や最大値、目盛りの変化幅（ステップ数）を自在にカスタマイズすることができます。

2. 初心者が絶対につまずく「画面が真っ白に！」を防ぐための注意点

もしあなたがAIエージェントに「Lottieを少し修正して」と追加の指示を出した結果、プレイヤーの画面が真っ白になり、エラーが出て動かなくなってしまったら、高確率で以下の2つの約束事が守られていない可能性があります。このルールを頭に入れて、AIの書いたコードをチェックしてみてください。

対策A：形状は必ず「グループ（"ty": "gr"）」という部屋に入れて配置すること

Lottieファイルの内部構造において、円（el）や四角（rc）などの描画パーツを、レイヤーの直下にそのまま裸で並べてはいけません。必ず、グループ（"ty": "gr"）という箱をひとつ作成し、その中（it 配列）に「形状データ」「塗りつぶし色（"ty": "fl"）や線（"ty": "st"）の定義」、そして最後に「グループ用のトランスフォーム情報（"ty": "tr"）」をセットで含める必要があります。この順番が崩れていたり、グループを忘れたりすると、Skottieエンジンはアニメーションを全く読み込めなくなってしまいます。

対策B：カラーコードや255表記を使わず、「0.0〜1.0」で記述すること

プログラミング言語では赤色を表現するときに「#FF0000」や「rgb(255, 0, 0)」と書きますが、Lottieのカラー定義では「0から1の範囲に変換されたRGBA配列」を使用しなければなりません。

例：赤色（不透明）を表す場合：[1.0, 0.0, 0.0, 1.0]
例：緑色（不透明）を表す場合：[0.0, 1.0, 0.0, 1.0]この仕様を忘れ、255をそのまま入力すると、プレイヤーが色を読み込めずに真っ暗な描画になってしまいます。

第6章：実際にWebサイトやアプリでアニメーションを再生しよう！

AIと相談しながら作ったお気に入りのアニメーション（my-animation.json）を、実際のプロジェクトに組み込んで動かす手法を紹介します。

1. シンプルなWebサイト（HTML/JavaScript）で使用する場合

最も基礎的なWebサイトの構築において、最も多く利用される公式プラグイン lottie-web を使う方法です。以下のコードをHTMLファイルに記述するだけで、画面上で軽量かつ高画質にアニメーションを自動再生することができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Lottieアニメーション導入テスト</title>
</head>
<body>

  <div id="animation-container" style="width: 400px; height: 400px; margin: 0 auto;"></div>

  <script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>
  
  <script>
    // 3. ライブラリを初期化し、生成したJSONファイルを指定します
    lottie.loadAnimation({
      container: document.getElementById('animation-container'), // 表示する枠の要素を指定
      renderer: 'svg', // 最も美しい「SVG形式」で描画します
      loop: true,      // 繰り返し無限ループ再生する設定（はい）
      autoplay: true,  // ページが表示されたら自動再生する設定（はい）
      path: './my-animation.json' // AIが作ってくれたLottie JSONファイルへのパス
    });
  </script>
</body>
</html>

2. React Native（スマートフォンアプリ開発）で使用する場合

iOSやAndroid向けのスマートフォンアプリを開発するフレームワーク「React Native」環境においても、Lottieは標準的なアニメーション技術として絶大な信頼を得ています。

JavaScript

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from "lottie-react-native";

export default function LoadingScreen() {
  return (
    <View style={styles.container}>
      {/* 画面中央にLottieアニメーションを表示します */}
      <LottieView 
        source={require("./my-animation.json")} // 保存したアニメーションJSONファイルを指定
        autoPlay 
        loop 
        style={{ width: 300, height: 300 }} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
});

おわりに：AIはあなた専属の強力なアニメーター

これまでの技術環境では、Webサイトに少し動きを入れるだけでも多くの労力や知識を要していましたが、「Text-to-Lottie（diffusionstudio/lottie）」の技術革新は、誰でも気軽にモーショングラフィックスに触れられる開かれた環境を作り出しました。

AIは、あなたが投げかけた「言葉」から動きの本質（タイミング、加速、空間移動）を自ら計算して、わずか数秒で商用レベルのアニメーションファイル（JSON形式）として出力してくれます。このアプローチは、単に作業時間が短縮されるだけでなく、開発者自身がアニメーションの基本法則やコード構造（Skottie）を学べる素晴らしいきっかけにもなります。

お使いのAIエージェントにスキルを追加して、検証サーバーを立ち上げるだけで、いつでもあなたのアイデアを目の前で具現化してくれる頼もしい創作パートナーが手に入ります。まずは一度、簡単なローディングアイコンやロゴをAIにリクエストすることから挑戦して、動く楽しさを肌で体験してみてください。

参考資料

GitHub - diffusionstudio/lottie, https://github.com/diffusionstudio/lottie
Text-To-Lottie README.md, https://github.com/diffusionstudio/lottie/blob/main/README.md
Lottie for Android, iOS, Web, React Native, and Windows, https://lottie.airbnb.tech/
What is Lottie?, https://lottie.github.io/
Open Source Tool Generates Production-Ready Lottie Animations From Text With AI, https://digg.com/tech/jl4oz0qu
vercel-labs/skills, https://github.com/vercel-labs/skills
text-to-lottie | explainx.ai, https://explainx.ai/skills/diffusionstudio/lottie/text-to-lottie
Skills.sh - The Open Agent Skills Ecosystem, https://publish.obsidian.md/petermilovcik/1+Notes/Skills.sh+-+The+Open+Agent+Skills+Ecosystem