saas-motion-kitで個性的なSaaSプロモーション動画を作成

saas-motion-kitとは？

saas-motion-kitは、HyperFramesとClaude Codeを使って、ソフトウェア製品のプロモーション動画やモーション動画を制作するためのクリエイティブ制作システムです。企画ガイド、ビジュアルリファレンス、絵コンテのテンプレート、自動化ツール、レビューフェーズを1つのリポジトリに統合しています。

このプロジェクトの基本ルールは、同じように感じられる作品を2本作らないことです。おなじみの登場方法、トランジション、レイアウトを繰り返し適用するのではなく、まずメッセージとトーンを定め、その作品に合ったビジュアル言語を開発します。

キットには、10のビジュアルファミリーにまたがる100種類のテーマ、24種類のトランジションを収録したアトラス、7段階のプレイブック、コンポーネント戦略、完全なサンプル、そして制作開始前に反復を検出するバラエティ監査が含まれています。

主な機能

• 7段階の制作プレイブック：ブリーフ、コンポーネント、テーマ、絵コンテ、構築、サウンド、納品の各段階を進めます。各段階の終了後には人によるレビューフェーズがあります。
• 100種類のビジュアルテーマ：製品UI、タイポグラフィ、3Dマテリアル、光学表現、メタファー、データストーリーテリング、キャラクター、アートムーブメント、カメラ文法に基づく方向性を探せます。
• トランジションアトラス：マッチカット、キャリー、カメラ移動、マスク、マテリアルトランジション、時間を使った技法など、24種類のナラティブトランジションを確認できます。
• バラエティ監査：絵コンテにおけるトランジションや登場方法の重複、イージングカーブ、動きの方向、ショット尺の均一化、アクセントの多用、意外性の不足、トーンの不一致、独自コンポーネントの不足を確認します。
• テーマピッカー：オーディエンスとトーンに応じてテーマを絞り込み、最近使用したテーマを除外できます。
• モーション履歴：作品ごとのクリエイティブ上の決定を記録し、多用されている技法と未使用の技法を示すレポートを生成します。
• コンポーネント戦略：HTMLでクリーンな製品UIを再構築するか、実際のインターフェースが適さない場合は、簡略化した架空のコンポーネントを作成します。
• Claude Codeスキル：/saas-motion-videoコマンドを使い、完全なプロセスを対話形式で進められます。
• GitHub Action：プッシュとプルリクエストのたびに、すべてのSTORYBOARD.mdファイルを監査します。
• 制作ユーティリティ：納品用レンダーの縮小、ループの継ぎ目の検査、温かみのあるUI効果音の合成、ギャラリーの構築を行えます。

7段階のワークフローを理解する

このワークフローでは、制作作業とクリエイティブ承認を分離します。

1 Brief → 2 Components → 3 Theme → 4 Storyboard → 5 Build → 6 Sound → 7 Deliver
   gate       gate          gate         gate           gate      gate       gate

エージェントは制作作業の多くを実行できますが、各段階は人による判断で終わります。これらのレビューフェーズで、メッセージを確認し、ビジュアルの方向性が適切かを判断し、ありきたりな選択や反復的な選択を却下します。

1. ブリーフ：オーディエンス、メッセージ、プラットフォーム、尺、トーン、納品要件を定義します。
2. コンポーネント：クリーンな製品UIをアニメーション化するか、事実に基づく架空のコンポーネントを設計するかを決めます。
3. テーマ：目指すトーンを支えるビジュアル言語を選びます。
4. 絵コンテ：各ショットを計画し、クリエイティブ台帳を完成させ、バラエティ監査を実行します。
5. 構築：決定論的でシークに安全なアニメーションとして作品を実装します。
6. サウンド：必要に応じて適切な音楽とサウンドデザインを追加します。
7. 納品：高解像度でレンダーし、最終出力サイズを作成し、ループの継ぎ目などの技術的な詳細を確認します。

