あまんちゅの夏休み2026①☀️フロントエンドの技術で動画が作れる！Remotionに挑戦してみた

こんにちは！
フロントエンドエンジニアのあまんちゅです。

前回の記事で、夏休みに「Figma Motion」や「Remotion」に挑戦したいと書きました。（気が付けばもう秋になってしまいましたが…🍁）
ということで、今回は実際に「Remotion」を使って動画を作ってみたお話です！

題材にしたのは、夏休みにお出かけした「霧島アートの森」です。
写真を40枚ほど、短めの動画も8本ほど撮っていたので、「せっかく撮った素材を、ちゃんと形に残してみたいな」と思い、これらを使って動画を作ることにしました。

Remotionは、Reactのコードを書いて動画を作れるツールです。
ただ、私はReactにあまり触れてきていなかったので、今回は「Claude Code」を相棒にして挑戦しました。

動画の構成づくりからコーディング、ナレーションの台本作成、音声ファイルの準備まで、できるだけClaude Codeに指示を出しながら進めてみました。
もちろん、全部が一発でうまくいったわけではありません。
写真や動画、実際のお出かけの流れをClaude Codeに伝えて構成を考えてもらったり、何度かやり取りしながら修正したり。さらに、素材を組み合わせていくと、音声と表示のタイミングが重なったり、逆に変な間が空いたりすることもありました。

それでも、コードを書いて動画を作るという普段とは少し違った動画制作は、なかなか面白い体験でした。 今回は、そんな私の夏休みの経験談として、Remotionでどんな動画を作ったのか、そしてAIとどんなやり取りをしながら動画を形にしていったのかを紹介していきたいと思います！

Remotionってなに？

Remotionとは、「Reactを使って動画やモーショングラフィックスを作成できるライブラリ」です。コードで動画を作成するので、コーディングエージェントを使用して動画を作ることもできます！

例えば、動画で表示するグラフや数字に動きをつけてそこに注目を集めやすくする動きを作ったり、いろいろなテンプレートを元にして動画を制作することもできます。

環境構築

Remotionで動画を作り始めるためには、その環境を整えていく必要がありますので、その方法について記載していきます。

まず、その前に、RemotionをPCで動かすためには、Node.jsのバージョン16以上が必要になります。Node.jsに関しては今回記載はしませんが、事前に入れておきましょう。

インストール

まずはこちらのコマンドから始めます！

npx create-video@latest

最初は、create-videoというパッケージがまだPCにインストールされていないため、npxが一時的にダウンロードして実行しても良いかを確認してきます。その時は、yを入力してEnterでインストールして続行できます。

Need to install the following packages:
[email protected] //←この数字はバージョン
Ok to proceed? (y) 

次は、どのテンプレートを使用するかの選択肢が出てきます。（各選択肢の右側にどんなテンプレートなのか補足を記載しています）

