remotion-promo-video E2Eテスト結果

2026年3月13日 23:10 更新

MD から自動変換されたページです。内容について質問があれば右下の ? ボタンからどうぞ。

テスト日: 2026-03-13 テンプレートリポジトリ: ~/repos/remotion-promo-template/ 対象サービス: Plan Viewer (https://plan-viewer-aihara.surge.sh)

テスト結果サマリー

全ステップ合格です。

ステップ	結果	所要時間
ユニットテスト (57本)	全パス	6.2秒
スクリーンショット撮影	成功 (1.1MB PNG)	約2秒
動画レンダリング (15秒)	成功 (3.2MB MP4)	26.6秒
シーン別確認	3シーン全正常	-

動画スペック

コーデック: H.264 (High Profile)
解像度: 1080×1920 (9:16 縦型、ショート動画向け)
フレームレート: 30fps
尺: 15.000秒 (450フレーム)
ビットレート: 約1.4Mbps
ファイルサイズ: 3.2MB

3部構成の確認

Opening (0〜3秒)

サービス名「Plan Viewer」がバネアニメーションで拡大表示され、 0.5秒遅れで「スマホで確認できるプランビューア」のタグラインがフェードイン。背景はダークパープルのグラデーション。

Demo (3〜12秒)

MockBrowser（ブラウザ風のフレーム。信号機ボタン+URLバー付き）の中に plan-viewerのスクリーンショットが表示される。下部に説明テキスト。ブラウザ風フレームがスケールインするアニメーション付き。

CTA (12〜15秒)

「今すぐ試してみよう」のテキストと、「Plan Viewer」ボタン（脈動アニメ付き）、 URLが表示される。背景は紫〜青のグラデーション。

E2Eテスト中に修正した点

render-promo.ts CLIスクリプトに以下を追加:

--screenshots オプション（カンマ区切りで画像パス指定）
narration: false をデフォルトに（VOICEVOXナレーションは未実装のため）

注意事項・今後のTODO

zod バージョン警告: Remotion v4 が zod v4.3.6 を要求。現在 v3.25 がインストールされている。レンダリングには支障なしだが、将来的にアップグレード推奨
VOICEVOXナレーション: スキーマには定義済み（narration, narrationText, speaker）だが、音声生成の実装はまだ。Phase 5 で対応予定
初回レンダリング: Chrome Headless Shell (90MB) のダウンロードが入る。2回目以降はキャッシュ済み
フォント: Noto Sans JP を指定しているが、ローカルにインストールされていない場合フォールバックされる可能性あり

実行コマンド（再現手順）

cd ~/repos/remotion-promo-template

# 1. テスト
npx vitest run

# 2. スクショ撮影
npx tsx scripts/capture-screenshots.ts https://plan-viewer-aihara.surge.sh

# 3. レンダリング（スクショパスは実際のファイル名に置き換え）
npx tsx scripts/render-promo.ts \
  --name "Plan Viewer" \
  --url "https://plan-viewer-aihara.surge.sh" \
  --description "スマホで確認できるプランビューア" \
  --duration 15 \
  --screenshots "screenshots/screenshot-XXXXX.png"

# 4. 動画を確認
open out/video.mp4