Claude でモーショングラフィックス：作例・スキル・プロンプト（2026）

Claude はモーショングラフィックスをコードとして書きます。キネティックタイポ、グラフ、ロゴアニメーション、図解が動き、MP4 に書き出されます。Team・Enterprise プランなら Claude Motion で、それ以外のプランでも Claude Code、Codex、Cursor にモーショングラフィックス用のスキルを入れれば作れます。

Claude Motion の対象プランと機能は、Anthropic のヘルプ記事と料金ページの記載に基づき、2026年10月29日に最終確認しました。このサイトは独立したサイトで、Anthropic とは関係ありません。

「Claude motion graphics」とは

モーショングラフィックスとは、撮影した映像ではなく、文字、数字、図形、アイコン、ロゴを動かすデザインのことです。Claude がこれを得意とする理由はひとつ。Claude はコードを書き、モーショングラフィックスはコードで書けるからです。アニメーションの正体は、文字やグラフや図形が時間とともに変化する HTML ページです。レンダラーがそれをブラウザーで 1 フレームずつ再生し、フレームを動画として保存します。

Claude で作る方法は 3 つあります。

1. Claude Motion：Team・Enterprise プランの claude.ai で使える Anthropic のベータ機能です。短いアニメーション解説を言葉で説明し、自分のレポート、データ、画像を添付して、チャットで修正し、MP4 で書き出します。動画生成モデルではないため、生成された実写映像や AI が生成した人物は出てきません。詳しくは Claude Motion ガイドをご覧ください。
2. Opus 5.5 へのプロンプト 1 つ：チャットか Claude Code で、HTML、Canvas、Three.js のページとしてアニメーションを頼む方法です。X で共有されている Claude のモーション作品の多くはこのタイプです。結果は実行するたびに変わり、ページの録画やレンダリングは自分で行います。
3. コーディングエージェントのスキル：Claude のスキルとは、指示とファイルをまとめたフォルダーで、依頼内容が合うと Claude Code（や Codex、Cursor、Gemini CLI）が読み込みます。モーショングラフィックス用のスキルには、映像の組み立て方、使うルック、全フレームのチェック方法、MP4 の書き出し方が入っているので、毎回同じ品質で仕上がります。

Claude モーショングラフィックスの作例

私たちのスキルで作った映像

以下はすべて、コーディングエージェントが私たちのスキルを使い、実際の素材から演出・レンダリングした映像です。音楽もオリジナルです。音は再生ボタンを押すと流れます。

単品ルックで、架空のサンプル製品向けにレンダリングしたもの：

Claude Motion で作られ、X で共有された作品

作者自身が投稿した Claude Motion の実際の作品です。各カードから、動画、作者、元の投稿を見られます。

Opus 5.5 へのプロンプト 1 つで作られた作品

スキルを使わず、プロンプト 1 つだけで Opus 5.5 が一から 1 つの HTML ページとして書いたアニメーションです。

シーン別・作り方別のほかの作品は ギャラリーにあります。

モーショングラフィックス用の Claude スキル

「Claude、これを動かして」と頼むのと、そのまま投稿できる映像ができるのとの差を埋めるのが、モーショングラフィックス用のスキルです。ルック、テンポのルール、チェック、書き出しまでを持っているので、エージェントは毎回白紙から始めずに済みます。私たちのスキルは 2 種類です。

単品ルックは、ひとつのスタイルでひとつの仕事をします。長さは数秒から 30 秒ほどで、タイトル、ロゴアニメーション、印刷風や設計図風のローンチ、切り絵やホワイトボードで描く解説などがあります。各 $4.90、またはどのプランでもすべて使えます。

完全版スキルは、ひとつの映像タイプの映像を 1 本まるごと作り、複数のスタイルを内蔵しています。編集に合わせたタイトルとトランジション、ブランドイントロ、データ動画、解説動画、縦型ショート、SNS カードなどです。

すべてのスキルは スキル一覧にあります。まず試すなら、Motion Director は Google でログインするだけで無料で使え、キネティックタイポ、データストーリー、ホワイトボードのいずれかで、どんな種類でも 10〜20 秒の映像を作れます。

Claude Code や Codex でモーショングラフィックスを作る手順

必要なのは、コーディングエージェント（Pro か Max の Claude Code、Codex、Cursor、Gemini CLI）、Node.js 22 以降、FFmpeg、Google Chrome です。API キーは要りません。

1. 一文でスキルをインストールする。 任意のフォルダーでエージェントを開き、次を貼り付けます。

   Read https://claude-motion.com/skills/motion-director/install.md and follow it to install the "motion-director" skill, then make a first video with it.
   

   エージェントが npx motion-skills install motion-director を 1 回実行します。初回はブラウザーで Google にログインします。