インストールとセットアップ

必要なもの

キットをインストールする前に、環境に以下が含まれていることを確認してください。

• Node.js 22以降
• ffmpeg
• Claude Code

HyperFramesは専用のヘッドレスChromeをダウンロードするため、レンダリング用にこのブラウザを別途インストールする必要はありません。

方法1：リポジトリテンプレートを使う

saas-motion-kitリポジトリを開き、Use this templateを選択します。これにより、クリエイティブルール、ツール、テンプレート、設定済みのバラエティ監査用GitHub Actionを含む作品リポジトリが作成されます。

方法2：リポジトリをクローンする

git clone https://github.com/tugrawork-creator/saas-motion-kit
cd saas-motion-kit

Claude Code用のHyperFramesスキルをインストールします。これらはキット内には同梱されていません。

npx skills add heygen-com/hyperframes

付属サンプルをプレビューする

リポジトリには、無音でシームレスにループする40秒の3Dブース映像用HyperFramesプロジェクトが完全な形で含まれています。そのディレクトリを開き、Studioプレビューを起動します。

cd examples/acme-suite-loop
npx hyperframes preview

納品品質の4K横長版をレンダーするには、次を実行します。

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4

最初のソフトウェアプロモーションを作成する

ステップ1：焦点を絞ったブリーフを書く

templates/BRIEF.mdのテンプレートから始めます。視聴者に何を理解してほしいのか、誰に向けた作品なのか、どこで表示されるのか、どのように感じられるべきかを明確にします。

役立つクリエイティブ文は、次のパターンに沿います。

私は、[メッセージ]を[トーン]で伝えたい。

この判断は、エフェクトやトランジションより前に行う必要があります。creative/tone-matrix.mdのトーンマトリクスでは、トーンを速度、イージング、カメラの動き、色、タイポグラフィ、トランジション、サウンドに対応付けています。

ステップ2：コンポーネント戦略を選ぶ

ソフトウェア映像は、信頼できるUIに左右されます。キットのクリーンまたは想像上のUIというルールを使います。

1. 製品のUIが一貫していて、整理され、現行のものである場合は、リファレンスとしてキャプチャし、必要なカード、テーブル、チャート、通知を製品のデザイントークンを使ったHTMLで再構築します。
2. インターフェースが古い、情報過多、またはまだ設計されていない場合は、ブランドのビジュアル言語で簡略化した想像上のコンポーネントを作成します。
3. すべてのコンポーネントは真実に即したものにします。実際の機能を簡略化することはできますが、存在しない機能、顧客、性能数値を作ってはいけません。

このプロジェクトでは、各映像に少なくとも1つのオリジナルコンポーネントを考案することも求めています。creative/component-forge.mdのコンポーネント・フォージには、すばやく開発するための手順がまとめられています。

ステップ3：ビジュアルテーマを選ぶ

100テーマギャラリーを閲覧し、ブリーフに合う候補を2つまたは3つに絞り込みます。各テーマシートには、Hook、Reveal、Proof、CTAという4つの主要な場面に加え、推奨コンポーネント、タイミングを設計したモーション技法、リスク、応用の指針、参考資料が含まれています。

コマンドラインからテーマを絞り込むこともできます。例えば、次のコマンドは開発者向けの遊び心のあるテーマを検索し、最近の履歴に記録されたテーマを除外します。

python tools/pick_themes.py --tone playful --audience "developers" --history ~/.motion-ledger.json

テーマは10のファミリーに分類されています。

• ステージとしてのプロダクトUI
• タイポグラフィとグラフィックシステム
• マテリアルと3D
• 光、光学、テクスチャ
• メタファーのコンセプト
• シグネチャー・ディレクション
• データ・ストーリーテリング
• キャラクターとマスコット
• 芸術運動と時代
• カメラと編集の文法

ステップ4：ストーリーボードを作成して監査する