Welcome to Remotion!
? Choose a template: › - Use arrow-keys. Return to submit.
❯   Blank Nothing except an empty canvas //空のキャンバスのみを含むテンプレート。Remotionを既に利用している場合、またはAIを使用してコードを作成する予定がある場合におすすめ。
    Hello World A playground with a simple animation //TypeScript、Prettier、ESLintがあらかじめ設定された基本的なテンプレート。
    Next.js SaaS template for video generation apps //Remotion PlayerとRemotion Lambdaによるレンダリング機能が組み込まれたSaaSスターターキット。動画生成アプリを開発したい方におすすめ。
    Next.js (Vercel Sandbox) Render videos on-demand using Vercel Sandbox //同上だが、レンダリングをVercel Sandbox上でオンデマンド実行する構成。サーバーレスでレンダリングしたい場合におすすめ。
    Next.js (No Tailwind) SaaS template for video generation apps //Next.js版からTailwind CSSを抜いたもの。自分のCSS/UIライブラリを使いたい人向け。
    Next.js (Pages dir) SaaS template for video generation apps //Remotion PlayerとRemotion Lambdaによるレンダリング機能が組み込まれたSaaSスターターキット。動画生成アプリを開発したい方におすすめ。
    Recorder A video production tool built entirely in JavaScript //ウェブカメラや画面コンテンツの録画、字幕生成、音楽の追加などをJavaScriptでエンドツーエンドで行えるビデオ制作ツール。
    Prompt to Motion Graphics SaaS Starter Kit SaaS template for AI-powered animation generation //「プロンプトからモーショングラフィックスへ」製品向けのSaaSテンプレート。
    Hello World (JavaScript) The default starter template in plain JS //「Hello World」テンプレートを、プレーンなJavaScriptで記述。TypeScriptが苦手な方におすすめ。
    Render Server An Express.js server for rendering videos with Remotion //Express.jsサーバーがRemotionレンダリングを開始、追跡、キャンセルするためのテンプレート。
    Electron Render Remotion videos from a desktop app //デスクトップアプリ（Electron）からRemotion動画を書き出す構成。
    React Router SaaS template for video generation apps //Remotion PlayerとRemotion Lambdaによるレンダリング機能を組み込んだ、SaaS（Software as a Service）のスターターキット。React Router 7で構築されている。
    React Three Fiber Remotion + React Three Fiber Starter Template //Remotion + Three.js(R3F)で3Dアニメーション動画を作る構成。
    Still images Dynamic PNG/JPEG template with built-in server //動画ではなく静止画（PNG/JPEG）を動的生成するサーバー付きテンプレート。サムネイル自動生成などにおすすめ。
    Audiogram Text and waveform visualization for podcasts //ポッドキャストの抜粋をソーシャルメディアに投稿できる動画に変換するテンプレート。
    Music Visualization Text and waveform visualization for podcasts //音楽の波形ビジュアライザー＋テキスト表示（Audiogramと似た構成）。
    Prompt to Video Create a story with images and voiceover from a prompt //プロンプトをスクリプト、画像、ナレーション付きの短い動画に変換するテンプレート。
    Skia React Native Skia starter //React Native Skiaが既にセットアップ済みのテンプレート。
    Overlay Overlays for video editing software //一般的な動画編集ソフトで使用できるオーバーレイを作成するためのスターターテンプレートです。 

今回は、Claude Codeを使用して動画を作ろうとしているので「Blank Nothing except an empty canvas」を選択して進めました。
続いて、TailwindCSSを使用するか、agent skillsを使用するかを聞かれます。
こちらもClaude Codeでの作業をしやすくするために両方Yesを選択して進めます。

Add TailwindCSS? › No / Yes
Add agent skills? › No / Yes

次は、どんなskillを使用するかを聞かれます。複数選択可能なので、必要なものを選択して進めます。それぞれのskillsの内容は下記テーブルを参照してください。
ちなみにClaude Codeで動画作成を行う場合は、remotion-best-practicesのみで進められました！
また、後からスキルファイルを個別に追加/削除することも可能なので、迷ったら少なめでも大丈夫です。

その後、選択したスキルに対して、「どのAIコーディングツールから参照できるようにするか」「スキルをどの範囲にインストールするか」「Symlinkにするか」などを順番に選択していきます。
状況に応じて選択した方が良いので、都度AIに聞くなどして選択して進めてください。

ここまででプロジェクト完成です！🙌
続けて、インストールしていきます。

npm i //もしくは、npm install

これでインストールが進んでいきます。インストールが終わったら、実際に動かしていきます。

npm run dev

プレビュー画面が立ち上がり、環境構築は完了です！

ファイル構成

プロジェクトが立ち上がったら、まずは中身がどうなっているか気になったので、
Claude Codeに聞いてみました。

remotion-video/
├── src/
│   ├── index.ts          ← エントリーポイント
│   ├── Root.tsx           ← コンポジション（動画シーン）の登録場所
│   ├── Composition.tsx    ← 実際の動画コンポーネント本体
│   └── index.css          ← Tailwindなどのグローバルスタイル
├── public/                ← 静的アセット置き場（今は空）
├── package.json
├── remotion.config.ts
└── tsconfig.json

src/

の中に、動画のロジックやコンポーネントが入っていて、

Composition.tsx

が実際に編集していくメインのファイルになるようです。

その中でも特に押さえておきたいのがpublicフォルダでした。ここは、動画で使う画像・音声・動画ファイルなどの素材置き場です。今回、写真40枚と動画8本を使うので、まずはこの中に素材を入れていくところから始めることになります。

