ClaudeとOpenArtでAIモーショングラフィックスを作る方法

AIモーショングラフィックスの作り方は2通りあります。ひとつはAI動画モデルにテキストをクリップへ焼き込ませ、すべての単語が正しく綴られることを祈る方法。もうひとつは OpenArt で画像を作り、Claude にコードで動きを組んでもらう方法です。後者ならすべての単語・色・動きが編集可能なまま残るので、タイプミスは再生成ではなく1行の修正で済みます。

このガイドはクリエイターMia Meowとのウォークスルーに沿っています。3つのワークフロー（動くInstagramカルーセル、AI動画へのグラフィック追加、コードで作るフルアニメーション動画）に加え、一度きりのセットアップもカバーします。

AIモーショングラフィックスとは？

モーショングラフィックスとは、動くテキスト・図形・画像のことです。タイトルカード、商品ラベル、アニメーションするSNS投稿、動画上のキャプションなどがあります。AIモーショングラフィックスは、画像や動き、あるいはその両方をAIで作成します。

2つのアプローチはまったく異なる動き方をします：

このガイドでは2つめのアプローチを解説します。AI動画モデルは人物・商品・シーンの表現が得意です。一方、見出しを毎回同じように綴るのはコードのほうが得意です。

モーショングラフィックスに Claude を使う理由は？

このウォークスルーから際立つ理由は3つあります。

どの文字も編集可能なまま。 Claude はあなたが見せたスタイルとフォントに合わせて、テキストをコードで再構築します。単語を間違えてもテキストをさっと編集するだけです。

再生成のたびに料金を払う必要がなくなります。 テキストがAI動画の中にある場合、修正のたびに再生成が必要になり、クレジットもかさみます。コードなら、クレジットは本当に欲しい画像やクリップに使えます。テキストの変更やタイミングの微調整はコード上で行えます。

広告テストが格安に。 同じ商品動画で2つの見出しをテストしたいですか？1行だけ変えて、もう一度書き出すだけ。商品ショットはまったく同じままなので、テストで測れるのは見出しの効果だけです。

ワークフロー1：動くInstagramカルーセルの作り方

カルーセルは手間をかける価値があります。Metricoolの2026年Instagram調査（2,400万件以上の投稿を分析）によると、カルーセルは単一画像の投稿に比べて約9倍保存されやすいことがわかりました。動きのあるカルーセルはフィードでさらに目を引きます。静止画の投稿については、 Instagram投稿ジェネレーター のほうが近道です。

1回のClaudeチャットで作成した3枚のカルーセルスライド。それぞれに独自の動くヘッドラインが付いています。

ステップ1：Claude内で画像を作成する。 OpenArt MCP を接続すると、Claude は次のように動作します： Claude AI画像ジェネレーターだから、アイデアを練り、コピーを書き、画像を生成するまでを1つのチャットで完結できます。ウォークスルーでは、MiaがClaudeに靴の写真と自分の写真を渡すと、Claudeはスライド画像を作成しました： GPT Image 2.5 OpenArt で。

ステップ2：画像をレイヤーに分割する。 開く レイヤー抽出 OpenArtの画像ツールから画像をアップロードします。レイヤー数は2〜16の範囲で好きなだけ設定できます。Miaは6に設定しました。次のガイドもご覧ください 画像を編集可能なレイヤーに分割する方法 このツールについてさらに詳しく解説しています。

レイヤーの抽出は、1枚のフラットな画像を、それぞれ個別に動かせる複数のレイヤーに分けます。

ステップ3：Claudeにレイヤーを抽出させる。 レイヤーをOpenArtアカウントに保存しましょう。ClaudeはMCPを通じて取得するので、ダウンロードやドラッグ操作は不要です。あとは各レイヤーをどう動かすかClaudeに伝えるだけ。人物がスライドイン、背景がゆっくり流れ、靴がポップに飛び出す、といった具合に。

ステップ4：テキストをコードで再構築する。 Extract Layersで取り出したテキストレイヤーは文字の画像です。Claudeにスタイルとフォントを合わせてコード上の本物のテキストとして作り直すよう頼みましょう。これで見出しは完全に編集可能になります。

プロジェクトフォルダとスタイルライブラリはどう役立つの？

プロジェクトフォルダとスタイルライブラリがあれば、次からのプロジェクトがどんどん速くなります。

まず、プロジェクトフォルダを1つにまとめましょう。ウォークスルーのセットアッププロンプトが自動で作成してくれます：入力、参照素材、音声、完成動画、テンプレート、そしてClaudeが従うルールファイルまで。

