brand-launch-video-star

ブランドローンチ動画スター

汎用的なモーションテンプレートではなく、本物らしいローンチ映像を制作します。ブランドを検証し、製品に特化したストーリーを伝え、正確なアセットと再現性のあるモーションで、洗練されたテンポの速いシーケンスをレンダリングします。

リリースを妨げる要件

1. 本物のアセットを使用します。 ロゴ、ワードマーク、製品、インターフェイス、マスコット、パッケージ、人物、ブランドシーンを、決して創作、描き直し、近似、トレース、生成しないでください。
2. ロゴを正確に再現します。 現行の公式ファイルをダウンロードするか、ユーザーのオリジナルを使用します。ワードマークを文字組みしたり、CSS／SVG のプリミティブでロゴを再構築したりしないでください。
3. アップロードされた素材以外も調査します。 アップロード素材は利用可能なソース素材として扱い、アセットの上限とは見なしません。ストーリーに必要であれば、公式素材やライセンス素材を追加で探します。
4. 製品を見せます。 実際の機能、操作、利用シーン、出力、根拠を示します。抽象的な効果で、製品の弱いストーリーを隠さないでください。
5. 英語をデフォルトにします。 明示的に求められた場合に限り、別の言語を使用します。
6. モーションを再現可能にします。 すべての状態をフレーム／時間と明示的な入力から計算します。レンダリング順序やシードのない乱数に依存してはいけません。
7. 主張を検証します。 現行の名称、機能、指標、スローガン、CTA を公式情報源で確認します。

アイデンティティを示すアセットを認証できない場合は、作業を中止し、使用許可のあるオリジナル素材を求めてください。もっともらしい代替物をレンダリングしてはいけません。

プロシージャルグラフィックスは、マスク、グラデーション、色面、グリッド、グロー、パーティクル、軌跡、タイポグラフィ、検証済みデータのチャート、トランジション用の幾何学形状など、表象を目的としないモーションレイヤーに限って使用します。

クイックスタート

スキルをインストールします。

npx skills add vibe-motion/skills

具体的なブリーフを指定して呼び出します。

Use $brand-launch-video-star to create a 15-second 16:9 English launch film
for https://example.com. Research official assets, show the core product
workflow, and deliver a Vibe Motion/Remotion MP4 plus provenance files.

ユーザーがすでに使用している Vibe Motion または Remotion プロジェクト内で作業します。プロジェクトがない場合は、npx create-vibe-motion で Vibe Motion プロジェクトを初期化し、生成されたプロジェクト独自のインストールおよびレンダリングコマンドに従います。

実装に取りかかる前に、次の手順を実行します。

1. references/asset-manifest.example.json をプロジェクトにコピーし、すべてのサンプル値を置き換えます。
2. references/timeline.example.json をプロジェクトにコピーし、尺とショットに合わせて調整します。
3. 両方のファイルを検証します。

node <skill-dir>/scripts/validate-assets.mjs path/to/asset-manifest.json
node <skill-dir>/scripts/validate-timeline.mjs path/to/timeline.json

同梱のマニフェストテンプレートを確認する場合に限り、--schema-only を使用します。

node <skill-dir>/scripts/validate-assets.mjs \
  <skill-dir>/references/asset-manifest.example.json --schema-only

ワークフロー

1. ブリーフを明確にする

次の項目を確認します。

• 会社／製品と公式 URL
• 製品またはキャンペーンの焦点
• 視聴者と配信先
• 尺。デフォルトは 15 秒で、通常は 15～30 秒に対応します
• アスペクト比。デフォルトは 16:9 です
• 言語。デフォルトは英語です
• 必須の主張、CTA、免責事項の要否
• 提供されたアセットをユーザーが所有しているか、公開できるか

映像の内容を大きく左右する質問だけをします。

2. ブランドの事実確認シートを作成する

最新の公式情報源を調査し、次の情報を抽出します。

• 正確なロゴのバリエーションと使用方法
• 公式フォントまたはウェブフォント
• メインカラー、サブカラー、ダイナミックカラー
• ブランドの原則、トーン、ビジュアルモチーフ
• 現行の製品名、機能、利用シーン、指標、CTA
• 公式の写真、レンダリング、UI スクリーンショット、映像、プレス素材、メディアキット

次の順に優先します。

1. ユーザー提供のオリジナル
2. 会社のウェブサイト、静的バンドル、ニュースルーム、ブランドポータル、メディアキット、公式リポジトリ
3. 会社が管理するメディアライブラリ
4. ライセンス済みストック素材または許可を得たパートナーキット

アセットを取得する前に、references/asset-authenticity.md を読んでください。

3. アセットマニフェストを作成する

アイデンティティを示すアセットをすべて asset-manifest.json に記録します。

• 安定した ID と役割
• ローカルパス
• 正確なソース URL
• ソースの種類
• 公式の検証ページ／ファイル
• 権利／ライセンスに関する注記
• 認証ステータス
• 任意の SHA-256 チェックサム

バリデーターは、マニフェストの構造、宣言された出所、ローカルファイルの存在、任意のチェックサムを確認します。使用権を独自に付与したり、リモートソースが真実であると証明したりするものではありません。公式情報源との照合は手作業で行ってください。

