Remotion入門：AI画像を動画にする方法【クリエイター向け】

プロンプト画伯

2026/04/14

こんにちは、プロンプト画伯です。

元グラフィックデザイナーで、今はAI画像生成にどっぷりハマってる職人タイプのクリエイターです。

「センスじゃない、言語化だ」をモットーに、プロンプトの試行錯誤を共有しています。

AI画像は好きなだけ作れるようになった。

この記事は、そのAI画像を動画に変えるフレームワーク「Remotion」の入門ガイドだ。クリエイター目線で、コードなしで始める方法を全部書いた。

Midjourney、Stable Diffusion、FLUX――毎日何十枚も生成して、いい感じのやつをSNSに投げて。

でも、ふと思ったんだよね。

「この画像、動いたらもっとすごくない？」

試しに動画編集ソフトを開いてみたこともある。

でも、After Effectsはキーフレームが難しいし、CapCutはテンプレートが限られるし、「もうちょっと自由にやりたい」のに手が届かない感じ――あの地味なフラストレーション、わかる人にはわかるんじゃないかな。

Remotion入門の記事というとエンジニア向けばかり出てくるけど、この記事はちょっと違う。

コードを書かないクリエイター・デザイナーが、AI生成画像を動画にするまでの道筋を、デザイナー目線で全部書いた。

先にネタバレしておくと、Claude Codeに日本語で「こう動かして」と伝えるだけで動画が生成できる時代になっていた。

信じられないかもしれないけど、この投稿を見てほしい。

動画編集一切なし、Claude Codeに雑にお願いしただけでプロモーション動画ができている。

この記事を読み終わるころには、「自分もやってみよう」と思えるはず。

Remotionって結局なに？3行でわかる概要

まず「Remotionって何なのか」を3行でまとめる。

Reactというウェブ技術を使って動画を作るオープンソースのフレームワーク
コードで動画の「設計図」を書くと、それが本物の動画ファイル（MP4等）になる
ブラウザ上でリアルタイムプレビューしながら作業できる

これだけだとピンとこないと思うので、もうちょっと噛み砕いて説明する。

動画＝パラパラ漫画。Remotionはそのコマをコードで描く

動画って、つまるところ「パラパラ漫画」なんだよね。

1秒間に30枚の絵を高速でめくっている。

Remotionは、この1枚1枚の「コマ」をReactコンポーネント（ウェブの部品みたいなもの）で定義する。

「5フレーム目でテキストを表示して、10フレーム目からフェードインして……」みたいな指示をコードで書く。

技術的な裏側を少しだけ説明すると、Remotionは内部でこういう処理をしている。

Webpackでコードをバンドル（まとめる）
ヘッドレスChromium（画面のないブラウザ）で各フレームのスクリーンショットを撮影
FFmpegで全フレームを結合して動画ファイルに変換

つまり「ブラウザで表示できるものは何でも動画にできる」という発想。

HTML、CSS、画像、SVG、テキスト――ウェブで使えるものは全部動画の素材になる。

ここがAfter Effectsとは根本的に違うところなんだよね。

クリエイターがRemotionに注目している理由

「コードで動画って、エンジニア向けでしょ？」

自分も最初はそう思っていた。

でも2026年に入って状況が一変した。

AIコーディングエージェントが「コードを書く部分」を全部やってくれるようになったからだ。

つまり、クリエイターは「どう動かしたいか」を言葉で伝えるだけでよくなった。

クリエイターがRemotionに注目している理由を整理するとこうなる。

テンプレートを一度作れば、素材を差し替えるだけで量産できる
SNS向けショート動画を同じフォーマットで大量に作れる
AI画像を読み込んで、アニメーションをつけて動画に変換できる
Reactのホットリロードが効くので、変更が即座にプレビューに反映される

特にAI画像生成をやっている人にとっては「大量に作った画像を動画にまとめる」ニーズがあるはずで、Remotionはそこにドンピシャでハマる。

「毎日何十枚も生成しているのに、SNSに投げ続けるだけでいいのか」と思っていた自分には、まさに求めていたピースだった。

After Effectsとの違いはここ

デザイナーならAfter Effects（AE）を使ったことがある人も多いと思う。

自分もAEは何年も使っていたから、違いを実感込みで書ける。

項目

After Effects

Remotion

操作方法

GUI（タイムライン＋キーフレーム）

コード（React + CSS）

学習コスト

高い（独自UIの習得が必要）

React知識 or AIエージェント

テンプレの再利用

プロジェクトファイルのコピー

