Remotionの使い方｜Claude Codeで動画を作る実録【2026年】

Remotionは、Reactのコードで映像を組み、MP4に書き出せる仕組みです。僕の会社ではClaude Codeにコードを書かせ、28秒の縦型ショートを作りました。始め方、任せる範囲と人が見る範囲、日本語フォントと4人目から有料になるライセンス、HyperFrames・CapCutとの使い分けを実録でまとめます。

Remotionとは？Claude Codeと組み合わせると何が変わるのか

Remotionとは、Reactという画面部品のライブラリで映像の1コマずつを書き、MP4などの動画ファイルに書き出すためのフレームワークです。タイムラインを手で操作する代わりに、コードで動きを決めます。そのコードをClaude Codeに書かせると、「テロップをこう出して」と日本語で頼むだけで動画の形になり、編集ソフトを触らずに1本仕上がります。

僕の会社（株式会社ウラカタ）はマーケティング支援の会社で、エンジニアはいません。それでもRemotionを使えているのは、コードを書く役をClaude Codeに任せているからです。Claude Codeとは、Anthropicが提供する、ターミナルやデスクトップアプリからClaudeにファイルの読み書きやコマンド実行まで任せられるツールです。基本の使い方はClaude Codeの使い方にまとめています。

Remotionで動画を作るときの考え方は、普通の動画編集と少し違います。編集ソフトでは「素材をタイムラインに並べる」ところから始めますが、Remotionでは「何フレーム目に何を表示するか」をコードで書きます。たとえば30fpsの動画なら、0〜90フレーム目にロゴ、90フレーム目から数字のカウントアップ、という具合です。

この仕組みの強みは、中身だけ差し替えて同じ型の動画を何本も作れる点です。数字や画像のリストを入れ替えれば、デザインはそのままで新しい1本が書き出せます。逆に、撮影した映像を見ながら「ここで切る」と決める作業には向いていません。この線引きは後の章で表にします。

Remotionの中で1本の動画にあたる単位を、コンポジションと呼びます。コンポジションとは、映像のサイズ、フレームレート、長さ（フレーム数）と、表示する中身をひとまとめにした動画の設計図です。Claude Codeに頼むときも「縦1080×1920、30fps、28秒のコンポジションで」と伝えると、話が早く進みます。

Remotionの始め方は？Claude Codeに入れるまでの手順

始め方は2つあります。1つは公式の雛形コマンドでプロジェクトを作り、そこにClaude Code用の知識（スキル）を足す方法です。もう1つは、Claude Codeに「Remotionのスキルを入れて、動画を作って」と頼む方法です。どちらもNode.jsが入っていることが前提です。僕の会社では両方を組み合わせて、2026年9月29日に環境を作りました。

公式ドキュメントで案内されているコマンドは次の通りです（2026年10月時点）。

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
npx remotion skills add
npm run dev

npm run dev でプレビュー画面が開きます。このプレビュー画面がRemotion Studioです。Remotion Studioとは、ブラウザ上で動画を再生・一時停止しながら、コンポジションの見た目を確認するための確認用の画面です。書き出し前の確認はここで行います。

Claude Codeに覚えさせる知識は、Remotionが公式に配っている「Agent Skills」を使います。スキルとは、特定の作業のやり方や注意点をまとめた手順書で、Claude Codeが必要なときに読み込んで使うものです。仕組みの全体はClaudeのスキルの解説で詳しく書きました。

公式の入れ方は npx skills add remotion-dev/skills です。Claude Codeのプラグインとして入れる方法も公式ドキュメントに載っています。

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

僕の会社では、どのプロジェクトからでも使えるように、スキルを ~/.claude/skills/ に入れました。Claude Codeの公式ドキュメントでも、このフォルダに置いた個人用スキルは同じパソコンの全プロジェクトで使えると説明されています。入った12本は次の通りです。

スキルは名前を打って呼ぶこともできますし、Claude Codeが会話の内容から自動で読み込むこともあります。僕は最初の指示だけ /remotion-best-practices で始めて、あとは日本語で頼んでいます。

