remindenwa = LINE Botリマインダー。LINEに予定を送ると指定時刻にVonage Voice APIで電話がかかる。 プロモーション動画2本を制作する。
制作物:
curl -sf http://localhost:50021/version # 未起動ならユーザーに依頼
| 素材 | 用途 | 取得元 | ファイル名 |
|---|---|---|---|
| スマホ着信音 | 電話着信デモ | 効果音ラボ soundeffect-lab.info | phone-ring.mp3 |
| 通知音 | LINE受信演出 | 効果音ラボ | line-notify.mp3 |
| 電話接続音 | 応答の瞬間 | 効果音ラボ | phone-connect.mp3 |
| BGM(ずんだもん) | 動画全体 | 既存 yuruyakanaasayake.mp3 | — |
| BGM(プロモ) | ショート動画 | DOVA-SYNDROME dova-s.jp | promo-bgm.mp3 |
効果音ラボ・DOVA-SYNDROME: 商用無料、クレジット不要、日本最大手。信頼性◎。 Playwrightでダウンロード。手動DL必要時はAskUserQuestion。
cd ~/repos/remotion-promo-template
npx tsx scripts/capture-screenshots.ts https://remindenwa.com
# 加えて、LPの特定セクションをPlaywrightでクリップ撮影
cp ~/projects/remindenwa/lp/images/bot-icon.jpeg ~/repos/remotion-voicevox-template/public/content/
cp ~/projects/remindenwa/lp/images/bot-icon.jpeg ~/repos/remotion-promo-template/public/content/
LPヒーロー（lp/index.html 行83-91）のデザインを忠実に移植。
カラー仕様（LP実測値・全て検証済み）:
| 要素 | HEX | Tailwind/CSS根拠 |
|---|---|---|
| トーク背景 | #7494b7 |
LP: bg-[#7494b7] |
| ユーザー吹き出し | #06C755 |
LINE公式 = LP bg-primary |
| Bot吹き出し | #FFFFFF |
LP: bg-white |
| テキスト全共通 | #1a2332 |
LP: var(--color-text-heading) |
| ユーザー角丸 | 全体16px/右下4px | LP: rounded-2xl rounded-br-sm |
| Bot角丸 | 全体16px/左下4px | LP: rounded-2xl rounded-bl-sm |
Props:
type ChatMessage = { sender: 'user' | 'bot'; text: string; delayFrames: number; };
type LineChatMockProps = { messages: ChatMessage[]; showHeader?: boolean; };
アニメーション: Sequence + spring() でメッセージ順次スライドアップ表示。 ユーザー=右寄せ、Bot=左寄せ+Botアイコン(28x28px rounded-full)付き。
LP着信モック（lp/index.html 行93-108）を移植。
| 要素 | 値 |
|---|---|
| 背景 | linear-gradient(145deg, #1a1a2e, #16213e) |
| 角丸 | 22px |
| Botアイコン | 48x48 rounded-full |
| 名前 | 「リマイン電話くん」白字14px bold |
| 拒否ボタン | #ef4444 丸36px ×アイコン |
| 応答ボタン | #06c755 丸36px 受話器 + ringAnim |
| callPulse | 2s ease-in-out infinite (scale 1→1.03) |
状態遷移: ringing(着信音SE再生) → answered(画面切替+TTS再生)
通話中画面。暗い背景 + タイマー表示 + 波形風アニメーション + TTS Audio再生。
# VOICEVOXで生成(speaker=2: めたんノーマル = 中性的)
curl -X POST "localhost:50021/audio_query?speaker=2&text=歯医者の時間だよ" -o query.json
curl -X POST -H "Content-Type:application/json" -d @query.json \
"localhost:50021/synthesis?speaker=2" --output tts_raw.wav
# 電話音質フィルタ(帯域制限300-3400Hz + コンプレッション)
ffmpeg -i tts_raw.wav -af "highpass=f=300,lowpass=f=3400,acompressor=threshold=-20dB:ratio=4" tts_phone.wav
テンプレート: ~/repos/remotion-voicevox-template/ BGM: yuruyakanaasayake.mp3 (volume: 0.12) ショート形式(15-60秒ではなく)、長尺3-5分
| ID | char | text | emotion | visual | se |
|---|---|---|---|---|---|
| 1 | metan | みんなは大事な予定、すっぽかしちゃったことない？ | neutral | text: 予定忘れの悩み | — |
| 2 | zundamon | あるのだ！歯医者の予約忘れて怒られたのだ... | sad | text: 歯医者すっぽかし | don.mp3 |
| 3 | metan | 通知やアラームじゃダメだった？ | neutral | — | — |
| 4 | zundamon | 通知は見逃すし、アラームは止めて二度寝するのだ | sad | text: 通知→埋もれる/アラーム→二度寝 | — |
| ID | char | text | emotion | visual | se |
|---|---|---|---|---|---|
| 5 | metan | そこで紹介するのが「リマイン電話くん」よ | happy | image: lp-hero.png | jajan.mp3 |
| 6 | zundamon | リマイン...電話？なのだ？ | neutral | — | — |
| 7 | metan | LINEに予定を送ると、時間になったら電話がかかってくるLINE Botなの | neutral | text: LINE→電話 | — |
| 8 | zundamon | 電話！？それは確かに無視できないのだ！ | happy | text: 通知は無視できる。電話は無視できない。 | kiraan.mp3 |
| ID | char | text | emotion | visual | se |
|---|---|---|---|---|---|
| 9 | metan | 使い方は超簡単。まずLINEで友だち追加するだけ | neutral | image: lp-steps.png | — |
| 10 | metan | あとはLINEにメッセージを送るだけよ | neutral | LineChatMock: user「明日9時に歯医者」 | line-notify.mp3 |
| 11 | zundamon | おお！すぐ返事が来たのだ！ | happy | LineChatMock: bot「9:00に『歯医者』で電話するね！」 | picon.mp3 |
| 12 | metan | 自然な言葉で大丈夫。「30分後にゴミ出し」とか「来週月曜に会議」とか | neutral | text: 対応表現の例 | — |
| 13 | zundamon | 難しい操作がいらないのだ！ | happy | — | — |
| ID | char | text | emotion | visual | se |
|---|---|---|---|---|---|
| 14 | metan | そして時間になると... | neutral | — | — |
| 15 | zundamon | ！？電話が来たのだ！ | surprised | PhoneCallMock(ringing) | phone-ring.mp3 |
| 16 | metan | 電話に出ると、予定の内容を読み上げてくれるわ | neutral | PhoneAnswered + TTS「歯医者の時間だよ」 | phone-connect.mp3 |
| 17 | zundamon | おおー！これなら絶対忘れないのだ！ | happy | — | kiraan.mp3 |
| ID | char | text | emotion | visual | se |
|---|---|---|---|---|---|
| 18 | metan | 途中まで言いかけても大丈夫。足りない情報は聞き返してくれるの | neutral | LineChatMock: user「歯医者」→bot「何時に電話する？」 | — |
| 19 | zundamon | 親切なのだ！ | happy | — | — |
| 20 | metan | 一覧で管理もできるし、キャンセルもワンタップよ | neutral | image: lp-list.png | — |
| 21 | metan | 録音なし、退会で即データ削除。安心して使えるわ | neutral | text: 安心設計3点 | — |
| ID | char | text | emotion | visual | se |
|---|---|---|---|---|---|
| 22 | zundamon | これお金かかるのだ？ | neutral | — | — |
| 23 | metan | 3回まで無料で試せるわ。気に入ったら回数パックもあるの | neutral | text: 3回無料→10回¥300〜 | — |
| 24 | zundamon | 無料で試せるなら安心なのだ！ | happy | — | charin.mp3 |
| 25 | metan | 概要欄のリンクから友だち追加してみてね | happy | image: add-friend-btn.png | — |
| 26 | zundamon | 二度寝する前に追加するのだ！バイバイなのだ！ | happy | text: remindenwa.com | — |
| 素材 | 取得方法 |
|---|---|
| lp-hero.png | Playwrightでヒーロー部分をクリップ撮影 |
| lp-steps.png | Playwrightで「始め方」セクションを撮影 |
| lp-list.png | Playwrightで「一覧」モック部分を撮影 |
| add-friend-btn.png | LP最終CTAのボタン部分を撮影 |
| bot-icon.jpeg | lp/images/ からコピー |
| LineChatMock / PhoneCallMock | Phase 1で作成したコンポーネントをvisualとして使用 |
| TTS電話音声 | Phase 1-4で生成した tts_phone.wav |
npm run lint:script で19ルール品質チェックnpm run voices で全音声生成npm start でプレビュー確認npm run build でレンダリングテンプレート: ~/repos/remotion-promo-template/ (新規コンポジション追加) 形式: 縦型 1080x1920, 35秒, ナレーション付き ナレーション: VOICEVOX speaker=3 (ずんだもん)
既存 PromoVideo.tsx は壊さない。新規コンポジション RemindenwaPromo を追加。
ファイル構成:
src/
├── RemindenwaPromo.tsx # 新規メインコンポジション
├── components/
│ ├── LineChatMock.tsx # 新規(Phase 1から)
│ ├── PhoneCallMock.tsx # 新規(Phase 1から)
│ ├── PhoneAnswered.tsx # 新規(Phase 1から)
│ ├── HookText.tsx # Shot 1用
│ ├── ProblemCards.tsx # Shot 2用
│ ├── SolutionReveal.tsx # Shot 3用
│ ├── FeatureCards.tsx # Shot 5用
│ └── CTAScreen.tsx # Shot 6用
├── PromoVideo.tsx # 既存(触らない)
└── ...
ナレーション実装:
<Audio> + <Sequence> で各ショットのタイミングに配置<Audio> で重ねる (volume 0.15)npm start でプレビューnpm run build でレンダリング# コンタクトシート(3fps, 5x3タイル)
ffmpeg -i out/video.mp4 -vf "fps=3,scale=320:-1,tile=5x3" /tmp/contact_%03d.png
# 特定シーンの全フレーム(必要に応じて)
ffmpeg -i out/video.mp4 -ss 10 -t 5 -vf "fps=30" /tmp/frames/frame_%05d.png
レビュー項目(各フレーム):
コンタクトシート画像をReadツールで読み取り、1枚ずつAIで目視レビュー。
# 波形画像
ffmpeg -i out/video.mp4 -filter_complex "showwavespic=s=1920x240:colors=green" \
-frames:v 1 /tmp/waveform.png
# 無音検出(1秒以上の無音)
ffmpeg -i out/video.mp4 -af silencedetect=n=-30dB:d=1 -f null - 2>&1 | grep silence
# ラウドネス(-14 LUFS目標)
ffmpeg -i out/video.mp4 -af loudnorm=print_format=json -f null - 2>&1 | tail -20
レビュー項目:
波形画像をReadで読み、バランスを視覚確認。
npm run build)バックグラウンドで code-reviewer エージェントを起動:
LP情報→台本→アセット→レンダリング→レビューを一気通貫で行うオーケストレーター。
Progressive Disclosure(逆瀬川原則):
構成:
skills/service-promo-video/
├── SKILL.md
├── references/
│ ├── line-mock-spec.md
│ ├── phone-mock-spec.md
│ ├── script-template.md
│ ├── review-checklist.md
│ └── se-bgm-sources.md
└── scripts/
├── extract-frames.sh
└── audio-review.sh
再利用するRemotionコンポーネント:
今回作成するLineChatMockはremindenwa専用ではなく、LINEボット全般のプロモで使える汎用コンポーネントとして設計する。propsでメッセージ内容、色、アイコンを全てカスタマイズ可能に。
| Step | 内容 | 依存 |
|---|---|---|
| 0-1 | VOICEVOX起動確認 | なし |
| 0-2 | SE/BGMダウンロード | なし |
| 0-3 | LPスクショ撮影 | なし |
| 0-4 | bot-iconコピー | なし |
| 1-1 | LineChatMock.tsx開発 | なし |
| 1-2 | PhoneCallMock.tsx開発 | なし |
| 1-3 | PhoneAnswered.tsx開発 | なし |
| 1-4 | TTS電話音声生成 | 0-1(VOICEVOX) |
| 2 | ずんだもん動画: script.ts→voices→build | 0-2, 1-*, 0-4 |
| 3 | プロモ動画: コンポジション→voices→build | 0-2, 0-3, 1-* |
| 4 | レビューループ(各動画) | 2, 3 |
| 5 | スキル化計画文書 | 4完了後 |
並列可能: 0-1〜0-4は全て並列。1-1〜1-3も並列。2と3はコンポーネント完成後に並列可。
| ファイル | 用途 |
|---|---|
| ~/repos/remotion-voicevox-template/src/data/script.ts | ずんだもん台本 |
| ~/repos/remotion-voicevox-template/src/components/ | コンポーネント群 |
| ~/repos/remotion-voicevox-template/src/Main.tsx | メインコンポジション |
| ~/repos/remotion-voicevox-template/scripts/generate-voices.ts | VOICEVOX音声生成 |
| ~/repos/remotion-promo-template/src/ | プロモコンポーネント群 |
| ~/repos/remotion-promo-template/src/Root.tsx | コンポジション登録 |
| ~/projects/remindenwa/lp/index.html | LPデザイン参照(行83-108) |
| ~/projects/remindenwa/lp/src/style.css | カラーパレット |
| ~/projects/remindenwa/lp/images/bot-icon.jpeg | Botアイコン |