Claude Code と Remotion でプロンプトから動画を作る

RMT RemotionReactNodeJS

動画編集アプリを使わず、プロンプトだけで動く動画を作る。それを可能にするのが Remotion と Claude Code の組み合わせ。Remotion は React で動画を作るフレームワークで、2026年1月から Claude Code を公式サポートした。つまり「React で動画を書くライブラリ」から「プロンプトで動画を作るツール」に位置付けが変わった。バイブコーディングの幅が、Webサイトやアプリを越えて動画にまで広がる。

本記事は応用編。ロードマップの Wranglerハンズオンで Node.js を導入済みである前提で進める。

本記事のゴール

インストールが最初の山場。Claude Code からプロンプトを投げれば動画が出てくる状態まで確実に作る。そこを越えれば、あとはプロンプト次第でいくらでも作り込んでいける。

到達点を3テーマで段階的に上げていく。

動くタイトル：テキストが中央でふわっと出てくるだけの最小サンプル（成功体験を最短で）
複数シーンの動画：シーンを切り替えながら、絵文字が揺れる・バネで登場するなどの動きを足す
しゃべる動画：テキストから音声を作り、字幕と同期させる。トランジション・カウントダウン・紙吹雪まで盛り込む

各テーマとも「プロンプトを投げる → 出てくる → 必要なら直す」の体験ベースで進める。

1. Remotion とは

React で動画を プログラマティックに 作るフレームワーク。Premiere のようなタイムライン型エディタではなく、コンポーネント＝動画のフレーム というモデルで、コードによって動画を定義する。

出力は MP4 などの動画ファイル。書き出しは npx remotion render で行う。
プレビューには Remotion Studio というブラウザ上のエディタを使う（npm run dev で起動）。
公式サイト: remotion.dev

Remotion は Claude Code と相性がいい。React ベースで、Claude は React を熟知している。さらに Remotion チームが Agent Skills（AIエージェント向けのベストプラクティス集）を公式に用意していて、これを入れると Claude Code が Remotion 流の正しいコードを書けるようになる。Remotion 側は「初回レンダリング成功率98%」とうたっている。

実際に触ってみると、Claude Code は コードを書いたあと自分でフレームを画像に書き出して目視確認してから「完成」と報告する。書きっぱなしにせず、レンダリング結果を自己検証しており、これが高い成功率の実態かも。

2. ライセンス（最初に確認）

Remotion は無料で使えるが、営利企業での利用には条件がある。ここを曖昧にすると業務でうっかり使ってトラブルになるので、最初に確認しておく。

無料で使える範囲（公式ライセンス）:

個人
従業員3名以下の営利組織
非営利団体
商用利用を始める前の評価期間

これに該当しない営利企業は Company License（有料）が必要。本記事の読者層（個人・小規模）はほぼ無料で完結するが、会社で使うなら remotion.pro/license で最新の料金と条件を確認すること。価格や条件は変わるので、第三者情報を鵜呑みにせず公式で裏を取る。

3. 事前準備

3-1. 何が必要か

Node.js：Wranglerハンズオンで導入済みなら追加不要。
ffmpeg / Chromium：レンダリング時に Remotion が自動でダウンロードする。事前準備は不要だが、初回のレンダリングだけバイナリ取得で少し時間がかかる。

つまり実質、用意するものは Node.js だけ。

3-2. プロジェクトを作る

~/claude の下に作業フォルダを作って、その中で Remotion プロジェクトを作る。次のコマンドを Terminal（ターミナル）で実行する。

mkdir -p ~/claude/my-video
cd ~/claude/my-video
npx create-video@latest

npx create-video@latest は 実行したフォルダの中 にプロジェクトを展開する。先に my-video フォルダを作ってその中で実行することで、~/claude/my-video/ にきれいに収まる。

対話形式でいくつか聞かれるので、次のように答える。

Choose a template → Blank（空のキャンバスから始める）
Add TailwindCSS? → Yes
Add agent skills? → Yes（ここが Claude Code 連携の肝）
- 続けてスキルの配布先を聞かれる。Install to で Select specific agents を選ぶ
- エージェントの一覧が出る。最初から複数チェック（◼）が付いていることがあるので、Claude Code (.claude/skills) 以外を space キーで外して ◻ にし、◼ を Claude Code だけにする
- Installation scope → Project / Installation method → Symlink
最後に Install the find-skills skill? と聞かれたら → No

