launch-video

コードで作るローンチ動画

ローンチ動画は、30〜45秒で1つのことを売り込みます。window.seek(seconds) を使って1つの HTML ファイルとして作成し、その後 MP4 に書き出します。

始める前に： brand.md と MOTION.md があれば読みます。なければ、まず brand-intake を実行するか、カラーコード、フォント、ロゴファイルを尋ねてください。それらなしに、仕上がりがブランドに合っていると言ってはいけません。

ステップ 1：5つのことを尋ねて、返事を待つ

1. 何をローンチするのか、 1行で。例：「LinkedIn AI OS。コンテンツシステムを構築する6週間のコホートです。」
2. 動画で伝える1文を、 3〜5つのビートに分けます。例：「次の投稿を、／あなたの文体で、／目にする前にチェックします。」
3. 証拠。 実際の製品のスクリーンショット、出典のある実際の成果、または実際の顧客投稿。添付ファイルのみ。
4. 行動喚起を、 販売ページに表示されているとおり、一字一句そのまま。
5. ブランド。 カラーコード、フォント、ロゴファイル。さらにサイズ：1920 x 1080、1080 x 1350、または1080 x 1920。

価格、日付、「残り枠数」、推薦文、成果を決してでっち上げてはいけません。

ここでいう「プレミアム」とは（痛い経験から学んだこと）

最初の3案は「プレミアムではない」「ブランドカラーではない」と却下されました。改善につながったのは次の点です。

• 実際のブランドカラー。 ランディングページや、最も優れたグラフィックから抽出します。既定のパレットは使いません。
• グラス UI。 Apple の現行 UI のように、製品の画面を柔らかな奥行きのある、すりガラス風のリキッドグラスパネルとして表現します。
• 実物らしい入力ボックスに、プロンプトをリアルタイムで入力します。 入力を見せるのはここだけです。
• 証拠カードには、古い例ではなく、実際の最近の制作物を使います。
• 変化をつけます。 2つのビートで同じレイアウトを使いません。

まず最初の10秒を、2〜3種類のスタイルで作ります。1つ選び、その後で残りを作成します。

ステップ 2：ビートを構成する

標準は7ビート、45秒です。

#	時間	ビート
1	0-4s	文の最初の言葉を、すっきりした背景に大きく表示します。フックです。
2	4-9s	実際の証拠（投稿、成果、画面）に重ねて、次の言葉を表示します。
3	9-17s	製品が動作する様子：画面、実際のプロンプトを入力するカーソル、表示される出力。
4	17-22s	品質を示すビート：何かをチェックし、合格し、またはチェックマークを付けます。
5	22-32s	仕組み：ステップ、週、または機能を、シンプルなビジュアル1つで示します。
6	32-38s	重要な数字を、出典とともにカウントアップで表示します。
7	38-45s	名前、行動喚起、要件。読み取れるだけの時間、表示し続けます。

ビートシートを提示して、承認を待ちます。

ステップ 3：制作ブリーフ（Claude Code に貼り付け）

Build one self-contained HTML file called index.html for a [LENGTH]-second product launch video at [WIDTH] x [HEIGHT]. Use only the files I attached. Nothing loaded from the internet.

Style: clean, premium product launch. Background [BG], text [TEXT], one accent [ACCENT], font [FONT] or a system sans-serif. Generous space. Product screens float on soft shadows with slow push-ins. One sentence is split across the beats and each fragment lands with a short, confident move.

Banned: typewriter reveals on headlines (typing belongs only inside the product's input box), glow, bouncing, gradients on text, stock-photo people, fake testimonials, any number I did not give you.

Beats: follow my beat sheet exactly, with its timings.

Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. Autoplay on a loop when opened normally, wait for seek when the URL has ?render.

After the build: capture one frame from the middle of every beat. Check for cut-off text, overlapping elements, anything unreadable at phone size, and any word or number not in my brief. Fix what is real and keep the first version.

ステップ 4：購入者の視点でチェックする

• 初めて見る人が、4秒までに何をローンチするのか分かりますか？
• すべての数字に出典がありますか？
• 行動喚起は少なくとも3秒間表示されていますか？
• 音を消した状態でも、スマートフォンで読み取れますか？

ステップ 5：書き出す

HyperFrames（無料、オープンソース）：npx skills add heygen-com/hyperframes を実行し、続けて npx hyperframes render を実行します。16:9 と 4:5 のバージョンを書き出します。インストールする前に、どのツールが利用できるかを確認し、まず許可を得てください。