すべてを1つのフォルダに。画像、ナレーション、保存したスタイルの場所をClaudeが把握しています。

次に、モーショングラフィックスのスタイルライブラリを作りましょう。気に入ったルックができたら保存します。どこかで気に入ったモーションスタイルを見つけたら、その参考動画を入れてClaudeに再現を頼みましょう。次回からはClaudeがライブラリを読み込み、ぴったりのスタイルを提案し、ゼロから始めるのではなくコードを再利用します。

ワークフロー2：AI動画にモーショングラフィックスを追加する方法

AI動画の上にグラフィックを加えるのは、商品広告に最も役立つワークフローです。概要から作るフル広告については、こちらをご覧ください ClaudeでAIを使って動画広告を作成する方法.

ステップ1：きれいなクリップを作る。 Miaは、Seedance 2.5を使って短いシューズのクリップを次の場所で作成しました AI動画ジェネレーター。シンプルに保ち、動画プロンプトにテキストを入れないようにしましょう。テキストは後からコードで追加します。プロンプトのアイデアはこちらをご覧ください MCP 向けAI動画プロンプトの例.

ステップ2：静止画でルックを選ぶ 彼女の最初のバージョンはありきたりに見えました。そこでクリップから鮮明な1フレームを取り出し、MCP 経由で GPT Image 2.5 を使って3つのアートスタイルを作るよう Claude に依頼しました。ファッション誌風、ゲーム画面風、手描きの落書き風です。

手描きの落書き風スタイル。アニメーションを始める前に、1フレームでテストした3つのルックのうちの1つです。

ステップ3：クリップと静止画を Claude に渡す。 クリップがベースです。静止画はどう見えるべきかを示します。Claudeは動画の上に、すべての文字とグラフィックをコードで再構築します。

入力：シンプルなクリップとスタイル付きの静止画1枚。出力：ライブで編集可能なグラフィックス付きの同じクリップ。

ステップ4：ショットを普通の言葉で説明する。 ここでは日常的な言葉で十分です。Miaのショットプランはたった4行でした。Cloud Flowという名前、メッシュのクローズアップ、クラウドフォーム技術、傷に強いヒール。Claudeはそれを画面上のテキストとタイミングに変換しました。もっと細かく制御したい場合は、何かを作り始める前にショットリストを見せてほしいとClaudeに頼みましょう。

左が Mia の発言、右が各ショットに Claude が書いたテキストです。

ステップ5：新たに生成せずに見出しをテストする。 コードで見出しの行を変えて、もう一度書き出すだけ。商品ショットは変わらず、2本目の動画にクレジットを使う必要もありません。

同じクリップに見出しAと見出しB。変更したのはコード1行だけです。

これはパフォーマンスマーケターにとって特に重要です。1本の良いクリップから広告バリエーションをまとめて作り、結果に勝者を選ばせることができます。こちらのガイドでは AIによる広告クリエイティブのテスト そうしたテストの計画方法を紹介します。

ワークフロー3：コードでフルアニメーション動画を作る方法

動画モデルを一切使わない方法もあります。Mia の例は「Mimi is hungry」で、完璧なオムレツを作る猫を描いた、ほのぼのとしたゲーム風の動画です。テキストボックス、メニュー、ミニゲーム、結果画面はすべてコードで作られています。

キャラクター。 OpenArtのGPT Image 2.5で、無地の緑の背景にネコの6ポーズを並べたシートと、キッチンの背景を作成しました。Claudeは各ポーズを分離し、紙のストップモーションのように時間に合わせて入れ替えました。この手法は、カクカクした手作り感のあるルックに最適です。Claudeは、シンプルな手描きキャラクターをコードで自ら描くこともできます。

1枚の画像から6つのポーズ。Claudeがそれらを切り替えて猫を動かします。

サウンド。 音声は OpenArt のボイスオーバー作成ツールから生成しました。効果音と8ビットの音楽はコードで作成しています。

方向。 Miaがストーリーとスタイルを説明すると、Claudeがモーションを組み立てました。同じ手法は、オリジナル音楽付きのミュージックビデオ、解説動画、短いブランドストーリーにも使えます。コードで作業したくない場合は、 AIアニメーション生成 プロンプトからアニメーション動画を作成します。

モーショングラフィックス向けにClaudeとOpenArtをセットアップする方法

セットアップは一度だけ行えば大丈夫です。