find-skills は No でよい。これを Yes にすると、お使いのマシンの すべての AIエージェント にグローバルでスキル検索機能が入り、以降 create-video が大量のエージェントを検出して余計なフォルダを作るようになる。本記事の用途には不要。

うまくいくと、my-video の中に動画のひな型一式（src/ のサンプル、package.json、.gitignore など）と、.claude/skills/ フォルダができる。.claude/skills/ の中に remotion-best-practices が入っていれば、Claude Code が起動時にこのスキルを読み込めるようになっている。

なぜ Claude Code だけに絞るのか。スキルの配布先で All detected agents を選ぶと、お使いの環境次第で .cursor .gemini など多数のエージェント用フォルダがプロジェクトに作られてしまう。Claude Code が読むのは .claude/skills/ だけ なので、ここだけに入れておけば十分。GitHub で管理するときもフォルダが散らからない。

3-3. Studio を起動する

依存をインストールして、Remotion Studio を立ち上げる。

npm i
npm run dev

ブラウザで Remotion Studio が開き、Blank の空のコンポジション（MyComp）が表示されれば、セットアップは成功。これがスタート地点。

この npm run dev（Studio）は 立ち上げたまま にしておく。Claude Code が src/ を書き換えると、Studio がホットリロードして即座にプレビューに反映される。

4. テーマ①：動くタイトル

4-1. Claude Code を起動する

Studio を立ち上げたまま、Claudeデスクトップアプリを起動して my-video フォルダで Claude Code を開く。

Code（Claude Code）を選択 → New session をクリック → 作業フォルダを指定（~/claude/my-video）

起動時に .claude/skills/remotion-best-practices が読み込まれて Remotion 連携が効く。

4-2. プロンプトで動画を作る

最初のテーマは、タイトルが中央でふわっと出てくるだけの最小サンプル。次のように頼む。

タイトルが中央でフェードイン＆スケールして表示される、3秒くらいの簡単なタイトル動画を作って。テキストは「Vibe Coding」で。

すると Claude Code は次のように動く。

プロジェクトの構成を確認する
Remotion のスキル（remotion-best-practices）を読み込んでから 実装する
src/Composition.tsx を書き、src/Root.tsx（動画の尺やサイズの定義）を更新する
自分でフレームを画像に書き出して目視確認 してから「完成」と報告する

生成されるコードは、Remotion の作法どおり。useCurrentFrame() で現在フレームを取り、interpolate() で「フレームに応じて値を変化させる」ことでアニメーションを作る。

なお、このコードを読めるようになる必要はない。「プロンプトを投げると、こういうコードが生成されて、それが動くことで動画になる」。その流れが何となく伝わればそれで十分。コードはあくまで雰囲気をつかむために載せている。

import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, fps * 0.8], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  const scale = interpolate(frame, [0, fps * 0.8], [0.7, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0f0f0f",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          opacity,
          transform: `scale(${scale})`,
          fontFamily: "'Helvetica Neue', Arial, sans-serif",
          fontSize: 120,
          fontWeight: 800,
          color: "#ffffff",
        }}
      >
        Vibe Coding
      </div>
    </AbsoluteFill>
  );
};

Studio に切り替えて再生（▶）すると、「Vibe Coding」が中央でフェードインしながら拡大して出てくる。コードを一行も書かずに、プロンプトだけで動く動画ができた。

4-3. MP4 に書き出す

プレビューで気に入ったら、動画ファイル（MP4）に書き出す。

npx remotion render MyComp out/title.mp4

MyComp は書き出すコンポジションの ID、out/title.mp4 は出力先。初回は ffmpeg / Chromium のダウンロードが走るため少し時間がかかる。書き出しが終わると out/ フォルダに MP4 ができる。3秒・1280×720 で約200KB と、ごく軽い。

コマンドを入力しなくても、Remotion Studio の右上にある Render ボタン（ロケットのアイコン）から書き出すこともできる。クリックすると書き出し設定のダイアログが開く。なお「ブラウザの中で動画を作っている」わけではなく、レンダリングの計算は手元の Mac で走る（Studio は手元で動くプログラムの操作画面）。npx remotion render と Render ボタンは同じことをしていて、コマンドかボタンかの違いだけ。

