「動画を作る」という行為が、ついに 「コマンドを叩く」 ことと同義になりました。

2026年1月、Reactで動画をプログラムするフレームワーク Remotion が、Anthropicの Claude Code 向けに「Agent Skills」をリリースしました。これは単なるAIツールではありません。「ピクセルをプロンプトする」時代から、 「動画をコンパイルする」 時代への決定的な転換点です。

Note.comで「Remotion Agent Skills」を検索

Remotion × AIエージェントに関する日本語の実践記事一覧。

note（ノート）

▲ エージェント型コーディングによる動画制作のパラダイムシフト。

「リードエンジニア」のためのワークフロー

すでにClaude Codeを導入していれば、動画制作環境の構築はわずか3分で完了します。

決定論的ビデオ vs 生成AIビデオ

Agent Skillsと従来の生成AI（SoraやVeo）の決定的な違いは、 その基盤となるデータ構造 にあります。

エンジニアにとって、Remotion × Claude Codeは単なる「それっぽい映像」を作るためのものではありません。厳格なデザインシステムに準拠した、 ミッションクリティカルなビジュアル資産 を構築するための武器なのです。

実践ケース：プロモーション動画の瞬時生成

実際に、このブログ用の短いプロモーション動画をClaudeに依頼してみました。全ての工程はハンズオフです。

>> Titanium Smart Ringの紹介動画を作って。
>> ハイテク感のあるタイポグラフィのイントロを入れて。
>> ring.jpgを使い、Tailwindでネオンアクセントを付けて。

Claude: 要件を分析中...
- Remotionテンプレートを初期化。
- @remotion/animation を使用してイントロを実装。
- Tailwind CSSでアセットを配置。

プレビューサーバーを http://localhost:3000 で起動しました。

驚くべきは、 「修正を口頭で伝えるだけ」 （例：「ロゴの点滅を速くして」）で、ReactのHooksが自動的に書き換えられる点です。キーフレームを手動で打つという苦行から、私たちはついに解放されました。

Deep Dive: プログラマブルな動画構成 (Composition)

Remotion の核となる概念は「Composition（構成）」です。エージェントが生成するコードは、単なるテキストではなく、タイムライン上のプロパティを React の Props として受け取る設計になっています。

// エージェントが生成する典型的な構成要素
export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // イージング関数による滑らかなアニメーション
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  return <div style={{ opacity }}>Digital DNA Rendering...</div>;
};

エージェントはこの interpolate 関数の引数を調整することで、ミリ秒単位のアニメーション制御を自動的に行います。

結論：エンジニアの新たな職能

デザイナーとデベロッパーの境界は、CLIによって今まさに消失しようとしています。プログラムで動画を支配するRemotion Agent Skillsの習得は、次世代のマーケティング駆動型開発において、もはや「選択肢」ではなく「必須科目」と言えるでしょう。

Remotion 公式サイト

Reactによるプログラマブル・ビデオの真髄。

remotion.dev