コンポーネントの使い回し

量産性

手作業が増えると厳しい

データ差し替えで自動化可能

月額費用

Creative Cloud（約3,000円/月）

個人・3人以下の企業は無料

AI連携

限定的

Claude Code等で自然言語操作

AEが得意なのは「1本の動画を丁寧に仕上げる」作業。

Remotionが得意なのは「同じフォーマットの動画を大量に、自動で生成する」作業。

どっちが上とかじゃなくて、用途が違う。

「AI画像を動画にしたい」「SNS用に量産したい」という目的なら、Remotionのほうが圧倒的に相性がいい。

ここまで読んで「面白そうだけどコード書けないし……」と思った人、次のセクションで世界が変わる。

「コードが書けない」は問題なし — Claude Code × Remotionの衝撃

ここからが本題と言ってもいい。

Remotionの最大のハードルだった「コードを書く必要がある」問題が、2026年に完全に解決された話をする。

2026年1月に登場したAgent Skillsとは

2026年1月、Remotionが「Agent Skills」という仕組みを公開した。

これ、何がすごいかというと――AIコーディングエージェント（Claude Code等）にRemotionの使い方を教えるための「指示書」のようなものなんだよね。

Agent Skillsをインストールすると、Claude CodeがRemotionのAPIやアニメーションパターン、ベストプラクティスを理解した状態で動いてくれる。

Overview - Agent Skills

A simple, open format for giving agents new capabilities and expertise.

agentskills.io

普通にClaude Codeを使うだけだと「Remotionって何？」状態から始まるけど、Agent Skillsを入れておけば最初からRemotionのエキスパートとして振る舞ってくれる。

ここ、ちょっと想像してほしい。

転職したての新入社員に「うちのシステム、一通り学習してきた状態」で来てもらえるようなイメージ。一から教える必要がない。これが最初から動いている状態で使えるんだよね。

インストールも簡単で、プロジェクト作成時に「Install Skills?」と聞かれたときに「Yes」を選ぶだけ。

あとからでも以下のコマンドで追加できる。

npx skills add remotion-dev/skills

「こういう動画作って」と日本語で伝えるだけで動く

Agent Skillsを入れた状態でClaude Codeを起動すると、日本語でこんなふうに指示できる。

「Welcome to 2026」というテキストが5秒間でフェードインして、2秒ホールドしたあと、左にスライドアウトする動画を作って

これだけで、Claude Codeが必要なコンポーネントを生成して、アニメーションを組んで、プレビューできる状態まで持っていってくれる。

もっとクリエイター寄りの指示だとこんな感じになる。

publicフォルダにあるAI生成画像4枚を使って、Instagram向けの正方形のスライドショー動画を作って。
各画像の表示時間は3秒、画像の切り替えはクロスフェードで。BGMはなし。最後にロゴを2秒表示して。

After Effectsで手動でやっていた作業を「言葉で伝えるだけ」で実現できる。

これがどれだけすごいことかは、デザインの現場にいた人ならわかるはず。

実際に試してみた：プロンプト例と生成結果

自分が実際に試したプロンプトをいくつか紹介する。

最初に試したのは、シンプルなテキストアニメーション。

背景を黒にして、白いテキスト「AI画像を動かす」を画面中央に配置。
最初の1秒で下からスライドインして、3秒間表示したあと、
上にスライドアウト。フォントはNoto Sans JP。

Claude CodeがuseCurrentFrame()フックを使ってフレーム単位のアニメーションを自動で組んでくれた。

自分はコードを1行も書いていない。

次に試したのが、AI生成画像を使ったスライドショー。

publicフォルダにある5枚の画像をスライドショーにして。
各画像はAbsoluteFillで全画面表示、表示時間は4秒ずつ。
切り替えはopacityによるクロスフェード。
全体の長さは20秒。

これも問題なく動いた。

AbsoluteFillはRemotionの「画面全体を覆うレイヤー」を作るコンポーネント――こういう専門用語もAgent Skillsのおかげでちゃんと使ってくれる。

正直、最初は「本当にこれだけで動くの？」と半信半疑だったけど、やってみたら本当に動いた。

鳥肌が立ったのは、最初のプレビューが表示された瞬間。「あ、動いてる」って声に出してしまった。

環境構築さえ終わっていれば、最初の動画生成まで10分もかからなかった。

その環境構築も、15分で終わる。次のセクションで全部説明する。

環境構築をゼロから解説（所要15分）

「面白そうなのはわかった、で、どうやって始めるの？」

