Codexがあとは無料で簡単にチュートリアル動画が作れる
Remotionとは
Create real MP4 videos with React.
Use coding agents, build apps and render in bulk.
Reactで動画をプログラム的に作るためのフレームワークです。
公式には「Reactで本物のMP4動画を作る」「動画をコードで生成する」ためのツールとして説明されています。
Reactは、JavaScriptでUIを作るためのライブラリですね。
つまりJavaScriptを書けば動画になる。精細な動画というよりも動く電子紙芝居という感じですが。
でも操作説明やシステムの概要紹介などであれば十分かと思います。
Codex+Remotionで動画を作ろう
と言ってもどう書くんだとなかなか難しそうですね。でもそこは生成AIです。
2026-01にClaud code用のプラグインとSKILLSが、
2026-03にCodex用のプラグインとSKILLSが、出ています。
そう、プロンプトで気軽に解説動画を作れるということ。
Claude Code + Remotionは早く出たこともあり、記事がまあまあありますがCodex + Remotionはゼロではないもの少ないので書いてみます。
Codexアプリのチュートリアル動画作成例
まずは簡単にCodexアプリ自体のチュートリアル例。
- Codexアプリ GPT-5.5 非常に高い を使用
- Codexアプリ - プラグイン - "Remotion"で検索 - Codexに追加
- プロンプト実行
@Remotion Codexアプリの使い方のチュートリアル動画を作成して- これだけ！
- 他のアプリなどの動画を作る場合はその情報や画面例などを与えるとリアルに作れるらしいですが動作確認なのでまずはCodex自身を
- 修正のプロンプト
- 一通りできているのだがプラグイン指定のところで「@」が抜けているところがあり、その旨修正指摘
音声もうまくつきましたありがとう。 改めて動画を見ると00:47あたりでプラグイン呼び出しの説明の時 画面例で Documents Spredsheets とこの2つだけ@アットマークがついてないのですが必要ですよね - 解説音声付与
- デフォルトは動画と字幕のみ。音声をつけたいので、
素晴らしい。これに音声をつけるにはどんな方法がある？- 音声エンジンの解説などがされたので
- TTS(Text-to-Speech)つまり文字を音声にする技術
無料で使いやすいTTSは？-
- VOICEVOX, 2. COEIROINK, 3. macOS標準の say, 4. ElevenLabsの無料枠などの紹介があり、一番良さそうなVICEVOXで指示
- インストールなどを自分でするのも何もないすごい時代になりましたね
VOICEVOX 満別花丸 をダウンロードして先ほどの動画に音声をつけて
完成した動画
1分16秒のCodexアプリ使用チュートリアル動画。
- 画面遷移のところでちょっとレイアウトが崩れたり
- 日本語発音がちょっと微妙なところ
- リアルなCodexアプリ画面ではない
などなど改善点はまだありますが、動画作成のハードルがかなり下がったのではないでしょうか。