LINE Special Content
Claude Code × Remotion
動画自動生成 完全ガイド
台本テキストからAIがプロ品質の動画を全自動生成。環境構築から実践チュートリアルまで完全網羅
台本テキストからAIがプロ品質の動画を全自動生成。環境構築から実践チュートリアルまで完全網羅
つい最近まで、動画を1本作るには膨大な工程が必要でした。
ターゲット設定、シナリオ作成、絵コンテ作成で1-2日
撮影機材の準備、ロケ、素材の購入で0.5-1日
Premiere Pro等でカット編集、テロップ配置、効果音挿入で1-2日
クライアント確認、修正2-3回、最終書き出しで0.5-1日
合計 3-5日。外注なら 10-30万円。修正のたびに追加費用が発生し、やり取りだけで疲弊する。これが「普通」でした。
Claude Code（AIコーディングアシスタント）と Remotion（コードで動画を作るフレームワーク）を組み合わせると、このフローが劇的に変わります。
合計 30分-1時間。動画制作ソフトの追加費用は 0円（必要なのはClaude Codeのサブスクリプション月額$20〜のみ）。修正も「テキストで指示するだけ」。
このガイドの約束: プログラミング経験ゼロでも、このガイド通りに進めれば動画が作れます。必要なのは「何を伝えたいか」というメッセージだけです。コードはAIが全て書きます。
30-60秒の新サービス告知、ティザー動画。インパクト重視のテロップ演出でタイムラインの目を止める
縦型・横型のショートコンテンツ。解説系、比較系、How-to系。量産に最適
VSL型セールス動画、Meta広告用クリエイティブ。A/Bテスト用に複数パターン高速生成
Claude Code × Remotion での動画制作は、たった4ステップです。
伝えたいメッセージをテキストで用意します。シーンごとに「何秒」「何を表示」「どんな演出」を書くだけ。テンプレートはSection 13で提供します。
「この台本でRemotionの動画を作って」と伝えるだけ。AIが台本を解析し、TypeScriptのコンポーネントを自動生成します。
ブラウザでリアルタイムプレビュー。テロップの大きさ、タイミング、色味を確認し、気になる点はAIに修正指示を出します。
コマンド1行で高品質動画を出力。30秒動画なら1-3分でレンダリング完了です。
Claude Codeは、Anthropic（AI企業）が提供する公式のAIコーディングアシスタントです。ターミナル（コマンドライン）から直接AIと対話し、コードの生成・修正・実行を行えます。
Webブラウザ版のClaude（claude.ai）とは異なり、あなたのPC上のファイルを直接読み書きできるのが最大の特徴。だからこそ、Remotionのコードを自動生成してプロジェクトに書き込めるのです。
claude.ai でアカウントを登録します。Claude CodeにはPro以上のプラン（月額$20〜）が必要です。
お使いのOSに合わせて、以下のコマンドをターミナルで実行します。
curl -fsSL https://claude.ai/install.sh | bashirm https://claude.ai/install.ps1 | iexcurl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmdWindowsの場合、Git for Windowsが必須です。Gitが入っていないとClaude Codeが動作しません。先に git-scm.com からインストールしてください。
インストール確認: インストール後、ターミナルで claude doctor を実行すると、バージョンとインストール状態を確認できます。ネイティブインストーラーは自動更新されるため、常に最新版が使えます。
詳しいセットアップ手順は公式ドキュメントをご覧ください。
ターミナルで claude と入力してEnter。ブラウザが開くので、Anthropicアカウントでログインして認証を完了させます。
ターミナルに戻り「Hello」と入力。AIから応答が返ってくれば成功です。
注意: Claude CodeはPro以上のプランが必要です（月額$20〜）。無料プランでは利用できません。Maxプラン（月額$100〜）ならより高速に動作します。
Remotionは内部でNode.js（JavaScriptの実行環境）を使います。動画のプレビュー表示やMP4書き出しに必要です。
nodejs.org を開き、LTS版（推奨版）のダウンロードボタンをクリックします。
ダウンロードしたファイルを開き、画面の指示に従って進めます。設定は全てデフォルトのままでOKです。
ターミナルを開き直して、以下のコマンドで確認します。v20以上が必要です。
node --version
# v20.x.x 以上が表示されればOK
npm --version
# npmも同時にインストールされていますWindows / Mac どちらも同じ手順です。インストーラーがOSを自動判定してくれます。
公式サイトから.msiインストーラーをダウンロード。ダブルクリックで実行し「Next」を押していくだけ。パスも自動設定されます。
公式サイトの.pkgインストーラーが最も簡単。Homebrewユーザーなら brew install node でもOK。
いよいよRemotionプロジェクトを作成します。以下の4つのコマンドを順番に実行してください。
npx create-video@latest my-first-videocd my-first-videonpm install @remotion/google-fontsnpm run devnpx create-video@latest my-first-video を実行。自動でテンプレートがダウンロードされ、必要なファイルが生成されます。
cd my-first-video で作成されたフォルダに移動します。
npm install @remotion/google-fonts を実行。日本語テロップを表示するために必要なパッケージです。Noto Sans JPなどが使えるようになります。
npm run dev を実行するとブラウザが自動で開き、http://localhost:3000 に動画プレビューが表示されます。
ブラウザに動画プレビューが表示されたら、環境構築は完了です。再生ボタンを押してサンプル動画が動くことを確認してください。
ここまでの所要時間は約10分です。インターネット速度にもよりますが、ほとんどの方が10-15分で完了します。次のセクションからは実際の動画制作に入ります。
Claude Codeが生成したコードを確認するためのエディタ（テキスト編集ツール）を用意しましょう。コードを直接編集する必要はありませんが、AIが何を書いたのかを確認できると安心です。
AI統合エディタ。Claude Codeとの相性が抜群で、コード補完やAI提案も使える。cursor.comから無料ダウンロード。
Microsoft製の定番エディタ。拡張機能が豊富で、Web開発者の間で最も利用されている。code.visualstudio.comから無料ダウンロード。
どちらでもOKです。Claude Codeはターミナルから直接使うので、エディタは主にコードの確認用です。好きな方を選んでください。既にお使いのエディタがあればそれで問題ありません。
Remotionは「Reactで動画を作る」オープンソースフレームワークです。通常の動画編集ソフトではマウスを使ってタイムラインを操作しますが、Remotionはコード（プログラム）で動画の全要素を定義します。
マウスでタイムライン操作。テロップは1つずつ手動配置。フォントサイズやアニメーションもGUIで設定。修正は全て手作業。
コードで動画を定義。テロップもアニメーションもプログラムで指定。修正はコードを書き換えるだけ。つまり、AIに書かせることができる。
ここが核心です。「コードで定義する = AIに書かせることができる」というのがRemotionを選ぶ最大のメリット。Premiere Proの操作をAIに代行させるのは現時点では困難ですが、コードの生成ならAIの最も得意な領域です。
Section 06で作成したプロジェクトの中身を見てみましょう。Claude Codeが主に編集するのは src/videos/ 配下のファイルです。
src/ — コードフォルダ
Root.tsx: 動画の登録簿。「どんな動画があるか」「サイズ」「秒数」を定義。
constants.ts: FPS・サイズ等の定数。
videos/MyVideo.tsx: 動画本体。テロップ・アニメーション・背景・SEの全てがここに。Claude Codeが最も多く編集するファイル。
public/ — 素材フォルダ
BGM・効果音・背景画像などの素材ファイルを置く場所。
audio/: BGM・SEファイル
images/: 背景画像等
コードからは staticFile("audio/BGM.mp3") のように参照。
package.json = 依存パッケージ管理ファイル。Remotionやフォントなど必要なライブラリが記録されています。
動画は「フレーム」の連続で構成されています。パラパラ漫画と同じ原理です。Remotionでは 30fps（1秒間に30コマ）が標準です。
フレーム変換表:
毎回掛け算するのは面倒なので、s() というヘルパー関数を使います。「秒」で指定すれば自動的にフレーム数に変換してくれる便利な関数です。
export const FPS = 30;
export const s = (seconds: number) => Math.round(seconds * FPS);s(1.5) // → 45フレーム
s(30) // → 900フレーム
s(0.5) // → 15フレーム台本を書くときは「秒」で考え、コード上では s() で変換する。この流れを覚えておけば、フレーム計算で混乱することはありません。
重要: 小数秒は必ず Math.round(s(x)) で整数化してください。浮動小数点の丸め誤差がタイミングズレの最大原因です。上記の s() 関数にはすでにMath.roundが含まれています。
Composition（コンポジション）は動画の「設計図」です。1つのCompositionが1つの動画に対応します。サイズ、長さ、中身の3つを定義します。
<Composition
id="MyVideo" // 動画のID（レンダリング時に指定）
component={MyVideoComponent} // 動画本体のコンポーネント
durationInFrames={s(30)} // 動画の長さ（30秒 = 900フレーム）
fps={30} // フレームレート
width={1280} // 横幅（ピクセル）
height={720} // 高さ（ピクセル）
/>流れをまとめると:
Compositionを定義して動画を登録。IDを付ける（例: "MyVideo"）。
npm run devで起動後、左サイドバーからCompositionを選んで再生。
npx remotion render MyVideo out/video.mp4 のように指定して書き出し。
1つのプロジェクトに複数のCompositionを登録できるので、バリエーション違いの動画を同時に管理することも可能です。
ここからが本番です。Claude Codeを使って実際に動画を作る4つのフェーズを詳しく解説します。
シーン構成、テロップテキスト、演出メモを書きます。テンプレートはSection 13で提供。この工程が動画の質を最も左右します。AIはあくまで「台本通りに作る」ので、台本の良し悪しが全てです。
台本を渡して「Remotionの動画にして」と指示します。AIが台本を解析し、シーン分割、コンポーネント選択、アニメーション割り当て、SE配置まで自動で行います。
localhost:3000でブラウザプレビュー。通し再生して、テロップの大きさ、タイミング、演出の過不足を確認します。修正点があれば日本語でAIに指示するだけ。
npx remotion render MyVideo out/video.mp4 で書き出し。30秒の動画なら1-3分で完了。そのままSNSにアップロードできます。
Phase 2-3がAIの真骨頂。Claude Codeがコンポーネント設計、アニメーション選択、SE配置まで自動で行います。あなたがやるのは「確認して修正指示を出す」だけです。ディレクター的な立場で動画を完成させます。
台本のクオリティが動画のクオリティを決めます。以下のテンプレートに沿って書けば、AIが最適なコードを生成してくれます。
Scene 01（0-2秒）- フック
テロップ: 「動画制作に10万円払ってませんか？」
背景: 暗い/シリアス系
演出: ドーンと出現 + 画面フラッシュScene 02（2-4秒）- 問題提起
テロップ: 「外注費・編集時間・修正地獄…」
背景: 同じ
演出: フェードインScene 03（4-7秒）- 解決策
テロップ: 「AIが30分で動画を作る時代」
背景: 宇宙系に切り替え
演出: スライドインで登場Scene 04（7-10秒）- 具体的メリット
テロップ: 「コスト0円」→「30分で完成」→「修正も一瞬」
背景: 同じ
演出: 3つのテキストが順次出現Scene 05（10-13秒）- CTA
テロップ: 「今すぐ始めよう」
背景: 地球系（明るめ）
演出: ドーンと出現 + フラッシュポイントは4要素を書くこと:
Claude Codeに的確な指示を出すことが、高品質な動画を作る最大のコツです。以下の3つのテンプレートを場面に応じて使い分けてください。
Remotionで30秒のX投稿用ローンチ動画を作ってください。
- 30fps, 1280x720
- フォント: Noto Sans JP
- テロップスタイル: YouTube風（黄色グラデ+黒縁取り+白グロー）
- 台本:
[ここに台本を貼り付け]Scene 03の数字テロップが小さいので、fontSize 143にしてください。
スマホ前提なので横幅8割まで大きく使ってOKです。Scene 05のテキスト登場をScalePopに変えてください。
Flash at={s(3)}も追加してください。
SEはインパクト系をScene先頭に入れてください。修正指示のコツ: 抽象的な「かっこよくして」ではなく、具体的に「フォントサイズを120に」「背景を宇宙系に」「アニメーションをScalePopに」と指定するのがポイントです。AIは具体的な指示ほど正確に実行します。
慣れてきたら、複数の修正をまとめて1回の指示で出しましょう。「Scene 03のfontSizeを120に、Scene 05の背景をDarkBgに、Scene 07にFlashを追加」のように。往復回数が減り、効率が上がります。
Claude Codeに「サーバー起動して」と伝えるだけでRemotionのStudio画面がブラウザに開きます。手動で実行する場合は npm run dev でも起動できます。左サイドバーから対象のCompositionを選択。
再生ボタン（またはスペースキー）で最初から最後まで再生。全体の流れ、テンポ、雰囲気を確認します。
気になる箇所で一時停止。画面下部に表示されるフレーム番号をメモしておきます。30で割れば秒数がわかります（例: フレーム150 = 5秒目）。
Claude Codeに「Scene XXの○○を修正して」と具体的に指示します。
「Scene 03のfontSizeを120にして」「背景をDarkBgに変えて」「Scene 05にFlash追加して」「CTAシーンを3秒から5秒に伸ばして」
「もっとかっこよくして」「全体的に雰囲気を変えて」「なんか違う」「もうちょっといい感じに」
2回修正しても直らない場合は、アプローチ自体を変えましょう。「このシーンを一から作り直して」と指示する方が、細かい修正を重ねるより圧倒的に速いです。AIは「修正」より「新規生成」の方が得意です。
AI生成の動画は、最初から完璧にはなりません。でも「出力→確認→指示」を繰り返すだけで、着実にクオリティは上がります。
テロップの出現順・シーンの長さ・全体のテンポだけをチェック。色やフォントサイズは一旦無視。「全体の流れが台本通りか？」だけを判断します。ここで構成のズレを直しておくと後が楽です。
テロップのサイズ・色・アニメーション・SE（効果音）のタイミングを調整。「Scene 03のfontSizeを100→140に」「Scene 05の直後にFlashを追加」のように、具体的な数値で指示します。
通しで再生して「惜しいポイント」を潰す。余白が窮屈なシーン、テロップが重なる箇所、SEのタイミングが0.5秒ズレている箇所など。ここでの微調整が「素人っぽさ」と「プロっぽさ」を分けます。
「3ラウンド以内に仕上げる」と決めておくのがコツです。4回目以降の修正は改善幅が小さく、時間対効果が急激に落ちます。80点まで来たら「書き出して次の動画に進む」方が、総合的な生産性は圧倒的に高くなります。完璧主義はAI動画制作の最大の敵です。
Remotion動画で使用するテロップ（テキスト表示）コンポーネントの一覧です。Claude Codeに「GoldTextで」「SubTelopTextで」と指定すれば、そのスタイルが適用されます。
メインタイトル・数字・強調テキスト向け。黄色グラデーション + 8層レンダリングで豪華な見た目。fontSize目安: 80-143。動画の「見せ場」に使う。
サブテキスト・補足・ナレーション向け。ゴールド系 + 斜体。fontSize目安: 48-68。GoldTextの下に配置して補足情報を伝える。
警告・ネガティブ・衝撃テキスト向け。赤系で視聴者の目を強制的に引く。fontSize目安: 72-96。問題提起シーンに最適。
説明・コード表示・控えめなテキスト向け。シンプルな白文字。fontSize目安: 36-48。情報密度の高いシーンに使う。
迷ったらGoldText + SubTelopTextの組み合わせが鉄板。メインメッセージをGoldText、補足情報をSubTelopTextで配置すれば、視覚的な情報階層が自然にできます。
スマホ視聴前提のサイズ設計: メインテキストは横幅の80%を占める大きさが目安です。PC画面で「大きすぎる？」と感じるくらいが、スマホで見たときにちょうどいいサイズです。小さいテキストはスマホで読めません。
動画の雰囲気を決定づける背景コンポーネントの一覧です。シーンの内容に合わせて選択します。
汎用性最高の背景。タイトル、インパクトシーン、ステップ説明まで幅広く使える。迷ったらこれを選べば間違いない。
実績表示、データ紹介、スライドラッシュ向け。テキストが引き立つシンプルな暗い背景。情報を正確に伝えたいシーンに。
CTA、行動喚起、エンドカードに最適。明るく開放的な雰囲気で「次のアクション」へ導く。動画の締めに使うことが多い。
デジタル感、テック感の演出に。IT系サービスやAI関連の動画にマッチする。派手すぎるので使いすぎ注意。
GoldBg（ゴールド系）も用意されています。豪華感・特別感の演出に。タイトルカードや実績紹介で「すごさ」を伝えたいシーンに使います。
全背景にSlowDrift（ゆっくりズーム&パン）効果が自動適用されます。静止画ベースでも常に微妙な動きがあるので、視聴者を飽きさせません。この効果は自動なので指定不要です。
テロップの登場演出を決めるアニメーションコンポーネントです。6種類を用途に合わせて使い分けます。
ドーンと一瞬で出現。キーメッセージに最も多く使用される。Flashと組み合わせるのが鉄板パターン。インパクト重視のシーンに。
ふわっと登場。順次出現に最適。delayパラメータで時間差をつけて「1つ目→2つ目→3つ目」と順番に表示させる。
下からスライドして登場。見出しや強調テキスト向け。ScalePopほど派手ではないが、しっかり存在感を示す。
縮小状態から自然に現れる。締めのテキストやエンドカード向け。落ち着いた印象を与えたい場面に。
残像付きでブンッと飛び出す。デジタル感・煽り演出に最適。テック系やAI系のテーマで効果的。多用すると疲れるので要注意。
画面全体が白くフラッシュする演出。単体では使わず、ScalePopの直後に組み合わせて使う。インパクトを2倍にするアクセント。
初心者おすすめの組み合わせパターン: ScalePop + Flash（フック）→ FadeIn x 3（順次出現で情報提示）→ SlideIn（転換）→ ScalePop + Flash（CTA）。このパターンだけで大半の動画が作れます。まずはこのパターンで1本完成させてください。
効果音は動画のインパクトを大きく左右します。適切なSEが入っているだけで、同じテロップでも「素人っぽい動画」が「プロ品質の動画」に変わります。
鉄則: SEは画面の演出と1:1で対応させる。テロップが出るタイミング = SEが鳴るタイミング。これを守るだけで動画のクオリティが格段に上がります。
<Audio src={staticFile("audio/BGM.mp3")} volume={0.3} /><Sequence from={s(2)}>
<Audio src={staticFile("audio/impact.mp3")} volume={0.7} />
</Sequence><Sequence from={s(5)}>
<Audio src={staticFile("audio/whoosh.mp3")} volume={0.5} />
</Sequence>
<Sequence from={s(8)}>
<Audio src={staticFile("audio/impact.mp3")} volume={0.6} />
</Sequence>SE素材は無料のサウンドライブラリ（効果音ラボ、DOVA-SYNDROME等）からダウンロードし、public/audio/ フォルダに配置します。Claude Codeに「SEを追加して」と指示すれば、コード上の配置は自動でやってくれます。
理論はここまで。実際に手を動かして1本目の動画を完成させましょう。以下の手順通りに進めれば、30分以内に動画が完成します。
以下のサンプル台本をそのままコピーしてください。まずはサンプルで1本作り、感覚を掴んでから自分のコンテンツに応用します。
Scene 01（0-2秒）- フック
テロップ: 「まだ動画に10万円払ってる？」
演出: ドーン + フラッシュ
背景: 宇宙系Scene 02（2-4秒）- 問題
テロップ: 「外注費・修正地獄・納期遅れ」
演出: フェードイン
背景: ダーク系Scene 03（4-8秒）- 解決策
テロップ: 「AIが全自動で動画を作る時代」
演出: スライドイン
背景: 宇宙系Scene 04（8-12秒）- 方法
テロップ: 「テキスト入力だけ」→「30分で完成」→「コスト0円」
演出: 順次出現（3つのテキスト）
背景: 同じScene 05（12-15秒）- CTA
テロップ: 「今すぐ始めよう」
演出: ドーン + フラッシュ
背景: 地球系（明るめ）ターミナルで cd my-first-video した後、claude を実行してClaude Codeを起動します。
「この台本でRemotionのローンチ動画を作ってください。30fps、1280x720、Noto Sans JP使用。テロップはYouTube風（黄色グラデ+黒縁取り）で。」と入力し、続けて台本を貼り付けます。
Claude Codeが自動でTSXファイルを作成します。Root.tsxへの登録、コンポーネントの作成、アニメーションの設定まで全て自動です。ファイルの書き込み許可を求められたら「Yes」で進めます。
別のターミナルで npm run dev を実行。ブラウザで動画を再生し、テロップのサイズ、タイミング、演出を確認します。気になる点があればClaude Codeに修正指示を出します。
プレビューでOKなら、以下のコマンドで書き出します。
npx remotion render MyVideo out/launch.mp4これだけで動画が完成します。出力された out/launch.mp4 をダブルクリックして再生してみてください。慣れれば30分で1本、1日に何本でも作れるようになります。
撮影済みの動画ファイルに、プロモーション用テロップを自動で重ねる手法です。セミナー動画やインタビュー動画をSNS用にリパーパスするときに重宝します。
テロップを追加したいMP4ファイルを public/ フォルダに配置します。例: public/seminar.mp4
「public/seminar.mp4 の上にプロモーション用テロップを追加してください。以下のタイミングでテロップを表示:」と指示し、テロップ内容とタイミングを伝えます。
AIがシーンに合わせた最適なテロップスタイル、位置（上部/中央/下部）、アニメーションを自動で選択します。もちろん手動指定も可能です。
テロップの位置、タイミング、フォントサイズを確認。動画の内容と被らないよう位置を微調整します。
MP4で出力。元動画 + テロップが合成された新しい動画ファイルが生成されます。
活用例: セミナー動画の冒頭に「期間限定公開」のテロップを追加、インタビュー動画に話者名テロップを入れる、講座動画にポイントまとめテロップを重ねる。全てClaude Codeへの指示だけで完了します。
VSL（Video Sales Letter）は、商品やサービスを動画で販売するための構成テンプレートです。テキスト（テロップ）主体で構成するため、Remotionとの相性が抜群です。
視聴者の注意を引く衝撃的な一言。「まだ○○で消耗してるの？」「知らないと損する○○の真実」など。ScalePop + Flash で最大インパクト。
視聴者が抱えている痛み・悩みに共感する。「毎月の○○が苦しい」「○○しても結果が出ない」。RedImpactTextで痛みを可視化。
あなたのサービスが解決策であることを示す。「○○を使えば、たった△△で□□が実現」。背景を明るく切り替えて転換感を出す。
解決策がもたらす可能性の広がりを示す。「○○だけでなく△△にも応用可能」。FadeInで複数のメリットを順次表示。
今すぐ行動するべき理由を提示。限定性、緊急性、特典を強調。EarthBgの明るい背景で希望を示し、行動を促す。
このPART構成は広告動画にも応用できます。Remotionならパート単位でコンポーネントを分離できるので、Hook部分だけ差し替えてA/Bテストすることも容易です。「Hook A vs Hook B」で反応率を比較し、勝ちパターンを特定する運用が可能になります。
プレビューで確認が終わったら、いよいよMP4ファイルとして書き出します。Claude Codeに「動画を書き出して」と伝えるだけで自動実行されます。手動で実行する場合は以下のコマンドです。
npx remotion render MyVideo out/video.mp4npx remotion render XLaunchDemo2 out/launch_v2.mp4npx remotion render MyVideo out/video.mp4 --concurrency=1レンダリングは通常1-3分で完了します（30秒動画の場合）。PCのスペックによって前後しますが、最近のPCであれば問題なく処理できます。レンダリング中はターミナルに進捗バーが表示されます。
メモリ不足エラーが出る場合は --concurrency=1 を追加してください。デフォルトでは複数フレームを同時に処理しますが、メモリが足りない場合は1フレームずつ処理することで安定します。速度は落ちますが確実にレンダリングできます。
出力されたMP4ファイルは out/ フォルダに保存されます。ダブルクリックで再生して最終確認しましょう。
用途に合わせた最適な設定を選ぶことで、品質とファイルサイズのバランスを取ります。
SNS用途なら1280x720（720p）で十分です。4Kは不要。スマホ画面で見る分には720pと1080pの差はほぼわかりません。720pにすればレンダリング時間もファイルサイズも半分以下になります。
初心者がつまずきやすいポイントと、その対処法をまとめました。エラーに遭遇したらまずここを確認してください。
SequenceのfromやdurationInFramesが間違っている可能性が高い。s()ヘルパーで秒指定しているか、Math.roundで整数化しているか確認。
イタリック（斜体）文字が右側にはみ出すことがある。コンテナにpaddingRight: 20を追加して余白を確保する。
Flash要素が他の要素の下に隠れている。AbsoluteFillの最後（一番上のレイヤー）に配置すること。
position:absoluteとflexboxの混在が原因。1つのコンテナ内ではどちらかに統一する。Claude Codeに「レイアウトを整理して」と指示。
--concurrency=1 を追加して1フレームずつ処理する。それでもダメならNode.jsのメモリ上限を増やす: NODE_OPTIONS=--max-old-space-size=4096
不要なimport文の残存が多い。npx tsc --noEmit でエラー一覧を確認し、Claude Codeに「TypeScriptエラーを修正して」と指示。
同じエラーが2回出たら、修正を重ねるより「シーンを作り直して」と指示する方が速いです。AIは部分修正より全体の再生成の方が精度が高い傾向があります。「Scene 03を一から作り直して。要件は○○」と指示してください。
ここまでのワークフローを毎回手動で実行するのは効率的ではありません。Claude Codeの「スキル」機能を使えば、一連の工程を1つのコマンドに集約できます。
.claude/skills/create-video/SKILL.md というファイルを作成し、動画生成の手順・テンプレート・使用コンポーネント・レンダリング設定を記述します。
台本フォーマット、デフォルトの背景・テロップスタイル、レンダリング解像度、出力先などを事前に定義しておきます。毎回同じ指示を繰り返す必要がなくなります。
台本テキストを渡すだけで「プロジェクト設定→コード生成→プレビュー確認→修正→レンダリング」が全自動で実行されます。
スキル化すると、台本を渡すだけで全工程が自動実行されます。「/create-video」→ 台本貼り付け → Enter。これだけでMP4ファイルが出力される状態が実現します。1本あたりの制作時間が30分から10分に短縮されます。
スキル化に挑戦すると、ほぼ全員が同じ壁にぶつかります。事前に知っておけば回避できます。
「どんな動画ですか？」「テーマは？」と質問が続き、結局全部自分で決める羽目に。対策: SKILL.mdにデフォルト値を定義しておく。テーマだけ渡せば残りは自動判断させる設計にする。「指示が曖昧なら自分で判断して進め」と明記するのが鍵です。
長い動画を作ると、AIの記憶（コンテキストウィンドウ）が溢れて処理が破綻する。対策: 「台本作成」「コード生成」「レンダリング」をフェーズ分割し、各フェーズの出力をファイルに保存。次のフェーズはファイルを読むところから始める。AIの記憶に頼らない設計が安定稼働の秘訣です。
テロップのサイズがバラバラ、アニメーションが毎回違う、SEのタイミングがズレる。対策: スキルファイルに「使うコンポーネント」「フォントサイズの範囲」「アニメーションの組み合わせパターン」を具体的に定義する。選択肢を絞るほど、出力の品質は安定します。自由度を下げることが品質を上げるのです。
完璧な自動化を目指さないこと。最初は「台本→コード生成」だけを自動化し、プレビュー確認は手動で残す。うまく回り始めたら徐々に自動化範囲を広げる。一気にやろうとすると、どこで問題が起きているか分からなくなります。
Claude Code × Remotion のスキルを身につけたら、さまざまな場面で活用できます。
毎週のコンテンツを同じテンプレートで量産。ニュースレター動画版、週刊Tips動画など。テンプレートを一度作れば、テキストを差し替えるだけで新しい動画が完成します。
A/Bテスト用に複数パターンを高速生成。フック違い、CTA違い、背景違いのバリエーションを一度に作成。勝ちパターンを見つける速度が劇的に向上します。
動画制作サービスとして提供。制作コストがほぼゼロなので、価格競争力が圧倒的。テロップ動画、プロモーション動画、広告動画を低価格で高速納品できます。
まずは1本作ってみること。最初の動画を完成させたら、2本目からは驚くほど速くなります。このガイドの内容を実践すれば、あなたも「テキストだけで動画を作れる人」になれます。