Webアプリの紹介動画は、Claude Code に「本物の画面をPlaywrightで録画→Remotionで編集」まで1つのプロンプトで作らせる

UIを描き直させず、本番サイトを実際に操作した録画を素材にする。編集・音・書き出し・全フレームの見直しまで、手順と数値を1つの依頼に書く。

AIに紹介動画を作らせると、実際とは違う「それっぽいUI」を描かれたり、編集のテンポがだれたりする。自分のWebアプリのX用ローンチ動画（20〜25秒）を作るときに使う。

冒頭で長さと形式を決める：20〜25秒、1920×1080、60fps、X向け。

素材は本物だけ。 Playwrightのスクリプトで本番サイトをヘッドレスChromiumで開き、Chrome DevToolsの画面録画（スクリーンキャスト）で60fpsで撮る。見えるカーソルと人の速さの動きで、製品が動いている様子が分かる操作を3〜5個たどる。寄りの画面がぼけないよう1080pと4Kの2回撮る。UIの偽造や描き直しは禁止。
Remotionで編集。 ロゴや黒画面から始めず、動きから始める。場面ごとに大きな文字の短いキャプションを1つずつ（単語がマスクの中からせり上がる）。キャプションが話している部分へカメラを寄せる。動きの速さの変化（イージング）は1種類にそろえる：入るものは expo out、出ていくものは expo in。最後はロゴが描かれていくカードに、ドメインと短い事実を2〜3個。
音はコードで作る。 素材集の音源は使わず、短いBGMと柔らかい効果音を生成してカットに合わせる。音量は約 -16 LUFS、ピークは -1 dBTP 未満に。
書き出しと見直し。 H.264（CRF 16）＋AAC、+faststart で書き出す。そのあと全フレームを見て、残ったフォーカスリング、切れた文字、間延びしたタイミングを直してもう一度書き出す。

使う道具：Claude Code、Playwright、Remotion、ffmpeg。

録画する操作とキャプションは、自分で［］を埋めて渡す部分。ここが動画の中身を決める。
「全フレームを見て直す」工程は、別のレビュー役に採点させると精度が上がる（AIで作った動画は、3体のレビュー用サブエージェントに9項目で採点させ、全員7点以上で受け取る）。
構成とタイミングを先に固める考え方は広告動画はワイヤーフレームで構成とタイミングを固めてから、DESIGN.mdで色を付けると同じ。
本番サイトを録画するので、個人情報やテスト用でないデータが映らないアカウントで撮る。