もう1つ、初回の書き出しで気づいたことがあります。最初に npx remotion render を実行すると、動画を描くためのブラウザが自動でダウンロードされます。これはChrome Headless Shellです。Chrome Headless Shellとは、画面を表示せずにWebページを描画できるChromeの軽量版で、Remotionは書き出しのときにこれでコマ画像を作ります。公式ドキュメントでも、自動で node_modules に入ると説明されています。

環境づくりの最後に、動作確認として1280×720、30fps、3秒の日本語テロップ入り動画を書き出しました。ファイルは約300KBで、文字化けもありませんでした。ここまで来れば、あとは中身を頼むだけです。

Claude Codeに任せる範囲と、人が見る範囲はどこか？

僕の会社では、コードを書く作業と書き出しはClaude Codeに任せ、人は「何を伝えるか」「数字が正しいか」「見て気持ちいいか」の3つだけを見ています。構成と事実確認と最終の目視は、人が手放さない部分です。ここを任せきると、それらしいけれど中身が間違った動画が、きれいな見た目のまま書き出されてしまいます。

具体的な分担を表にします。2026年9月に試作した1本の進め方をもとにしています。

人が見る部分で一番大事なのは、数字の出どころです。動画に出す数字は、いつ、どこで、何を数えたものかをClaude Codeにメモとして残させています。試作では、表示した数字ごとに「どのページを何月何日に見た値か」をプロジェクトの説明ファイルに書かせました。あとで「この数字はどこから？」と聞かれても、すぐに答えられます。

直しの出し方にもコツがあります。「もっとかっこよく」と頼むより、「2つ目の場面を0.5秒短く」「数字の色を白に」のように、場所と量を言うほうが一発で通ります。コードが読めなくても、フレーム数や秒数の数字だけは目で追えるようにしておくと、自分で微調整もできて楽になります。

Claude Codeの業務での使い方は、動画以外も含めてClaude Codeの活用事例にまとめています。

実録：28秒の縦型ショートはどう作ったのか？

2026年9月29日に、取引先のYouTubeチャンネルを紹介する縦型ショートを試作しました。縦1080×1920、30fps、28秒、6場面の構成です。プロジェクトの作成（10時24分）から最初のMP4の書き出し（10時27分）まで約3分、BGM付きの版（10時32分）まで約8分でした。ファイルの時刻から数えた値で、構成や数字を決めた時間は含みません。

構成は、ロゴ、キャッチコピー、チャンネルの数字のカウントアップ、人気動画4本の紹介、ショート動画の最高再生数、チャンネル登録の呼びかけ、の6場面です。数字はチャンネルページで当日確認した値と、自社で過去に集計した値を使いました。試作は社内確認用で、先方にはまだ見せていません。そのためこの記事では、チャンネル名と数字は伏せています。

Claude Codeが書いたメインのコードは476行でした。僕が読んだのは、場面の切り替えタイミングを決めている数行だけです。それ以外は、プレビューを見て直してほしい場所を日本語で伝える、というやり取りで進めました。

作って分かったことが3つあります。

1つ目は、質感を出すための効果が書き出しを重くすることです。画面全体にフィルムのざらつき（ノイズ）を毎フレーム変えて重ねたところ、28秒の動画が約32MBになりました。共有用には、Claude Codeにffmpegで再圧縮させて約7.5MBに落としています。見た目の差は、スマホで見る限りほとんど分かりませんでした。

2つ目は、画像を背景に敷くときの文字の透けです。動画のサムネイル画像を背景に使ったところ、サムネに入っている元の文字が透けて読めてしまい、上に乗せたテロップとぶつかりました。背景を強めにぼかす（28px）ことで解決しています。

3つ目は、音楽と場面転換を合わせる方法です。BGMは、Macに入っているGarageBand付属のループ素材を組み合わせて、テンポ128BPMの曲をスクリプトで作りました。128BPMで30fpsなら、1拍は14.0625フレームです。場面の切り替えをこの拍の整数倍に固定したので、曲のアクセントと画面の切り替わりがぴったり合いました。BGMを付けた版は30秒、約8.5MBです。ループ素材の利用条件は、使う前にAppleの使用許諾で確認してください。

