Remotion 4 × Claude Code — React で動画を AI 量産する設計

はじめに

動画は「AI には難しいコンテンツ」だと思われがちだ。映像編集ツールは GUI ベースで、操作はマウスとキーボードを前提としている。コードで表現できる部分が少なく、AI エージェントが介入できる余地がない。

Remotion はその前提を崩す。動画をすべて React コンポーネントとして記述するフレームワークだ。タイムライン・アニメーション・テキスト・グラフをすべて JSX で書く。フレームは currentFrame という整数値で管理され、状態遷移はフレーム数に対する純粋関数として表現できる。

React で書けるということは、Claude Code が書ける。八雲の動画生成エンジン montage は、Remotion 4 をベースにこの前提を設計全体に織り込んでいる。

課題: 動画生成は通常コードで書きにくい

動画制作をコードで扱う最大の障壁は「状態の依存関係が複雑になること」だ。

従来の動画制作ツールはタイムラインが中心にある。クリップ A が終わったらクリップ B が始まる、というような時間軸上の依存を GUI で管理する。これをコードに落とすとフレーム番号の計算があちこちに散らばり、1 箇所を変更すると連鎖的に他を修正しなければならない状態になりやすい。

ハードコードが増えると AI が壊すという問題もある。from={240} durationInFrames={90} のように数値が散在するコードは、Claude Code が一部を変更したときに他との整合性が崩れる。AI は文脈全体を把握しながら書くが、暗黙の依存関係には気づきにくい。

もう一つはブランド一貫性の維持だ。フォントサイズ・カラー・アニメーション速度を各コンポーネントに直書きしていると、生成のたびに揺れが生じる。

アプローチ: ContentBlock を React コンポーネントとして実装

montage は動画を Video → Scene → Layer → Layout → Slot → ContentBlock の 6 階層で表現する（トップダウン設計の詳細はこちら）。

この中で最も重要なのが ContentBlock だ。棒グラフ・折れ線グラフ・指標カード・テキストブロックなど、画面に表示される要素の最小単位がすべて ContentBlock として定義されている。

