Remotionとは？Codexでショート動画を作る方法・使い方・BGM追加まで解説

2026-04-302026-07-09

本記事には広告（PR）が含まれています。

Remotionは、Reactを使って動画を作成できるフレームワークです。

一般的な動画編集ソフトのようにタイムラインをマウスで操作するのではなく、ReactやTypeScriptのコードで、テキスト・画像・音声・アニメーションを組み合わせて動画を作成します。

この記事では、Remotionとは何か、CanvaやCapCutとの違い、Codexを使ったショート動画作成手順、BGM追加、書き出し方法、実際に遭遇したエラー対処まで初心者向けに解説します。

AI実装スキルを磨きたい人へ

これからのAI時代に 「市場価値の高い人材」 とは、「モデルを使える人」ではなく 「業務に組み込んで価値を出せる人」 です。AI実装＋エンジニアリング＋業務理解の三点セットを磨くことが、5年後・10年後のキャリアに直結します。

※以下、PRを含みます

▶ AI実装に強くなれるオンラインスクールを見る

Remotionとは？

Reactで動画を作れるフレームワーク

Remotionとは、Reactで動画を作成できるフレームワークです。

通常の動画編集ソフトでは、画面上のタイムラインに素材を並べて編集します。一方でRemotionでは、Reactコンポーネントとして動画の画面を作り、フレーム単位で表示内容やアニメーションを制御します。

つまりRemotionは、動画を「手作業で編集するツール」というより、動画を「コードで生成するツール」と考えるとわかりやすいです。

Remotionでできること

Remotionでは、以下のような動画を作成できます。

テキスト中心の解説動画
スライド風のショート動画
ランキング動画
比較動画
商品紹介動画
記事の要約動画
データやJSONをもとにした自動生成動画

画像や音声ファイルも読み込めるため、BGM付きのショート動画や、ナレーション付きの解説動画も作成できます。

普通の動画編集ソフトとの違い

Remotionは、CanvaやCapCutのような直感的な動画編集ツールとは立ち位置が異なります。

CanvaやCapCutは、テンプレートを選んで文字や素材を配置するのが得意です。一方でRemotionは、動画の構成そのものをコード化できるため、同じ型の動画を何本も量産する用途に向いています。

項目	Canva・CapCut	Remotion
操作方法	画面操作中心	コード中心
得意な用途	単発の動画制作	動画のテンプレート化・量産
修正方法	手作業で編集	コードを変更
AIとの相性	画面操作が必要になりやすい	Codexなどにコード修正を依頼しやすい

Remotionが優れている点

動画をテンプレート化できる

Remotionの大きな強みは、動画をテンプレート化できることです。

たとえば、タイトル・要点3つ・CTAだけを差し替える設計にしておけば、SEO記事ごとに30秒の要約動画を作れます。

const videoData = {
  title: "OpenClawとは？",
  points: [
    "PC操作をAIに任せられる",
    "メールやカレンダーと連携できる",
    "自分専用AI秘書として使える"
  ],
  cta: "詳しくは記事で解説"
};

このように、動画の中身をデータとして扱えるため、記事制作やSNS運用と組み合わせやすいのが特徴です。

CodexやClaude CodeなどのAIエージェントと相性がいい

RemotionはReactやTypeScriptで動画を作るため、CodexやClaude CodeのようなAIエージェントと相性が良いです。

たとえば、以下のような指示をAIに出せます。

Remotionで20秒の日本語ショート動画を作ってください。

構成：
0〜3秒：タイトル
3〜8秒：問題提起
8〜13秒：要点1
13〜17秒：要点2
17〜20秒：CTA

1280x720、30fpsで作成してください。

通常の動画編集ツールでは、AIに細かい画面操作まで任せるのは難しい場合があります。しかしRemotionなら、AIがコードを直接編集できるため、修正や改善を進めやすいです。

横型・縦型・正方形の動画を作り分けやすい

Remotionでは、Compositionごとに動画サイズや尺を指定できます。

そのため、同じ内容から以下のような複数サイズの動画を作り分けることも可能です。

1280×720：ブログ記事埋め込み・YouTube横型
1080×1920：YouTube Shorts・TikTok
1080×1080：Instagram・X投稿
1200×630：OGP画像

1つの動画テンプレートを作っておけば、用途に応じてサイズ違いの動画を展開しやすくなります。

SEO記事やデータから動画を量産しやすい

