tiktok-launch-video

TikTok ローンチ動画

HyperFrames を使って、TikTok に最適化されたローンチ動画を制作します。プログラムで生成する HTML/CSS 動画で、決定論的に動作し、エージェントに適しています。

このスキルは、16:9 の横長動画を縦型に変換するのではなく、TikTok の文法（9:16、1 秒未満のフック、動画に焼き込まれたキャプション、速いカット、ネイティブなテキストオーバーレイ）を徹底します。

使い方

/tiktok-launch-video https://example.com/launch — ローンチページからコンテキストを取得します /tiktok-launch-video "we're shipping AI brand guardrails for marketers" — 短い概要を指定します /tiktok-launch-video — ユーザーに質問します

前提条件

このマシンで一度実行します。

node --version            # ≥ 22
ffmpeg -version | head -1 # ≥ 6

いずれかに失敗した場合は、続行する前に Node 22+ と FFmpeg をインストールするようユーザーに依頼してください。

手順

1. 製品のコンテキストを収集する

以下の順に情報源を確認し、スクリプトを書くのに十分な情報が得られた時点で終了します。ユーザーがすでに行った作業をやり直さないでください。

1a. ローカルファイル — .agents/product-marketing-context.md または .claude/product-marketing-context.md があれば読み込みます。

1b. Cogny MCP コンテキストツリー — cogny MCP サーバーが接続されている場合（ツールで確認します。mcp__cogny__get_context_tree_overview または任意の mcp__cogny__* ツールを使用）、クエリします。

mcp__cogny__get_context_tree_overview          # see what's documented
mcp__cogny__search_context query="<product>"   # pull customer / pricing / positioning nodes
mcp__cogny__read_context_node node_id="…"      # drill into the most relevant nodes

コンテキストツリーには、公開情報のスクレイピングでは得られない情報が通常含まれています。たとえば、実際の顧客名、ICP、料金プラン、今四半期の目標、最近ローンチしたもの、ロードマップにあるものなどです。ウェブスクレイピングに切り替える前に確認してください。

1c. 公開ウェブ — URL が渡され、1a／1b で十分な情報が得られなかった場合は、WebFetch でページを取得し、製品名、価値提案、主なメリット、対象ユーザー、具体的な実績を 1 つ抽出します。

1d. ユーザーの概要 — 短い概要が渡された場合は、そのまま使用します。

1a～1d の後、以下の TikTok フックのチェックリストで不足している情報だけをユーザーに確認します。

TikTok フックのチェックリスト（スクリプトを書く前に必要な情報）：

1. 想定視聴者を 5 語で表すと？（例：「有料広告を運用する B2B マーケター」）
2. 動画の冒頭で、どんなパターンインタラプトを使いますか？（POV、種明かし、逆張りの主張、デモの一瞬、「最後まで見て」など）
3. スクロールを止めさせる唯一の主張や瞬間は何ですか？
4. その裏付けは何ですか？（数値、スクリーンショット、顧客名、ビフォー／アフターなど）
5. CTA は何ですか？（プロフィールのリンク、キーワードへのコメント、製品の検索、フォローなど）

5 つすべてが揃うまで先に進まないでください。推測になりそうな場合は、質問してください。

1.5 ブランドアイデンティティを取り込む

ストックテンプレートではなく、ユーザーのブランドらしい見た目にします。以下のいずれかを依頼してください。

• サイト URL（ページから色、フォント、トーンを抽出します）
• tailwind.config.* または CSS 変数を含む globals.css がある リポジトリパス
• 既存の brand-kit.json（.agents/brand-kit.json／.claude/brand-kit.json／プロジェクトルート）
• 手動での入力：16 進カラーコード 3 色（背景、テキスト、プライマリ）＋フォントファミリー＋1 文のトーン説明

最低限、colors.background、colors.foreground、colors.primary、colors.accent、type.family、voice.register を含む brand-kit.json を作成します。HyperFrames プロジェクトのルートに保存してください。

スキーマ全体、抽出パターン、トーンから構成へのマッピングについては、references/brand-identity.md を参照してください。

