Remotionで作る
自動AI動画制作ガイド
初心者向け

mkdir ai-video-ranking
cd ai-video-ranking

claude

Remotionでランキング動画を作りたいです。
このフォルダを、動画制作プロジェクトとして整理してください。
初心者向けに、必要なファイル構成と作業手順を提案してください。

npx create-video@latest

cd my-video

npm run dev

npx remotion render

npx remotion render RankingVideo out/ranking-video-raw.mp4

Remotionプロジェクトを作りました。
ランキング動画用に、縦動画1080x1920、30fps、35秒前後のCompositionを作ってください。
既存テンプレートの不要な部分は整理し、src/RankingVideo.tsx に本体を作ってください。

my-video/
  src/
    RankingVideo.tsx
    data/
      ranking.json
      video-models.json
    scripts/
      generate-ranking.ts
      generate-background-kie.ts
      download-background.ts
      render-final.ts
  public/
    backgrounds/
      ai-background.mp4
    audio/
      bgm.mp3
  out/
    ranking-video-raw.mp4
    ranking-video-final.mp4
  .env

{
  "title": "AIで仕事が速くなるツールランキング TOP5",
  "items": [
    {
      "rank": 5,
      "name": "AI議事録",
      "summary": "会議のメモ作成を短縮できます。"
    }
  ],
  "cta": "保存して、あとで試してください。"
}

npm install openai dotenv

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx

import 'dotenv/config';
import fs from 'node:fs/promises';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

const prompt = `
SNSの短尺投稿向けに、YouTubeにも転用できるランキング動画の中身を作ります。
テーマ: AIで仕事が速くなるツール
条件:
- 5位から1位まで
- 初心者でも分かる言葉
- 各項目は30文字以内の名前
- summaryは45文字以内
- 誇大表現は避ける
- JSONだけで返す
`;

const response = await openai.responses.create({
  // モデル名は公式の最新モデル一覧で確認して置き換える
  model: 'gpt-5.4-mini',
  input: prompt,
});

const text = response.output_text;
await fs.mkdir('src/data', { recursive: true });
await fs.writeFile('src/data/ranking.json', text);

console.log('src/data/ranking.json を作成しました');

npx tsx src/scripts/generate-ranking.ts

Futuristic workspace, abstract AI network, soft moving lights, vertical video, clean, no text, no logos

KIE_API_KEY=kie_xxxxxxxxxxxxxxxx
KIE_MODEL_ID=default-background

{
  "default-background": {
    "name": "AI背景向けモデル",
    "model": "ここにKie.aiのモデルID",
    "size": "1080x1920",
    "duration": 5,
    "note": "抽象的な背景動画用。実際のモデルIDはKie.aiの公式画面で確認する。"
  },
  "fast-preview": {
    "name": "確認用の速いモデル",
    "model": "ここにKie.aiのモデルID",
    "size": "1080x1920",
    "duration": 5,
    "note": "まず動作確認したい時に使う。"
  },
  "high-quality": {
    "name": "高品質モデル",
    "model": "ここにKie.aiのモデルID",
    "size": "1080x1920",
    "duration": 5,
    "note": "本番用。料金と生成時間に注意する。"
  }
}

import 'dotenv/config';
import fs from 'node:fs/promises';

const apiKey = process.env.KIE_API_KEY;
const modelId = process.env.KIE_MODEL_ID || 'default-background';

if (!apiKey) {
  throw new Error('KIE_API_KEY が設定されていません');
}

const models = JSON.parse(
  await fs.readFile('src/data/video-models.json', 'utf8')
);

const selectedModel = models[modelId];
if (!selectedModel) {
  throw new Error(`video-models.json に ${modelId} が見つかりません`);
}

const prompt = 'Futuristic workspace, abstract AI network, soft moving lights, vertical video, clean, no text, no logos';

console.log('Kie.aiで背景動画を生成します');
console.log(`model: ${selectedModel.name}`);

// Kie.aiのAPI仕様は変わる可能性があります。
// 実際のエンドポイント、リクエスト項目、ステータス確認方法は公式ドキュメントに合わせてください。
// ここでは「モデルを設定ファイルから選ぶ」設計を優先しています。

await fs.mkdir('public/backgrounds', { recursive: true });

console.log('生成完了後の動画を public/backgrounds/ai-background.mp4 に保存します');

Kie.ai APIを使って、背景動画を生成するTypeScriptスクリプトを作ってください。
公式ドキュメントの現在の書き方に合わせてください。
秘密のキーは .env の KIE_API_KEY から読み込んでください。
使うモデルは .env の KIE_MODEL_ID と src/data/video-models.json で切り替えられるようにしてください。
生成された動画は public/backgrounds/ai-background.mp4 に保存してください。
失敗した時は、初心者にも分かるエラーメッセージを出してください。

import { AbsoluteFill, Video, useCurrentFrame, useVideoConfig } from 'remotion';
import ranking from './data/ranking.json';

export const RankingVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const seconds = frame / fps;

  const itemIndex = Math.min(
    Math.floor(Math.max(seconds - 2, 0) / 6),
    ranking.items.length - 1
  );

  const item = ranking.items[itemIndex];

  return (
    <AbsoluteFill style={{ backgroundColor: '#050505', color: 'white' }}>
      <Video src="/backgrounds/ai-background.mp4" />
      <AbsoluteFill style={{ background: 'rgba(0,0,0,0.45)' }} />
      <AbsoluteFill
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 80,
          textAlign: 'center',
          fontFamily: 'sans-serif',
        }}
      >
        <div>
          <div style={{ fontSize: 72, fontWeight: 900 }}>#{item.rank}</div>
          <div style={{ fontSize: 84, fontWeight: 900 }}>{item.name}</div>
          <div style={{ marginTop: 32, fontSize: 42, lineHeight: 1.35 }}>
            {item.summary}
          </div>
        </div>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

npx remotion render RankingVideo out/ranking-video-raw.mp4

brew install ffmpeg

ffmpeg -i out/ranking-video-raw.mp4 -c:v libx264 -pix_fmt yuv420p -movflags +faststart out/ranking-video-final.mp4

ffmpeg -i out/ranking-video-raw.mp4 -i public/audio/bgm.mp3 -shortest -c:v libx264 -c:a aac -pix_fmt yuv420p -movflags +faststart out/ranking-video-final.mp4