Remotionは、記事本文、CSV、JSON、APIなどのデータをもとに動画を生成する用途に向いています。

たとえば、ブログ記事のタイトルと要点をJSON化し、動画テンプレートに流し込めば、記事ごとに要約動画を作れます。

SEO記事の補助コンテンツとして動画を作りたい場合、Remotionはかなり相性の良い選択肢です。

Remotionが向いている人・向いていない人

Remotionが向いている人

Remotionが向いているのは、単発で動画を作りたい人よりも、同じ型の動画を継続的に作りたい人です。

ReactやTypeScriptに抵抗がない人
AIエージェントにコードを書かせたい人
SEO記事やSNS投稿を量産している人
記事ごとに要約動画を作りたい人
データやJSONから動画を自動生成したい人

特に、ブログ記事や比較記事を多く作っている人にとっては、記事の内容をショート動画化する仕組みとして活用できます。

Remotionが向いていない人

一方で、1本だけおしゃれな動画を作りたい人には、Remotionは少し面倒に感じるかもしれません。

ノーコードで動画を作りたい人
1本だけ動画を作れればよい人
AI美女動画や口パク動画を作りたい人
映画風の生成AI動画を作りたい人
CapCutのような直感的な編集を求めている人

Remotionは、派手なAI動画をワンクリックで作るツールではありません。動画制作をコード化し、自動化するためのフレームワークです。

RemotionとCanva・CapCut・AI動画ツールの違い

Canvaとの違い

Canvaは、デザインテンプレートを使って手軽に画像や動画を作れるツールです。

操作が簡単で、単発の動画作成には向いています。SNS投稿用の動画やサムネイルをすぐ作りたい場合は、Canvaの方が早いことも多いです。

一方でRemotionは、動画をコードで定義できるため、同じ型の動画を大量に作る用途に向いています。

CapCutとの違い

CapCutは、ショート動画の編集に強いツールです。

字幕、効果音、テンポのよいカット編集、エフェクトなどはCapCutの方が直感的です。

Remotionは、ショート動画の編集感よりも、動画生成の自動化やテンプレート化に強みがあります。

AI動画ツールとの違い

AI動画ツールは、人物動画や背景映像、ナレーション付き動画を短時間で生成できる点が魅力です。

一方でRemotionは、毎回違う映像をAIに作らせるよりも、決まった構成の動画を安定して出力する用途に向いています。

つまり、派手なAI動画を作るならAI動画ツール、記事やデータから定型動画を量産するならRemotion、という使い分けが現実的です。

Remotionの始め方

必要なもの

Remotionを使うには、Node.jsとnpmが必要です。

Windows PowerShellで作業する場合、まず以下のコマンドでNode.jsとnpmが使えるか確認します。

node -v
npm -v

バージョンが表示されれば、Node.jsとnpmは利用できます。

Remotionプロジェクトを作成する

Remotionプロジェクトは、以下のコマンドで作成できます。

cd C:\Users\user
npx create-video@latest

今回の例では、以下のように選択しました。

Choose a template: Blank
Directory to create your project: my-video
Add TailwindCSS?: Yes
Add agent skills?: Yes

プロジェクト作成時に、以下のようなGitエラーが出ることがあります。

Error creating git repository:
git commit -m Create new Remotion video
Project has been created nonetheless.

このエラーは、Gitの初回コミットに失敗しただけです。
プロジェクト自体は作成されているため、まずはRemotion Studioを起動できるか確認しましょう。

Remotion Studioを起動する

作成したプロジェクトに移動し、依存関係をインストールして起動します。

cd C:\Users\user\my-video
npm i
npm run dev

起動後、ブラウザで以下にアクセスします。

http://localhost:3000

Composition IDが「MyComp」の場合は、以下のURLで直接確認できます。

http://localhost:3000/MyComp

Blankテンプレートを選んだ場合、最初は市松模様のような画面が表示されることがあります。これは透明なキャンバスが表示されているだけで、エラーではありません。

CodexでRemotion動画を作る手順

Codexをプロジェクトフォルダで起動する

Remotionはコードで動画を作るため、Codexと組み合わせると効率よく編集できます。

まず、Remotionプロジェクトのフォルダに移動してCodexを起動します。

cd C:\Users\user\my-video
codex

Codexに動画作成を依頼するプロンプト

今回は、20秒の日本語ショート動画を作る指示を出しました。

Remotionで「OpenClawとは？」という20秒動画を作ってください。