用意されたテンプレートからSTORYBOARD.mdを作成します。メッセージとトーンを表す文章から始め、ショットごとに1行で記録するクリエイティブ・レジャーを完成させます。トランジション、登場方法、イージング、動きの方向、タイミング、アクセント、意外性、オリジナルコンポーネントなどの選択を記録します。

制作前に、必須のクリエイティブ監査を実行します。

python tools/variety_audit.py STORYBOARD.md

監査で指摘された繰り返しの選択を修正します。繰り返しが意図的で物語上の意味を持つ場合は、説明なしに残すのではなく、意図的なmotif:として明示します。

監査はモーション履歴にも対応しており、最近の映像で使った技法を避けるのに役立ちます。結果を追加する際に--theme NNNオプションを使うと、選択したテーマがその履歴の一部として記録されます。

ステップ5：Claude Codeで制作を開始する

リポジトリのルートでClaude Codeを開き、具体的な依頼とともに同梱のスキルを呼び出します。例えば次のようにします。

/saas-motion-video  Make a 45 s LinkedIn promo for https://your-product.com — theme 055 (Bento Grid), music-driven, no voiceover.

このスキルは7つのステージすべてを案内し、各レビューゲートで一時停止します。これらの停止を形式的なものとして扱わないでください。作品がブリーフを伝えているか、ビジュアルの選択がありきたりではなく具体的に感じられるかを評価するために活用します。

ステップ6：プレビューしてレンダリングする

制作中はHyperFrames Studioを使います。

npx hyperframes preview

最終納品では、目標が1080pや2Kであっても4Kでレンダリングします。

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/final-2160.mp4

その後、tools/deliver.shを使ってLanczos方式でダウンスケールします。プロジェクトのガイダンスによれば、これは1080pでネイティブにレンダリングするよりも、テキスト、エッジ、3D画像を鮮明に仕上げます。

複数の映像でバラエティシステムを使う

クリエイティブ履歴を追跡する

映像内の繰り返しを避けても、過去の作品と似た印象になることがあります。履歴ツールは、プロジェクトをまたいでテーマやモーションの判断を記録し、このより広いパターンに対処します。

tools/history_report.pyで1ページのレポートを生成します。頻繁に使っているトランジション、登場方法、イージングのスタイルに加え、まだ試していないアトラス・トランジションやテーマも確認できます。

継続的インテグレーションでストーリーボードを監査する

リポジトリには.github/workflows/variety-audit.ymlが含まれています。プッシュとプルリクエストのたびに、このワークフローが各STORYBOARD.mdを監査します。同じ内容を繰り返すストーリーボードはチェックに失敗するため、制作プロセスの早い段階でクリエイティブレビューを行えます。

GitHubテンプレートから始めるのが、このワークフローを引き継ぐ最も簡単な方法です。既存のプロジェクトにキットをクローンする場合は、ワークフローを残し、ストーリーボードが想定されたレジャー構造に従っていることを確認します。

6本の映像比較から学ぶ

examples/six-filmsディレクトリでは、1つの12秒スクリプトを6つのテーマで使用しています。各バージョンは同じストーリーを維持しながら、ビジュアル言語を変え、独自のコンポーネントを導入しています。このディレクトリには共有ブリーフも含まれているため、同じ制約をエージェントに与えて7つ目の解釈に挑戦できます。

examples/acme-suite-loopプロジェクトからも、別の有益な教訓を得られます。最初のストーリーボードでは、同じターン、タイトルの登場、イージング、ショット時間が繰り返されていました。改訂版では、登場方法、ターン、ペース、カメラの動きを変化させ、意図的なビジュアル上の意外性も加えています。

高度な制作のヒント

すべてのフレームをシークセーフにする

HyperFramesは、要求されたあらゆるフレームを一貫してレンダリングできなければなりません。各フレームを時間の純粋関数として扱います。READMEでは、停止したGSAPタイムラインを1つ用意し、hf-seekからThree.jsを駆動する方法を推奨しています。

