ClaudeとRemotionで動画生成｜映像も音もコードで作る仕組み

文字が踊り、図が広がり、その動きに音がぴたりと重なる。RemotionとClaude Codeを組み合わせると、こうした動画をコードで設計できます。

Xでは、音までNode.jsで作った例も公開されています。この記事では、Remotionの導入から、音のない試作、短い効果音の追加、MP4の保存までを説明します。

2026年9月27日確認の公式資料に基づく手順です。指示文は当サイトの設計例であり、投稿者の完成動画を再現・検証した記録ではありません。

参考作品：この構成で作られた動画

{{tweet:https://x.com/_nogu66/status/2103665780160421939}}

以下は公開情報をもとにした設定例です。投稿者が使った非公開のプロンプトや制作設定そのものではありません。

Remotionはどうやってコードから動画を作る？

Remotionでは、時間ごとに表示する文字や図をReactという画面作成の仕組みで書き、動画にします。Claude Codeには、そのコードの作成や修正を頼めます。

noguさんが公開した制作例はRemotionとNode.jsを使うものです。映像モデルから完成映像を受け取る構成とは異なり、画面の要素や音をコードで作ったと説明されています。本人の制作例

最初に、Claude CodeとNode.jsを使える状態にしてください。未導入ならClaude Codeの公式セットアップとNode.js公式から導入します。ターミナルのclaude --versionとnode --versionで確認できます。

次に、公式Remotionプラグインを追加します。以下はターミナルで実行するコマンドです。RemotionのClaude Code用プラグイン

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

Claude Codeを再起動してから、新しい作業フォルダで起動します。ここで使うremotion-firstは自分で付けるフォルダ名です。

mkdir remotion-first
cd remotion-first
claude

Remotionの文字・図形・粒子をClaudeに作らせる

最初は、文字と図形だけの短い動画を依頼します。動画の名前、長さ、サイズ、各場面の内容まで指定すると、生成後に何を確認すればよいかが明確になります。

以下をClaude Codeへ貼り付けます。フォルダ内には大切な既存ファイルを入れず、新規プロジェクトとして試してください。

/remotion-best-practices
この空のフォルダにRemotionの新規プロジ
ェクトを作って。
Composition IDはDemo。15秒、1920×1080、
30fps。
0〜5秒：「散らばる情報」と3つの四角を
表示。四角が中央へ動き、5秒で整列を完
了。
5〜10秒：整列した四角を保ち、見やすく
静止する。
10〜15秒：「一つに整理。」を大きく表示。
紺色の背景、白と黄緑。今回は画像・動画
・音声の生成APIを使わない。
実装前に構成を見せて。承認後に必要な依
存関係を導入して制作。
動きはフレーム番号に基づかせ、シークし
ても同じ表示にして。
エントリーファイルのパスと、起動・書き
出しコマンドを最後に教えて。

構成を承認して制作が終わったら、Claudeが示したコマンドでStudioを開きます。エントリーファイルがsrc/index.tsの場合は、次の形です。Studioの公式コマンド

npx remotion studio src/index.ts

ブラウザでDemoを選び、再生と時間位置の移動を試します。ある時点に移動したときだけ画面がおかしくなる場合は、「再生中の経過時間に依存せず、フレーム番号から表示を決めて」と修正を頼みます。

粒子や複雑な背景は、この基礎版が動いてから加えます。まず文字の見える時間とレイアウトを決めれば、装飾のために説明が読めなくなる失敗を避けやすくなります。

Node.jsで音を作り、Remotionの映像に合わせる

Node.jsで音を作る方法は、波形を数値で作って音声ファイルに保存し、その音を映像の指定時点で鳴らす構成です。初回は曲全体より、短い効果音を一つ作ると仕組みをつかめます。

たとえば、図形がそろう瞬間に柔らかな音を付けるなら、次のように頼めます。これは制作例であり、特定の音質や完成度を保証する指示ではありません。

外部APIを使わず、Node.jsで短い効果音を
作って。
5秒地点で図形がそろう瞬間に、0.3秒の柔
らかな電子音を1回。
急に音が始まったり途切れたりしないよう
にし、音割れを避ける。
生成スクリプトはscripts/make-sound.cjs、
音はpublic/cue.wavへ保存。
Remotion側ではこのWAVを読み込み、5秒地
点で再生する。
現在のパッケージに合う音声部品を使い、
型エラーも確認して。

生成したWAVを単体で聞き、次にStudioで映像との位置関係を確認します。30fpsなら5秒地点は150フレームです。映像と音が同じ秒を基準にしているかを、Claudeに確認させます。

音が出ないときはpublic/cue.wavの存在と単体再生を確認します。ブラウザだけの問題か、書き出し後も無音なのかも切り分けてください。Remotionの音声ガイド

Remotionの書き出しと利用条件を確認する

Remotionの書き出しでは、エントリーファイル、Composition ID、保存先を指定します。この記事の指定どおりsrc/index.tsとDemoが作られているなら、次のコマンドです。公式renderコマンド

npx remotion render src/index.ts Demo out/demo.mp4

フォルダやIDが違う場合は、Claudeが実際に作った値へ置き換えます。out/demo.mp4を開き、15秒の長さ、文字の欠け、5秒地点の音を確認してください。

困った状態	最初に確認すること
Compositionが見つからない	Studioに表示されるIDと指定が一致するか
画像や音がない	ファイルの保存場所と参照名が一致するか
フォントが違う	制作環境でフォントを読み込めているか
途中だけ表示がおかしい	そのフレームへ移動して再現するか

Remotionの利用条件は、Claudeの契約とは別です。確認時点の現行ライセンスでは、個人や従業員3人までの営利組織などが無料対象で、対象外では会社向けライセンスが必要です。次期版の変更案内もあるため、商用利用前に使用する版のライセンスを確認してください。

最初の1本では「素材なしで画面が動く」「効果音を追加できる」「MP4を再生できる」の3点を確かめます。その後に、写真や複雑な演出を加えると、問題が起きた工程を追いやすくなります。ほかの動画制作パターンとも比較して選んでください。