2. 用途を伝え、素材を指し示す。 たとえば「製品動画用の 15 秒・16:9 のタイトルシーケンスを、CHANGELOG.md の 2.0 のメモから。ブランドカラーは brand.css にあります」。スキルは、画面に出すすべての言葉と数字を、その出どころと一緒に書き出します。

3. キーフレームを承認する。 作り始める前に、スタイルとパレットを選んで 1 枚のフレームを見せてくれます。映像より 1 枚の絵のほうが早く直せます。

4. 制作・チェック・作曲を任せる。 HTML と GSAP でアニメーションを書き、自分のフレームを見直し、すべての行を素材と照らし合わせ、オリジナルの音楽を書きます。

5. 修正はふつうの言葉で頼む。 「ロゴをもっと長く見せて」「うちの緑にして」。その場面だけを直して、もう一度レンダリングします。

6. ファイルを受け取る。 投稿用の MP4、または編集ソフトで映像に重ねられる透過付きの MOV。GIF と WebM も書き出せます。

Codex では同じスキルが ~/.agents/skills/ に、Cursor では .cursor/skills/ に入ります。インストールガイドが、使っているエージェントの読む場所に置いてくれます。実際の映像 1 本をブリーフから最後の修正までたどった全手順は Claude Code で動画を作る方法へ。ほかのエージェントは Codex、Cursor、Gemini CLI で動画を作るをご覧ください。

Claude モーショングラフィックスのプロンプト

インストールよりプロンプトで試したいなら、Claude Motion プロンプト集に、プレビュー付きのスタイルプロンプトがあり、それぞれ実行場所を明記しています。Claude Motion 用のプロンプトと Opus 5.5 用のプロンプトです。よいモーショングラフィックスのプロンプトには、誰がどこで見るか、長さ、使う内容、どう終わるかが書かれています。Claude Motion なら、たとえばこうです。

[誰が見るか、例：YouTube の製品動画の視聴者] 向けに、15 秒・16:9 のキネティックタイポのタイトルを作ってください。使う言葉はこれだけ：[タイトル、例：「もっと速く出荷」]、[サブタイトル、例：「バージョン 2.0」]。1 拍に 1 語、色は [例：黒とライム]、ストック画像は使わない。最後はタイトルで終え、2 秒止める。

[角かっこ] を自分の言葉に置き換えてください。スキルならもっと簡単で、素材と一文だけで済みます。残りはスキルに入っているからです。

よくある質問

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

作れます。Claude はモーショングラフィックス（動く文字、グラフ、図形、ロゴ）をコードとして書き、そのコードが動画にレンダリングされます。Team・Enterprise の Claude Motion なら claude.ai から MP4 を書き出し、Claude Code、Codex、Cursor ならモーショングラフィックス用のスキルが手元のパソコンで MP4 をレンダリングします。

モーショングラフィックス用の Claude スキルはありますか？

あります。モーショングラフィックス用のスキルは、コーディングエージェントが読み込む指示とファイルのフォルダーです。私たちの単品ルック（キネティックタイポのタイトル、ロゴアニメーション、ローンチ）や完全版スキル（タイトルとトランジション、ブランドイントロ、データ動画）などがあります。Motion Director は Google でログインするだけで無料です。

Claude でモーショングラフィックスを作るのに Claude Motion は必要ですか？

必要ありません。Claude Motion は Team・Enterprise プラン限定のベータ機能です。Pro や Max なら、Claude Code とモーショングラフィックス用のスキルで同じ種類のアニメーションを作り、手元でレンダリングできます。無料プランなら、Codex、Cursor、Gemini CLI でスキルを使ってください。

書き出したものを Premiere、Final Cut、CapCut で使えますか？

使えます。スキルは MP4 のほか、自分の映像に重ねるタイトル、テロップ、ロゴアニメーション用に透過付きの MOV を書き出します。GIF と WebM もあります。

費用はいくらですか？

Motion Director は無料です。単品ルックも完全版スキルも 1 つ $4.90、またはプランですべて使えます：月額 $9.90、年額 $79、または創設メンバー向け買い切りの $169。クレジットはなく、かかるのはエージェント自体の利用分だけです。

実写のような映像や人物は作れますか？

作れません。Claude Motion は実写映像も人物も生成せず、私たちのスキルも同じです。動かすのは文字、グラフ、図形、そしてあなたのスクリーンショットや写真です。撮影が必要なカットは撮影し、その上にモーショングラフィックスを重ねてください。

あわせて読む

• Claude で動画は作れる？：Claude に作れるもの・作れないもの、そして 3 つの作り方。
• Claude Motion とは？と Claude Motion の利用条件と料金。
• HyperFrames と Remotion の比較：コードで動画を作る代表的な 2 つのエンジン。
• Claude Motion の代替ツール：コードのフレームワークからブラウザーアプリまで。

Claude は Anthropic, PBC の商標です。ギャラリーの動画は各作者に帰属します。