# ショート動画作成キット（ランキング・N選）

Claude Code に「〇〇のテーマでTOP3を作って」と頼むだけで、縦型のランキングショート（1080×1920・MP4）ができるキットです。
中身は自由に編集して使っていただけます。色・文字・声・尺など、ご自分のチャンネルに合わせて変えてください。

```
このフォルダ（ranking-short-kit）
├── .claude/skills/ranking-short/   … Claude Code が読む手順（スキル本体と、3つの担当）
├── src/                            … 動画の見た目と動き（Remotion）
├── scripts/                        … 声づくり・書き出し・確認の道具
├── public/                         … 動画に使う画像とフォント
├── shorts/claude-code-top3/        … 作例の台本（script.json）
└── reference/                      … 見本の動画に寄せるときの置き場所
```

## 0. いちばん簡単な始め方 ― Claude Code に「準備して」と頼む

このフォルダを Claude Code で開いて、こう頼みます。

```
準備して
```

Claude Code が、下の表の道具がそろっているかを1つずつ確かめ、足りないものを入れます（Node.js・ffmpeg・フォント・`npm install`。入れる前に確認を求めます）。
**声のソフトのアプリと、その中の声だけはご自分で入れてください**（アプリの画面で操作するため）。最後に作例を1本書き出して、動くことまで確かめます。

## 1. 準備するもの（初回だけ）

| 道具 | 何に使う | 入れ方 |
|---|---|---|
| **Claude Code** | 台本づくりから書き出しまでを進める | 公式の案内に沿って入れる |
| **Node.js**（20以上） | 動画を組み立てる Remotion を動かす | nodejs.org から LTS 版 |
| **声のソフト**（どれか1つ） | 2人の声を作る（パソコンの中で動く読み上げソフト） | AivisSpeech（aivis-project.com・初期値）／VOICEVOX（voicevox.hiroshiba.jp）／ゆっくりの声なら AquesTalkPlayer（a-quest.com）。下の「声の選び方」 |
| **フォント Noto Sans JP** | 見出しの太い文字 | 下の「フォント」を参照 |
| **ffmpeg** | 長さ・間の確認 | Windows は `winget install ffmpeg`、Mac は `brew install ffmpeg` |
| Python ＋ opencv-python・numpy（任意） | 見本の動画を測るときだけ | `pip install opencv-python numpy` |

### 声の選び方

声は3つの作り方から選べます。台本（script.json）の `voice` で決まります。Claude Code に「声をゆっくりにして」「VOICEVOX のずんだもんにして」と頼めば、ここを書き換えてくれます。

| 声の作り方 | `voice.engine` | 声の指定（main / sub） | 使える範囲（公開前に必ず確かめる） |
|---|---|---|---|
| **AivisSpeech**（初期値） | `aivisspeech` | `{ "speaker": "みちのくあいり", "style": "標準" }` | 声のモデルごとに条件が違う。初期値の2モデルは営利利用可（ACML 1.0） |
| **VOICEVOX** | `voicevox` | `{ "speaker": "ずんだもん", "style": "ノーマル" }` など | 商用でも使えるが、VOICEVOX を使ったことが分かるクレジット表記が必要。キャラクターごとの規約にも従う（voicevox.hiroshiba.jp/term） |
| **ゆっくり（AquesTalk）** | `aquestalk` | `{ "preset": "れいむ" }` `{ "preset": "まりさ" }` など AquesTalkPlayer のプリセット名 | 個人の非営利は無料。**収益化した動画・法人で使うなら有料の使用ライセンスが必要**（a-quest.com）。Windows の AquesTalkPlayer を使う。話速はアプリのプリセットで決める |

### 初期値の声（AivisSpeech）

AivisSpeech を起動し、アプリの中で次の2つの声を入れておきます（作例と同じ声になります）。
- **みちのくあいり**（タイトル・順位・青いコメント・締め）
- **まお**（ピンクのコメント）

別の声にしたいときは、台本（script.json）の `voice` を書き換えるか、Claude Code に「声を◯◯に変えて」と頼んでください。

### フォント

`public/fonts/NotoSansJP-VF.ttf` に置きます。
- Windows：`C:\Windows\Fonts\NotoSansJP-VF.ttf` をコピー（無ければ下の方法で）
- Mac・その他：Google Fonts で「Noto Sans JP」をダウンロードし、可変フォントのファイル（NotoSansJP-VariableFont_wght.ttf）を `NotoSansJP-VF.ttf` という名前で置く