出力先の out/ フォルダは、create-video が作る .gitignore に 最初から登録されている。動画ファイルそのものは Git に入らず（重いので入れたくない）、動画を定義する src/ のコードだけが管理対象になる。my-video をそのまま GitHub に上げても出力動画はリポジトリに入らないので安心。

Claudeデスクトップアプリなら、生成された MP4 をクリックすると アプリ内のプレイヤーでそのまま再生 できる。作る・確認するが1つのアプリで完結する。

これでテーマ①は完走。セットアップ → プロンプトで生成 → Studio でプレビュー → MP4 に書き出し という一周を体験できた。

5. テーマ②：複数シーンを組む

①は単一の要素（タイトル1つ）だった。②では 複数のシーンをタイムラインに並べる ことを覚える。これが動画作りの核になる。

ここでは「タイトル → 動物の挨拶 → エンディング」という3シーン構成の動画を、1回のプロンプトで作ってみる。

今の動画を作り替えて、複数シーンの構成にして。全体で12秒くらい。

シーン1（最初の3秒）:
ゆっくり色が変わるグラデーション背景。「Vibe Coding」のタイトルがバネっぽくバウンドしながら登場し、その0.5秒後に下へ小さめのサブタイトル「Claude Code × Remotion」がフェードインで続く。

シーン2（白背景に切り替わる）:
白背景に 🐱 と 🐶 の絵文字を大きく左右に並べて表示。
まず画面下にキャプション「こんにちはネコです」が出て、その間 🐱 がゆらゆら揺れる。
次にキャプションが「こんにちはイヌです」に変わり、その間は 🐶 がゆらゆら揺れる（揺れるのは挨拶している側の動物だけ）。

シーン3（最後）:
中央に「終わり」と表示して終了。

Claude Code は、これを Remotion の <Sequence> を使って組み立てる。<Sequence> は「このシーンは何フレーム目から何フレーム分」という時間の区切りを表すコンポーネントで、複数並べることでシーンを切り替える。Studio のタイムラインを見ると、<Sequence> が3つ縦に並んでいるのが分かる。これがシーンの正体。

このとき新しく登場する書き方は次のとおり。①からの「もう一段」がここに詰まっている。

<Sequence>：シーンを時間で区切って並べる（シーン構成の核）
spring()：バネのような物理的な動き。タイトルのバウンド登場に使う
Math.sin() + interpolate()：周期的な揺れ。絵文字のゆらゆらに使う

書き出しはテーマ①と同じ。

npx remotion render MyComp out/theme2.mp4

12秒の動画でも約1.4MB と、まだ十分に小さい。

一発で思いどおりにならないこともある。そのときは「ネコの揺れをもっと大きく」「シーン2を少し長く」のように 追加でプロンプトを投げて直していく。この往復こそがバイブコーディングで動画を作る面白さ。

6. テーマ③：音声と字幕を同期させる

ここが本命の人も多いはず。しゃべる動画 を作る。テキストから音声を作り、字幕とぴったり同期させ、しゃべる顔・カウントダウン・紙吹雪まで盛り込んだ4シーンの動画にする。新しく出てくる要素は2つ。

音声と字幕の同期：音声を say コマンド（Mac標準）で作り、字幕と合わせる
シーン間トランジション：@remotion/transitions でシーンを滑らかに切り替える

6-1. まずは素直に頼む

最初は思いつくまま頼んでよい。

音声と字幕の動画を作る。
まずタイトルは、Claude Code + Remotion。タイプライター演出。
シーン2で画面の真ん中に動く絵文字の丸い黄色い顔登場。say コマンドでしゃべる。音声と字幕は同期させる。
しゃべる内容は「こんにちは」「クロードコードとリモーションのデモです」「しゃべります。字幕もでます」「よろしくおねがいします」。
シーン3はなぜかカウントダウン5,4,3,2,1。かっこよく１文字ずつ表示される。
シーン4はカウントダウン終了をうけて、「終わり」。紙吹雪が舞う。

これでもそれなりに動くものは出てくる。ただし 音声と字幕の同期はシビア で、ざっくり頼むと尺がズレやすい（字幕が音声より早く消える、など）。そこで、試行錯誤を繰り返し、再現性を上げた具体的なプロンプトに書き直した（次節）。

6-2. 再現性を上げたプロンプト

音声の作り方（say で m4a 生成）から、同期の方法（尺を実測する）まで をプロンプトに盛り込む。ここまで具体的に書くと、ほぼ一発で意図どおりになる。