この型の良いところは、作ったあとに効いてきます。人気動画の一覧はコードの中で配列（データのリスト）になっているので、ここを差し替えるだけで「今週の人気動画」のショートを毎週作れます。1本目に時間をかけて型を作り、2本目からは中身を入れ替えるだけ、というのがRemotionの使い方として一番効率が良いと感じています。

Remotionのハマりどころは？日本語フォント・重さ・ライセンス

実際に詰まったり、気をつけたりしたのは、日本語フォント、書き出しの重さ、ライセンスの3つです。日本語フォントは指定の仕方さえ合っていれば問題なく出ます。重さは効果の付け方で大きく変わります。ライセンスは会社の人数で有料になるので、導入前に確認が欠かせません。それぞれ実際の数字と、公式ドキュメントで確認した内容で書きます。

日本語フォントは、指定だけで出た

僕のMac環境では、コードでfont-familyにヒラギノ角ゴシック（Hiragino Sans）を指定するだけで、書き出したMP4に日本語が出ました。比べると分かりやすいのが、同じくHTMLで動画を作るHyperFramesです。こちらは、日本語のシステムフォントを使うと、フォントの読み込み宣言（@font-face の local()）を書かない限りチェックでエラーになりました。

Google Fontsを使う場合は、公式パッケージの @remotion/google-fonts で読み込めます。試作でも英字の見出し用フォントはこの方法で読み込みました。手元のフォントファイルを使うなら、public/ フォルダに置いて @remotion/fonts で読み込む方法が公式に案内されています。どの方法でも、プレビューと書き出したMP4の両方で文字を確認するのが安全です。

書き出しの重さは、効果の付け方で決まる

前の章で書いた通り、毎フレーム変わるノイズのような効果は、ファイルサイズも書き出しの負荷も上げます。SNSに出すだけなら、書き出したあとに再圧縮する前提で作ったほうが楽です。Claude Codeに「共有用に圧縮した版も作って」と最初から頼んでおくと、原本と共有用の2本が毎回そろいます。

ライセンスは「4人目」で有料になる

Remotionのライセンスとは、使う人や会社の規模によって、無料のFree Licenseか、有料のCompany Licenseかが決まる仕組みです。2026年10月時点の公式ライセンスでは、個人、従業員3人以下の営利企業、非営利団体、導入を検討中の評価段階なら無料で、商用利用もできます。4人以上の営利企業はCompany Licenseが必要です。

料金は公式FAQで次の2通りと説明されています。

Creatorsの「コードを書く人」には、AIのコーディングツールを使って書く人も含まれると公式FAQに書かれています。つまり、Claude Codeに書かせていても、指示を出している人は1人と数えます。FreeとCompanyで機能の差はありません。

僕の会社は2026年10月時点で3人なので、無料の範囲で使っています。ただ、4人目を採用した時点でCompany Licenseが必要になります。採用の話が出たときに忘れないよう、社内のメモに書いてあります。

制作会社として使うときの数え方も、公式FAQに書かれています。完成したMP4だけを納品する場合、先方の人数は数えません。先方がRemotionのプロジェクトを受け取って動かす場合や、同じプロジェクトで一緒に作業する場合は、両社の人数を合算します。外部の制作者やフリーランスに同じプロジェクトを手伝ってもらう場合も合算です。少人数の会社ほど、外注を入れた瞬間に4人を超えやすいので注意してください。

なお、公式のライセンス文には、Remotion 5.0で条件が少し変わる予定だと書かれています。公式FAQによると、変わるのは主にAutomators向けの部分で、書き出し回数を把握するためのテレメトリ（利用状況の自動送信）が必須になる予定です。Free LicenseとCreatorsでは、サーバー側の書き出しのテレメトリは引き続き任意とされています。使い始める前と、大きな更新のたびに、公式のライセンスページを確認するのが確実です。

Remotion・HyperFrames・CapCutはどう使い分ける？

文字と数字が動く映像を型で量産するならRemotionかHyperFrames、撮影した素材を切ってつなぐならCapCut、というのが僕の会社の使い分けです。RemotionとHyperFramesはどちらもコードで動画を作る仕組みで、違いは書き方と人数の条件です。3つともClaude Codeから動かしていて、依頼の中身を見てどれを使うか決めています。