Date.now()や、シードを指定しない乱数は避けてください。レンダラーがフレームへ直接シークすると、これらの入力によって結果が変わる可能性があります。

ループを数学的にシームレスに設計する

ループする映像では、各アンビエント動作がループ時間内で整数回のサイクルを完了するようにします。プロジェクトでは、この原則を次のように表現しています。

sin(2π·n·t/LOOP)

レンダリング後は、目視だけに頼らず、tools/loop_check.pyで継ぎ目を確認してください。

多言語タイポグラフィを慎重に扱う

映像にラテン文字以外の文字が含まれる場合は、ローカルのlatin-extフォントサブセットを同梱してください。組み込みのフォールバックフォントでは、ş、ğ、İなどのグリフが気付かないうちに欠落することがあります。

CSSの大文字変換が言語を問わず一貫して動作すると考えないでください。たとえばトルコ語では、小文字のiを変換するとİになります。表示用の文言は意図した大文字形で入力し、単語ごとに適切なlang値を設定してください。

温かみのある意図的なサウンドにする

純粋な正弦波のインターフェース音は、薄く感じられたり、不安を誘ったりすることがあります。キットには、1つのキーで短いルームリバーブを加えたマリンバやウッドブロックなど、より温かく調整された音色を作るtools/warm_sfx.pyが含まれています。

MetaのMusicGenで音楽を生成する場合、そのウェイトがCC-BY-NC 4.0でライセンスされており、商用利用を想定していないことを忘れないでください。商用映像には、適切なライセンスの音楽を選んでください。

画面上のテキストを減らす

ストーリーは動きと構図に担わせてください。テキストはラベルと、1ビートにつきおおよそ1行に抑えます。視聴者が映像を理解するために段落を読まなければならないなら、ビジュアルによる物語表現が不十分です。

画面下部にプログレスバーを追加するのは避けてください。プロジェクトでは、この処理によってブランド映像が画面録画のように見えてしまうと警告しています。

トランジションを物語のために使う

トランジションを装飾として選ぶのではなく、トランジション・アトラスを参照してください。24項目ある各エントリーでは、対応するトーンと避けるべき組み合わせが説明されています。アイデア同士の関係を明確にし、ショット間でオブジェクトを受け渡し、映像のマテリアル感やカメラ言語を強調するトランジションを選びましょう。

最初のプロジェクトで推奨するチェックリスト

1. Node.js 22以上、ffmpeg、Claude Code、HyperFramesのスキルをインストールする。
2. Acmeのサンプルをプレビューし、レンダリング環境を確認する。
3. 明確なメッセージとトーンを1文で示したブリーフを書く。
4. 実際のUIを再構築するか、実在感のある架空のコンポーネントを作るか決める。
5. ギャラリーのテーマを2つか3つに絞り、テーマゲートで1つを承認する。
6. 絵コンテを書き、クリエイティブ・レジャーを完成させる。
7. tools/variety_audit.pyを実行し、繰り返されている選択を解消する。
8. 決定論的でシークに対応したアニメーションを構築する。
9. 控えめで、適切なライセンスのサウンドを加える。
10. 4Kでレンダリングし、納品用にダウンスケールする。該当する場合はループの継ぎ目を確認する。
11. 映像で選んだ内容をモーション履歴に追記し、次のプロジェクトを異なるアイデアから始められるようにする。

結論

saas-motion-kitは、機械的に適用するエフェクト集ではありません。視覚的な独自性を保ちながら、明確に伝わるソフトウェア映像を作るための体系的な手法です。技術より先にトーンを定義し、プロジェクト固有のコンポーネントを考案し、各ゲートで判断を見直し、制作前に繰り返しを監査することで、同じ作業を繰り返さずに再現可能なワークフローを構築できます。