使用说明
视频模板
这是一个简单的模板，可以制作简单的介绍视频。
特徴
- 交互式视频制作 -一边与Claude Code对话一边制作动画
- 自動音声生成 -VOICEVOX自动生成高品质声音
- 假唱动画 -角色看起来很自然
- 表情差分対応 -happy，surprised，thinking，sad等的表情切换
- BGM・効果音対応 -适合场景的声音演出
- 可定制 在-YAML文件中轻松更改字体、颜色和布局
快速启动
1.需要的东西
软件/说明 |--------|------| | Node.js 18+ | JavaScript実行环境| | VOICEVOX 免费语音合成软件 | 克劳德代码 ｜交互式制作视频（推荐）｜
2.设置
git clone https://github.com/nyanko3141592/remotion-voicevox-template.git my-video
cd my-video
npm install
3.启动VOICEVOX
请启动VOICEVOX应用程序（生成声音所需）。
4.启动预览服务器
npm start
在浏览器中http://localhost:3000中所述修改相应参数的值。 因为包含了演示用的台词和声音，所以可以马上确认动作。
5.动画を作成（Claude Code使用时）
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 🎉 │
└─────────────────────────────────────────────────────────────────┘
常用指示
想做的事｜指示的例子｜ |-------------|---------| 新建｜“制作〇〇的介绍动画”｜ ｜台词修改｜“更改ID3的台词”｜ 发音修正：将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"
BGM・効果音
添加效果音使视频更具吸引力：
// セリフに効果音を追加
{
text: "ここがポイントなのだ！",
se: { src: "point.mp3", volume: 0.8 },
}
效果音的入手方法 效果音向导 来修改标记元素的显示属性。
制作新动画的流程
这是使用这个模板制作新动画时的步骤。
# 1. テンプレートをclone
git clone https://github.com/sugirukun/remotion-voicevox-template.git 新しい動画名
cd 新しい動画名
npm install
# 2. セリフを作成（Claude Codeまたは手動）
# config/script.yaml または src/data/script.ts を編集
# 3. VOICEVOXを起動して音声生成
npm run voices
# 4. プレビュー確認
npm start
# → http://localhost:3000 で確認
# 5. 動画出力
npm run build
# → out/video.mp4 が生成される
因为从一开始就包含了角色画像和设定，所以只要写台词就能制作动画。
详细的使用方法
详情 CLAUDE.md 来修改标记元素的显示属性。
许可证
MIT许可证
关于角色（四国めん）的使用条款请确认各官方网站。