ここからは環境構築の手順を、プログラミング経験がない人向けにゼロから解説する。

所要時間は15分くらい。

コピペで進められる手順しか書いていないので、怖がらずについてきてほしい。

Node.jsのインストール（初めての人向け）

RemotionはNode.js（JavaScriptの実行環境）の上で動く。

Node.jsのバージョンは18以上が必要だけど、2026年現在は最新のLTS（長期サポート版）を入れておけば問題ない。

Macの場合：

ターミナルを開く（アプリケーション → ユーティリティ → ターミナル）
以下のコマンドを貼り付けてEnter

curl -fsSL https://fnm.vercel.app/install | bash

ターミナルを一度閉じて開き直す
Node.jsをインストール

fnm install --lts

インストール確認

node -v

バージョン番号が表示されればOK。

Windowsの場合：

Node.js公式サイトからインストーラーをダウンロードして実行するのが一番簡単。

「LTS」と書かれたボタンを押してダウンロードして、あとはインストーラーの指示に従うだけ。

npx create-video@latest でプロジェクト作成

Node.jsが入ったら、いよいよRemotionのプロジェクトを作る。

ターミナルで以下のコマンドを実行。

npx create-video@latest

対話形式でいくつか質問される。

プロジェクト名: 好きな名前をつける（例: my-first-video）
テンプレート: 最初は「Hello World」を選ぶ
TypeScript: 「Yes」を選ぶ（Claude Codeとの相性がいい）
TailwindCSS: 「Yes」を選ぶ（スタイリングが楽になる）
Agent Skills: 必ず「Yes」を選ぶ（これが超重要）
依存関係のインストール: 「Yes」を選ぶ

特にAgent Skillsの項目は絶対に「Yes」にすること。

これをスキップすると、Claude Codeとの連携がうまく動かない。

あとからでもnpx skills add remotion-dev/skillsで追加できるけど、最初から入れておくほうが楽。

Remotion Studioをブラウザで開く

プロジェクトが作成できたら、以下のコマンドでRemotion Studioを起動する。

cd my-first-video
npm run dev

ブラウザが自動で開いて、Remotion Studioが表示される。

Remotion Studioでは以下のことができる。

タイムラインで動画をフレーム単位でプレビュー
再生・一時停止・シークバーで確認
コードを変更すると即座にプレビューが更新される（ホットリロード）

ブラウザ上で動画の確認ができるので、After Effectsのようなソフトを別途インストールする必要がない。

ここまでで環境構築は完了。

次のセクションから、いよいよAI画像を動かしていく。

AI生成画像をRemotionで動かしてみる

環境が整ったら、いよいよ本題。

AI画像生成ツールで作った画像をRemotionに読み込んで、動画にしていく。

AI画像の読み込みはフォルダにぶち込むだけ

Remotionで画像を使うのは簡単で、プロジェクトのpublicフォルダに画像ファイルを置くだけ。

my-first-video/
  public/
    image1.png   ← AI生成画像をここに置く
    image2.png
    image3.png
  src/
  ...

MidjourneyやStable Diffusionで生成した画像をダウンロードして、publicフォルダにドラッグ&ドロップする。

ファイル名は英数字にしておくのが無難（日本語ファイル名だとトラブルの原因になることがある）。

読み込みの仕組みとしては、RemotionのstaticFile()関数でpublic内のファイルを参照する。

この辺のコードはClaude Codeが書いてくれるので、覚える必要はない。

「ぶち込んで、指示するだけ」。これだけ覚えておけばいい。

フェードイン・スライドの基本アニメーション

AI画像を動かすための基本的なアニメーションパターンを紹介する。

Claude Codeに伝えるときに使う「アニメーション用語」を知っておくと、意図した動きを伝えやすくなる。

フェードイン / フェードアウト: 透明→不透明、不透明→透明
スライドイン / スライドアウト: 画面外から入ってくる / 画面外に出ていく
ズームイン / ズームアウト: 拡大しながら表示 / 縮小しながら消える
クロスフェード: 画像Aが消えながら画像Bが出てくる切り替え
パン: 画像の一部を映しながらゆっくり移動（大きな画像で効果的）

Remotion内部ではuseCurrentFrame()フックで現在のフレーム番号を取得して、interpolate()関数で「フレーム0のときはopacity 0、フレーム30のときはopacity 1」みたいに計算している。

この仕組みを理解していなくてもClaude Codeが全部やってくれるので、気にしなくていい。

大事なのは「どう動かしたいか」を言葉で説明できること。

