Communitygithub.com

ローンチ動画:ナレーション入り・ビート同期の Remotion 本編+各尺カット

Remotion を使い、30〜75秒のモーションデザイン・ローンチ動画をコードで企画・制作します。ヒアリング、絵コンテ、プロダクト画面の React コンポーネント化、台本と1行ずつの AI ナレーション、全カットをビートに合わせた音楽、キネティックタイポ、レビュー、レンダリング、サムネイル、16:9/1:1/9:16 の SNS 用カットまで。

ローンチ動画:ナレーション入り・ビート同期の Remotion 本編+各尺カット とは?

「ローンチ動画」レシピ ステップ2(ナレーション入り本編と全フォーマット)、harish-anumula/launch-video-skill より。Claude Code、Codex、SKILL.md を読んでシェルを実行できる任意のエージェントで動作。少数の質問のあと構成(課題→証明、コールドオープン、主要フロー、ビフォー/アフター、ティーザー)を提案し、架空データで画面をキャプチャ、単語タイミング付きでナレーションを1行ずつ収録して文字起こし一致度でベストテイクを選定(vo_lines.py、vo_pick.py)、音楽を解析してビートに合わせたタイミングを生成(music_qa.py、build_timing.py)し、シーンとカット版をレンダリングします。

対応✓Claude Code✓Codex CLI✓Cursor
npx skills add harish-anumula/launch-video-skill

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Launch video(ローンチ動画)

あなたは短いローンチ動画をエンドツーエンドでディレクション・制作します。発見質問 → ストーリーボード → 製品画面キャプチャ → スクリプトとナレーション → 音楽 → Remotionシーン → レビュー → レンダリング → サムネイルとカットダウン。人間はセンスと製品知識を提供し、AIはパイプラインとクラフトを担当します。以下の質問をし、それ以外のすべての決定は自分で行い、選択した内容を伝えてください。

ここにあるものはすべて汎用的です。製品自身のブランド、画面、APIキー、音楽ライセンスを持ち込んでください。

インストール(任意のエージェント)

  • Claude Code: このフォルダを ~/.claude/skills/launch-video/(個人用)または <repo>/.claude/skills/launch-video/(プロジェクト用)にコピーします。
  • Codex: ~/.codex/skills/launch-video/ にコピーするか、AGENTS.md から SKILL.md を参照します。
  • その他のエージェント: 任意の場所に配置し、エージェントに最初に SKILL.md を読むよう指示します。パス、バージョン、APIは時間とともに変化します。コマンドやAPIの形状が変わった場合は、現在のドキュメントを確認して適応し、停止しないでください。

このスキルに含まれるもの

パス説明
references/storyboard-template.mdストーリーの型、フックの種類、参考動画の使い方、ビートシート、機能ビートレシピ
references/visual-catalog.md視覚的な構成要素、それぞれの表示内容、各製品・機能に適したもの
references/motion-cheatsheet.mdイージング、スプリング、ペーシング、スタイルファミリーとタイプ、トランジション、UI上のカメラ、テクスチャ、カーソル
references/audio.mdナレーション vs 音楽、TTSと音楽APIの形状、ミキシング、ラウドネス
references/review-checklist.mdシーンごと、フルカット、共有前のチェック項目
references/gotchas.md障害モードとその修正方法
scripts/参考分析、音声ランキング、ラインごとのVOと単語タイミング、テイク選択、音楽生成/QA/オプション/ストレッチ、ビートスナップタイミング、コンタクトシート、ファイナライズ
template/Remotionスターター: ブランドトークン、タイミングヘルパー、キネティック見出し、カーソル、グレイン、HUD、ロゴ組み立て、汎用Hook/Reveal/Feature/Payoff/End/Thumbnailシーン、ビジュアルライブラリ、Catalogプレビュー、video.config.tsx(コード上のストーリーボード)

ツール

  • Node 20+、ffmpeg、Python 3.11(uv/uvx経由、スクリプトは依存関係を自己宣言)。
  • Remotion: npx create-video@latest --yes --blank --no-tailwind video。公式エージェントスキルをインストール(npx skills add remotion-dev/skills)し、シーンを書く前に remotion-best-practices を読んでください。
  • オプション: rubberband(クリーンなタイムストレッチ)、demucs と Whisper(uvx経由、分析とQA)、ElevenLabs(または他のTTS/音楽)アカウント。
  • ライセンス: Remotionは個人および3人以下の企業には無料。大企業はRemotionの企業ライセンスが必要です。TTS/音楽プロバイダーの商用利用条件を確認してください。サードパーティのロゴは商標です。実際のインテグレーションのみに表示してください。

1. 発見質問(計画前に質問する)

