Remotion × Claude Codeで動画を自動生成する方法

「コードで動画を作る」と聞くとハードルが高そうだが、RemotionとClaude Codeを組み合わせると、自然言語のプロンプトだけで動画が生成できる。

この記事では Remotionの環境構築 → Agent Skillsの導入 → Claude Codeで動画生成 → レンダリング までの一連の流れを、実際に手を動かしながら解説する。Remotion v4.0を前提としている（Node.jsは16以上が必要だが、LTSの20以上を推奨）。

Remotionとは — Reactで動画をプログラミングするフレームワーク

Remotionは Reactコンポーネントで動画を作るフレームワーク だ。Premiere ProやDaVinci Resolveのようなタイムラインエディタとは根本的に違う。

従来の動画編集ではGUI上でクリップを並べてエフェクトをかけるが、Remotionでは「フレーム番号に応じてReactコンポーネントが何を描画するか」をコードで記述する。つまり動画は 時間の関数 になる。

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#0a0a0a",
      }}
    >
      <h1 style={{ fontSize: 80, opacity, color: "white" }}>Hello, Remotion!</h1>
    </AbsoluteFill>
  );
};

useCurrentFrame() が現在のフレーム番号を返す。上のコードでは最初の30フレーム（1秒）でテキストがフェードインする。これだけでもう動画だ。実際にレンダリングするとこうなる。

Remotionの大きな利点は以下の3つ。

• 再現性 — コードなので同じ入力から同じ出力が得られる。デザイントークンや変数で一括管理できる
• 自動化 — APIやデータベースから取得した値を動的に動画に反映できる
• AI連携 — コードベースなのでAIエージェントとの相性が良い。Remotion公式もClaude Codeとの連携を推奨している

環境構築 — プロジェクト作成からStudio起動まで

Node.js 16以上（推奨は20 LTS）がインストール済みであることを確認したら、以下のコマンドでプロジェクトを作成する。

npx create-video@latest

対話形式でいくつか質問される。以下のように選択する。

• テンプレート → Blank を選択（Claude Codeに一から作らせるため）
• TailwindCSS → Yes（スタイリングが楽になる）
• Agent Skills → Yes（AIエージェント連携に必要）

プロジェクトが生成されたら、依存関係をインストールしてStudioを起動する。

cd my-video
npm install
npm start

ブラウザで http://localhost:3000 が開き、Remotion Studioが表示される。Studioではコンポジションのプレビュー再生、Input Propsの設定、レンダリングの実行ができる。

この時点ではBlankテンプレートなので、まだ何もない状態だ。ここからClaude Codeで中身を作っていく。

Agent Skillsを導入する

Agent Skillsは、Remotion公式が提供する AIエージェント向けのルールファイル集 だ。Claude CodeやCursor、Codex などのAIエージェントが、Remotionのベストプラクティスに従ったコードを書けるように設計されている。

create-video 時に Yes を選んでいればすでにインストール済みだが、後から追加する場合は以下のコマンドを実行する。

npx skills add remotion-dev/skills

Agent Skillsをインストールすると、プロジェクト内にルールファイル（.md）が配置される。Claude Codeはこれらを読み取って、Remotionの規約に沿ったコードを生成するようになる。

主なスキルカテゴリを紹介しておく。

Claude Codeで動画を生成してみる

Remotion Studioが起動している状態で、別のターミナルを開いてプロジェクトディレクトリ内でClaude Codeを起動する。

claude

あとはプロンプトを投げるだけだ。まずはシンプルな例から試してみよう。

暗い背景に白い「Hello World」というテキストが1秒かけてフェードインする
5秒間の動画を作って。フォントサイズは80px。

Claude Codeがソースファイルを編集してコンポジションを登録してくれる。変更が保存されると、Remotion Studioのプレビューがホットリロードで即座に反映される。

プレビューで確認しながら、追加の指示を出して動画を磨いていく。

テキストの色を#00FF88に変えて。
フェードインの後に0.5秒待って、テキストが上にスライドしながらフェードアウトするアニメーションを追加して。

プロンプトのコツ

Claude Codeに効果的にRemotionの動画を作らせるには、以下のポイントを意識するといい。

• 具体的な数値を指定する — 「大きいフォント」ではなく「80px」、「ゆっくりフェード」ではなく「1秒かけてフェードイン」
• 動画全体の仕様を先に伝える — 解像度（1920x1080）、FPS（30）、トータルの長さ（秒数）を最初に明示する
• 段階的に作る — 一度に完璧を目指すより、基本レイアウト → アニメーション → 色やフォント調整と段階的に仕上げるほうが精度が高い
• Sequenceでのタイムライン指定 — 「最初の2秒はイントロ、3〜5秒目は本文表示」のようにSequenceの区切りを指示すると構造的なコードが生成される