ここが「センスじゃない、言語化だ」の出番なんだよね。

Claude Codeに「こう動かして」と指示する実例

実際にAI画像を動かすときの指示例をいくつか載せておく。

例1: シンプルなスライドショー

publicフォルダにある画像（image1.png〜image5.png）を使った
スライドショー動画を作って。

- 解像度: 1920x1080
- 各画像の表示: 3秒
- 切り替え: 0.5秒のクロスフェード
- 最初の画像はフェードインから始める
- 最後の画像はフェードアウトで終わる

例2: ケンバーンズ効果（ゆっくりズーム＋パン）

image1.pngをAbsoluteFillで全画面表示して、
10秒かけて1.0倍から1.2倍にゆっくりズームインする動画を作って。
ケンバーンズ効果みたいなやつ。

例3: テキストオーバーレイ付き

AI生成画像を背景にして、画面下部に白いテキスト
「プロンプト画伯の作品集」を半透明の黒帯の上に表示。
テキストは1秒後にフェードインして、最後の1秒でフェードアウト。
フォントはNoto Sans JP Bold。

ポイントは、「具体的な数値」と「アニメーションの種類」を明確に伝えること。

「いい感じにして」だと曖昧すぎてClaude Codeも困る。

「3秒」「0.5秒のクロスフェード」「1920x1080」みたいに、数字で指定するのがコツ。

これは画像生成プロンプトと同じ考え方。

曖昧な言葉じゃなくて、具体的なパラメータで伝える。

「センスじゃない、言語化だ」は、動画でも同じだった。

次のセクションで、具体的な活用パターンを一気に見ていく。

クリエイターが喜ぶ活用パターン3選

Remotionの基本がわかったところで、クリエイターが実際に使えるパターンを3つ紹介する。

どれも「一度テンプレを作れば、あとは素材を差し替えるだけ」という発想で使えるものばかり。

SNS向けショート動画の量産テンプレ

一番ニーズが高いのがこれ。

Instagram Reels、TikTok、YouTube Shortsに投稿するショート動画を、テンプレートを使って量産するパターン。

やり方の流れ：

Claude Codeに「9:16の縦動画テンプレートを作って」と指示
テキスト・画像の差し替え箇所をpropsで受け取る構造にしてもらう
publicフォルダの画像を差し替えるだけで新しい動画が作れる

一度テンプレートができてしまえば、AI画像を差し替えるだけで毎日新しいショート動画が投稿できる。

「毎回ゼロから作らなくていい」というのがRemotionの強みで、ここはAfter Effectsのテンプレートよりもずっと柔軟。

ポートフォリオ動画を自動生成する

AI画像をたくさん作っている人なら、ポートフォリオ動画を作りたいと思ったことがあるはず。

でも「動画編集ソフトを開いて、1枚ずつ配置して、アニメーションつけて……」は面倒すぎる。

Remotionなら、フォルダに画像を放り込んでClaude Codeに指示するだけでポートフォリオ動画が完成する。

publicフォルダ内の全PNG画像を読み込んで、ポートフォリオ動画を作って。

- 各画像は4秒表示
- 切り替えはスライド（右から左へ）
- 画面右下に「@promptpainter」のウォーターマーク
- 最初と最後に黒背景＋白テキストのタイトルカード
- 解像度: 1920x1080
- BGMなし

画像が10枚あれば約50秒のポートフォリオ動画が、ものの数分でできあがる。

新しい画像を追加したらフォルダに足すだけで、次回のレンダリングに自動で含まれるようにもできる。

スライドショー形式の作品集動画

YouTube用のもう少し長い動画を作りたい場合は、スライドショー形式がおすすめ。

各スライドにテーマ名やプロンプトの一部を表示して、「どうやって生成したか」も動画内で説明する構成にすると、教育コンテンツとしても機能する。

以下の構成でスライドショー動画を作って。

1. タイトルスライド（3秒）: 「AIプロンプト作例集 Vol.1」
2. 画像スライド × 8枚（各5秒）: 画像表示＋下部にキャプション
3. エンディングスライド（3秒）: 「Follow @promptpainter」

- キャプションのテキスト内容は別途指示する
- 切り替えはフェード
- 解像度: 1920x1080

この「テンプレを一度作って使い回す」サイクルが回り始めると、コンテンツ制作のスピードが劇的に変わる。

画像生成→動画化→SNS投稿の流れが完全に自動化できるイメージ。

「これが自分のやりたかったことだ」と気づいた瞬間、Remotionを試す理由がなくなる。