一度にまとめて質問します(クライアントが質問/多肢選択ツールを持っている場合はそれを使い、そうでなければ短い番号付きリスト)。各質問に推奨デフォルトを提示し、相手が確認するだけで済むようにします。

  1. 製品: 表示されるべき正確な製品名、および何をするのか誰のためのものか一文。
  2. 視聴者と目標: 誰が見るか(顧客、見込み客、投資家、社内チーム)と、視聴後に何をすべきか(サインアップ、デモ予約、機能を試す)。
  3. 表示するもの(優先順位順): 最も重要な3~6の機能や瞬間。画面時間はこの順序に従います。
  4. 長さとフォーマット: 例:45~75秒のメインカット(16:9)。カットダウン(15~20秒、1:1、9:16)と投稿先。
  5. サウンド: ナレーション+音楽(製品説明が必要な場合に推奨)、または音楽のみ。音声の好み(性別、アクセント、エネルギー)、または「この例に合わせて」。
  6. ストーリーとルック: ストーリーの型とフックの種類(references/storyboard-template.md 参照。理由とともにおすすめを提示)、ライト/ダーク、スタイルファミリー(プロダクトネイティブ、エディトリアル、ショーリール、プレイフル、シネマティック。references/motion-cheatsheet.md 参照)、好きな動画があればそれ。ブランドアセット: ロゴ(SVG)、色、フォント、またはそれらを読み取れる場所(製品のCSS)。
  7. 画面: デモアカウントと架空データで製品を実行できるか、それともスクリーンショットを提供してもらうか。表示してはいけないもの。
  8. エンドカード: CTAテキストとURL。ローンチ日/「現在ベータ版」などの文言。
  9. キー: TTS/音楽APIキーの保存場所(環境変数または .gitignore された .env)。チャットにキーを貼り付けさせないでください。

すでに答えてもらった質問は再度聞かないでください。

2. ストーリーボードを計画する

  • references/storyboard-template.md からストーリーの型とフックの種類を選択します(問題→製品→証明は一例にすぎません)。機能ビートは優先順位に従います。
  • 相手が参考動画を共有した場合、そのクラフト(ペーシング、カット、カメラ、タイプ)を借用しますが、セリフ、オープニング、シーケンスは決して借用しません。録音前にスクリプトを参考動画のトランスクリプトと照合してください。
  • ナレーションはシーンごとに短い1行で書きます(約2.5語/秒。60秒で約140語)。各行はそのシーンの視覚的瞬間に合わせます。
  • 各機能ビートについて、references/visual-catalog.md から この 製品に合うビジュアルを選びます(モバイルアプリなら Phone → Steps → Notifications。開発ツールなら ComposerAnswer → BeforeAfter → Device)。連続するビート間で動きを変えてください。
  • ストーリーボードを短いテーブルで共有し、構築前に確認をもらいます。

3. 製品をキャプチャする

  • デモアカウントと架空データで製品を実行します。実際の顧客、同僚、メールアドレス、本番データは決して表示しないでください。
  • ストーリーボードで使われるすべての画面の参考スクリーンショットをキャプチャします(Playwright、2x DPR)。表示されている正確なコピーを記録します。それらの画面を Device/Phone/カード内の簡略化されたReactコンポーネントとして再構築し、鮮明でアニメーションするようにします。再構築の価値がない場合は、実際のスクリーンショットを Device/Phone に直接入れます。
  • 状態を正直に再現できない場合は、スタイライズしてその旨を伝えます。

4. ナレーション(選択した場合)

  • 行を config/script.json に配置します。scripts/vo_lines.py は各行につき3テイクを単語タイミング付きで生成します。scripts/vo_pick.py は転写一致(および参考音声が指定されている場合は類似性)に基づいて最良のテイクを選択します。
  • 各行ごとに生成し、スクリプト全体を一度に生成しないでください。ワンパス読み上げは行をまとめてしまい、各ラインをカットに合わせて開始できません。
  • ストック/プリメイドの音声を使用します。例の音声に似せるには、scripts/voice_match.py でストック音声をランク付けします。同意なしに実在の人物をクローンしないでください。

5. 音楽

  • 3~4のインストゥルメンタルオプションを生成するか(scripts/music.py)、トラックをライセンスします。A/B/C/Dの抜粋ファイルを作成し(scripts/music_options.sh)、相手に聞いて選んでもらいます。
  • 選択されたトラックを測定します(scripts/music_qa.py)。生成されたトラックは要求されたテンポやセクションに従うことはほとんどないため、検出されたビートにカットをスナップします(scripts/build_timing.py)。自然なエンディングが適切な場所にない場合は、数パーセントタイムストレッチします(scripts/stretch_music.sh)。