構成：
0〜3秒：OpenClawとは？
3〜8秒：PC操作をAIに任せられる
8〜13秒：メール・カレンダー・ブラウザ連携
13〜17秒：自分専用AI秘書として使える
17〜20秒：詳しくは記事で解説

既存のMyCompを編集してください。

背景は白〜薄い青系、文字は大きく読みやすく。
30fps、1280x720、20秒。
Remotion Studioで表示できるようにしてください。

実際に編集されたファイル

今回の例では、Codexによって以下のファイルが編集されました。

src/Root.tsx
src/Composition.tsx

内容としては、Composition IDを「MyComp」にし、20秒・1280×720・30fpsの動画として設定しました。

動画の構成は以下の通りです。

0〜3秒：OpenClawとは？
3〜8秒：PC操作をAIに任せられる
8〜13秒：メール・カレンダー・ブラウザ連携
13〜17秒：自分専用AI秘書として使える
17〜20秒：詳しくは記事で解説

Codexに任せることで、手作業でReactコードを書く量を減らしながら、Remotion動画を作成できます。

スクロールできます

フリーランスエンジニア向け案件検索サイト。複数エージェントの案件を一括検索／登録無料

Remotion動画にBGMを追加する方法

publicフォルダに音声ファイルを置く

RemotionでBGMを使う場合は、音声ファイルをプロジェクト内のpublicフォルダに置きます。

今回の例では、ダウンロードしたBGMファイルを以下の場所にコピーしました。

Copy-Item "C:\Users\user\Downloads\ikoliks_aj-acoustic-spring-mothers-day-music-320427.mp3" "C:\Users\user\my-video\public\bgm.mp3"

配置できたか確認するには、以下を実行します。

dir C:\Users\user\my-video\public

「bgm.mp3」が表示されれば準備完了です。

Composition.tsxでBGMを読み込む

Remotion側では、以下のようにBGMを読み込めます。

import { AbsoluteFill, Html5Audio, staticFile } from "remotion";

export const MyComposition: React.FC = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile("bgm.mp3")} volume={0.18} />

      {/* ここに既存の動画表示 */}
    </AbsoluteFill>
  );
};

音量はvolumeで調整できます。
BGMは主張しすぎないように、最初は0.15〜0.25程度にすると扱いやすいです。

ナレーション追加時の注意点

ナレーションを追加する場合は、publicフォルダに「narration.mp3」を置いて読み込めば対応できます。

ただし、存在しないファイルを条件付きで読み込むために複雑なカスタムフックを作ると、React Hooksのエラーが出ることがあります。

今回、以下のようなエラーが出ました。

Rendered more hooks than during the previous render.

これは、React Hooksの呼び出し順が前回のレンダリングと変わったときに発生するエラーです。

最初は無理に「ファイルがあれば読み込む」という処理を入れず、BGMだけ固定で読み込む方が安定します。

<Html5Audio src={staticFile("bgm.mp3")} volume={0.18} />

Remotion動画を書き出す方法

Remotion Studioから書き出す

Remotion Studioでは、画面上のRenderボタンから動画を書き出せます。

まずはStudio上で表示崩れや文字切れがないか確認してから、MP4として書き出すのがおすすめです。

PowerShellからMP4を書き出す

コマンドで書き出す場合は、以下を実行します。

cd C:\Users\user\my-video
npx remotion render MyComp out/video.mp4

環境によっては、エントリーポイントを明示した方が安定する場合があります。

npx remotion render .\src\index.ts MyComp out/video.mp4

書き出し後、動画は以下に作成されます。

C:\Users\user\my-video\out\video.mp4

再生するには、以下を実行します。

start .\out\video.mp4

Remotionでよくあるエラーと対処法

Git commitエラーが出る

npx create-video@latest実行時に、以下のようなエラーが出る場合があります。

Error creating git repository:
git commit -m Create new Remotion video
Project has been created nonetheless.

この場合、Remotionプロジェクト自体は作成されています。

まずは以下でプロジェクトに移動し、起動できるか確認します。

cd C:\Users\user\my-video
npm i
npm run dev

Gitの設定を確認する場合は、以下を実行します。

git --version
git config --global user.name
git config --global user.email

未設定の場合は、以下のように設定します。

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

Git commitエラーは9割が認証情報の不備。git config user.emailとgit config user.nameを設定し直せば直ります。

画面が市松模様のままになる

