mcpField
H
hyperframes-explainer-builder

hyperframes-explainer-builder

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

hyperframes-explainer-builder について

製品資料から解説動画の台本とレンダリング可能な HyperFrames 構成を作るスキルです。物語、シーン、出力形式を組み立て、主張や製品画面を資料に沿わせます。

主な機能

  1. 01資料から製品のストーリーを抽出
  2. 0260～90秒の解説台本を作成
  3. 03製品の成果に沿ったシーン設計
  4. 04HyperFrames 構成の作成
  5. 05横長・正方形・短尺版の納品

活用シーン

  1. 01製品サイトから解説動画を作成
  2. 02インタビューや説明を動画に構成
  3. 03広告やメール用の短尺版を準備

インストール

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

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

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

詳細

HyperFrames 解説動画ビルダー

どの製品にも、「これは何で、なぜ気にする必要があるのか」を75秒で伝える答えが必要です。しかし、多くのチームはこれを省くか、制作会社に数万ドルを支払って依頼しています。このスキルは、手元にあるあらゆるソース資料から、実際にレンダリングできる解説動画を制作するための指針となります。ストーリー構成と組み立てを担い、コンポジションの仕組み、キャプション、トランジション、TTSはhyperframesスキル（init／lint／preview／renderにはhyperframes-cli、ナレーションにはhyperframes-media、視覚的に調査するソースがサイトの場合はwebsite-to-hyperframes）が担当します。

ステップ 1 -- ストーリーを抽出する

URL（取得して内容を読む）、ドキュメント、またはインタビューから、対象者、導入前のつらい状況、製品がもたらす成果（機能ではなく成果）、それを裏付ける2～3個の機能、そして取ってほしいアクションを把握します。ソース資料で価値提案が専門用語に埋もれている場合は、スクリプトで解消します。Aboutページに書かれていることではなく、顧客が実際に口にする言葉で書きます。

ステップ 2 -- スクリプトを書く

解説動画の流れは、心地よいナレーションで60～90秒となる約150～190語です。

  1. コールドオープン（0～5秒） -- 視聴者が不満を口にする言い方で、問題を提示します。ロゴのイントロは不要です。ロゴが出るのを待ってくれる人はいません。
  2. 転換（5～15秒） -- 製品名を一度だけ出し、1文で解決策として位置付けます。
  3. 仕組み（15～55秒） -- 最大3つの要点に絞ります。それぞれの機能を成果として表現し（「請求書が自動で督促される」など）、説明シーンを付けます。
  4. 根拠（55～70秒） -- 数字を1つ、または引用を1つ。長々と並べないでください。
  5. CTA（70～85秒） -- 取ってほしいアクションを1つに絞り、音声と画面の両方で伝えます。

公開前にすべての文を声に出して読みます。解説動画のナレーションでは、書き言葉のぎこちなさがすぐに露呈します。

ステップ 3 -- コンポジションを構築する

  • 要点ごとにシーンを作成します。問題や転換には、文字のアニメーションとシンプルな図の動きを使います。「仕組み」には製品 UI のシーンを使います。ソースに応じて、HTML で見やすくブランドに一貫した UI を再構築するか、意図を持ってスクリーンショットをパンします。
  • 動きは理解を助けるために使います。一度に動かすアイデアは1つにし、ナレーションの説明に沿ったカーソルやフローのアニメーションを使い、根拠を示す場面では数値をカウントアップします。HyperFrames のルールに従い、動作が決定論的で、シークしても崩れないようにします。
  • ブランドトークンを尊重します（design-style-installerや既存のトークンセットを再利用し、紫と絵文字は使いません）。音声なしで見ても分かるようにキャプションを同期し、メディアパイプラインでナレーションを作成します。フルトラックをレンダリングする前に、音声の選択肢を2つ提示します。
  • 完了とする前にリントとプレビューを実行します。パイプラインを実行せずに、レンダリングできると主張してはいけません。

ステップ 4 -- 納品する

メイン版（16:9）、正方形のソーシャルメディア版、広告やメールへの埋め込み用の30秒版（オープニング＋最も優れた機能＋CTA）を用意します。ポスターフレームと、埋め込み方法に関する1行の推奨事項（ホームページではキャプション付きのミュート自動再生）も含めます。

ルール

  • 機能より成果を優先し、要点は最大3つにします。すべてを説明する動画は、何も説明していません。
  • 主張の根拠はソース資料に置きます。スクリプトで、存在しない数字、顧客、製品機能を作り上げてはいけません。
  • 業界の言葉ではなく、視聴者の言葉を使います。サイトに「ワークフローオーケストレーション」と書かれていても、顧客が「フォローアップを代わりにやってくれる」と言うなら、スクリプトでは後者を使います。
  • 90秒は上限であり、目標ではありません。苦しくなるまで削り、プレビューします。
  • 表示する UI は、トライアル利用者が見て製品だと分かる程度に、現行の実態と一致させます。

クイックコマンド

  • 「[URL]から解説動画」-- Webサイトを使った一連のワークフロー
  • 「この説明から解説動画」-- まだサイトがない場合のインタビュー中心の制作
  • 「スクリプトだけ」-- 制作に進む前に、ステップ1～2を承認用に実施
  • 「30秒版に編集」-- 既存の動画から短縮版を作成

コメント

Markdown 対応