hyperframes-product-launch-video について
hyperframes-product-launch-videoは、Hyperframesを使った製品ローンチ動画の企画・制作を案内するスキルです。ブランド分析から演出、動き、音響、検証までを構成し、成果物は指定のプロジェクトフォルダーに保存します。
主な機能
- 01Webサイトからブランド情報を抽出
- 02演出資料でシーンを計画
- 03HyperframesとGSAPの実装を案内
- 04効果音の準備リストを作成
- 05合成やレンダリングの問題を確認
活用シーン
- 01ブランド素材を基にローンチ動画を企画
- 02HTML作成前にストーリーボードを準備
- 03スキルフォルダー外に動画プロジェクトを整理
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/hyperframes-product-launch-videoを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
ART_DIRECTION.mdREADME.mdreferences/camera-and-easing-math.mdgotchas.mdmotion-design-patterns.mdscripts/extract_site_dna.jspackage.jsonscaffold_project.js詳細
製品ローンチ動画スキル
このスキルでは、Hyperframes を使用して、ハイエンドでプレミアムな製品ローンチ動画を作成する方法を説明します。ブランドの把握から最終確認まで、体系的なワークフローを重視しています。
公式 Hyperframes スキルの活用
このスキルは、動画プロジェクトのディレクター兼アーキテクトとして機能します。技術的な正確性を確保し、最新のフレームワークのパターンを利用するため、公式の Hyperframes スキルと併用する必要があります。
コードを書く前に、次の操作を行ってください。
- 公式の /hyperframes スキルを呼び出し、コンポジションのルール、データ属性のセマンティクス、フレームワークの制約を確認します。
- 公式の /gsap スキルを呼び出し、タイムラインの詳細、イージング関数、複雑なアニメーションパターンを確認します。
このスキルによる戦略的なガイダンスと、公式スキルの技術ドキュメントを組み合わせることで、実運用に適した動画コンポジションを作成できます。
ステートレスなプロジェクト生成（重要）
このディレクトリ（hyperframes-product-launch-video）は、読み取り専用のテンプレートおよびスキルフォルダーです。ここにプロジェクト固有のファイルを書き込んではいけません。
新しい動画プロジェクトを作成する際は、必ず次のようにしてください。
- ターゲットディレクトリ：すべてのプロジェクトファイルを、ユーザーが指定した動画プロジェクトのフォルダー（例：
my-new-video/またはmy-new-video/assets/）に作成します。 - プロジェクトの DNA：
brand_dna.jsonを、ターゲットプロジェクトのassets/またはルートフォルダー内に生成します。 - アートディレクション：最終版の
ART_DIRECTION.mdを、ターゲットプロジェクトのフォルダー内に保存します。 - 副作用の禁止：プロジェクトの実行中に、このスキルフォルダー内のファイルを変更しないでください。
ワークフロー
1. ヒアリング段階（ブランド DNA）
作業を始める前に、ブランドを理解する必要があります。
- ウェブサイト分析：Playwright を使ってユーザーのウェブサイトにアクセスします。ブランドカラー、タイポグラフィ（フォント）、中核となる価値提案を抽出します。
- アセットの依頼：ロゴやアイコンをユーザーに依頼します。背景が透明で、余白が少なく、きれいに切り抜かれた PNG または SVG が必要だと伝えます。
- 動画タイプの選択：モーショングラフィックスのみの動画（100％）か、ハイブリッド動画（例：創業者のトーキングヘッド＋Hyperframes のモーショングラフィックス）かを尋ねます。
2. 計画段階（アートディレクション）
計画を立てる前に HTML を書いてはいけません。
- アートディレクションの作成：アートディレクションのテンプレートに基づいて、
ART_DIRECTION.mdドキュメントを作成します。 - シーンの構成：動画の各秒について、映像の動き、カメラの動き、イージング関数、効果音を指定します。
3. 実装（プレミアムなモーションデザイン）
優れたモーションデザインの原則を適用します。コード例については、「モーションデザインのパターン」を参照してください。
- Apple 風カメラ：大幅なマクロズームと、スナップズーム（
back.out）を使用します。 - 消しゴム風のリビール：スライドするロゴに文字が「食べられる」ように、テキストの不透明度を段階的に変化させます。
- 衝突／粉砕：GSAP の散乱を使って物理的な衝撃効果を表現します。
- グラスモーフィズム：
backdrop-filter: blur(40px)を使って、プレミアムな UI 要素を作成します。 - タイプライターの物理表現：バウンドする span でカーソルを押し進めます。
4. サウンドデザイン（SFX）
- サウンドの買い物リスト：ストーリーボードに基づいて、「サウンドデザインの買い物リスト」をユーザーに提示します。
- 同期：
<audio data-start="...">タグを使用して、GSAP のヒットと正確に同期させます。
5. 検証とトラブルシューティング
- 注意点：よくある Hyperframes の不具合（尺の不一致、ターゲットの欠落など）を防ぐため、「重要な注意点」を確認します。
- FFmpeg：レンダリングに失敗した場合は、FFmpeg をローカルにインストールするようユーザーを案内します。
ベストプラクティス
- 独立したシーン：シーンをモジュール化し、
data-startとdata-durationで厳密に管理します。 - 可視性の管理：シーンの切り替えには
autoAlphaを使い、シーク時もきれいに表示されるようにします。 - レイアウトとトランスフォーム：フレックスボックスの間隔には物理的な寸法を使い、視覚的な演出にはトランスフォームを使います。