Blankテンプレートを選んだ場合、最初は背景や要素が何もないため、市松模様のように見えることがあります。

これはエラーではなく、透明なキャンバスが表示されている状態です。

Composition.tsxに背景色やテキストを追加すると、画面に内容が表示されます。

Rendered more hooks than during the previous render

このエラーは、React Hooksの呼び出し順がレンダリングごとに変わったときに発生します。

今回の例では、narration.mp3が存在するか確認するカスタムフックを追加したことで発生しました。

対処法として、まずは複雑な存在チェックを削除し、BGMだけ固定で読み込む形にします。

<Html5Audio src={staticFile("bgm.mp3")} volume={0.18} />

Remotionに慣れるまでは、存在しない音声ファイルを条件付きで読み込む処理は避けた方が安全です。

RemotionはYouTubeショート制作に向いている？

バズ狙いのショート動画には単体では弱い

Remotionは、YouTubeショートでよく見るような派手なAI動画を簡単に作るツールではありません。

AI美女、口パク、映画風の映像、テンポの速い字幕演出などは、CapCutやAI動画ツールの方が作りやすい場合があります。

そのため、YouTubeショートでバズを狙う目的だけなら、Remotion単体ではやや遠回りに感じるかもしれません。

記事の要約動画や比較動画には向いている

一方で、Remotionは記事の要約動画、比較動画、ランキング動画、FAQ動画、ツール紹介動画などに向いています。

特に、SEO記事ごとに30秒の補足動画を作りたい場合は、テンプレート化のメリットが大きくなります。

記事タイトル、要点、CTAだけを差し替えれば、同じデザインで複数の記事用動画を作成できます。

RemotionをSEO記事運用に活用する方法

記事本文から30秒要約動画を作る

SEO記事とRemotionを組み合わせる場合、記事本文からタイトル、要点、CTAを抽出し、動画テンプレートに流し込む方法が現実的です。

SEO記事を書く
↓
タイトル・要点3つ・CTAをJSON化
↓
Remotionで30秒動画を生成
↓
WordPress記事に埋め込む
↓
YouTube ShortsやXにも流用する

この流れを作れれば、記事制作と動画制作をセットで進めやすくなります。

WordPress記事に埋め込む補助コンテンツとして使う

Remotionで作った動画は、YouTubeショート単体でバズを狙うだけでなく、WordPress記事内の補助コンテンツとしても使えます。

記事冒頭や見出し直下に30秒の要約動画を入れることで、読者に記事内容を短時間で伝えやすくなります。

特に、ツール解説、比較記事、注意点まとめ、FAQ記事などでは、動画を追加することで記事の理解を助けるコンテンツになります。

同じテンプレートで複数記事に展開する

Remotionは、同じデザインで複数の動画を作れる点が強みです。

記事タイトル、要点、注意点、CTAだけを差し替えれば、ジャンルごとに統一感のある動画を作れます。

これは、動画版のWordPressテーマのようなイメージです。1本だけ作ると手間に感じますが、10本、50本、100本と増やすほど、テンプレート化の価値が出てきます。

Remotionを使うときの注意点

1本だけ作るならCanvaやCapCutの方が早い

Remotionは、単発動画を手軽に作るツールではありません。

1本だけ見栄えのよい動画を作るなら、CanvaやCapCutの方が早いです。

Remotionは、動画制作をテンプレート化し、何本も作る場合に効果を発揮します。

ReactやTypeScriptの知識が少し必要

RemotionはReactベースのため、完全なノーコードツールではありません。

ただし、CodexやClaude CodeなどのAIエージェントを使えば、コードに詳しくない人でも修正を依頼しながら進められます。

最初は難しく感じるかもしれませんが、動画の型ができれば、2本目以降はかなり楽になります。

BGMやナレーション素材は別途用意する必要がある

Remotionは動画を生成するフレームワークであり、BGMやナレーション音声を自動で用意してくれるわけではありません。

音声を付けたい場合は、フリーBGMや音声生成ツールを使って、publicフォルダに配置する必要があります。

まとめ：Remotionは動画を自動生成したい人に向いている

Remotionは、Reactで動画を作れるフレームワークです。

CanvaやCapCutのように直感的に編集するツールではありませんが、動画をコード化し、テンプレート化し、記事やデータから自動生成できる点が大きな魅力です。

特に、CodexやClaude Codeと組み合わせることで、ショート動画の構成作成、テキスト表示、BGM追加、書き出しまでを効率化できます。

