AIに「ローディングスピナーを作って」と指示するだけで、アニメーションが自動で完成する。

Lottie Creator MCP は、ClaudeやCursorなどのAIエージェントをLottieFiles社のアニメーションエディタ「Lottie Creator」に接続するツールです。2026年4月に公開されて以降、デザイナー・開発者の間で注目が集まっています。

この記事でわかること：

  • Lottie Creator MCPで何ができるか
  • 対応しているAIクライアント
  • Claude Desktop / Claude Code への導入手順
  • 実際の活用パターン

https://lottiefiles.com/lottie-creator

LottieとLottie Creatorとは

Lottieは、アニメーションをJSON形式で扱える軽量フォーマットです。ベクターデータをそのまま動かせるため、ファイルサイズが小さく、ローディングアイコン・ボタンエフェクト・イラストアニメーションなどにWebやアプリで広く使われています。

Lottie Creatorは、LottieFilesが提供するブラウザベースのアニメーションエディタです。コードなしでLottieアニメーションを作成・編集でき、dotLottie形式で書き出せます。これまでアニメーション制作にはAfter Effectsのような専門ツールが必要でしたが、Lottie Creatorはその敷居を大きく下げました。

Lottie Creator MCPとは

MCPはAnthropicが策定したオープン標準「Model Context Protocol」の略称です。AIエージェントが外部ツールと連携するための共通インターフェースを定義しており、Lottie Creator MCPはこの仕組みを使ってAIをLottie Creatorに接続します。

AIエージェントはローカルブリッジを経由してCreatorのAPIに接続します。ブラウザで開いたLottie Creatorファイルに対して、AIがユーザーと同じ権限で直接読み書きできる状態になります。

対応クライアントはClaude Desktop・Claude Code・Cursor・VS Code Copilot・Windsurf・Codex・Gemini CLIなど多数あります。

できること

アニメーションをゼロから作成

「ローディングスピナーを作って」「プログレスバーを追加して」「キャラクターが手を振るアニメーションを作って」のように指示すると、AIがLottie Creator上でレイヤーを1枚ずつ積み上げて完成させます。

既存アニメーションの編集

現在開いているファイルの状態をAIが読み取り、色の変更・タイミング調整・イージングカーブの変更・レイヤーの名前変更・シーン全体のリファクタリングをリアルタイムで行います。

バリアントの一括生成

ダークテーマとライトテーマ、複数サイズ、ブランドカラーの違いなど、同じアニメーションの別バージョンをまとめて自動生成できます。デザインシステムの整備やA/Bテスト素材の量産に使いやすい機能です。

アクセシビリティ・ブランド検査

コントラスト比、動きの速さ、色の一貫性、ブランドガイドライン準拠などをAIが検査し、問題点を検出して修正まで行います。アニメーションの品質チェックを自動化したい場面で効果を発揮します。

導入手順

前提条件

  • Node.js 18以上がインストールされていること
  • ブラウザで creator.lottiefiles.com を開いた状態にしておくこと
  • MCP対応のAIクライアント（Claude Desktop、Claude Code、Cursorなど）

Claude Desktop への追加

  1. Claude Desktop の設定を開き、Settings → Developer → Edit Config をクリックする
  2. 開いたJSONファイルの mcpServers 内に以下を追加する
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
  1. 保存後、チャットの「+」ボタン → Connectors から lottiefiles-creator がオンになっていることを確認する

Claude Code への追加

ターミナルで1行実行するだけです。

claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest

Cursor への追加

Cmd + Shift + P（Mac）または Ctrl + Shift + P（Windows/Linux）→ Cursor Settings → Tools & MCPs → Add custom MCP から上記のJSON設定を貼り付け、Cursorを完全に再起動します。再起動後に lottiefiles-creator の横に緑のドットが表示されれば接続完了です。

VS Code・Codex・Gemini CLIなど他のクライアント向けの設定コマンドは、公式ドキュメント（https://docs.lottiefiles.com/en/creator/13_ai-tools/lottie-creator-mcp）に一覧があります。

活用パターン

設計段階からAIと協力して進めると効率が上がります。「このSVGをもとにバウンスするローディングアニメーションを作って、完成したらダークモード用バリアントも生成して」のように、1つの会話で複数の作業を連続して指示できます。

モーションデザインの専門知識がなくても品質を上げたい場合は、LottieFilesが提供するモーションデザインスキル（SKILL.md）をAIクライアントに追加しておくのが有効です。AIがモーションデザインの知識を持った状態で動くため、より意図に沿ったアニメーションが生成されます（参考）。

Lottie制作の入口が変わる

Lottie Creator MCPが面白いのは、単に「AIにアニメを作ってもらう」だけでなく、既存ファイルの検査・修正・多言語展開など、制作後のワークフローにも使える点です。アニメーション制作のハードルは下がり続けており、テキスト指示だけで動く素材を量産できる環境が整いつつあります。