コード内で読み込むときは、

staticFile()

という関数を使って参照する形になるようです。

import { Img, staticFile } from "remotion";
<Img src={staticFile("photo1.jpg")} />

普通のimport文で画像を読み込む方法とは違って、ビルド時に加工されずそのまま配信される場所とのことでした。「なるほど、ここに素材をまとめて入れておけばいいのか」というのが、最初の一歩として分かりやすかったです。

Claude Codeと一緒に動画を作ってみた

シナリオとナレーションを作ってもらう

まず最初に、Claude Codeに素材のディレクトリを伝えて、「このディレクトリに写真と動画があるので、思い出動画を作るためのシナリオを考えてほしい」とお願いしました。
すると、まず文字情報として、動画のシナリオとナレーション文を作ってくれました。「〇枚目の写真ではこのナレーション」「この動画クリップの後にこの写真」といった流れが、一つの台本のような形で返ってきた感じです。

次にナレーションの音声を作る作業に入ります。VOICEVOXにはいろいろな声（キャラクター）が用意されているので、まずはいくつか試聴して、今回の動画に合いそうな声を選びました。

声が決まったら、「この声を使って、このナレーション内容で音声ファイルを作って」とClaude Codeに伝えると、そのまま音声ファイルまで生成してくれました。台本作りから音声化まで、一気通貫でお願いできたのが印象的でした。

動画に組み込みながら、細かい調整を重ねる

シナリオとナレーションができたところで、いよいよ実際に動画に組み込んでいく作業に入ります。ここからは、一発でうまくいくというよりは、何度もやり取りしながら調整していく時間の方が長かった気がします。

まず取り組んだのが、写真・動画クリップの順番です。Claude Codeが最初に考えてくれた並びから、「この写真とこの動画クリップの順番を入れ替えたい」「ここにこの写真を追加したい」といった形で、実際にプレビューを確認しながら細かく指示を出していきました。
そうして組み合わせていくうちに、いくつか気になる点が出てきました。

• 画像とナレーションの内容が合っていない：このタイミングで表示されている写真と、話しているナレーションの内容がズレている・・・と気づいたら、その都度Claude Codeに「この画像のタイミングにはこのナレーションを当てたい」と伝えて調整
• 音声同士が被ってしまう：ナレーションのタイミングを詰めすぎると、前のセリフが終わる前に次のセリフが始まってしまうことがあり、実際に再生して耳で確認しながら修正

この調整作業の中で、本来は「fps」や「durationInFrames」の数値を見ると調整が早かったのかもしれませんが、正直全く見れていませんでした。「実際に再生して、おかしいところを見つけたら直す」という、地道な確認作業の繰り返しだったのが実情です。
普段から動画編集ソフトでタイムコードやフレーム数を見て作業している人であれば、数値を見ただけで「このあたりで音がズレそう」と逆算できるのかもしれません。ただ私はそのあたりの経験がなかったので、数値より実際の見た目・音を頼りに調整していく方法が、自分にとってはやりやすかったです。

画像の順番を入れ替えたり、「この画像のタイミングにはこのナレーションを当てたい」というのを伝えたりしながら、そこそこ何度もやり直しを重ねました。

完成した動画

そんな試行錯誤を経て完成したのが、こちらの動画です。だいたい4分くらいの仕上がりになりました。

手作業で1枚1枚編集していくよりは、確実に良いものができたと思います。とはいえ、正直「なんかダサいな・・・」と思う部分もあって、でもそれをどう直したら良いのか分からないまま完成としてしまった、というのが本音です。

まとめ

今回、Remotion × Claude Codeで夏の思い出動画を作ってみました。

ただ、その一方で「なんとなく素人が作った動画っぽさ」が抜けなかったのも事実です。「ここをもう少しこうしたい」という感覚はあっても、それを言葉でうまく指示できなかったり、逆に何が足りないのか分からなかったり・・・。
この経験から、Remotion × AIエージェントという組み合わせは、動画制作の知識や経験がある人が、時短のために使うと特に力を発揮するツールなのかもしれないと感じました。

次回は、同じ「動きをつくる」でも少し違うアプローチの「Figma Motion」に挑戦してみた話をお届け予定です。ぜひそちらもお楽しみに！