AI活用

Claude CodeとRemotionで動画を作る方法|導入から書き出しまで

  • #Claude Code
  • #Remotion
  • #動画制作
  • #AI駆動開発
  • #ショート動画

「ショート動画を作りたいけれど、動画編集ソフトは覚えるのが大変」「毎回同じような動画を手作業で作るのがつらい」と感じていませんか。

この記事では、Claude CodeとRemotionを連携して、日本語で頼むだけで動画を作る方法を解説します。仕組み、準備の手順、当社で実際に縦動画を作ってみた結果、VOICEVOXでナレーションを入れる方法、つまずきやすい点とライセンスの注意点まで紹介します。

Claude CodeとRemotionで何ができるのか?

作りたい動画を日本語で説明すると、Claude Codeが動画の中身を作り、ブラウザで確認してからMP4に書き出せます。

  • Remotion:動画を、Webページと同じReactという仕組みのコードで作るツール
  • Claude Code:Anthropicが提供する、ターミナルで動くAIのアシスタント。頼んだ内容のコードを書いたり、コマンドを実行したりする

この2つをつなぐのが、Remotion公式の**スキル(Agent Skills)**です。スキルは「アニメーションはこう書く」「書き出しはこうする」というRemotionのお手本集で、Claude Codeは必要なときにこれを読んでから作業します。

Claude CodeとRemotionで動画ができるまでの流れ。あなたが作りたい動画を日本語で頼むと、Claude Codeがスキルを読んで動画のコードを書き、Remotion Studioのブラウザのプレビューで確認し、気になる所は言葉で直してもらって、最後にMP4に書き出すことを示した図

Remotionで動画を作ると何がうれしいのか?

Remotionで作る動画はコードなので、文字や色を差し替えて量産したり、少しずつ直したりするのが得意です。動画編集ソフトとの違いをまとめると次のとおりです。

比べる点動画編集ソフトRemotion+Claude Code
作り方タイムラインに素材を置いて、手で調整する日本語で頼み、プレビューを見ながら言葉で直す
同じ形の動画を何本も作る1本ずつ手作業で作り直す文字や色を差し替えて書き出すだけ
細かい修正該当する場所を探して手で直す「2つ目の項目だけ0.5秒遅らせて」と頼む
向いている動画撮影した映像の編集、凝った演出図解・テロップ中心の解説動画、定型の告知動画
必要なものソフトの操作の習得Node.jsとClaude Codeの準備

逆に、撮影した映像を切ってつなぐ作業や、1本だけ凝った演出をしたい場合は、動画編集ソフトのほうが早いこともあります。

Claude CodeとRemotionを連携する方法は?

プロジェクトを作り、そのフォルダでスキルを入れてから、Claude Codeを起動するのが公式の手順です。

  1. Node.jsとClaude Codeを用意する:Claude Codeを使うには、Claudeの有料プランなどが必要です(最新の条件は公式サイトで確認してください)
  2. Remotionのプロジェクトを作る:ターミナルで npx create-video --yes --blank my-video を実行する。「my-video」という名前のフォルダに、空の動画プロジェクトができる
  3. プロジェクトのフォルダに移動する:cd my-video を実行する
  4. スキルを入れる:npx remotion skills add を実行する
  5. プレビューを起動する:npm run dev を実行すると、ブラウザで「Remotion Studio」が開く。このターミナルは開いたままにしておく
  6. 別のターミナルでClaude Codeを起動する:同じフォルダに移動して claude を実行する
  7. 作りたい動画を頼む:画面の大きさ、長さ、内容、色、フォントを具体的に伝える
  8. プレビューで確認して直す:Remotion Studioで再生し、気になる所を言葉で伝えて直してもらう
  9. 書き出す:Remotion Studioの書き出しボタンを使うか、「MP4に書き出して」と頼む

スキルは、何も言わなければ動画を書き出さず、まずプレビューを開くように作られています。完成したと思ったら「書き出して」とはっきり伝えましょう。

実際に作ってみるとどのくらいかかるのか?

当社で、前回の記事Copilot Studioでできることとは?の内容をもとに、YouTubeショート向けの10秒の縦動画を作ってみました。頼んだ内容は次のとおりです。

縦1080×1920、30fps、10秒の動画を作って。最初の2秒でタイトル「Copilot Studioでできること5つ」、次の5秒で5つの項目を番号付きで1つずつ左から出し、最後の3秒は青い背景に「まずは資料1つで小さく試そう」。フォントはNoto Sans JP、色は#0055aa。