### 最初の1回

このフォルダで次を実行します（または Claude Code に「準備して」と頼む）。

```
npm install
```

## 2. 動くか確かめる（作例を書き出す）

AivisSpeech を起動した状態で、このフォルダで次を実行します。

```
npm run make -- claude-code-top3
```

約1分で `shorts/claude-code-top3/claude-code-top3.mp4` ができれば準備は完了です。

## 3. 自分のテーマで作る

このフォルダを Claude Code で開いて、1文で頼みます。

```
「朝が楽になる便利グッズ」のテーマでTOP3を作って。画像は public/ に入れたものを使って
```

Claude Code は、構成 → 素材集め → 音声と書き出し の順に進めて、MP4 まで作ります。
- 画像は**自分で撮った写真・自分の画面**を `public/` に入れておくのがいちばん安全です
- 順位のない「5選」にしたいときは「5選で作って」と頼みます
- 見本にしたい動画があるときは `reference/見本.mp4` に置いて「この見本に寄せて」と頼みます（手順は `.claude/skills/ranking-short/references/imitate-reference.md`）

## 4. 手で直すとき（script.json の項目）

| 項目 | 内容 |
|---|---|
| `presentation` | `ranking`（TOP N・第N位、N→1）、または `list`（N選・1/N、1→N、「ひとつめ」と読む） |
| `output` | 書き出す MP4 のファイル名。作り直すときは `_v2` などに変えると前のものが残る |
| `voice.engine` | 声の作り方。`aivisspeech`（初期値）／`voicevox`／`aquestalk`（ゆっくり） |
| `voice.main` / `voice.sub` | 話者名とスタイル（ゆっくりは `preset`）。main＝タイトル・順位・青コメント・締め、sub＝ピンクコメント |
| `voice.exe` | ゆっくりのときだけ。AquesTalkPlayer.exe の場所 |
| `voice.speedScale` | 話す速さ（1.0 が標準。作例は 1.35）。ゆっくりはアプリのプリセットで決める |
| `title` / `ending` | 画面の文字（1行目は白、残りは赤黒） |
| `titleSay` / `endingSay` | 読み上げ文（省略すると表示文をそのまま読む） |
| `introIcon` | 冒頭のイラスト `pc` / `gamepad` / `tv` / `none` |
| `items[]` | ランキングは低い順位から並べる。最低3件 |
| `items[].name` / `nameSay` | 表示名（`\n` で2行）と読み。読みの前に「第N位、」が自動で付く |
| `items[].image` | `public/` の中のファイル名 |
| `items[].comments` / `commentsSay` | 1つ目＝青枠、2つ目＝ピンク枠。1行9文字ほど・2行まで |
| `items[].imageMaxHeight` | 縦長の画像を小さくしたいとき（px） |
| `items[].imageCrop` | 画像の一部だけ使うとき `{x,y,w,h}`（元画像のピクセル） |

英語は読み上げ文（`*Say`）をカタカナで書くと、読み間違いを防げます（Claude → クロード）。

よく使うコマンド
- 声と書き出しをまとめて：`npm run make -- <フォルダ名>`
- 声だけ作り直す：`npm run voice -- <フォルダ名>`
- 書き出しだけ：`npm run render -- <フォルダ名>`
- 画面で見ながら調整：`npm run studio`

## 5. 公開する前に

- **YouTube**：テンプレートで量産しただけで、中身に違いが無い動画は「独自性のないコンテンツ」とされ、収益化の対象外になります。動画ごとに、選んだ理由や自分の感想を入れてください
- **画像**：アニメ・ゲーム・商品の公式画像は、権利者の許諾が要ります
- **声**：使える範囲は声の作り方ごとに違います（上の「声の選び方」）。AivisSpeech はモデルごと、VOICEVOX はクレジット表記が必要、ゆっくり（AquesTalk）は収益化すると有料の使用ライセンスが必要です
- **Remotion**：個人・従業員3人までの会社は無料です。それを超える会社で使うときは Company License が要ります（remotion.dev/license）
- 作例の画像（`public/rank*.png`）は動作確認用です。ご自分の動画には、ご自分の画像を使ってください

## 6. ご利用の条件

- キットを使って作った動画は、ご自分のチャンネル・お仕事で自由に使っていただけます
- **キットそのもの（このフォルダの中身）の再配布・販売はお断りします。**編集したものも含みます

このキットは現状のまま提供しています。動作環境や各サービスの規約の変更によって、動かなくなることがあります。