こんにちは、株式会社TIMEWELLの濱本です。今日はテック関連のサービスご紹介です。動画コンテンツがビジネスのあらゆる場面で重要性を増す現代、その制作プロセスにも変革の波が押し寄せています。もし、あなたが普段使い慣れたテキストエディタで数行のコードを書き、AIと対話するだけで、まるで魔法のようにプロ品質の動画を自在に生み出せるとしたら、ワクワクしませんか？この記事では、そんな未来を現実のものにする「Remotion」と「Claude Code」という驚異的なテクノロジーの組み合わせについて、世界を席巻する活用事例を交えながら、その核心に迫ります。これは単なる開発者向けの話ではありません。すべてのコンテンツクリエイターにとって、まさに革命的なパラダイムシフトの幕開けなのです。
Remotionとは何か？ "コードで書く"動画制作のパラダイムシフト
Remotionは、「React for Video」という鮮烈なコンセプトを掲げる、画期的なオープンソースフレームワークです [1]。Web開発の世界でデファクトスタンダードとなったReact。そのコンポーネントベースの効率的な開発思想を、なんとそのまま動画制作の世界に持ち込んでしまったのです。UIコンポーネントを組み立てる感覚で、テキスト、画像、アニメーションといった動画のパーツをプログラムとして定義し、それらを組み合わせて一本のビデオを構築していく。まさに「宣言的に」動画を記述する、新しい時代の到来です。
従来のAdobe After EffectsやFinal Cut ProのようなGUIベースの動画編集ソフトが、タイムライン上で直感的な操作を行うのに対し、Remotionはすべてをコードで記述します。これにより、以下のような、従来の制作フローでは考えられなかった数多くのメリットが生まれます。
- 再利用性とコンポーネント化: 一度作成したタイトル画面やテロップ、トランジションなどのアニメーションは、すべてReactコンポーネントとして再利用できます。これにより、デザインの一貫性を保ちつつ、制作効率を劇的に向上させることが可能です。
- バージョン管理: すべての動画アセットがコードであるため、Gitによる厳密なバージョン管理が可能になります。「あのアニメーションを3日前の状態に戻したい」といった要望も、
git checkoutコマンド一つで実現できます。 - スケーラビリティと自動化: 動画の尺、テキストの内容、使用する画像などを変数として外部から与えることで、何百、何千というパターンの動画を自動生成できます。例えば、顧客データに合わせて名前やメッセージを差し込んだパーソナライズド動画を大規模に展開することも容易です。
- 開発者フレンドリー: 普段Web開発で使い慣れたReact、TypeScript、CSS、そして各種NPMパッケージといったエコシステムをそのまま活用できます。新たなツールや言語を学ぶ必要はありません。
Remotionの基本的なAPIは非常にシンプルかつ強力です。例えば、useCurrentFrame()フックは現在のフレーム数を取得し、これを基にアニメーションを制御します。interpolate()関数は、フレームの進行に合わせて値（例：不透明度、位置、スケール）を滑らかに変化させます。さらに、spring()関数を使えば、物理演算に基づいたリアルで心地よいバネのような動きを簡単に実装できます。複数のアニメーションを連続して再生するにはSequenceコンポーネントが役立ちます。
import { useCurrentFrame, interpolate, spring, Sequence } from 'remotion';
export const MyVideo: React.FC = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
const scale = spring({
frame: frame - 30,
fps: 30,
from: 0,
to: 1,
config: {
stiffness: 100,
damping: 10,
},
});
return (
<div style={{ opacity, transform: `scale(${scale})` }}>
<h1>Hello, Remotion!</h1>
</div>
);
};
このように、Remotionは動画制作を、一部の専門家の職人技から、エンジニアリングによる体系的で誰もが再現可能なプロセスへと昇華させます。これは、制作の現場に起きている、まさにパラダイムシフトと呼ぶにふさわしい地殻変動なのです。
AI駆動開発を、実務で使えるところまで
トレンドを追うだけで終わらせないための実践プログラムがWARPです。元大手DX・データ戦略の専門家が、現場で動かすところまで伴走します。
なぜ今Remotionが注目されるのか？ グローバルでの衝撃的な成功事例
Remotionが単なる「面白いおもちゃ」ではないことは、ビジネスの世界で巻き起こっている熱狂を見れば明らかです。そのポテンシャルは、特に2025年後半から2026年にかけて、Remotionを心臓部に据えたスタートアップが、まるでロケットのように急成長を遂げる事例によって証明されました。
これらの企業は、Remotionのスケーラビリティと自動化能力を最大限に活用し、これまで手作業では不可能だった規模の動画コンテンツ生成を実現しています。以下は、その中でも特に注目すべき成功事例をまとめたものです。
| 企業名 | 達成内容 | 期間 | 特徴 |
|---|---|---|---|
| Submagic | $1M ARR | 3ヶ月 | AIを活用し、ショート動画に自動でキャプション、BGM、絵文字を追加するツール [2] |
| AIVideo.com | $1M Revenue | 1年未満 | テキストプロンプトから長尺の解説動画などを生成するプラットフォーム [3] |
| Revid.ai | $1M ARR | 15ヶ月 | ショートフォームの動画広告制作に特化し、高速なA/Bテストを実現 [2] |
| Icon | $5M ARR | 30日 | Remotionで生成したバイラル動画がSNSで爆発的に拡散し、急成長 [2] |
| Crayo | 月商$500k超 | - | インフルエンサーと連携し、パーソナライズドされたPR動画を大量生成 [2] |
これらの事例に共通しているのは、**「動画制作のボトルネックを技術で解消し、新たなビジネスモデルを構築した」**という点です。例えばSubmagicは、SNSでエンゲージメントを高めるために不可欠な動画の装飾作業をAIとRemotionで完全に自動化し、コンテンツクリエイターから絶大な支持を得ました。また、Revid.aiは、広告クリエイティブの制作とテストのサイクルを劇的に短縮することで、クライアントの広告効果を最大化しています。
BtoCの領域でも、Remotionは大きな力を発揮します。その代表例が、GitHubが毎年開発者向けに行う「GitHub Unwrapped」です [4]。これは、各開発者の1年間の活動データ（コミット数、プルリクエスト数など）を基に、一人ひとり異なるパーソナライズド動画を生成するというものです。Remotionを使えば、テンプレートとなる動画コンポーネントを一つ用意するだけで、API経由で取得した数百万人のユーザーデータに基づき、それぞれにユニークな動画を瞬時に生成できます。このような大規模なパーソナライゼーションは、ユーザーに特別な体験を提供し、エンゲージメントを飛躍的に高める効果があります。
これらの目覚ましい成功事例は、Remotionがもはや一部の開発者のためのニッチなツールではないことを明確に示しています。それはマーケティング、広告、Eコマースといったあらゆるビジネス領域で、成長を加速させる強力なエンジンとして機能し始めているのです。
Claude Codeとの融合：Remotion Agent Skillsが拓く新次元
Remotionの真価は、そのプログラム的な柔軟性がAIと融合した時に、爆発的に解放されます。特に、Anthropic社が開発した驚異的なコーディングエージェント「Claude Code」との連携は、動画制作の常識を根底から覆しました。もはや、私たちはただ黙々とコードを書くのではありません。AIという名の創造的パートナーと「対話しながら」動画を創り上げていく、そんな新しい次元に足を踏み入れたのです。
この連携の中核をなすのが、**「Remotion Agent Skills」**という概念です [5]。これは、Remotionの専門知識やベストプラクティスを体系的にまとめた一連のインストラクションセット（指示書群）です。開発者は、以下の簡単なコマンドを実行するだけで、このスキルセットを自身の開発環境に導入できます。
npx skills add remotion-dev/skills
このコマンドを実行すると、AIエージェント（Claude Code）が参照できる形で、Remotionの膨大な知識ベースがプロジェクト内に組み込まれます。これは、まるでAIにRemotionの「公式チートシート」や「専門家向けマニュアル」を渡すようなものです。これにより、AIはRemotionのAPIやコンポーネントの正しい使い方、効率的なアニメーションの実装方法、よくあるデザインパターンなどを深く理解し、より的確で質の高いコードを生成できるようになるのです。
ユーザーからの「スキル図も紹介してほしい」というご要望にお応えし、Remotion Agent Skillsに含まれる主要なスキル（ルールファイル）を以下に一覧化します。これを見れば、AIとの連携によってどれほど多彩な動画表現が可能になるか、その一端をご理解いただけるでしょう。
Remotion Agent Skills 主要スキル一覧
- 基本・構造系
compositions.md: 動画の基本単位であるコンポジションの定義sequencing.md: 複数のアニメーションを連続再生させるパターンanimations.md:interpolateやspringを使った基本アニメーションtiming.md: イージングカーブなど、動きの緩急を制御transitions.md: シーン間の切り替え効果
- アセット・メディア系
assets.md: 画像、動画、音声などの素材の読み込みaudio.md: BGMや効果音の制御（音量、ピッチ、トリミング）images.md,videos.md: 動画内での画像やビデオの表示fonts.md: Google Fontsやカスタムフォントの利用
- 表現・エフェクト系
3d.md: Three.jsを連携させた3Dオブジェクトの表示とアニメーションcharts.md: 棒グラフ、円グラフ、折れ線グラフなどのデータビジュアライゼーションmaps.md: Mapboxと連携した地図の表示とアニメーションaudio-visualization.md: 音声データに基づいた波形やスペクトラムの視覚化text-animations.md: タイポグラフィやテキストアニメーションの高度なパターンvoiceover.md: ElevenLabs TTSを利用したAIナレーションの追加
- ユーティリティ・その他
tailwind.md: TailwindCSSを使った効率的なスタイリングparameters.md: Zodスキーマを使い、動画をパラメータ化して外部から制御ffmpeg.md: FFmpegを利用した高度な動画処理
この「スキル図」が示す通り、Agent SkillsはRemotionの能力を隅々まで引き出すための知識の宝庫です。これらを習得したAIに対し、私たちはまるで優秀なアシスタントに頼むかのように、「Mapboxで東京から大阪へのルートを線で描き、その上を飛行機が飛ぶアニメーションを作って」と自然言語で指示するだけ。すると、これまで何時間もかかっていた複雑な動画が、目の前で魔法のように組み上がっていくのです。これは、まさに専門家とペアプログラミングをするような、刺激的で新しい開発体験と言えるでしょう。
プロンプトエンジニアリング：AIに動画を作らせるための「対話術」
Remotion Agent Skillsによって専門知識を得たClaude Codeは非常に強力ですが、その能力を最大限に引き出すためには、私たち人間側に「AIとの対話術」、すなわちプロンプトエンジニアリングのスキルが求められます。
Remotionの創設者であるJonny Burger氏が公開したClaude Codeとの実際の開発セッションを見てみると、その対話の様子がよく分かります [6]。彼は、まるで人間のアシスタントに指示を出すかのように、自然言語で段階的にプロンプトを与えていきます。
最初のプロンプト: 「we are creating a remotion animation for a new command "npx skills add remotion-dev/remotion". first start out by making a new composition, 1280x1000px of a macos terminal window-like console that has an empty prompt in it. light theme」 (訳：新しいコマンドのためのRemotionアニメーションを作っています。まず、空のプロンプトを持つmacOSのターミナル風コンソールの新しいコンポジションを1280x1000pxで、ライトテーマで作成してください。)
この指示を受け、Claude Codeは即座にコードベースを分析し、MacTerminal.tsxという新しいReactコンポーネントを生成します。そしてJonny氏は、Remotion Studioでプレビューしながら、次のようにフィードバックを与えます。
フィードバックのプロンプト: 「okay, nice. remove the background and the font size needs to be a lot bigger.」 (訳：OK、いいね。背景を削除して、フォントサイズをもっと大きくしてください。)
このように、具体的な指示とフィードバックを繰り返すことで、対話的に動画を洗練させていくのが、RemotionとAIによる新しい動画制作のワークフローです。このプロセスを成功させるためには、いくつかの重要なベストプラクティスが存在します [7]。
プロンプトのベストプラクティス
具体的に指示する: 曖昧な表現は避け、具体的な数値や名称を使って指示を出します。
- 悪い例: 「クールなイントロを作って」
- 良い例: 「6秒間のイントロを作成。テキスト'STARTUP'を太字の白いMontserratフォントで表示し、フレーム0から45にかけて不透明度0から1へ、スケール0.5から1.0へ
spring物理演算で変化させる。背景はダークネイビー（#0f172a）で。」
Remotionの専門用語を使う: AIはAgent Skillsによって専門用語を理解しています。これらを積極的に使うことで、意図がより正確に伝わります。
- 秒数ではなくフレーム数でタイミングを指定する。
linear（直線的な変化）だけでなく、spring（バネ）やease（緩急）といったアニメーションの種類を明記する。AbsoluteFill（親要素いっぱいに広げるレイアウト）やSequence（連続再生）といったコンポーネント名を直接指示する。
段階的に反復する（Iterate Incrementally）: 一度に完璧なものを求めず、シンプルな土台から始めて、プレビューで確認しながら要素を一つずつ追加・修正していくアプローチが有効です。
既存のパターンを参照する: ゼロから説明するのが難しい場合は、一般的なデザインパターンや既存の表現を引用するのも良い方法です。
- 「ニュース放送で見るような、画面下部のテロップ（lower-third）を追加して」
- 「スムーズなワイプのようなトランジションを作成して」
これらの対話術を身につけることで、AIは単なるコード生成ツールから、創造的なパートナーへと変わります。さらにインスピレーションを得たい場合は、Remotion公式サイトのPrompt Galleryを覗いてみることをお勧めします [8]。ここには、世界中の開発者から投稿された優れたプロンプトと、それによって生成された動画の事例が多数掲載されており、「3Dランドマーク付きの旅行ルートマップ」のような複雑なアニメーションも、驚くほど短いプロンプトで実現されていることが分かります。これらは、あなたの次のプロジェクトの素晴らしい出発点となるでしょう。
未来展望とまとめ
RemotionとClaude Codeの融合がもたらすのは、単なる作業の効率化ではありません。それは、コンテンツ制作という行為そのものの「再定義」です。これまで一部の専門家が多くの時間を費やして行ってきたビデオ制作が、アイデアと対話能力さえあれば、誰もが高品質な映像表現に挑戦できる「民主化」の時代。その扉は、もう開かれています。
今後、この技術はさらに多様な分野へと応用が広がっていくでしょう。例えば、以下のような活用が考えられます。
- 超パーソナライズドマーケティング: 顧客の購買履歴や行動データに基づき、一人ひとりに最適化された製品紹介動画やメッセージビデオをリアルタイムに生成し、配信する。
- インタラクティブなデータビジュアライゼーション: 複雑なデータセットやリアルタイムの市場動向を、視聴者が操作できるインタラクティブなアニメーショングラフとして提示する。
- 自動化された教育コンテンツ: 最新のニュースや研究論文の内容を基に、解説動画や要約アニメーションを自動で生成し、学習者に提供する。
この記事を読んで、RemotionとAIによる動画制作の未来にワクワクした方は、ぜひご自身でその第一歩を踏み出してみてください。以下のコマンド一つで、すぐにでもプロジェクトを開始できます。
npx create-video@latest
公式ドキュメントはAIエージェントが読みやすいように最適化されており [9]、学習プロセスも非常にスムーズです。
私たちTIMEWELLは、常にテクノロジーの最前線を走り、それがビジネスや社会にどのような価値をもたらすかを追求し続けています。RemotionとAIが切り拓くこの新しいフロンティアは、コミュニケーションの質を劇的に高め、これまで想像すらしなかった新しいビジネスチャンスを次々と生み出すと確信しています。コードとAIが織りなす、映像表現のまばゆい未来。あなたも、この変革の目撃者になりませんか？
参考文献
[1] Remotion. (2026). Remotion - Make videos programmatically in React. https://www.remotion.dev
[2] Remotion. (2026). Success Stories. https://www.remotion.dev/success-stories
[3] AImonks. (2026, January 28). Claude Code + Remotion: The 2026 Developer Stack That Turned Video Production into a Git Commit. Medium. https://medium.com/aimonks/claude-code-remotion-the-2026-developer-stack-that-turned-video-production-into-a-git-commit-5ab44422b2d7
[4] GitHub. (2023, December 12). A look back at your 2023 on GitHub. The GitHub Blog. https://github.blog/2023-12-12-a-look-back-at-your-2023-on-github/
[5] Remotion. (2026). Agent Skills. https://www.remotion.dev/docs/ai/skills
[6] JonnyBurger. (2026, January 20). Claude Code Session. GitHub Gist. https://gist.github.com/JonnyBurger/5b801182176f1b76447901fbeb5a84ac
[7] Less_Ad5795. (2026, January). Complete Guide: How to Setup Remotion Agent Skills with Claude Code (AI Video Generation Tutorial 2026). Reddit. https://www.reddit.com/r/MotionDesign/comments/1qkqxwm/complete_guide_how_to_setup_remotion_agent_skills/
[8] Remotion. (2026). Prompt Gallery. https://www.remotion.dev/prompts
[9] Remotion. (2026). Building with Remotion and AI. https://www.remotion.dev/docs/ai/