できあがった動画の3つの場面がこちらです。

作成した縦動画の3つの場面。左はタイトル「Copilot Studioでできること5つ」、中央は番号付きの項目が1つずつ表示されていく場面、右は青い背景に「まずは資料1つで小さく試そう」と表示される締めの場面

作業ごとの時間などは次のとおりです(Windows 11、Node.js 22、6コアのCPU、メモリ16GBのパソコン、Remotion 4.0.541で計測)。

作業結果
プロジェクトの作成(部品のダウンロード込み)2分49秒
スキルの導入32秒(13個のスキルが入った)
できた動画のコード1ファイル・約200行
10秒(300コマ)の書き出し23秒と28秒(2回計測)
できたMP4のファイルサイズ約570KB

書き出しの前に、1コマだけを画像で出力して見た目を確かめ、文字がはみ出していないか、日本語のフォントが正しく出ているかを確認しました。動画を毎回最後まで書き出さなくても、途中の場面だけ確かめられるのは、修正を繰り返すときに便利です。

ナレーションは入れられるのか?

入れられます。無料の音声合成ソフトVOICEVOXを使えば、日本語のナレーションをパソコンの中だけで作れます。

VOICEVOXは、文章を入力すると「ずんだもん」「四国めたん」などのキャラクターの声で読み上げてくれるソフトです。起動しておくと、パソコンの中で読み上げの窓口(API)が開くので、Claude Codeからセリフを送って音声ファイルを作らせることができます。

VOICEVOXでナレーションを入れる流れ。場面ごとのセリフを決め、VOICEVOXがパソコンの中でセリフを音声にし、Remotionが音声の長さを測って場面の長さを決め、声と映像がそろったMP4になることを示した図

手順は次のとおりです。

  1. VOICEVOXをインストールして起動する:公式サイトからダウンロードする。動画を作っている間は起動したままにしておく
  2. 場面ごとのセリフを決める:タイトル、項目ごと、締めのように、場面単位でセリフを分ける
  3. Claude Codeに頼む:「ナレーションはVOICEVOXのずんだもん(ノーマル)で入れて。VOICEVOXはこのパソコンで起動している。音声の長さに合わせて場面の長さを決めて」のように伝える
  4. プレビューで声と映像のタイミングを確かめる:ずれていたら「2つ目の項目は声が始まると同時に出して」のように直してもらう
  5. クレジットを書く:動画の説明欄などに「VOICEVOX:ずんだもん」のように、使ったキャラクターを表記する

Remotionの公式スキルは、音声合成サービスを指定しないと海外の有料サービス(ElevenLabs)を勧めて、APIキーを聞いてくる作りになっています。VOICEVOXを使いたいときは、最初にはっきり伝えましょう。

先ほどの動画に、ずんだもんのナレーションを入れてみた結果は次のとおりです(VOICEVOX 0.25.2)。

作業結果
ナレーションの数7本(タイトル、5つの項目、締め)
7本の音声を作るのにかかった時間合計28秒(最初の1本は14秒、2本目以降は2〜4秒)
ナレーションの長さ1本2.7〜4.4秒、合計約22秒
動画の長さ約25秒(セリフの間に0.3秒ずつ余白を入れた)
書き出しにかかった時間41秒
できたMP4のファイルサイズ約1.7MB

最初は10秒で作った動画でしたが、セリフの長さに合わせて場面の長さが自動で決まる作りにしたため、声を入れると約25秒の動画になりました。セリフを書き換えても、場面の長さは自動で合わせ直されます。

VOICEVOXは商用・非商用を問わず使えますが、キャラクターごとの利用規約に従う必要があります。たとえば、ずんだもんの声を使うときは「VOICEVOX:ずんだもん」のクレジット表記が求められ、表記なしで商用利用する場合は有料の契約になります。使う前に、キャラクターごとの規約を確認してください。

つまずきやすい点は?