とはいえ、この詳細なプロンプトを最初から自分で書く必要はない。素直版から始めて、ズレた所を Claude Code に相談しながら詰めていけばよい（このプロンプトも、そうやってやり取りしながらたどり着いたもの）。

音声と字幕の動画を作る。1280×720・30fps・4シーン構成。

【音声の準備】
public/audio/ に、各台詞を say コマンド（Mac標準）で m4a 生成して。声は Kyoko：
  say -v Kyoko -o public/audio/line1.m4a "こんにちは！"
  say -v Kyoko -o public/audio/line2.m4a "クロードコードと、リモーションのデモです。"
  say -v Kyoko -o public/audio/line3.m4a "しゃべります。字幕も出ます。"
  say -v Kyoko -o public/audio/line4.m4a "よろしくお願いします。"

【シーン1：タイトル（約3秒）】
「Claude Code + Remotion」をタイプライター演出（1文字ずつ＋カーソル点滅）で表示。

【シーン2：顔がしゃべる】
画面中央に丸い黄色い顔を大きく表示。line1〜line4 の音声を順番に再生し、
再生に合わせて画面下に対応する字幕を1行ずつ出す。しゃべっている間は口が開閉する。
■音声と字幕の同期（重要）：
  - 各音声の尺はハードコードしない。@remotion/media-utils の getAudioDurationInSeconds で
    staticFile('audio/lineN.m4a') の実尺を取得（calculateMetadata の中で取得→fps を掛けてフレーム数化）。
  - 各行は <Audio> と字幕テキストを同じ Sequence に入れ、Sequence の長さ＝その音声のフレーム数 にする。
  - 4行は隙間なく連続再生。

【シーン3：カウントダウン（約5秒）】
中央に 5→4→3→2→1 を1秒ずつ、1文字ずつかっこよく（拡大＋フェード）表示。

【シーン4：エンディング（約3秒）】
中央に「終わり」。紙吹雪が舞う。

【シーン切り替え】
@remotion/transitions の TransitionSeries で、3か所それぞれ別のトランジション
（1→2 スライド、2→3 ワイプ、3→4 時計ワイプ）。各0.5秒。
トランジションは大シーン間だけに適用し、シーン2内部の音声開始がズレないようにして。

Claude Code は、プロンプトにある say コマンドを 自分で実行して音声を生成 し、続けて動画を組み立てる。出来上がったのがこの動画（音声入り。再生ボタンで再生）。丸い黄色い顔が、しゃべっている間だけ口を開閉し、画面下にその台詞の字幕が出る。

6-3. 同期のコツは「尺を測らせる」こと

音声と字幕を合わせるのは、ただ「同期させて」とざっくり頼むだけだとうまくいかないことが多い。

確実に合わせるコツは、長さを自分で決めず、実際の音声ファイルの長さを測らせて、それに字幕を合わせるよう頼むこと。前掲のプロンプトで「各音声の尺はハードコードしない／実際の長さを取得して使う」「音声と字幕をひとまとまりにして、その長さを音声に一致させる」と指示しているのがこれにあたる。

こう頼めば、台詞が長くても短くても「音声が鳴っている間だけ、その行の字幕が出る」が自動でそろう。具体的な秒数やフレーム数を自分で書かないのがコツ。

6-4. say で音声を作る（Mac だけで完結）

音声は Mac 標準の say コマンドで作る。API キーも課金も不要。

say -v Kyoko -o public/audio/line1.m4a "こんにちは！"

-v で声を、-o で出力ファイルを指定する。出力を .m4a にすると Remotion（内部の Chromium）でそのまま再生できる形式になる。

日本語の声は Kyoko 以外にも複数ある（say -v '?' で一覧が見られる）。声を変えれば複数キャラの掛け合いも作れる。たとえばテーマ②のネコとイヌに別々の声をあてて対話させる、といった発展も可能。

6-5. シーンを滑らかに切り替える

テーマ②ではシーンをパッと切り替えていた（ハードカット）。ここでは @remotion/transitions の <TransitionSeries> を使い、シーンの間に転換アニメを入れる。<TransitionSeries.Sequence>（各シーン）と <TransitionSeries.Transition>（転換）を交互に並べる構造で、今回は3か所それぞれ違う種類（スライド・ワイプ・時計ワイプ）にした。

