Claude Codeが動画制作機能を獲得し、プログラマティック動画生成フレームワークRemotionとの統合によって、平易な英語の指示だけでプロフェッショナルなアニメーションを生成できるようになった。この革新的な技術は、Remotionが公開したエージェントスキルによって実現されており、Claude CodeやOpen Codeなどのコーディングエージェントが複雑なGUIを使わずにReactコンポーネントを記述するだけで高品質な動画を作成できる。従来であれば何千ドルものコストと多大な時間を要したアニメーション制作が、数回のプロンプト入力のみで完結する時代が到来し、プロダクト動画やマーケティング素材の制作障壁が劇的に低下している。エージェントスキルという新しい概念により、AIは必要な情報のみを段階的に読み込む効率的な動作が可能となり、2026年はAIを活用したビジネス起業に最適なタイミングであることが示されている。
Claude Codeによる動画生成の実現
Claude Codeが動画を作れるようになりました。作りたいものを平易な英語で伝えるだけで、プロフェッショナルなアニメーションをゼロから生成してくれるんです。信じられないですよね。例えば、今皆さんが見ているこの動画全体が、Claude Codeにタイピングするだけで作られたものなんです。アニメーション作業もUI操作も一切なし。ただ平易な英語で指示しただけです。
でも、デイビッド、そんなことどうやって可能なの?って思いますよね。実はこれ全て、Remotionというツールで実現されているんです。Remotionを使えば、プログラマティックに動画を作成できます。
そしてRemotionが独自のエージェントスキルをリリースしたことで、Claude CodeやOpen Code、その他のAIエージェントがついにこの技術を使えるようになったんです。この動画では、Remotionとは何か、新しいエージェントスキルの設定方法、そして実際にAIマーケティングでどう活用してビジネスを成長させるかを解説していきます。だから最後まで見てくださいね。
Remotionスキルの可能性
Remotionスキルで何ができるか、もう一つ例をお見せしましょう。キャラクターのデザイン以外は全て、Claude Codeによって生成され、つなぎ合わされたものです。つまり今見ているこの動画全体が、Claude Codeで作られているんです。誰かが英語をタイピングして、Claude Codeがこのビデオゲームの動画をデザインしているわけです。クレイジーでしょう。
Remotion、Claude Code、そしてAnti-gravityで作られた別の例もあります。
個人的に、私はアニメーターでもデザイナーでもないので、こういうものを作ろうとしたら何時間もかかるでしょう。まずこれらのソフトウェアを学ばなければなりませんからね。でも今は、Claude Codeにタイピングするだけで、Claude Codeがあなたのために構築してくれるんです。つまりAIを使ってプロダクトを構築できるだけでなく、AIを使ってマーケティングもできるようになったということです。
自分のビジネスを始めるのに、今ほど良い時期はありません。
Remotionとは何か
では、Remotionとは何でしょうか?これら全てを可能にしているものは何なのか。Remotionは、Reactを使ってプログラマティックに動画を作成するためのフレームワークです。コードはこんな感じになります。ウェブサイトがフレームごとに録画されて動画ファイルになると考えてください。
データはAPI、データベース、またはユーザー入力から取得します。そしてRemotionが行う各レンダリングは、自動的にユニークな動画を生成します。AIエージェントがこれを気に入る理由は、彼らがコードを書くのが得意だからです。Claude CodeでもOpen Codeでも、その他のコーディングエージェントでも、彼らはすでにコードを書くことに長けています。
しかし同じエージェントたちは、After EffectsやPremiere Proのような、人間向けに設計された複雑なグラフィカルユーザーインターフェースを使うのは苦手なんです。Remotionがこの問題を解決します。動画作成とアニメーションをReactコンポーネントに変換するんです。だからエージェントがすべきことは、いくつかのReactコンポーネントを書くだけ。結果は美しい動画やアニメーションになります。
プロダクト動画の作成活用
自分のアプリを構築している方や、自分のビジネスを持っている方に向けて、Remotionを使ってプロダクト動画を作る方法をお見せします。これもClaude Codeとremotionだけで作られたものです。Gmailのような見た目のプロフェッショナルなアニメーションを見てください。メールのハイライト、動くカーソル、テキスト入力。
こういうものを作るためにアニメーターやデザイナーに何千ドルも支払う必要があったわけです。今ではremotionスキルを使ったClaude Codeへの数回のプロンプトだけで済みます。もちろん、後ほど設定方法をお見せしますが、まずはこれがどれほど印象的かをお見せしたかったんです。
もう一つ例をお見せしましょう。
明らかに、この人は高品質な画像やアセットを提供していますよね。だから高品質な画像やアセットを持っていれば、さらに良い結果が得られます。でもそれらの間を循環するアニメーションはRemotionによって構築されたものです。ちなみに、このエージェントスキルは文字通り24時間前にリリースされたばかりです。AIの最先端に留まりたいなら、ぜひチャンネル登録してください。
2秒でできて、とても助かります。ありがとうございます。
Remotionの内部動作
では、Remotionがどのように動作しているのか見ていきましょう。まず理解すべきなのはSequenceコンポーネントです。これらは時間軸に要素を配置するもので、どんな動画編集ツールにもあるタイムラインのようなものです。それぞれがSequenceコンポーネントです。
npm run devで開発サーバーを起動すると、ローカルホストプレイヤーが立ち上がります。こんな感じで、動画をリアルタイムでスクラブして、異なるセクションがどう見えるか実際に確認できます。準備ができて実際にレンダリングしたいときには、各フレームがスクリーンショットされ、FFmpegを通じてMP4につなぎ合わされます。
エージェントスキルの概念
次にエージェントスキルについて話しましょう。これはほとんどの人が理解していない比較的新しい概念です。エージェントスキルは、Claude CodeやOpen CodeのようなAIコーディングエージェントに、特定のツールの使い方を教える指示ファイルです。
エージェントスキルの素晴らしい点は、プログレッシブディスクロージャーという手法を使っていることです。大量のトークンやプロンプトをコンテキストウィンドウにただ詰め込むわけではありません。それは無駄ですからね。代わりに、タスクが説明と一致する場合にのみ、Claudeはスキルの完全な指示を読み込みます。タスクがコーディングに関するものなら、動画編集に関するスキルは読み込みません。でもプロンプトが動画編集に言及していれば、動画編集に関するスキルを読み込むわけです。
このプログレッシブディスクロージャーの原則により、コンテキストは常に無駄のない状態に保たれます。
スキルはオープンスタンダードです。つまりMCPのような、agents.mmdファイルのような、AI エコシステム全体でますます多くの企業やエージェントが採用しているものなんです。だから今日、スキルはClaude Code、Agent Zero、Open Code、その他多くのエージェント全体で機能します。
ここでの大きなニュースは、Remotionが独自のエージェントスキルを作成したことです。これをこれらのエージェントにプラグアンドプレイするだけで、すぐにプロフェッショナルなアニメーションを作成できるようになります。
このRemotionスキルには、RemotionのAPIパターン、異なるコンポーネントの規則、アニメーションを書くためのベストプラクティスが全て含まれています。Claudeに動画を作るよう依頼すると、これらの指示を読んで適切なRemotionコードを生成します。スキルには3Dオーディオキャプションのような特定のトピックに関するリファレンスドキュメントも含まれています。
だからClaudeは、そのタスクに必要なものだけを読み込みます。そしてRemotionは非常に使いやすいです。Claude Codeにタイピングするだけで、Claude Codeがコードを実行してくれるので、人々は初回で印象的なアニメーションを作成しています。今まさに見ているこれが、たった数回のプロンプトで初回に作られたものです。
最高の結果を得るためのベストプラクティス
このスキルで平凡な結果を得るか、Remotionから素晴らしいアニメーションを得られるかを決定する明確なベストプラクティスがあります。
まず、常に明確なストーリーボードから始めましょう。Claudeにプロンプトする前に、各シーンを説明する必要があります。また、最高の結果には反復的なアプローチが必要です。全てを一発で完成させようとするのではなく、小さなプロンプトから始めて、結果を見て、プロンプトを調整して、というように進めていきます。通常、私が見た最高のRemotionアニメーションは、少なくとも5から10回のプロンプトが必要でした。
プロのヒントとして、コンポジションはモジュール化しておきましょう。イントロ、トランジション、アウトロのための再利用可能なコンポーネントを構築してください。全てを単一のコンポーネントに詰め込もうとしないでください。
そして先ほども言いましたが、高品質なアセットを提供してください。ビデオゲームを作っているなら、スプライトを提供してください。プロダクトをデザインしているなら、高品質なプロダクト写真を提供してください。提供するアセットが良ければ良いほど、結果も良くなります。
セットアップ方法の実践
では、実際にこれをセットアップする方法をお見せしましょう。まずremote.devにアクセスします。このnpx createコマンドをクリックしてください。クリップボードにコピーされます。次にターミナルを開いて、これを構築したいフォルダにcdで移動する必要があります。
cd documentsと入力して、lsで確認、David Andreにcdで入ります。よし。このフォルダにターミナルコマンドをペーストします。ブランクテンプレートを選択。よし。Tailwindを追加しますか?はい。エージェントスキルを追加しますか?もちろんはい。完了です。Cursorで開きますか?はい。
右側にブランクRemotionプロジェクトに必要な全てが揃ったプロジェクトができました。いつもポップアップするサイドバーをいくつか閉じますね。これで準備完了です。残るはスキルのインストールです。
これはVercelが開発したskills.shのページです。動画の下にリンクを貼っておきますが、これもクリックするだけでターミナルコマンドがコピーされます。
ターミナルに戻って、clearと入力してからペーストします。はい、このパッケージをインストールします。完了です。スキルが入りました。エージェントを選択します。Claude Codeを使います。ここで、このプロジェクトだけにRemotionをインストールするか、グローバルにインストールするか選べます。お好みでどうぞ。インストール方法はnpmにしましょう。
インストールを進めます。完了です。セットアップは非常にシンプルです。ターミナルを使うのが怖いという方、なぜですか?いくつかのコマンドをコピーペーストするだけで、平易な英語で質問してくれますよ。ターミナルを恐れないでください。それは制限的な思い込みです。2026年にAIの最先端にいるためには、ターミナルを使わなければなりません。
Claude Codeでの実践開始
次に、IDEに戻りましょう。同じフォルダでターミナルを開きます。claudeと入力してClaude Codeを起動します。このフォルダへの権限を与えます。実行。ここに移動させましょう。/skillと入力して、利用可能なスキルを確認します。完璧です。プロジェクトスキル、はい、Remotionベストプラクティス。素晴らしい。エスケープキーを押します。
これでスキルが正常にインストールされ、Claude Codeがそれを認識しているということです。繰り返しますが、これ用に別のフォルダ、明確なディレクトリを作成することをお勧めします。私がここでやったのもそれです。Remotionフォルダを作成して、このプロジェクトフォルダを入れて、全てがここで行われるようにしました。コンピュータ全体にファイルが散らばらないようにね。
このフォルダで実行して、ここでClaude Codeに作業させます。コーディングエージェントを使う際の良い習慣です。
Remotionスキルを使ってClaude Codeを使う際は、アニメーションはシンプルなプロンプトで作成されることを覚えておいてください。だから非常に詳細なプロンプトを使い、ClaudeにRemotionスキルを使うよう依頼してください。
私もそれをペーストして、Claudeに何をしているのかコンテキストを与えました。次にお勧めするのは、物事を整理しておくために、各アニメーション用に別々のサブディレクトリを作成するようClaudeに依頼することです。基本的に、こんな感じの一つのルートフォルダがあって、ここにはアニメーションが入らないようにします。各アニメーション用に複数のサブフォルダを持つことになるからです。
よし。Claudeは理解しました。これで全てのコンテキストが揃いました。最初のアニメーションを作り始められます。新しいフォルダを作成してpromptsと名付けます。その中にprompt01.mdという新しいファイルを作成します。これが私たちの最初のプロンプトになります。
ご覧の通り、非常に詳細です。このアニメーションで素晴らしい結果が欲しいからです。
初のアニメーション制作
3Blue1Brownのスタイルで視覚的なアニメーションを作ります。このチャンネルをご存じない方は、本当に見逃しています。数学教育に関して最高のYouTubeチャンネルの一つです。AIやLLM、ビットコインの仕組みに関する動画もあります。本当に素晴らしいチャンネルで、美しいアニメーションで知られています。
Remotionを使って彼のスタイルを再現してみます。これは非常に詳細な、明らかにAIで書かれたものですが、非常に詳細な、構築したいものの説明です。Remotionを使う際はできるだけ詳細にすべきです。実際、これらのいくつかは削除できそうですね。
よし、少し整理しました。これを中断して、回帰を止めて、prompt 01を読んで、持っているRemotionスキルを使って実際に構築するように指示します。よし。エンター。ご覧の通り、プロンプトは400行です。非常に詳細なプロンプトです。では、Claudeが魔法を見せるのを見ましょう。
スキルを使いたいと聞いてきています。はいを選択します。そして今後は聞かないでください。毎回このスキルを承認する必要はないので。ご覧の通り、特定のものを読み込んでいます。animations.md、timing.md、sequencer.mdです。スキルから全てを読み込んでいるわけではなく、必要な部分だけです。これがプログレッシブディスクロージャーです。これがコンテキストエンジニアリングを最適に保っているわけです。
今、ここにサブディレクトリを作成しています。Pythagoreanです。完了です。Claude CodeがRemotionのReactコードを実行しています。これは77行のコードです。81行です。異なるコンポーネントを作っています。とても良いですね。アニメーション化されたライン用に一つ、三角形用に一つ、正方形用に一つ。再利用可能なコンポーネントを作成しています。そうすれば再利用できますからね。
indexを開いています。たくさんのファイルを作成しています。このアニメーションが楽しみです。npm run devを実行しましょう。どんな感じか見てみます。
これがRemotionのUIです。今のところ何もありませんが、こんな感じになります。ご覧の通り、どの動画編集ツールにも似ています。メインのClaude Codeに戻りましょう。
まだアニメーションを作っています。17,000トークンが4分間動いています。最高のアニメーションには時間がかかります。1秒で得られるようなものではありません。Claude Codeは数百行のコードをこれらの異なるReactコンポーネント用に書かなければならないことを覚えておいてください。RemotionはReactで動作するからです。
よし、できました。
メインのClaude CodeがついにRoot.tsxを更新して、これらの異なるコンポーネントを登録しました。新しいClaude CodeのUIは気に入っています。とてもクリーンです。あ、違った。クレイジーです。新しいデザインを褒めたら完全に壊れました。とにかく、未使用の変数を削除しています。うまくいけば他のリンターエラーは出ないでしょう。
10分です、皆さん。このアニメーションに10分。かなり狂っています。数ヶ月前のClaude Codeなら10分も動作し続けることはなかったでしょう。だからAnthropicは怠惰さを減らしているんです。完了しました。よし、見てみましょう。
よし、できました。ピタゴラスの証明アニメーションが完成しました。作成されたものは以下の通り。プロジェクト構造、メインオーケストレーター、自己描画ライン、三角形イントロ。
よし、見てみましょう。IDごとの図と証明の長さは2,400フレーム、60fpsで40秒です。プレビューするには、npm run devを実行してRemotionスタジオでPythagorean proofsコンポジションを選択してください。やってみましょう。
これを終了して、よし。npm run dev。左側にコンポジションがあります。Pythagorean proofsを選択しましょう。ご覧の通り、複数の異なるシーケンスを持つタイムラインがあります。実行してみましょう。
これはかなり良いですね。よし、皆さん。これはワイルドです。大きくしましょう。これは実際にクレイジーです。Claude Codeによって書かれています。これを自分でやらなければならないことを想像してみてください。手動でやるには永遠に時間がかかるでしょう。平易な英語での単一プロンプトです。
いくつかは順序が間違っていますが、繰り返しますが、一回のプロンプトです。これはワイルドです。
これは少しずれていますが、でも将来のプロンプトで修正できないことはないですよね。そして繰り返しますが、これは全てコードです。全てプログラマティックです。
プロダクト広告の実例制作
もう一つ例をお見せしましょう。今回はアセット付きです。新しいプロンプトを作成します。新しいファイル、prompt 02。よし、ペーストします。少し短めで200行弱です。これはClaude Codeの広告になります。ここにこの画像があります。Claude startupは、Claude CodeのUIのスクリーンショットです。
prompt 02を読んで、Cloud startupを使ってRemotionでアニメーションを作成してと指示します。コード行数は少なければ少ないほど良いです。また12分も動作してほしくないので。サブフォルダディレクトリを覚えているか見てみましょう。各アニメーション用にサブフォルダを作成するよう指示したので。
PNGファイルをpublicに移動しました。
なるほど、アセットが入る場所だからですね。そして今、Claude adサブフォルダを作成しました。今のところ空です。Remotionコンポジション用のフォルダ構造全体を作成するところです。
繰り返しますが、ブラウザ内で異なるコンポジションを持てます。これがデフォルトのもので、これがPythagorean proofのものです。
4分割にして、下のシーケンスで異なる部分を無効にできます。例えばこれが欲しくなければ、隠せます。適切な動画エディタです。明らかにPremiereほど高度ではありませんが、堅実です。堅実で、全てプログラマティックです。
全てReactコードで、アセットはここで見られます。明らかにCloud startupファイルがあって、今Claude adがあります。リアルタイムで構築されているのが見られます。Claude adがここにあります。よし、フィットするようにズームアウトします。見てください。まだ終わっていませんか?よし、今回の方が速いです。
2分です。コンポジションコードad、長さ17秒。カーソルがターミナルアイコンまで移動してクリック。見てみましょう。1倍速で最初から再生します。
デスクトップビューがあります。少し大きくします。ターミナルアイコンがクリックされます。よし、ターミナルはクリックされませんでした。ブラウザがクリックされましたが、ターミナルが開きます。cd subscribe to the channelとタイピングします。とても良いですね。
見てください、皆さん。これはクレイジーです。これは全てコードです。全てアニメーション化されています。再生しましょう。アニメーターでない人が手動でこれをやったら、かなりの時間がかかるでしょう。2分未満の単一プロンプトでClaude Codeの広告ができました。明らかに、こちらは前回よりずっと速く、詳細も少ないですが、フォローアップできます。
例えば、背景のグラデーションをCloud orangeカラーに変更してと言えます。よし。リアルタイムで変わるのを見ましょう。できました。Claude Codeを変更しました。すでにずっと良くなりました。すでにずっとClaude Codeらしく感じます。
平易な英語でタイピングして文字通りアニメーションしています。2026年にClaude Codeを使っていないなら、遅れを取っています。2026年には、本当に遅れを取る余裕はありません。
さらに次のレベルに進んで、今年実際にAIビジネスを始めたいなら、そのための完全な動画を作りました。画面に表示されます。ぜひ見てみてください。
コメント