いちばん大事なのは、Remotionの決まりごとをClaude Codeに守らせることです。そのためにスキルを入れます。当社で試したときに気づいた点は次のとおりです。

  • CSSのアニメーションは書き出すと動かない:Webページでよく使うアニメーションの書き方は、Remotionでは書き出した動画に反映されません。Remotionでは「何コマ目でどの位置にあるか」を計算する専用の書き方を使います。スキルにこのルールが書かれているので、入れておけばClaude Codeが正しい書き方を選びます
  • 日本語のフォントは指定しておく:フォントを指定しないと、書き出すパソコンの環境によって見た目が変わる恐れがあります。「Noto Sans JPを使って」のように指定すると、Google Fontsから読み込む形で作ってくれます。ただし、日本語のフォントは文字の範囲ごとに細かく分かれているため、書き出し時に「フォントの読み込みで248回の通信をした」という注意が出ました。動画に使う文字だけを読み込むよう頼むと、通信を減らせます
  • スキルはAIと同じ権限で動く:スキルを入れるときに「使う前にスキルの内容を確認してください。スキルはエージェントの全権限で実行されます」という注意が表示されました。公式のスキル以外を入れるときは、中身を確かめてからにしましょう
  • Windowsではスキルがリンクで置かれる:Windowsでは、スキルの本体が「.agents」フォルダに入り、Claude Code用の「.claude」フォルダにはそこへのリンク(ジャンクション)が作られていました。フォルダを丸ごとコピーするときは、リンクが切れないよう注意してください

Claude Codeに作業を頼むときの基本的な進め方は、AI駆動開発の始め方でも紹介しています。

Remotionは無料で使えるのか?

個人と、従業員3人以下の会社は無料で使えます。それ以外の会社が使う場合は、有料の会社ライセンス(Company License)が必要です。

利用者ライセンス
個人(仕事での利用を含む)無料
従業員3人以下の営利団体無料
非営利団体(政府機関・公共機関・教育機関などを除く)無料
商用で使うか検討中で、まだ商用で使っていない無料
上のどれにも当てはまらない会社会社ライセンスが必要

人数は、使う人の数ではなく会社全体の人数で数えます。20人の会社で1人だけが使う場合も、会社ライセンスが必要です。プロジェクトを作ったときにも「Remotionは3人までのチームなら無料」と表示されました。料金や条件は変わることがあるため、使う前にRemotionの公式サイトで確認してください。

まとめ

  • Remotionは動画をコードで作るツールで、Claude Codeに日本語で頼めば、そのコードを書いてもらえる
  • 連携のカギは公式スキル。プロジェクトで npx remotion skills add を実行してからClaude Codeを起動し、プレビューで確認しながら言葉で直す
  • ナレーションはVOICEVOXで無料で入れられ、音声の長さに合わせて場面の長さを自動で決められる。キャラクターごとのクレジット表記と、4人以上の会社でのRemotionの会社ライセンスに注意する

スエキチシステムでは、Claude CodeなどのAIを使った業務の効率化や、動画を含む社内向けコンテンツづくりの仕組み化をお手伝いしています。「自社でもAIで作業を減らせるか知りたい」という方は、AI導入支援のページからお気軽にご相談ください。

よくある質問

プログラミングの知識がなくても作れますか?

動画の中身はClaude Codeが書くので、コードを自分で書く必要はありません。ただし、Node.jsのインストールやターミナルでのコマンド実行は必要です。うまく動かないときにエラーの内容をClaude Codeに伝えられれば、多くの問題はそのまま直してもらえます。

字幕やBGMも入れられますか?

入れられます。公式スキルには字幕・音声・効果音の扱い方が含まれています。BGMは音楽ファイルをプロジェクトの「public」フォルダに置き、「このBGMをナレーションより小さい音量で流して」のように頼みます。使う音楽の利用条件は、事前に確認してください。

Claude Code以外のAIでも使えますか?

使えます。Remotionの公式ドキュメントでは、Claude CodeのほかにCodex、Cursor、Kimi Code、OpenCodeなども対象として案内されています。スキルはプロジェクトの中に入るので、同じプロジェクトを別のAIで開いても使えます。

一度作った動画を、別の文字や色で量産できますか?

できます。動画のコードの中で、文字や色を「差し替えられる値(パラメーター)」にしておくと、値だけ変えて何本も書き出せます。最初に作るときに「タイトルと色はあとで差し替えられるようにして」と頼んでおくと楽です。

システム開発のご相談はスエキチシステムへ

要件が固まっていなくても大丈夫です。まずはお気軽にご相談ください。

この記事を書いた会社

スエキチシステム

「企業品質を、個人価格で。」を掲げる福岡のシステム開発会社。HP制作・業務システム開発・LINE予約アプリ・AI導入支援を手がけています。 開発現場で得た知見を発信しています。

IT・システムの仕組みは、YouTubeのショート動画でも解説しています:システムのオタク