実践 — テック系YouTube風オープニングを作る

ここからは、より実践的な動画を作ってみよう。テック系YouTubeチャンネルの オープニング動画（5秒） を、Claude Codeとの対話だけで仕上げる。

まず全体の仕様をClaude Codeに伝える。

1920x1080、30fps、5秒間のYouTubeオープニング動画を作って。

構成:
- 0〜1秒: 暗い背景からターミナル風のグリーン（#00FF88）のグリッドが浮かび上がる
- 1〜3秒: 中央にチャンネル名「Studio Mitsu」がタイプライター風に1文字ずつ表示される
- 3〜4秒: チャンネル名の下に「Tech & Code」というサブタイトルがフェードイン
- 4〜5秒: 全体がフェードアウト

背景色は#0a0a0a、テキスト色は#00FF88。
フォントはモノスペース（Fira Code）を使って。

Claude Codeが複数のコンポーネントを作成し、Sequence でタイムラインを組み立ててくれる。生成されるコードの構造はおおよそこうなる。

import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";

const Grid = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);
  // グリッドアニメーション
  return (
    <AbsoluteFill style={{ opacity }}>
      {/* グリッド線の描画 */}
    </AbsoluteFill>
  );
};

const TypewriterText = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
  const charsToShow = Math.floor(frame / 3);
  return (
    <span style={{ fontFamily: "Fira Code", color: "#00FF88", fontSize: 72 }}>
      {text.slice(0, charsToShow)}
      <span style={{ opacity: frame % 20 < 10 ? 1 : 0 }}>_</span>
    </span>
  );
};

export const Opener = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      <Sequence durationInFrames={fps * 5}>
        <Grid />
      </Sequence>
      <Sequence from={fps * 1} durationInFrames={fps * 2}>
        <TypewriterText text="Studio Mitsu" />
      </Sequence>
      <Sequence from={fps * 3} durationInFrames={fps * 1}>
        {/* サブタイトルフェードイン */}
      </Sequence>
      {/* フェードアウト */}
    </AbsoluteFill>
  );
};

実際にこのプロンプトから生成してレンダリングした動画がこちら。

実際にClaude Codeが生成するコードはもっと完成度が高いが、核となるパターンはこの通りだ。Sequence の from と durationInFrames でタイミングを制御し、useCurrentFrame() でフレーム単位のアニメーションを実装する。

Studioのプレビューで確認しながら、フォントサイズ、アニメーションの緩急、色味などを追加のプロンプトで調整していく。この 「プロンプト → プレビュー → 調整」のサイクルが速い のがRemotionとClaude Codeの組み合わせの強みだ。

動画をレンダリングして書き出す

プレビューで完成を確認したら、動画ファイルとして書き出す。

npx remotion render MyComposition out/video.mp4

MyComposition はComposition登録時の id に合わせて変更する。出力先を省略すると out/ フォルダにデフォルト名で保存される。

主要なオプション

# コーデック指定（デフォルトはh264 = MP4）
npx remotion render MyComposition out/video.webm --codec=vp9

# 品質調整（CRF: 低いほど高品質、ファイルは大きくなる）
npx remotion render MyComposition out/video.mp4 --crf=18

# 特定フレーム範囲だけレンダリング（テスト用）
npx remotion render MyComposition out/test.mp4 --frames=0-90

レンダリングはローカルマシンのCPUで実行される。5秒程度の動画なら数秒〜十数秒で完了する。

長尺の動画や大量のレンダリングが必要な場合は、Remotion Lambda（AWS）を使うとクラウド上で並列処理できる。1分の動画が約$0.017、10分のHD動画でも約$0.10と低コストだ。ただし個人利用の範囲ならローカルレンダリングで十分だろう。

まとめ

RemotionとClaude Codeの組み合わせで、コードを一行も手で書かずに動画を生成する流れを紹介した。

• Remotion — Reactで動画をプログラミングするフレームワーク。3名以下なら無料（4名以上はCreators $25/席/月〜）
• Agent Skills — AIエージェント向けのルールファイル集。npx skills add remotion-dev/skills で導入
• Claude Code — プロンプトでRemotionのコードを生成・修正。Studioのプレビューで即座に確認できる
• レンダリング — npx remotion render でMP4/WebMなどに書き出し

「プロンプト → プレビュー → 調整 → レンダリング」のサイクルは、従来の動画編集では得られないスピード感がある。特にテンプレート的な動画（オープニング、データ可視化、SNS向けショート動画）の量産に向いている。

まずは npx create-video@latest でプロジェクトを作って、Claude Codeに「5秒のアニメーション動画を作って」と投げてみてほしい。