トランジション中は前後のシーンが少し重なる（オーバーラップ）。この重なりで音声の開始位置がズレないように、トランジションはシーンの「間」だけに使い、しゃべるシーンの内部にはかけない。プロンプトでもそう指示している。

6-6. 書き出す

ここまで来たら MP4 に書き出す。

npx remotion render MyComp out/theme-voice.mp4

16秒ほどの動画で、音声入りでも約2.7MB。これでも Cloudflare Pages の25MiB上限には十分収まる。

テキストから音声を作り、字幕を同期させ、トランジションでつなぐ、という「動画制作っぽい」工程が、すべてプロンプトとコマンドだけで完結した。

7. 他にこんな動画も作れる

本記事では3テーマを作ったが、Remotion でできることはまだまだある。アイデアとして、発展の方向をいくつか挙げておく。どれも「プロンプトで頼む → 出てくる → 直す」の流れは同じ。

写真や動画を取り込む：撮った写真をゆっくりズーム（Ken Burns 効果）させたり、動画を画面の隅に小さく流す（ワイプ／ワイプ風の小窓）。<Img> と <OffthreadVideo> を使う。
データをグラフで見せる：数字がカウントアップしたり、棒グラフが伸びたり、順位が入れ替わる「バーチャートレース」。外部の JSON を読み込んで動画にできるので、データを差し替えるだけで中身が変わる動画が作れる。
地図でルートを動かす：地図の上を東京→大阪→福岡→那覇のように線が伸びていく旅程アニメ。SVG の地図とパスのアニメーションで作る。
音に反応するビジュアライザー：BGM の波形に合わせてバーが踊る。@remotion/media-utils で音声波形を取得する。
音声から字幕を自動生成：テーマ③では台詞ごとに手で字幕を用意したが、Whisper（音声認識）で しゃべりから字幕を自動起こし することもできる。
3D・凝ったアニメ：@remotion/three（Three.js）で回転する3Dロゴ、@remotion/lottie や @remotion/rive でデザイナー製のリッチなアニメを再生。
縦型動画（9:16）：コンポジションの幅と高さを変えるだけで、YouTube Shorts や Instagram Reels 向けの縦型に。
同じテンプレで大量生産：1つの動画テンプレートに名前やデータを流し込んで、100人分のお祝い動画を自動生成、といった量産。「コードで動画を作る」最大の強みがここに出る。

気になるものがあれば、本記事の流れと同じように Claude Code に頼んでみるとよい。

8. 作った動画をどこに置くか

ここまではすべて 手元の Mac でレンダリング している。短い動画なら手元で十分。出来上がった MP4 をどこかに置いて公開したくなったら、選択肢は主に3つ。

置き場	向いている用途	注意点
YouTube	とにかく見てもらいたい	プレイヤー埋め込みになる。`.mp4` の直リンクとして配信する用途には向かない
Cloudflare R2	MP4 ファイルそのものをホスティングしたい	公開バケットの設定が要る。一段手間
Cloudflare Pages / Workers Static	短い動画をテスト公開する	1ファイル25MiB の上限がある。短尺なら問題ないが、長尺・高画質だと超える

本記事で作った程度の短い動画（数百KB〜数MB）なら、CloudflareにHTMLをアップロードして公開するで扱った Cloudflare Pages にそのまま置ける。25MiB の上限に対して桁違いに小さいので、テスト公開には十分。

「もっと大規模に、たくさんの動画を高速にレンダリングしたい」という段階になると、Remotion には AWS Lambda 上でクラウドレンダリングする 仕組み（@remotion/lambda）も用意されている。これはレンダリングの計算をクラウドに肩代わりさせるもので、動画の置き場とは別の話。自分の AWS アカウントが必要になり、初心者向けではないので本記事では扱わない。手元の Mac でのレンダリングで十分。

まとめ

Remotion + Claude Code で、プロンプトだけで動画が作れる。
セットアップの肝は Agent Skills を Claude Code に入れること（Select specific agents で Claude Code だけに絞る、find-skills は No）。
useCurrentFrame() と interpolate() で動きを作り、<Sequence> でシーンを組む。少しずつ凝った動画にしていける。
必要なのは Node.js だけ。ffmpeg / Chromium は自動で入る。
個人・小規模なら無料。会社で使うならライセンス確認を忘れずに。

2026-06-21 (last updated: 2026-07-02) タツヲ (yto)

☕️ Vibecoding Notes を応援