検証が失敗している状態で、最終レンダリングを開始しないでください。

4. ストーリーの軸を選ぶ

簡潔な方向性を2～3案提示し、1案を推奨します。

• AI/SaaS： 意図 -> 思考／計画 -> 機能 -> 実行 -> 出力 -> 裏付け -> ロゴ
• 物理的な製品： ヒーローショット -> インタラクション -> 機能のマクロ撮影 -> 使用シーン -> 結果 -> ロゴ
• サービス／企業： 背景 -> プロセス -> 根拠 -> 成果 -> 約束 -> ロゴ
• 画像主導のブランド： 本物の画像 -> 視覚的なモチーフ -> メリット -> 感情的な満足感 -> ロゴ

尺のパターンについては、references/story-patterns.mdを参照してください。

5. フレームを正確に計画する

プロジェクトで別の指定がない限り、30fpsを使用します。すべての境界を整数のフレームに変換します。

15秒の場合は主要なビートを5～8個、30秒の場合は8～12個を目安にします。各ビートについて、以下を指定します。

• 開始／終了フレーム
• ビジュアルの主役と実際のアセットID
• 主なアクション
• 予備動作、動作の決定、インパクト、制動、収束
• コピーと読み取れるホールド時間
• 色の状態
• 入り／出のトランジション

連続性が保たれる場合は、6～12フレーム重ねます。ひとつのショットが速度を担い、次のショットが到達点を担います。

6. 強度をコントロールしながら高める

• 製品の動き、カーソルの軌跡、光、スクロールするコンテンツ、オブジェクトの輪郭、または形状を合わせた動きでトランジションを導きます。
• コントラストの強い意図的な色の状態を2～5種類使います。
• 各ビートの主なアクションはひとつにし、副次的なレイヤーは2～6フレーム遅らせます。
• エネルギーの高いピークを2～3回作り、その合間に落ち着いた制動の瞬間を設けます。
• シルエット、コピー、ロゴのクリアスペースを読みやすく保ちます。
• それらしく見せるだけのHUD、根拠のないガラス風カード、飾りのテキストの壁、未検証の指標、すべて同じイージングを避けます。

実装前にreferences/motion-quality.mdを参照してください。

7. 因果関係を示す

少なくともひとつ、読み取れる流れを含めます。

user intent -> product action -> system response -> useful output

AI製品の場合：

prompt -> planning -> parallel capabilities -> generated result -> proof

実際のUIキャプチャ、録画、ソースコード、または公式に提供されたスクリーンショットを使います。実際のUIを利用できない場合は、コンセプトであることが明確な抽象的な動きを使います。ブランド化されたインターフェースを捏造し、実物として提示してはいけません。

8. 実装してレンダリングする

Remotionの場合：

• state = f(frame, fps, inputs, constants)を定義します。
• ショットの境界は、ひとつのタイムライン／定数モジュールにまとめます。
• 手続き型の変化には、安定したIDを使ってシードを設定します。
• 速度を算出するときは、小数値を保持します。
• 画像の寸法とアスペクト比を明示します。
• 作業中も以前のコンポジション／出力を保持します。

プロジェクトのローカルCLIを優先します。一般的な確認およびレンダリングのコマンドは次のとおりです。

pnpm exec remotion compositions <entry-file>
pnpm exec remotion render <entry-file> <composition-id> out/launch-film.mp4

既定のプレビュー：

• 1920x1080
• 30fps
• H.264 MP4
• 指定された正確な尺
• V1はビジュアルを優先し、サウンドは依頼された場合、または利用できる場合のみ追加

9. 検証する

• アセットマニフェストとタイムラインの検証を実行します。
• コンポジションの検出／ビルドと、対象を絞ったlint／型チェックを実行します。
• メディアの尺、フレームレート、寸法、ファイルの整合性を確認します。
• 代表的なフレームとレンダリング全体を確認します。
• ペース、明瞭さ、インパクト、信頼性、滑らかさについて、タイムコード付きのフィードバックを求めます。

10. 出典情報を添えて納品する

以下を提供します。

• レンダリング済みの動画
• コンポジション／ソースのパス
• 正確な仕様と尺
• アセットマニフェスト
• ブランド／製品の出典リンク
• 権利／免責事項
• バージョン識別子

この動画が非公式のコンセプトである場合、および商用公開に許可が必要な場合は、その旨を明記します。

問題発生時の対処

• ロゴが違う： 削除し、最新の公式ファイルを見つけて出典を記録し、再レンダリングします。
• 製品／UIが偽物のように見える： 公式、ユーザー提供、またはライセンス取得済みのメディアに置き換えます。模倣をさらに改善してはいけません。
• 速いが混乱している： 同時に行うアクションを減らし、ビジュアルの主役を定め、カットをまたいで動きの対応関係を保ちます。
• 美しいがありきたり： 一連の製品インタラクション、検証済みの主張、実際の出力を加えます。
• 滑らかだが遅い： ホールド時間を短くし、トランジションを重ね、重要なメッセージの前後でのみ制動します。
• アセットが利用できない： 使用許可のあるオリジナル素材を求めます。推測で補ってはいけません。