Claude アニメーション: Claude でアニメーションを作成し、アプリに送信する方法
Claude でアニメーションを作成する方法: Claude Design、Claude モーション、アーティファクト、Claude Code、それぞれが出力するもの、および Claude で作成したアニメーションを実際のアプリに取り込む方法。
核心
Claude を使用してアニメーションを作成するには、次の 3 つの方法があります。ビジュアル出力用の Claude Design または Claude モーション、HTML、CSS、JavaScript デモ用の Claude アーティファクト、および Claude Code によるアニメーション コードの作成または MCP 上での他のツールの駆動です。それぞれが、製品に配置する必要があるデザイン、ビデオ ファイル、またはコードを提供します。実際のアプリ内で実行する必要があるアニメーションには、アプリが実行できる形式が必要であるため、Claude で作成されたモーションのほとんどは、出荷前にランタイムに渡されます。
このガイドについて
ExodeUI は Anthropic とは関係ありません。 ClaudeはAnthropic社の商標です。このガイドでは、Anthropic 独自のドキュメントに基づいて、Claude がモーションに対して何を生成できるか、およびそのモーションを出荷されたアプリに組み込むために何が必要かについて説明します。
Claude でアニメーションを作成する方法
Claude はいくつかの異なる形状でモーションを生成できますが、それらは互換性がありません。どちらを使用するかによって、得られるものとどれだけの作業が残るかが決まります。
- Claude Design: Claude とチャットして、キャンバス上にデザインやインタラクティブなプロトタイプを取得します。これは Free、Pro、Max、Team、Enterprise プランに含まれており、claude.ai/design のスタンドアロン サイトは 2026 年 12 月 14 日に閉鎖されます。
- Claude モーション: プロンプトとファイルを短いアニメーションに変換し、ビデオのように再生して MP4 としてエクスポートするコードとして構築します。チームプランとエンタープライズプランのベータ版であり、ビデオモデルを使用していないため、リアルな映像や人物を作成できません。
- Claude アーティファクト: 会話内でプレビューする実行可能な HTML、CSS、JavaScript。これはモーション デモとしては簡単です。
- Claude Code: リポジトリにアニメーション コードを書き込むか、ExodeUI MCP サーバーを含む MCP 上でツールを編集します。
より良い動きを生み出すためのヒントを提供
曖昧なプロンプトは曖昧な動きになります。 Claude は、モーション デザイナーが求めるであろう詳細、つまりプロパティ、量、タイミング、トリガー、状態に応答します。感情を説明するのではなく、名前を付けてください。
イージングと期間に名前を付けます
「スムーズ」の代わりに「軽い弾みを伴うスプリング」または「200 ミリ秒以上のイーズアウト」と言いましょう。モデルが使用できる値は形容詞よりも優れています。
トリガーに名前を付けます
「タップ時」、「ホバー時」、「リストの読み込みが完了したとき」など、何が始まるかを言います。トリガーのあるモーションは、後で実際のイベントに接続できます。
州に名前を付けます
たとえば「アイドル、押された、読み込み、成功、エラー」などをリストすると、単一のアニメーションではなく小さなステート マシンが得られます。
プラットフォームと制限に名前を付けます
出力が React、SwiftUI、または Web デモであるかどうか、また、実行してはいけないこと (たとえば、「変形と不透明度のみをアニメーション化する」など) を指定します。
デモ アニメーションが本番環境に対応していない理由
Claude はプレビューで正しく表示されるアニメーション コードを生成できますが、出荷前にまだ作業が必要です。ギャップは品質ではなく、アウトプットの形です。
- 通常、これは 1 画面用の 1 回限りのコードであり、再利用可能なコンポーネントではありません
- 多くの場合、単一の状態があり、読み込み、エラー、無効化または中断されたインタラクションのロジックはありません。
- 1 つのプラットフォーム向けに書かれているため、React バージョンは書き直さないと iOS 上で動作しません。
- タイミングとイージングはコード内に存在するため、開発者なしでは設計者が変更することはできません。
- 再利用するものには、1 つのコンポーネントに貼り付けられたスニペットではなく、アプリが実行できるファイル形式が必要です
Claude が作成したアニメーションを ExodeUI の MCP サーバーで配信する
ExodeUI は、インタラクティブな UI とアニメーション用のブラウザーおよびデスクトップ ツールです。アニメーションは、レイアウト、タイムライン、ステート マシン、スプリングの物理学、ロジックを保持する 1 つの開いた .exode ファイル内に存在します。ランタイム パッケージは、そのファイルを React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter で再生するため、プラットフォームごとに再構築されるのではなく、同じアニメーションがアプリ内で実行されます。 ExodeUI は、100 を超えるツール (ビルド、アニメーション化、ロジックと物理の追加、ライブ エディターへの同期、エクスポート) を備えた MCP サーバーを公開するため、Claude Code、Cursor、OpenCode、およびその他の MCP クライアントは、平易な言語のプロンプトからファイルを作成および編集できます。セットアップはスクリプトではなく製品内に存在するため、コピーするコマンドはありません。ExodeUI 設定で MCP をオンにして、MCP サーバーに接続するのと同じ方法でクライアントを接続します。 ExodeUIも作っていますので、代替品もチェックしてみてください。
1. ExodeUIでMCPをオンにする
ExodeUI 設定で、MCP サーバーを有効にします。 AI コーディング クライアントがファイルの構築と編集に使用するツールを公開します。
2. クライアントを接続します
他の MCP サーバーに接続するのと同じ方法で、Claude Code、Cursor、OpenCode、または任意の MCP クライアントを ExodeUI サーバーにポイントします。
3. モーションの説明
わかりやすい言葉でアニメーションを要求してください。エージェントが .exode ファイルを編集すると、その変更が ExodeUI エディタに表示されます。
4. 同じファイルを送信する
React、SwiftUI、Flutter などの ExodeUI ランタイムを通じて .exode ファイルをレンダリングし、コードからその入力と状態を駆動します。
Claude Design vs Claude Code + ExodeUI
どちらのルートもプロンプトで始まり、製品のモーションで終わります。これらはその間で何が起こるかが異なります。Claude Design はデザイン キャンバスに作業を保持しますが、Claude Code と ExodeUI は実行中のファイルに作業を保持します。
得られるもの
Claude Design: デザインまたはクリック可能なプロトタイプ、および Claude Code のハンドオフ バンドル。 Claude Code + ExodeUI: コンポーネントとして再生される .exode ファイル。
アニメーションが実行される場所
Claude Design: デザイン キャンバスと共有プロトタイプ内。 Claude Code + ExodeUI: アプリ内、ウェブ上、iOS および Android 上で、入力とデータに反応します。
引き継ぎ後の編集
Claude Design: デザインを変更して、再度ハンドオフします。 Claude Code + ExodeUI: デザイナーは、アプリが実行するのと同じファイルを再構築せずに編集します。
Claude Design が勝つ場所
無料プランを含むあらゆるプランで、多くの視覚的な方向性を検討し、関係者にプレゼンテーションし、静的またはプロトタイプの作品を作成します。
ExodeUI が勝つ場所
状態、物理学、入力とともに出荷する必要があるモーションは、単一のファイルからプラットフォーム間で再利用されます。
実装コード例
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}覚えておきたい原則
- Claude Design と Claude Motion はビジュアル作品を生成し、Claude Code はコードを生成しますが、いずれもランタイムではありません
- アニメーションは、アプリが実行できる形式を備え、実際の状態と入力に接続されて初めて出荷されます。
- プロンプト内でイージング、トリガー、状態に名前を付けて、実際に使用できるモーションを取得します
- ExodeUI の MCP サーバーを使用すると、Claude Code は、React、SwiftUI、Flutter などで実行される 1 つの .exode ファイルを作成および編集できます。