MENU
データエンジニアのキャリア・技術情報メディア
  1. ホーム
  2. データエンジニア
  3. Remotionとは？Codexでショート動画を作る方法・使い方・BGM追加まで解説

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

データエンジニア

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

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

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

目次

Remotionとは？

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

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

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

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

Remotionでできること

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

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

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

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

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

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

項目Canva・CapCutRemotion
操作方法画面操作中心コード中心
得意な用途単発の動画制作動画のテンプレート化・量産
修正方法手作業で編集コードを変更
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"

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

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は「動画編集ツール」というより、「動画を自動生成する仕組み」として活用できるツールです。

データエンジニア
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

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

データエンジニア。人事・給与・販売管理システムのデータ連携を中心に、ETL設計・SQLパフォーマンスチューニング・バッチ処理の運用保守を担当。大手食品系企業での基幹システム開発にも携わる。DataSpider Servistaなどの実務経験あり。「データを使える状態にする」ことの難しさと面白さをリアルに伝えるメディアを運営中。

関連記事

コメント

コメントする

目次