// bar-chart ContentBlock の実装イメージ
export const BarChartBlock: React.FC<{ data: BarChartData; frame: number }> = ({
  data,
  frame,
}) => {
  const progress = interpolate(frame, [0, TIMING.barEnter], [0, 1], {
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  return (
    <AbsoluteFill style={{ background: COLORS.surface }}>
      {data.items.map((item, i) => (
        <Bar key={i} value={item.value * progress} label={item.label} />
      ))}
    </AbsoluteFill>
  );
};

TIMING と COLORS はすべて config/defaults.ts に集約された定数だ。数値をコンポーネントに直書きしない、これが AI に書かせ続けるための最重要ルールになっている。

Claude Code に React で書いてもらう構造

Claude Code が ContentBlock を生成するときに参照するのは 2 種類のドキュメントだ。

1 つ目は Block Schema（specs/system/block-schemas.md）。各ブロックタイプがどのデータ構造を受け取るかを Markdown の表で定義したプロンプト文書だ。Claude はこれを参照してデータ構造の仕様を把握する。

2 つ目は coding-standards.md（.claude/rules/coding-standards.md）。ハードコード禁止のルール・TIMING の使い方・ブロック作成テンプレートが書かれている。新しいブロックを実装するとき Claude Code は必ずこれを読んでからコードを書く。

この 2 ドキュメントを先に読ませることで、Claude Code が生成するコードはデフォルト設定準拠になる。フォントは FONTS.body から、スペーシングは SPACING.md から、アニメーション速度は TIMING.fast などの定数から参照する。

// config/defaults.ts の一部（抜粋イメージ）
export const TIMING = {
  fast: 8,       // フレーム数
  normal: 15,
  slow: 30,
  barEnter: 20,
  fadeIn: 12,
} as const;

export const COLORS = {
  surface: "var(--brand-surface)",
  accent: "var(--brand-accent)",
  text: "var(--brand-text)",
} as const;

CSS Custom Properties を経由することでブランド差し替えが容易になる。ハードコードが禁止されているため、Claude Code が新ブロックを書いてもブランド設定から外れない。

ブランド設定駆動 + テンプレート駆動 = 量産

個々の ContentBlock は設計を守っているが、動画として成立するには「どのシーンに何を配置するか」という構造決定が必要になる。これを担うのが Composer エージェントだ（パイプラインの役割分担はこちら）。

Composer は config/pipelines/{type}.json に定義されたパイプライン設定と、Scriptwriter が出力した構成案を受け取り、各シーンに ContentBlock を割り当てた動画 JSON を生成する。

この JSON は Remotion の <Composition> に渡され、レンダリングによって動画ファイルになる。

Scriptwriter 出力（構成案）
   ↓
Composer（Claude Code）が動画 JSON を生成
   ↓
Remotion がレンダリング
   ↓
mp4 / webm 出力

量産が成立する理由は 2 つある。

1 つ目はテンプレート定義だ。「ニュース解説」「市場動向」「指標サマリー」のような動画タイプごとにテンプレートを定義してある。Composer はテンプレートに沿ってシーン構成を決めるため、毎回ゼロから設計しない。

2 つ目はブランド設定の一元管理だ。チャンネルごとのカラー・フォント・スタイルは config/brands/ に集約されている。新チャンネルに対応するときはブランド設定ファイルを追加するだけで、ContentBlock の実装を変える必要がない。

運用してわかった効果と落とし穴

効果として大きかった点は「AI がデザイン崩壊を起こさなくなったこと」だ。

ハードコード禁止を徹底した結果、Claude Code が新ブロックを書いても既存ブロックとフォントサイズ・アニメーション速度が揃うようになった。TIMING.barEnter = 20 という定数の意味を AI が理解して使うため、場面に応じた一貫したアニメーション設計になる。

remotion パッケージが @remotion/google-fonts @remotion/transitions @remotion/paths を統合管理している構造も効いている。依存関係の追加を Claude Code に任せても、型定義と API の整合性が取れた状態で実装される。

落とし穴として気づいたこともある。

interpolate 関数の引数は正しくても、シーン全体のフレーム長との整合性が崩れることがある。durationInFrames={90} のシーンで interpolate(frame, [0, 120], ...) と書いてしまうと、アニメーションが途中で終わる。Claude Code はコンポーネント単体では正しいコードを書けるが、シーン全体との整合性は Reviewer エージェントの確認が必要だ。

もう一つはレンダリング時間だ。Remotion は Node.js で動作し、1 分の動画生成に数分かかることがある。制作パイプラインの中で最も時間がかかるステージであり、CI 的な使い方には向かない。バッチ処理として夜間に回す設計にしている。

まとめ + 関連記事

React で動画を書く = AI が動画を書ける、という等式が Remotion の本質的な価値だ。montage はこの前提を設計全体に織り込み、ContentBlock の実装・Composer による JSON 生成・Remotion によるレンダリングという 3 段構造で動画量産を実現している。

設計のポイントを整理すると:

ハードコード禁止を config/defaults.ts で強制することで AI が書いても崩れない
Block Schema をプロンプト文書として使うことで AI の出力が仕様に沿う
ブランド設定を分離することでチャンネル差し替えをコード変更なしに対応する
テンプレート定義で構成の自由度を制御することで Composer の出力を安定させる

montage の全体設計についてはYakumo の AI 駆動開発のリアルで概観している。パイプラインの各エージェントが何を担い、どう連携するかはこの記事の前提になっている。

動画の構造をどう定義するかについてはトップダウン設計 — 動画生成エンジンの 6 階層構造で詳しく扱っている。ContentBlock が 6 階層のどこに位置するかの全体像がわかる。

各ステージの役割分担についてはAI コンテンツ生成パイプライン — 役割分担で動画を量産するを参照。Researcher から Thumbnailer までの流れと producer エージェントによる指揮構造を解説している。