HyperFramesとは、HeyGenが公開している、HTMLで動画を書き、ヘッドレスChromeとFFmpegでMP4に書き出すオープンソースの仕組みです。ライセンスはApache 2.0で、Remotionのような人数による有料化はありません。僕の会社では2026年8月7日に導入し、最初の書き出しは10秒・1920×1080の動画で、書き出しに14.7秒かかりました。

CapCutは編集ソフトですが、下書きの中身がファイルとして保存されているので、Claude Codeから下書きを組み立てられます。僕の会社では、この下書きを自動で作る社内ツールを2026年9月に作りました。縦のショート動画なら、素材フォルダと台本から下書きを組んで、CapCutの一覧に出すところまで自動です。横長の長い動画では、私用の素材102本（合計206分）から65.5分の粗カットを組んだこともあります。

迷ったときは、素材が「撮影した映像」か「文字と数字」かで分けると決めやすくなります。撮影した映像が主役なら、どこを使うかを人の目で決める必要があるので、編集ソフトを中心にしたほうが早く進みます。文字と数字が主役なら、コードで作る2つのどちらかです。撮影できない人物や風景を動かしたいときは、どちらでもなくAI動画生成で素材を作り、文字だけをコードで重ねます。

RemotionとHyperFramesのどちらにするかは、2つの条件で決めています。1つは会社の人数で、4人以上ならライセンス費のかからないHyperFramesが有利です。もう1つは使いたい機能で、字幕、地図のアニメーション、Studio上での編集のように、公式スキルが揃っている作業はRemotionのほうが話が早く進みます。

ちなみに、もっと古いやり方として、ffmpegというコマンドを直接使う編集も続けています。自分の本紹介の縦動画をテレビの特番風に仕上げたときは、字幕ファイルの作成から書き出しまで、この方法で組みました。新しい仕組みを入れても、前のやり方が向いている仕事は残ります。

Claude Codeで動画を作り始めるなら、何から始めるべきか？

最初の1本は、20〜30秒の文字と数字だけの動画をおすすめします。会社の実績や数字を伝える紹介ショートなら、撮影がいらず、素材は手元のデータだけで足ります。1本作って型ができたら、中身を差し替えて2本目を作り、そこで初めて手間が減ったかを確かめてください。

進め方の例を書きます。まずClaude Codeに、Remotionのスキルを入れてプロジェクトを作るよう頼みます。次に、動画の目的、見る人、場面の順番、それぞれの秒数を日本語で伝えます。出してほしい数字は、出どころと一緒に渡します。最後に、Studioのプレビューを見ながら、場所と量を指定して直しを出します。

費用の面では、Claude Codeの利用料も考えておく必要があります。動画のコードは長くなりがちで、直しの往復が増えるほど使用量も増えます。プランごとの上限と、使用量を抑えるコツはClaude Codeの料金と上限の実録に書きました。Claude Codeに何段階もの作業を任せる考え方は、AIエージェントの作り方も参考になります。

社内に動画の担当者がいなくても、この形なら数字と構成を決める人が1人いれば回ります。僕の会社では、こうした仕組みづくりを含めてAI活用の立ち上げを支援しています。詳しくはウラカタのサービス一覧をご覧ください。

まとめ

• Remotionは、Reactのコードで映像を組んでMP4に書き出す仕組みです。Claude Codeにコードを書かせれば、エンジニアがいない会社でも動画を作れます
• 始め方は、公式の雛形コマンドでプロジェクトを作り、Remotion公式のAgent Skillsを入れるだけです。初回の書き出しで描画用のChromeが自動で入ります
• コードと書き出しはClaude Codeに任せ、構成・数字の出どころ・最終の目視は人が持ちます。28秒の試作は、フォルダ作成から最初の書き出しまで約3分でした
• 日本語フォントは指定だけで出ました。ライセンスは3人以下の会社なら無料、4人以上はCompany License（1人月25ドルから）が必要で、外注を入れると人数を合算します
• 文字と数字の映像を型で量産するならRemotionかHyperFrames、撮影素材の編集はCapCutと、用途で使い分けています