1. デスクトップアプリで Claude Code を開く。 Codeタブを開いて新しいプロジェクトフォルダを作成し、Claude Codeで開いてアクセスを許可します。Claudeでのビジュアル制作が初めてなら、まずはこちらから Claude Opus 5.5 画像・動画生成ガイド.
2. Remotion プラグインを追加する。 Remotionは、Claudeのコードを動画に変換するコードライブラリです。Claudeデスクトップアプリで「Code」→「Customize」→「Plugins」→「Discover」を選びます。「remotion」を検索してプラグインを追加してください。
3. セットアッププロンプトを実行する。 セットアップパッケージは動画の説明欄にリンクされています。プロンプトは、Node.jsとGitがなければインストールし、Remotionプロジェクトをセットアップし、テンプレートとルールファイルを追加して、短いテスト動画を作成します。権限を「編集を許可」に設定しておけば、Claudeが各ステップで確認を求めずに作業を進められます。
4. OpenArt MCPを接続する Claudeデスクトップまたはclaude.aiで「Customize」から「Connectors」を開きます。「Add custom connector」をクリックし、名前を「OpenArt」にして、このサーバーURLを貼り付けます： https://mcp.openart.ai/mcp。「Add」をクリックし、次に「Connect」をクリックして OpenArt アカウントでサインインします。他のエージェントの詳しい手順は OpenArt の MCPページ.

ツールについての補足：OpenArt MCPが画像と動画を生成し、Claudeがコードでアニメーションを処理します。レイヤーの抽出とナレーションの作成はOpenArtのウェブサイトで行います。そこでレイヤーやナレーションを作成して保存すると、Claudeがあなたのアカウントから取り込みます。

Remotionについての注意：個人や3人までのチームは無料で利用できます。4人以上の企業にはRemotionの企業ライセンスが必要です。

1枚のアニメーション付きカルーセルスライドのような、小さなプロジェクトから始めましょう。フォルダとスタイルライブラリが整ったら、残りはまとめて一括で作成できます。

料金はどれくらい？

関係するアカウントは2つあります。

Claude。 Claude デスクトップアプリに Claude Code が必要です。

OpenArt. クレジットは OpenArt が生成するもの、つまり画像・動画クリップ・レイヤー・ボイスオーバーに消費されます。コードでテキストやタイミング、動きを編集しても OpenArt クレジットは使いません。テキストが正しく出るまでAI動画を再生成し続ける場合と比べて、ここが主な節約ポイントです。

モーショングラフィックスをクライアントワークや広告に使う場合は、対象となる有料プランで商用利用権が適用される点にご注意ください。新規アカウントには、クレジットカード不要で試せる40クレジットが無料で付与されます。次をご確認ください 料金ページ 現在のプランとクレジットについて。

よくある質問

Claudeでモーショングラフィックスは作れますか？

はい。Claude Code と Remotion プラグインを使えば、Claude がアニメーションをコードとして書き、動画として書き出します。Claude 自体には画像モデルがありません（詳しくはこちら Claudeが画像を生成できない理由）。だからOpenArt MCPと組み合わせましょう。するとClaudeは次のようにも機能します Claude AI動画ジェネレーター そして、アニメーション化する画像、キャラクター、クリップを作成できます。

After Effects やアニメーションのスキルは必要ですか？

いいえ。ウォークスルーのすべてはAfter Effectsなしで作られました。ストーリー、スタイル、ショットを普通の言葉で説明すれば、Claudeがモーションを処理します。

なぜAI動画プロンプトにテキストを入れないのか？

AI動画モデルはテキストを映像の一部として描画します。単語が1つ間違っているだけでも、クリップ全体を生成し直さなければなりません。テキストがコードとして扱われていれば、サッと編集するだけで修正でき、動画の残りの部分はまったく同じまま保たれます。

Claude と Remotion のセットアップとは？

Remotionは動画を作るためのコードライブラリです。Claude Code用のRemotionプラグインは、ClaudeがRemotionプロジェクトを構築するのに必要なものを提供します。Claudeデスクトップアプリのプラグインセクションから追加できます。

Remotionは無料ですか？

Remotionは個人および3人までのチームなら無料です。4人以上の企業はRemotionの企業ライセンスが必要です。

どの OpenArt プランが必要ですか？

OpenArt MCPはStarterを含むすべてのプランで利用できます。上位プランなら、画像とクリップ用の月間クレジットがさらに増えます。対象の有料プランでは商用利用権が適用されます。