6. 構築

  • テンプレートをセットアップし(template/README.md)、ブランドトークン、ロゴ、CTAを設定し、ストーリーボードを video.config.tsx に記述します。
  • VOが存在する前は、scripts/draft_timing.py がアニマティックタイミングを提供し、シーンを構築できるようにします。VO後は、build_timing.py が実際の単語タイミングに置き換えます。
  • 一度に一つのシーンを構築します。各シーン後、ハーフスケールで6~10枚の静止画をレンダリングし、コンタクトシートとして確認します(scripts/sheet.py)。
  • StyleTest コンポジション(フック、リビール、最初のフィーチャー)をレンダリングして送信し、残りを構築する前に承認を得ます。

7. レビューと反復

  • フルカットをレンダリングし、scripts/finalize.sh(-14 LUFS、カバーアート、1 fpsコンタクトシート、最終ミックスの転写)を実行し、references/review-checklist.md をチェックします。
  • 各修正ラウンドでは、要求されたものだけを変更し、再レンダリングし、前のバージョンから何が変わったかを正確に伝えます。各バージョンをコミットします。
  • リアルタイムで視聴することはできません。実行したチェック(静止画、転写、ラウドネス)を伝え、共有前に一度視聴するよう依頼します。

8. 納品

  • マスター: 1920×1080、30 fps(高密度UIモーションの場合は60 fps)、H.264 CRF 16–18、AAC 256k、-14 LUFS、-1 dBTP。
  • サムネイル: Thumbnail コンポジション(約360px幅で判読可能)。動画のフレーム0(多くのアプリは最初のフレームをプレビューします)およびMP4カバーアートとしても機能します。カスタムサムネイル用のプラットフォーム向けにPNGと1280×720 JPGをエクスポートします。
  • カットダウン(要求された場合): 15~20秒のフックカット、1:1と9:16(UIの上にスタックタイプ)、サイレントウェブループ、VO単語タイミングからのSRTキャプション。

解説動画とソーシャル動画

同じパイプラインで、LinkedInやX向けの短い解説動画(ブログ記事、論文、機能、アイデア)も制作できます。変更点は以下の通りです:

  • 事実はソースから、全文を読んで取得。 Webフェッチツールによる要約は数値を捏造したり統合したりする可能性があります。スクリプト作成前に、原文から事実確認リストを作成してください。
  • 専門家以外にもわかるスクリプトに。 画面ごとに一つのアイデア、せいぜい約10語の大きな単語、コアコンセプトに対する日常的な類推(例:評価は「本番テスト vs 模擬テスト」)、専門用語やモデル名はなし、四捨五入された数値はせいぜい二つまで。最後に視聴者ができること。 「正確だが技術的すぎる」が最初の指摘として最も多いでしょう。
  • ペーシング: 各画面のコンテンツは約1秒以内に収まり(高速エントランス、ビートに合わせた約0.12秒のクイックカット)、その後読み取りのために4~5秒保持します。テンプレートでは、シーンを SpeedCtx.Provider value={1.6} でラップすると、リタイミングせずに作成者のエントランスを高速再生できます。
  • フォーマット: LinkedIn/Xのフィードには4:5(1080×1350)、30~50秒、音楽のみ。画面上のテキストがキャプションです(ほとんどのフィード動画はミュートで視聴されます)。フレーム0は完成済みのカバーです。
  • ルック: 相手の既存のビジュアルアイデンティティ(カルーセル、サイト)に合わせ、製品テンプレートには合わせません。
  • 音楽: ソーシャル向けには、スムーズなアンビエントトラックよりも、パンチの効いたドラム主体の製品広告トラック(明確なキック、スネア、クラップ、深いベース、ビート1で開始)が通常効果的です。3つのオプションを生成し、相手に聞いて選んでもらいます。同じテンポのトラックは同じビートグリッドを共有できます。
  • 投稿と一緒に納品: 投稿コピー、リンク配置、タグ、代替テキスト、カバー、および相手自身のオーディエンス分析(フォロワーの場所、ネットワークが起きている時間)に基づく投稿時間。

ルール

  • 画面上は架空データのみ。同意なしに実在の人物を表示しない。
  • 製品が持っていない数値や機能を主張しない。「何百もの…」や統計は実際に存在し承認されていることを確認する。
  • オリジナルのコピーを書く。他の動画のフック、キャッチフレーズ、タグラインを再利用せず、すべての動画で一つの形式に固執しない。
  • ブランドパレットに留まる。突然パレット外のシーンが出るとグリッチに見える。
  • ペイオフラインの下に音楽を保つ(優しいディップ、ほぼ無音にはしない)。
  • サードパーティのロゴには公式マークを使用し、近似値は使わない。

関連スキル