1本だけ動画を作るなら、Remotionは少し面倒に感じるかもしれません。

しかし、SEO記事ごとに要約動画を作る、同じデザインでSNS動画を量産する、データから自動で動画を生成する、といった用途では非常に強力です。

ブログ記事やSEO記事を継続的に作っている人にとって、Remotionは「動画編集ツール」というより、「動画を自動生成する仕組み」として活用できるツールです。

スクロールできます

最大6つの生成AIを同時実行して比較できる法人向けサービス／プロンプト1つで横断検証

よくある質問（FAQ）

Remotionとは何ですか？

Remotionは、Reactのコンポーネントで動画を作れるオープンソースフレームワークです。TypeScript/JavaScriptで映像を制御できるため、データ駆動の動画量産やAIエージェントとの連携に強みがあります。2026年7月時点の最新版はv4.0.486で、ほぼ毎日アップデートが続いています。

Codexで動画編集・生成はできますか？

はい、Codex × Remotionの組み合わせでAI動画制作が可能です。Remotionが2026年1月にリリースした「Agent Skills」（28個のルールファイル）により、Codex・Claude Code・Cursorなどのコーディングエージェントが正しいRemotionコードを書けるようになりました。自然言語で「テキストアニメーション付きのショート動画を作って」と指示するだけで、Remotionプロジェクトのコードが自動生成されます。

Remotionは無料で使えますか？

個人利用・学習・オープンソースプロジェクトでは無料で使えます。企業で動画をレンダリングして配布する場合は有料の「Company License」が必要です。詳しくは公式ライセンスページで確認してください。

参考文献

本記事の執筆にあたり、以下の公式ドキュメント・一次ソースを参考にしました（2026年5月時点）。Remotionは更新が早いため、最新のAPIやコマンド仕様は必ず公式ドキュメントでご確認ください。

合わせて読みたい

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

管理人データエンジニア / ETL設計

基幹システム×データエンジニア｜DataEngineerLabs運営
大手食品系の基幹システム開発を経験。人事・給与・販売管理のデータ連携、ETL設計、SQLパフォーマンスチュートリアル、バッチ保守が専門。
DataSpider実務経験。"使える状態にする"難しさを発信中

Remotionとは？Codexでショート動画を作る方法・使い方・BGM追加まで解説

AI実装スキルを磨きたい人へ

Remotionとは？

Reactで動画を作れるフレームワーク

Remotionでできること

普通の動画編集ソフトとの違い

Remotionが優れている点

動画をテンプレート化できる

CodexやClaude CodeなどのAIエージェントと相性がいい

横型・縦型・正方形の動画を作り分けやすい

SEO記事やデータから動画を量産しやすい

Remotionが向いている人・向いていない人

Remotionが向いている人

Remotionが向いていない人

RemotionとCanva・CapCut・AI動画ツールの違い

Canvaとの違い

CapCutとの違い

AI動画ツールとの違い

Remotionの始め方

必要なもの

Remotionプロジェクトを作成する

Remotion Studioを起動する

CodexでRemotion動画を作る手順

Codexをプロジェクトフォルダで起動する

Codexに動画作成を依頼するプロンプト

実際に編集されたファイル

Remotion動画にBGMを追加する方法

publicフォルダに音声ファイルを置く

Composition.tsxでBGMを読み込む

ナレーション追加時の注意点

Remotion動画を書き出す方法

Remotion Studioから書き出す

PowerShellからMP4を書き出す

Remotionでよくあるエラーと対処法

Git commitエラーが出る

画面が市松模様のままになる

Rendered more hooks than during the previous render

RemotionはYouTubeショート制作に向いている？

バズ狙いのショート動画には単体では弱い

記事の要約動画や比較動画には向いている

RemotionをSEO記事運用に活用する方法

記事本文から30秒要約動画を作る

WordPress記事に埋め込む補助コンテンツとして使う

同じテンプレートで複数記事に展開する

Remotionを使うときの注意点

1本だけ作るならCanvaやCapCutの方が早い

ReactやTypeScriptの知識が少し必要

BGMやナレーション素材は別途用意する必要がある

まとめ：Remotionは動画を自動生成したい人に向いている

よくある質問（FAQ）

Remotionとは何ですか？

Codexで動画編集・生成はできますか？

Remotionは無料で使えますか？

参考文献

合わせて読みたい

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル