Claude Code で動画を作る方法（ステップごとの手順、2026年版）

はい、Claude Code で動画を作れます。アニメーションをコードとして書き、自分のパソコン上で MP4 をレンダリングします。よく使われる方法は、Remotion のエージェントスキル、HyperFrames、または Motion Skills の完全版スキルのように映像全体を企画し、音楽を付けてレンダリングするスキルです。Claude Code は Claude Pro と Max に含まれており、Claude Motion は必要ありません。Claude Motion は、Claude の Team プランと Enterprise プランで提供されている別のベータ機能です。

このページでは、4 つの方法の比較、無料の Motion Director を使ったインストールから MP4 までのステップごとの手順、そして実際の映像 1 本をブリーフから最後の修正までたどった例を紹介します。

2026年10月29日に、Claude の料金ページ、Claude Code のクイックスタート、Remotion のコーディングエージェント向けガイド、HyperFrames の README と照らし合わせて確認しました。

Claude Code で動画を作る 4 つの方法

方法	書くもの	できるもの	セットアップ	費用
Opus へのプロンプト 1 つ	なし。Claude が HTML アニメーションを書く	ブラウザーで動くページ。録画やレンダリングは自分で行う	なし	契約中の Claude プラン
Remotion + エージェントスキル	Claude が書く React コンポーネント	手元に残る Remotion プロジェクトから作る MP4	`npx create-video` のあと `npx remotion skills add`	Remotion 独自のライセンス（ライセンスページを参照）
HyperFrames	Claude が書く HTML、CSS、GSAP	ヘッドレス Chrome と FFmpeg でレンダリングした MP4	`npx hyperframes init`、またはその Claude Code プラグイン	オープンソース（Apache 2.0）
Motion Skills の完全版スキル	あなたの素材と一文	映像一式：方向性、オリジナルの音楽、チェック、MP4	下で紹介する一文でのインストール	Motion Director は無料。1 スキル $4.90、またはプラン

Opus へのプロンプト 1 つは、Claude がどんなアニメーションを作れるかを見るいちばん手早い方法です。「アプリ用の 15 秒のアニメーションタイトルを、1 つの HTML ファイルで」と頼んで、開いてみてください。結果は実行するたびに変わり、MP4 にするのは自分で行う必要があります。Claude Motion プロンプトのページには、まさにこの用途のためにユーザーが共有したプロンプトを載せています。

Remotion は、React で動画を作るための定番のフレームワークです。そのコーディングエージェント向けガイドでは、npx create-video --yes --blank my-video でプロジェクトを作り、npx remotion skills add でエージェントスキルを追加し、npm run dev でプレビューして、2 つ目のターミナルで Claude Code を起動する手順になっています。すべてのコンポーネントを細かく制御したい開発者に向いています。仕事で使う前に Remotion のライセンスを確認してください。そのエージェントスキルと完全版スキルの違いは、Remotion のエージェントスキルと Motion Skills の比較をご覧ください。

HyperFrames は HeyGen によるオープンソースのフレームワークで、「HTML、CSS、メディア、シーク可能なアニメーション」を MP4 ファイルに変換します。Claude Code プラグインとしてインストールするか、npx hyperframes init my-video でプロジェクトを始め、npx hyperframes render でレンダリングします。当サイトの以前のモーションテンプレート（現在は作例として残しています）は HyperFrames で作られました。2 つのエンジンの比較は HyperFrames と Remotion をご覧ください。

Motion Skills の完全版スキルは、エージェントが読み込むスキルです。コンポーネントを書く必要はありません。プロジェクト、メモ、データ、台本を渡し、映像の用途を伝えるだけです。スキルは方向性を選んでキーフレームを見せ、映像をコードとして書き、音楽を作曲し、すべてのフレームをチェックして、私たちのオープンなエンジン motion-skills（mo）で MP4 をレンダリングします。このガイドの残りでは、この方法を使います。

必要なもの

Claude Code（Claude Pro または Max。Team、Enterprise、Claude Console アカウントでも使えます。Free プランでは使えません）。
Node.js 22 以降。
FFmpeg（macOS では brew install ffmpeg）。
Google Chrome。 レンダラーがヘッドレスで操作します。

エンジンは初めてレンダリングするときに npx で自動的にインストールされ、API キーは要りません。スキルの最初のステップである mo doctor が 3 つすべてを確認し、足りないものを教えてくれます。スキルの置き場所について詳しくは、エージェントスキルのインストール方法をご覧ください。

Motion Director でのステップごとの手順

Motion Director は無料で、Google ログインだけで使えます。どの種類でも 10〜20 秒の映像を 1 本作ります。たとえば、ローンチのティーザー、1 つの数字を印象づける映像、1 つのアイデアの解説、縦型のフック動画などです。

1. 一文でインストールする

フォルダー（自分のプロジェクト、または空のフォルダー）で Claude Code を開き、次を貼り付けます。

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.

