mcpField
H
hyperframes-ad-director

hyperframes-ad-director

github.com/onewave-aiマーケティング・グロース393155 回インストール1 週間前に更新
リポジトリ

hyperframes-ad-director について

広告ブリーフから、フック、台本、絵コンテ、シーン HTML を含むレンダリング可能な HyperFrames 動画を組み立てるクリエイティブディレクション用スキルです。広告制作において、構成、メディア処理、レンダリングの各スキルを連携させます。

主な機能

  1. 01冒頭のフック案を3つ作成
  2. 02簡潔な広告台本と絵コンテを作成
  3. 03時間指定付き HyperFrames シーンを構成
  4. 04同期字幕、モーション、トランジションを追加
  5. 05検証、プレビュー、各媒体向けカットを準備

活用シーン

  1. 01短尺のソーシャル動画広告を制作
  2. 02YouTube のプレロール動画を作成
  3. 03正方形、縦型、横型の版を準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/onewave-ai/claude-skills --skill hyperframes-ad-director

インストール後、Claude Code で/hyperframes-ad-directorを入力して読み込まれたか確認します。

詳細

HyperFrames 広告ディレクター

オファーを用意すれば、このスキルが広告を演出します。ブリーフを受け取り、曖昧なコンセプトではなく、スクロールする手を止めるフック、引き締まった台本、ストーリーボード、HyperFrames のレンダーパイプラインに接続されたシーン HTML を備えた、実際にレンダリング可能な HyperFrames コンポジションを作成します。

このスキルは制作全体を統括します。コンポジション、キャプション、トランジション、TTS の作成方法については、hyperframes スキルを呼び出してください（init／lint／preview／render には hyperframes-cli、ボイスオーバー／背景除去には hyperframes-media を使用します）。クリエイティブディレクションと、最初から最後までの組み立てはこのスキルが担当します。

ステップ 1 — ブリーフを受け取る

次の情報を確認するか、依頼してください。

  • 製品／オファーと、代替案より優れている点を一つ。
  • オーディエンス — 利用可能であれば、icp-deep-scanner の出力からバイヤーペルソナを読み込み、実在する見込み客に響くフックにします。
  • 一つのアクション — 視聴者にしてほしいこと（訪問、登録、予約、購入）。
  • プラットフォームと長さ — TikTok／Reels／Shorts（縦型 15～30 秒）、YouTube プレロール、SNS 広告、ヒーローループ。
  • ブランド — 色、書体、ロゴ、トーン。claude-design-system-architect のトークンセットがあれば、ビジュアルの一貫性を保つために再利用します。

ブランドルールを守ってください。ブランドキットで明示的に指定されていない限り、ビジュアル出力に紫色や絵文字を使わず、ブランド独自のパレットとすっきりしたアイコンを優先します。

ステップ 2 — クリエイティブを作成する

  1. フック（最初の 1.5 秒） — スクロールを止めるセリフやビジュアルです。3 つの案を作成してください。フックは広告の 80％を左右するため、ここに最も力を注ぎます。
  2. 台本 — フック → 問題 → 転換 → 根拠 → オファー → CTA の順に、ビートごとに作成します。話し言葉として無駄なく、役割のない言葉はすべて削ります。
  3. ストーリーボード — シーンの表を作成します。タイムコード、画面上のビジュアル、画面上のテキスト、VO のセリフ、動き／トランジションを記載します。

ステップ 3 — コンポジションを作成する

HyperFrames プロジェクトのひな型を作成し、内容を記述します（hyperframes／hyperframes-cli スキルを使用）。

  • ストーリーボードの各ビートに対応するシーンブロックを一つずつ作成し、台本に合わせてタイミングを設定します。
  • キャプションを VO に同期させます（SNS 動画の多くはミュートで視聴されるため、キャプションは必須です）。
  • メッセージを引き立てる動きを付けます。フックでは登場の動き、根拠では強調、CTA ではすっきりとした静止表示にします。HyperFrames のルールに従い、シークしても安全な決定論的アニメーションにしてください。
  • ビート間に、テンポに合ったトランジションを設定します（勢いを出すなら高速カット、プレミアム感を出すなら滑らかな切り替え）。
  • ボイスオーバー — HyperFrames のメディアパイプライン（または、ユーザーが希望する場合はニューラル音声を使った edge-tts）で生成し、キャプションとタイミングを合わせます。

完了とする前に、Lint とプレビューを実行してください（npx hyperframes lint ／ preview）。パイプラインを実行せずに、レンダリングできると主張してはいけません。

ステップ 4 — 各バージョンを書き出す

ブリーフに必要なプラットフォーム別バージョンを作成します。9:16 縦型、1:1 正方形、16:9 です。プラットフォームごとの調整があれば記載します（縦型では親指を止めるフックの構図にし、プレロールでは最初の 5 秒以内にブランドを見せます）。

ステップ 5 — 納品する

# Ad: {Product} — {platform}
- Hook options (3) + chosen
- Full script
- Storyboard table
- Composition path + render command
- Platform cuts produced
- Suggested A/B (hook variant to test)

メディアに予算を投じる前に、prospect-panel-simulator を使ってフックと台本をストレステストすることや、hyperframes-sales-demo-builder で長尺のデモを作成することを提案してください。

ガードレールのまとめ

フックに最も力を注ぐ · キャプションは常に付ける（ミュートでの自動再生） · ブランドキットを再利用し、ブランド指定がない限り紫色や絵文字は使わない · 完了とする前に Lint とプレビューを実行する · 実在するペルソナに基づいたメッセージにする

コメント

Markdown 対応