構成テンプレートは、これらを CSS 変数（--bg、--fg、--primary、--accent、--font-display）として読み込みます。そのため、ブランドキットを設定すれば、同じテンプレートでどのユーザーにもブランドに合った動画をレンダリングできます。

2. しっくりくるフォーマットを選ぶ

フォーマットを新しく考案する必要はありません。以下から1つ選んでください。どれもTikTokで実績があり、HyperFramesにスムーズに対応しています。

フォーマット	使用する場面	構成
POV	共感を呼ぶ、役割に基づく悩み	「POV：あなたは[役割]です」→ 悩み → 製品のオチを見せる
Build-in-public	創業者や初期ローンチ	「Zだから、Y日でXを作りました」→ 手短なデモ → 結果
Contrarian take	強い意見、カテゴリの創出	「みんなXと言っています。それはYだから間違いです」→ デモ
Before / After	ワークフローの改善	「以前は4時間かかっていました」→ 切り替え → 「今では30秒です」
List-tease	複数機能の紹介	「[ツール]ができる、あまり知られていない3つのこと」→ 1、2、3 → CTA

1つ選んでください。執筆を始める前にユーザーに確認します。

3. 台本を書く（TikTokの文法）

文章ではなく、ビートシートを書いてください。各ビートは1枚のカード、または1つの場面です。制約は次のとおりです。

• 合計の長さ：9～22秒。ユーザーが明示的に長めを希望しない限り、15秒を標準とします。
• ビート1（0.0～1.0秒）：フック。大きな文字。ロゴなし。イントロなし。視聴者にスワイプさせないでください。
• ビート2～N：各ビートは約1.0～2.5秒。その時間を使う価値がないビートは削除してください。
• 最後のビート（最後の1.5～2秒）：CTA。具体的な動詞を使います。「詳しくはこちら」ではなく、「TikTokで[名前]を検索」「WAITLISTとコメント」「リンクをタップ」のようにします。
• キャプション：話した言葉はすべて、テキストとして映像に焼き付けます。キャプションカード1枚につき最大6語です。
• 話し方／語調：一人称で、会話調にします。マーケティング調は避けてください。声に出して読んでみて、プレスリリースのように聞こえたら書き直してください。

ビートシートをユーザーに提示し、構成に進む前に確認を待ちます。1回程度の修正は通常の範囲です。

4. HyperFramesプロジェクトをスキャフォールドする

CLIを使ってください。package.jsonを手作業で作成しないでください。

# In the user's working directory, or a videos/ subdirectory if they prefer
npx -y hyperframes@latest init <product-slug>-tiktok --yes
cd <product-slug>-tiktok

これにより、index.html、meta.json、hyperframes.jsonに加えて、フレームワークのルールを記載したCLAUDE.md／AGENTS.mdが作成されます。CLAUDE.mdを一度読んでください。このスキルで必要となるdata-*属性の規則と、window.__timelinesの登録について説明しています。

5. 動画を構成する（9:16、躍動感のある動き）

index.htmlを編集し、1080×1920のコンポジションを作成します。以下のパターンは、TikTok向けコンポジションの最低限の構成です。コピーは調整しつつ、構造は維持してください。

重要なルール（HyperFramesの仕様です。省略しないでください）：

• 時間指定のある要素にはすべて、class="clip"とdata-start、data-duration、data-track-indexを指定します。
• コンポジションのルートには、data-composition-id、data-width、data-height、data-durationを指定します。
• アニメーションは一時停止状態のGSAPタイムラインに設定し、window.__timelines["<composition-id>"]として登録します。
• Date.now()、Math.random()、fetch()は使わないでください。レンダリングの結果は決定的である必要があります。

コンポジションの参考例は、references/composition-template.htmlを参照してください。

TikTok向けのスタイルに関するルールもいくつかあります。