Claude Code がガイドを読み、npx motion-skills install motion-director というコマンドを 1 つ実行します。初回はブラウザーでページが開くので、Google でログインし、ターミナルに表示されたコードを承認してください。自分でターミナルを操作したい場合は、各スキルのページに Claude Code、Codex、Cursor、Gemini CLI 用のコマンドがあります。インストール指示をコピーを押し、ターミナルでインストールタブを開いてください。

2. 素材を渡す

映像のテーマを伝え、使う素材を示します。いま開いているリポジトリ、README、CHANGELOG、スプレッドシート、リンク、台本などです。たとえば次のように頼みます。

README.md と CHANGELOG.md にある 2.0 のリリースノートをもとに、このアプリの 15 秒のローンチティーザーを作ってください。16:9 で、自社サイト用です。

スキルは sources.md を作り始め、映像に出す可能性のあるすべての文、数字、名前を、その出どころのファイルや URL とともに記録します。質問するのは映像の内容を変えること（どこで流すか、長さ、ブランド）だけで、それぞれに初期値を書き添えます。まだ素材がない場合は、スキルに付属するサンプルの変更履歴を使い、そのことを伝えます。

3. 方向性を選ぶ

何かを作り始める前に、スキルは映像の方向性を 3 つ提案します。それぞれ一行の説明と、その方向性のスタイルとカラーパレットで作った静止画 1 枚です（Motion Director ではキネティックタイポグラフィ、データストーリー、ホワイトボード）。1 つを選ぶか、組み合わせます（「2 つ目の色で 1 つ目の構図」など）。「おまかせで」と伝えていれば、いちばん強い案を選び、どれにしたかを伝えます。続いて、その方向性の短い構成案を書きます。フックが入るタイミング、いちばん強い拍で要点が届くタイミング、そして最後に止めて見せる締めです。これが絵コンテの確認にあたります。静止画は、完成した映像より手早く変更できます。

4. 制作、チェック、作曲を任せる

スキルは映像を 1 つの index.html（HTML と GSAP）として書き、自分の仕事を確認します。映像全体のコンタクトシートを作り、mo check でエラーを見つけ、mo audit で画面上のすべての文に出典があることを確かめ、重要な場面の静止画を開いて問題を直します。また、題材に合わせた短いモチーフを持つオリジナルの音楽を書きます。エージェントは音を聞けないので、どんな音楽を書いたかを言葉で伝えます。

5. 変更を頼む

レンダリング結果を見て、変えたいところをふつうの言葉で伝えます。たとえば「ロゴが出るのが遅すぎる」「自社のグリーンを使って」「最後の一行をもっと長く見せて」などです。スキルはその場所とタイミングで最小限の変更を行い、もう一度レンダリングします。mo studio を実行してライブプレビューを開き、C キーを押して該当するフレームをクリックし、そこに変更内容を書くこともできます。

6. MP4 を受け取る

最後のレンダリング結果は、パス、長さ、形式とともにプロジェクトに保存され、スタイルと音楽についての一行のメモと handoff.md が付きます。その種類の完成版の映像（30〜90 秒のローンチ映像、解説動画、データ動画）が欲しくなったら、対応する映像タイプの完全版スキルが同じフォルダーから続きを作ります。

実例：「Claude Code を 3 ステップで」

この 29 秒の映像は、私たちの「ウォークスルー映像」スキルで作りました。このスキルは Motion Director と同じ流れで動き、より長い映像とより多くのスタイルに対応しています。

Claude Code を 3 ステップで

インストール、プロジェクトで起動、最初の質問。公式クイックスタートどおりで、バージョン表示は実際の出力です。

ウォークスルー映像の作例16:9 · 29 秒

非公式の解説で、Anthropic が制作・承認したものではありません。

ブリーフ。「Claude Pro または Max プランを使っていて、Claude Code を一度も使ったことがない人向けの、30 秒・16:9 のオンボーディング用ウォークスルー。自社サイトと利用開始メールで流す。インストールし、プロジェクトで起動し、何かを聞いてみるまで。公式のクイックスタートだけを使い、コマンドや出力をでっち上げないこと。」素材は Claude Code の公開されているクイックスタートとセットアップのページ、そして実際に一度実行した claude --version の結果でした。

方向性。 スキルは 3 つの案を出しました。ステップを示すレールの付いた大きなターミナル、色の付いた面をまたいで延々と続く 1 本のコマンドライン、そして各コマンドが何に作用するかを示すシステムマップです。選んだのはターミナルで、理由は「伝えたいのはワークフローで、インターフェースはターミナルなので、いちばん強い証拠は実際のコマンドを大きく打ち込んで見せること」でした。リスクも最初に挙げていました。実際のセッションのスクリーンショットがなかったため、その画面は簡略化したものだとわかるようにする必要があり、映像の中では「レイアウトは簡略化しています」と表示しています。

