ずんだもん＆めたんの掛け合い紹介動画を簡単に作成できるテンプレートです。
- 対話的な動画作成 - Claude Codeと会話しながら動画を作成
- 自動音声生成 - VOICEVOXで高品質な音声を自動生成
- 口パクアニメーション - キャラクターが自然に話しているように見える
- 表情差分対応 - happy, surprised, thinking, sad などの表情切り替え
- BGM・効果音対応 - 場面に合わせた音声演出
- カスタマイズ可能 - YAMLファイルでフォント、色、レイアウトを簡単変更
| ソフト | 説明 |
|---|---|
| Node.js 18+ | JavaScript実行環境 |
| VOICEVOX | 無料の音声合成ソフト |
| Claude Code | 対話的に動画を作成（推奨） |
git clone https://github.com/nyanko3141592/remotion-voicevox-template.git my-video
cd my-video
npm installVOICEVOXアプリを起動しておいてください（音声生成に必要）。
npm startブラウザで http://localhost:3000 を開くとプレビューが表示されます。 デモ用のセリフと音声が含まれているので、すぐに動作確認できます。
claude # 別ターミナルでClaude Codeを起動Claude Codeに話しかけるだけ：
「〇〇の紹介動画を作りたい」
┌─────────────────────────────────────────────────────────────────┐
│ 準備 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Node.js │ │ VOICEVOX │ │ Claude │ │
│ │ インストール│ │ 起動 │ │ 起動 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 1. セリフ作成 │
│ 「〇〇の紹介動画を作りたい」 │
│ │ │
│ ▼ │
│ Claude がセリフを自動生成 → src/data/script.ts │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. 音声生成 │
│ 「音声を生成して」 │
│ │ │
│ ▼ │
│ VOICEVOX API で音声生成 → public/voices/*.wav │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. プレビュー・修正 │
│ 「プレビュー見せて」 │
│ │ │
│ ┌───────────────┴───────────────┐ │
│ ▼ ▼ │
│ 問題なし 修正あり │
│ │ 「ID 3のセリフを変えて」 │
│ │ │ │
│ │ ▼ │
│ │ セリフ修正 → 音声再生成 │
│ │ │ │
│ └───────────────┬───────────────┘ │
│ │ │
└──────────────────────────────┼──────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ 4. 動画出力 │
│ 「動画を出力して」 │
│ │ │
│ ▼ │
│ Remotion でレンダリング → out/video.mp4 🎉 │
└─────────────────────────────────────────────────────────────────┘
| やりたいこと | 指示の例 |
|---|---|
| 新規作成 | 「〇〇の紹介動画を作って」 |
| セリフ修正 | 「ID 3のセリフを変更して」 |
| 発音修正 | 「GitHubをギットハブって発音して」 |
| 音声生成 | 「音声を生成して」 |
| プレビュー | 「プレビュー見せて」 |
| 動画出力 | 「動画を出力して」 |
| コマンド | 説明 |
|---|---|
npm start |
プレビュー（http://localhost:3000） |
npm run voices |
音声生成 |
npm run build |
動画出力（out/video.mp4） |
npm run init |
新規プロジェクト初期化 |
video-settings.yamlでuseImages: trueに設定し、画像を配置：
public/images/
├── zundamon/
│ ├── mouth_open.png # 口開き（必須）
│ ├── mouth_close.png # 口閉じ（必須）
│ ├── happy_open.png # 表情差分（任意）
│ └── ...
└── metan/
└── ...
画像がない場合はプレースホルダーが表示されます。
video-settings.yamlでスタイルを変更できます：
font:
family: "Noto Sans JP"
size: 48
color: "#ffffff"
character:
height: 367
useImages: true
colors:
zundamon: "#228B22"
metan: "#FF1493"効果音を追加して動画をより魅力的に：
// セリフに効果音を追加
{
text: "ここがポイントなのだ！",
se: { src: "point.mp3", volume: 0.8 },
}効果音の入手方法は 効果音ガイド を参照してください。
詳細は CLAUDE.md を参照してください。
MIT License
キャラクター（ずんだもん・四国めたん）の利用規約は各公式サイトをご確認ください。