• 文字：フックは110～160px、本文のキャプションは70～90pxにします。太字で、文字間隔を詰めます。
• セーフエリア：下部320pxと上部220pxには何も配置しないでください。TikTokのUIが表示される領域です。
• 色：高いコントラストにします。黒い背景に白いテキストと、アクセントカラーを1色（シアン、ライム、マゼンタのいずれか）使います。パステルカラーは避けてください。
• 動き：各カードは、yまたはscaleのトゥイーンを使って0.25～0.4秒で登場させます。場面の切り替えはクロスフェードではなく、カットにします。
• ストック映像のような見た目にしない：台本で「デモ」を行う場合は、汎用的なストック映像を使うのではなく、実際の製品UIをキャプチャし（hyperframes capture <url>）、9:16のフレームに合わせてクロップします。

6. リントする

npx hyperframes lint

すべてのエラーを修正してください。警告は通常無視しても問題ありませんが、内容を確認してください。

7. レンダリングする

npx hyperframes render --output launch.mp4

15秒のコンポジションのレンダリングには、マシンによって通常30～90秒かかります。出力はH.264 MP4、1080×1920、30fpsです。

8. 完了とする前に最終チェックする

ファイルを開き、最初から最後まで一度確認します。その後、以下をチェックします。

• フックは 0.8秒までに完全に表示されていますか？
• キャプションは、視聴されるサイズで読みやすいですか（スマートフォン、音声なし）？
• 画面下部の320pxに重要なものがありませんか？
• 最後にCTAが画面に1.5秒以上表示されていますか？
• 全体の長さは9〜22秒ですか？

いずれかのチェックに失敗した場合は、編集して再レンダリングします。上記のいずれかに失敗する動画を公開しないでください。

9. （任意）TikTok Adsに引き継ぐ

ユーザーがこれをオーガニック投稿ではなく、有料のインフィード広告として配信したい場合は、TikTok Ads MCPを使ってキャンペーンの基本構成を設定します。自動で公開してはいけません。

tiktok_ads__tool_list_advertisers
tiktok_ads__tool_get_pixels(advertiser_id)              # confirm tracking
tiktok_ads__tool_create_campaign(...)                   # objective: TRAFFIC or VIDEO_VIEWS, status: DISABLE
tiktok_ads__tool_create_ad_group(...)                   # placement: TIKTOK only; daily budget; status: DISABLE
# Upload the rendered MP4 manually in TikTok Ads Manager — the MCP doesn't currently
# upload creatives. Then:
tiktok_ads__tool_create_ad(...)                         # status: DISABLE

すべてのエンティティはDISABLEの状態で作成します。概要を出力し、クリエイティブを確認した後、TikTok Ads Managerで有効にするIDを正確にユーザーに伝えます。

オーガニック投稿の場合は、launch.mp4を渡し、TikTokアプリからアップロードするよう伝えます（オーガニック投稿はAPIに対応していません）。

出力形式

完了したら、以下を出力します。

1. レンダリングしたMP4のパス
2. 使用したビートシート（ユーザーが反復して改善できるように）
3. 動画の長さ、選択したフォーマット、アスペクト比を1行でまとめたもの
4. （該当する場合）DISABLE状態で作成したTikTok Adsのキャンペーン／広告グループ／広告ID

よくある間違い

1. 16:9の映像を9:16に引き伸ばす — 撮り直すか、HyperFramesのオーバーレイを使用します。引き伸ばしてはいけません。
2. ロゴのイントロ — TikTokでは、テレビ広告のように見えるものは評価されません。最初のフレームからフックを見せます。
3. キャプションなしのナレーション — TikTokの視聴の80％以上はミュート状態です。キャプションがなければ、動画は存在しないも同然です。
4. ありきたりなCTA — 「詳しくはこちら」はTikTokでは効果がありません。視聴者が次に何をすればよいか、具体的に伝えます。
5. 過剰なレンダリング — 4Kで出力しても違いはありません。いずれにせよTikTokで約720pに再圧縮されます。
6. CTAを最後だけに配置する — その時点で視聴者の半数は離脱しています。再生時間の約60％の時点でもオファーを繰り返します。

関連項目

• /reddit-launch-video — Redditに適した形式で同じパターンを使用します
• /linkedin-launch-video — LinkedIn向けです
• /video-to-gif — レンダリングしたMP4をフィード用GIFに変換します
• /ad-copy-writer — 動画と一緒に掲載する見出し／キャプションを作成します