プラン。 112 BPM の小節単位で組んだ構成案です。インストール、起動、質問と進み、ピークで回答例、締めのカードでインストールコマンドを見せます。画面上のすべての言葉は、sources.md でクイックスタートまでたどれます。バージョンの行は実際の出力です。

修正。 最初のレンダリングのあと、mo qa によって、ステップ 1 のあとに 3 秒、ステップ 2 のあとに 2 秒の、誰にも必要のない静止があることがわかりました。ステップ 2 と 3 を前に詰め、ピークも 1 小節早めました。映像が 30 秒ではなく 29 秒なのはこのためです。

この映像のソースは、方向性、構成案、出典も含めて、「ウォークスルー映像」スキルに作例として同梱されています。

映像タイプに合わせて完全版スキルを選ぶ

Motion Director は、意図して 20 秒までにしています。完成版の映像には、映像タイプごとに専用の完全版スキルがあり、それぞれのスタイルが組み込まれています。

ローンチ： ローンチ映像、ウォークスルー、比較、ブランド紹介、イベント告知、アプリストアのプレビュー。
解説・授業： 解説動画、レッスン、論文の解説、年表、数学の解説。
SNS： 縦型ショート、トーキングヘッド動画、タイトルとトランジション、SNS カード。
業務報告： データ動画、チームの近況報告、セッションのリプレイ、ナレーション付きスライド、投資家向けの近況報告。

完全版スキルは 1 つ $4.90 です。プランならすべて使えます。料金は月額 $9.90、年額 $79、または創業メンバー向けの買い切りライフタイムパスが $169 です。料金をご覧ください。

トラブルシューティング

「FFmpeg not found」または「Chrome not found」と表示される。 mo doctor（npx --yes motion-skills doctor）を実行すると、足りないものがわかります。macOS では brew install ffmpeg を実行し、Google Chrome は Google からインストールしてください。
Claude Code がスキルを使わない。 インストール後に Claude Code の新しいセッションを始めて新しいスキルを読み込ませ、スキル名を挙げてもう一度頼んでください。たとえば「motion-director スキルを使って」と伝えます。
サンドボックスがブラウザーやローカルサーバーをブロックする。 スキルは画面のチェックにその両方を使います。Claude Code に聞かれたら許可し、チェックを飛ばさせないでください。
映像が 20 秒より長い。 Motion Director はいちばん強い 20 秒を作り、完成版の映像を作る完全版スキルを教えてくれます。

Claude Code を使っていない場合

同じスキルは Codex、Cursor、Gemini CLI でも動きます。Claude の Free プランの場合も、この方法になります。各エージェントがスキルをどこに置くかは、エージェントスキルのインストール方法で説明しています。Claude Motion そのものを探していた場合は、Claude Motion がプランにない場合をご覧ください。これらのエージェントでの手順と、それぞれが読み込むフォルダはCodex・Cursor・Gemini CLI で動画を作るにあります。

よくある質問

Claude Code で動画を作れますか？

はい。Claude Code はアニメーションをコードとして書き、パソコン上で MP4 にレンダリングできます。よく使われる方法は、Remotion のエージェントスキル（React）、HyperFrames（HTML と GSAP）、または Motion Skills の完全版スキルのように映像全体を企画し、音楽を付けてレンダリングするスキルです。Claude Code は Claude Pro と Max に含まれています。

Claude で動画を作るのに Claude Motion は必要ですか？

いいえ。Claude Motion は、Claude の Team プランと Enterprise プランで提供されている別のベータ機能です。Pro または Max の Claude Code でも、スキルを使えば、コードで作る同じ種類のアニメーションを作れます。レンダリングは自分のパソコン上で行われます。

何をインストールする必要がありますか？

Node.js 22 以降、FFmpeg、Google Chrome です。motion-skills エンジンは初めてレンダリングするときに npx で自動的にインストールされ、API キーは要りません。

無料ですか？

Motion Director は無料で、Google ログインだけで使え、10〜20 秒の映像を作ります。完全版スキルは 1 つ $4.90 です。プランならすべて使えます。料金は月額 $9.90、年額 $79、または買い切りで $169 です。クレジットはなく、使うのは Claude プラン自体の利用枠だけです。

映像がパソコンの外に送られることはありますか？

映像はあなたのパソコン上で作られ、レンダリングされます。レンダリングが終わると、エンジンは claude-motion.com に、どのスキルでレンダリングしたかと、成功したかどうかだけを伝えます。映像の内容については何も送りません。MOTION_SKILLS_TELEMETRY=0 を設定すると、この送信を止められます。

出典

Anthropic、Claude pricing（Claude Code が含まれるプラン）
Anthropic、Claude Code quickstart
Remotion、Coding agents
HeyGen、HyperFrames on GitHub

このガイドは独立したもので、Anthropic、Remotion、HeyGen とは関係ありません。Claude は Anthropic, PBC の商標です。2026年10月29日に、上記のページと照らし合わせて確認しています。