Remotion 動画生成ワークフロー
記事・商材から動画プロンプトを自動生成 → Claude Codeでコード出力 → YouTube → note誘導
API料金ゼロ1本あたり30〜60分Claude Maxプラン活用
記事 & 商材を選択(プロンプト自動反映)
記事を選ぶとタイトル・キーワード・本文がプロンプトに自動反映されます
動画の長さを選択
プリセットを選ぶか、カスタム秒数を入力。プロンプトに自動反映
秒
フレーム計算結果
120
秒
3600
フレーム (30fps)
2:00
分:秒
推奨シーン配分
オープニング15秒 → 問題提起30秒 → 解決策45秒 → メリット20秒 → CTA10秒
用途: YouTube解説 / note誘導メイン
Step 3: AIで動画コードを生成
上で選択した記事・商材・秒数を基に、Remotionの完全なVideo.tsxコードをAIが生成します
記事または商材を上で選択してください
必要環境・ツール
Node.js
v18以上
無料
Remotion
npx create-video@latest
無料
Claude Max
claude.ai Maxプラン
月$100〜$200
Claude Code
VS Code拡張
Maxプラン内無料
FFmpeg
Remotion同梱 or 別途
無料
生成フロー
- 記事を選ぶとタイトル・キーワード・本文からプロンプトが自動生成される
- 商材情報(ターゲット・特徴)もプロンプトに反映
- 記事なしでも商材だけで動画プロンプトを生成可能
Claude Code用プロンプト(コピペ用)
記事・商材・秒数が自動反映されます
標準動画生成(メイン)
テーマ・秒数・シーン構成を指定してRemotionコードを一発生成
RemotionでReactベースのモーショングラフィックス動画を作成してください。
動画テーマ: (テーマを入力)
希望動画長さ: 120秒(正確に120秒になるよう調整)
フレームレート: 30fps(durationInFrames = 3600フレーム)
スタイル: モダンなフラットデザイン、青・緑基調、クリーンでプロフェッショナル
(商材または記事を上で選択してください)
必須シーン構成(合計120秒):
1. オープニング (0〜15秒): タイトル表示 + 背景グラデーション
2. 問題提起 (15〜45秒): 課題のイラストアニメーション
3. 解決策紹介 (45〜90秒): フロー図(矢印アニメーション)
4. メリット強調 (90〜{秒数-10}秒): 3つのメリットをポップアップ
5. CTA ({秒数-10}〜120秒): 「詳細はnoteで!」
Remotionベストプラクティスに従い、完全なsrc/Video.tsxコードを生成してください。30秒ショート版
YouTube Shorts / TikTok向けの縦型30秒動画
RemotionでYouTube Shorts向け30秒縦型動画を作成してください。 動画テーマ: (テーマを入力) 長さ: 30秒(900フレーム、30fps) 解像度: 1080x1920(縦型9:16) (商材または記事を上で選択してください) シーン構成(合計30秒): 1. フック (0〜5秒): 衝撃的な数字やキャッチコピー 2. 問題提起 (5〜12秒): 課題を端的にアニメーション 3. 解決策 (12〜22秒): ポイント2〜3個を順番にフェードイン 4. CTA (22〜30秒): 「続きはnoteで」 完全なsrc/Video.tsxコードを生成してください。
シーン修正・調整
生成済みコードの特定シーンを修正
現在のVideo.tsxコードの以下のシーンを修正してください: 修正対象: [シーン名を記入] 修正内容: - アニメーションをもっと滑らかに - テキストのフォントサイズを大きく - 背景色を変更 - トランジション時間を延長 修正後のコードのみ出力してください。
サムネイル静止画
動画の特定フレームをサムネイル用に最適化
Remotionで1枚のサムネイル画像用コンポーネントを作成してください。 テーマ: (テーマを入力) 解像度: 1280x720(YouTube推奨) (商材または記事を上で選択してください) 要素: メインキャッチコピー、サブテキスト、アイコン要素、背景グラデーション durationInFrames: 1(静止画) 完全なsrc/Thumbnail.tsxコードを生成してください。
A/Bテスト版生成
同じテーマでスタイル違いの2パターンを生成
同じテーマで2パターンのRemotionコードを生成してください。 動画テーマ: (テーマを入力) 長さ: 120秒、30fps (商材または記事を上で選択してください) パターンA: フラットデザイン(青・白基調、クリーン、ビジネス向け) パターンB: ネオンスタイル(ダークBG + グリーン/パープルグロー、テック感) それぞれ別ファイルとして出力してください。
動画プロジェクト
動画プロジェクトはありません
記事や商材を選択してプロジェクトを作成すると、進捗を管理できます
注意点・Tips
- 1.長さの精度: RemotionはdurationInFramesを厳密に守るので「正確にXX秒」と指定すればピッタリ
- 2.まず短尺で: 5分以上はレンダリング時間が長いので、最初は1〜3分でテスト推奨
- 3.ショート版: 同じプロンプトで「30秒ショート版」を別途生成してYouTube Shorts投稿
- 4.Maxプラン活用: 長さ変更で複数イテレーションしても制限に引っかかりにくい
- 5.品質向上: シーンを細かく分けて複数回生成するとクオリティが上がる
YouTubeアップロード チェックリスト
動画設定
- タイトルにKW + 秒数表記
- 概要欄1行目にnote記事URL
- 「無料相談DMはnoteから」CTA記載
- タグ: 地域名 + サービス名 + 業種
バリエーション展開
- 本編(120秒版)→ YouTube通常
- ショート(30秒版)→ YouTube Shorts
- サムネイル → Remotionで静止画 or Canva
- A/Bテスト → スタイル違いで2パターン