画面録画とデモ
スクリプト化された録画は再利用可能です。UIが変わったら、手動で録画し直す代わりにスクリプトを再実行するだけです。
方法の選択
| 状況 | 方法 |
|---|---|
| ブラウザで開けるWebアプリ | Playwrightを使ったスクリプト録画 |
| デスクトップアプリや全画面作業 | OS標準の録画ツール（OBS Studio、Windows Game Bar、macOS スクリーンショット） |
| アプリのソースがあり、滑らかでノーグリッチな結果が欲しい | Remotionで画面を静的コンポーネントとして再構築（remotion-programmatic-video を参照） |
| CLI操作 | ターミナルレコーダー（asciinema、VHS）またはアニメーション付きターミナルコンポーネント |
Playwright 録画（Python）
pip install playwright && playwright install chromium
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"width": 1920, "height": 1080},
record_video_dir="recordings/",
record_video_size={"width": 1920, "height": 1080},
)
page = ctx.new_page()
page.goto("https://example.com")
page.wait_for_load_state("networkidle")
page.wait_for_timeout(800) # 視聴者が読む時間
page.get_by_role("button", name="Sign in").click()
page.get_by_label("Email").type("[email protected]", delay=60) # 入力動作を可視化
page.wait_for_timeout(1200)
ctx.close() # close時に動画が確定
browser.close()
出力はWebM形式です。変換:
ffmpeg -i recordings/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
見栄えを良くする
- デモデータ: 現実的で機密性のないデータをあらかじめ用意したデモアカウントを使用します。実際の顧客データ、トークン、メールアドレスは絶対に記録しないでください。
- ウィンドウ: 固定の1920x1080ビューポート、ブックマークバーと通知は非表示、テキストがスマホでも読めるように軽いズーム（110〜125%）を適用します。
- ペース: 各操作の後に0.5〜1秒のポーズを入れます。入力は遅延をつけて行います。瞬間移動は避けてください。
- カーソル: Playwrightはカーソルを描画しません。小さなDOMカーソルを注入するか、後処理（Remotionやオーバーレイ）で追加します。
- 決定性: 固定のsleepではなく、
expect(locator).to_be_visible()で待ってから意図的なポーズを入れます。 - 機密情報: 録画前にページスクリプトでフィールドをぼかすかマスクします（
page.add_style_tag）。
ポストプロダクション
# 不要部分をカット: 12秒から41秒までを残す
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# 退屈な待ち時間を高速化（例：20秒から30秒を4倍速）には分割が必要。最も簡単な方法は、カット→速度変更→再結合
# 領域をズーム: トリミングしてからリサイズ（x:y:w:h はソースピクセル単位）
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
滑らかなアニメーションズーム/パンをカーソルに追従させるには、Remotion（interpolate で scale と translate）を使用します。
ナレーションとの同期
- まずスクリプトを書き（
video-planning）、ボイスオーバーを録音します（voiceover-tts）。 - 画面を録画し、各アクションが該当するセリフに合うようにシーンごとに速度を調整します。速度 = 録画秒数 / ナレーション秒数。
ffmpeg-essentialsの速度調整レシピを使うか、コンポジション内でタイミングを再調整します。
チェックリスト
- 個人データ、APIキー、内部URLが表示されていないこと。
- テキストが、スマホ画面にスケールした1080pで読めること。
- ローディングスピナーが1秒以上残っていないこと。
- マシンからの音声は、必要な場合を除きミュートされていること。