motion-graphics-promo
After Effects 品質のモーションを、HTML/GSAP コンポジションとして作成し、HyperFrames で決定論的にレンダリングします。編集可能なソース、正確なネイティブ画面 fidelity、再現可能なレンダリング結果を提供します。これは、手動でキーフレームを打った After Effects プロジェクトではエージェントが実現できません。
参考ソース：Higgsfield AI, "AI Created Every Motion Graphic in This Video" (YouTube W3-RIZ-Ps64, 11:33, 2026年9月)、720p でコンタクトシートを用いて検査。また、4分間の公式 SaaS 製品概要動画のペーシング分析。これらは文法とペーシングのみに使用します。ピクセル、音楽、音声、ロゴ、UI を再利用しないでください。
1. モーションの前にブリーフィング（まずストーリーを確定する）
参考チュートリアルでは、最初の数分をかけてブリーフをアセットの選択とストーリーボードに変換してから、動きをつけています。同様に、5行で簡潔にまとめます。
- オーディエンスと瞬間: 誰が、どのプラットフォームで、音声オン/オフのどちらで視聴するか。
- 1つのプロダクト、2つのジョブ、1つの次のステップ: 視聴者が正確に覚えられるように。
- 証拠の在庫: 実際に持っている実際のスクリーンショットと画面収録、そのソースビルドと日付。このリストにないものは画面に表示できません。
- パレットとタイポグラフィ: ブランド自身のアイデンティティ。参考資料からはコントラストレベル（飽和したフィールド上の太いコンデンス書体）のみを借用し、正確な色は借用しない。
- アスペクト: 縦型（1080x1920）を独自のコンポジションとしてデザインし、横型からクロップしない。
2. モーションの文法
| ビート | ルール | 理由 |
|---|---|---|
| エントリー (0-3 秒) | エネルギッシュ: ラベルが落下、回転、バウンドし、1度だけ着地する。またはデバイスが重みを持って落下する。 | プロダクトを隠さずに、スクロールを止めるフックを作る。 |
| トランジション | タスクごとに1つのメイントランジション。電話がカラーフィールド間をスライドまたは傾く、またはナビゲーションが次の実際の画面にハンドオフする。 | モーションは、実際の製品状態間のグループ化や移動を説明するべき。 |
| セトル | ショートスプリング (GSAP back.out(1.4) または elastic.out(1, 0.6)、0.4～0.7 秒)。画面が読まれる前にデバイスが落ち着く。 | 物理的な重みは高級感として認識される。読み込み中の揺れはノイズとして認識される。 |
| 証拠の保持 | 各トランジションの後、少なくとも2～3秒は安定して読み取れる画面を維持する。 | 画面は装飾ラベルよりも長い読み取り時間を必要とする。 |
| アクセント | マスク/クリップで表示されるタイポグラフィ、長方形のカラーアクセント、コラージュまたはカラーフィールドのハンドオフ。控えめに使用する。 | これが「After Effects ルック」。多用するとテンプレートになる。 |
タイミングのデフォルト: 60fps、エントリー0.5～0.9秒、ラベルのステガー60～90ミリ秒。視聴者が読みたいテキストを、読みながらアニメーションさせてはいけません。
3. 32秒のプロモーションタイムライン
| 時間 | 目的 | 証拠ルール |
|---|---|---|
| 0～4.4 秒 | 認識可能なユーザー問題。ライセンスされた B-roll または大胆なカラーフィールド上の簡潔な1行。 | 架空の推薦文や顧客情報を作成しない。 |
| 4.4～13.3 秒 | 最初のジョブの実際の画面シーケンス。ナビゲーションの連続性を維持。 | 実際にサポートされているパス。架空のクリックや合成 UI なし。 |
| 13.3～22.2 秒 | 2つ目の補完的なジョブ。録画で証明された可視的な結果。 | 検証済みの映像から選択。競合他社の主張を取り入れない。 |
| 22.2～26.7 秒 | ペイオフとプロダクトアイデンティティに戻る。 | 目的または招待として表現し、未計測の時間やコスト削減として表現しない。 |
| 26.7～32 秒 | 単一の CTA（URLと正確な入手可能性）、音楽のリリース。 | 実際のリンク先と正確なリリースステータスに一致させる。音楽クレジットを残す。 |
より長い検討段階の動画の場合は、代わりに公式概要の構造に従ってください。まず人間の文脈、次にチャプターごとに1つのワークフロー、ツール間の人々に戻り、ブランドクローズ。
4. 構築する（HyperFrames + GSAP）
- HyperFrames コンポジションをスキャフォールドします（CLI、lint、レンダリングの落とし穴については
hyperframes-best-practicesスキルを参照）。HyperFrames のバージョンとローカルの GSAP 3 ビルドをプロジェクトに固定します。レンダリング時にアニメーションランタイムを CDN から読み込まないでください。 - デバイスフレーム: 実際のスクリーンショットまたはミュートされた
<video>（画面収録）を保持する、立体的なグラファイトシェル（ソフトなトップライト、1～2px のベベルハイライト、コンタクトシャドウ）。シェルはtranslate3d/rotateでアニメーションさせ、スクリーンコンテンツは直立させ、セトル後はスケールを変えない。 - キネティックタイポグラフィ: 見出しを単語に分割。
overflow: hiddenマスク内でgsap.from(words, {yPercent: 110, rotate: 4, stagger: 0.07, ease: "back.out(1.6)"})。ビートごとに1つの見出し。 - カラーフィールドハンドオフ: ビート間で全画面の長方形がワイプ（
clip-path: inset()tween）で切り替わる。次のフィールドは、次のデバイス位置を運ぶ。 - タイムライン: 1つのマスター
gsap.timeline({paused: true})とビートごとのラベル（"problem"、"job1"、"job2"、"payoff"、"cta"）。これにより、HyperFrames が決定論的に任意のフレームをシークできる。 - 音楽: ライセンスされたトラックのみ（例: クレジット付き CC BY）。ソースURL、ライセンス、クレジット行、ファイルハッシュを
audio-provenance.jsonに記録。CTA ビートで構成されたエンディングに編集。 - ターゲット解像度/fps でレンダリング。ソーシャル向けは H.264 + ステレオ AAC。
5. エクスプレイナーと広告デザインキット（プロダクションで実績あり）
このキットは、製品エクスプレイナーと15秒縦型広告のシリーズを制作しました。初版は暗い背景が「暗すぎる」として却下されました。成功した方法は以下の通りです。
- すべてのシーンの背後に実際の映像: 製品の実際の文脈におけるライセンスされたストック映像（例: スポーツアプリには試合映像）、ブランドカラーグラデーション（
linear-gradient(180deg, brand 74% → transparent → ink 50%)）でグレーディング、さらにベッドにsaturate(1.3) brightness(1.12)を適用。 - パレット: 1つの彩度の高いブランドカラーと1つのハイエネルギーアクセント（例: バイオレット
#6c4cff+ ライム#d7ff3c）。スカイ/コーラルはステッカーのみ。テキスト用のインク#16132e。 - タイポグラフィ: コンデンスディスプレイキャップス（Archivo、
font-stretch75-80%、ウェイト900、1080幅で74～96px）。各見出しのキーワードは、-2°回転したアクセントマーカーボックスに配置。言語ごとのグリフカバレッジを確認。Archivo にはキリル文字がないため、ru/uk/bg では Inter に切り替え。 - デバイスフレーム: ホワイト/シルバーの電話とブラウザフレーム、3D パースペクティブステージ（
perspective: 1800px）。実際のスクリーンショットまたは実際の画面収録を表示する。すべての画面は、実際のコンテンツ（人、ロゴ、データ）を表示し、空の状態を表示してはいけません。 - 落下ステッカー: 2～3個の短い大文字ラベルが落下、回転し、デバイスの隣に着地（ビートごとに1つ）。
- トランジション: ビート間の角度のついたアクセントカラーワイプ、または2フレームのホワイトフラッシュ。
- ナレーション（TTS または録音）は、音楽をその下にダックさせ、最終ミックスは -14 LUFS にノーマライズ（
ffmpeg -af loudnorm=I=-14:TP=-1.5:LRA=11）。 - 実際のデバイスキャプチャ（macOS）: iPhone Mirroring と
screencapture -v -V <secs> -R<x,y,w,h>で実際のアプリを録画。タップを送信する前にミラーリングウィンドウをアクティブにする。ミラーリング接続には電話がロックされている必要があります。 - ローカライズバリアント: 1つのテンプレートに
{{placeholders}}を残し、小さなスクリプトで言語ごとにコピーを生成（references/vertical-ad-15s.template.htmlを参照）。 - すべてのリンクに UTM をキャプションとバイオに追加:
?utm_source=<platform>&utm_medium=organic&utm_campaign=<video-slug>。
レンダリングの落とし穴（それぞれがほぼ壊れた動画を出荷するところでした）
- コンポジションに多くの
<video>クリップ（6つ以上のベッド、またはベッドと電話クリップ）がある場合、HyperFrames はレンダリング途中で全てのオーバーレイを静かにドロップすることがあります。プレビュースナップショットは正常に見えます。フッテージベッドを事前に1つの動画に連結し、クリップ数を少なく保ち、常にレンダリングされた MP4 のコンタクトシートをスケジュール前に検査してください。 - GSAP の
fromToで from vars にautoAlpha: 1を指定すると、オーサリング時に要素が表示されます。tl.set(el, {autoAlpha: 1})を使用し、その後fromToからautoAlphaを削除してください。 - ソーシャルスケジューラーへのアップロードで空のレスポンスが返されることがあります。リトライし、スケジュール前にホストされたファイルのバイトサイズが一致することを確認してください。
- 画面上の実際の人物の顔や名前（プレイヤー、顧客）は、有料または公開使用の前に同意が必要です。同意がない場合はフラグを立ててください。
6. プレビューではなく、エンコードされたファイルを検証する
- 配信された MP4 からフレームを抽出し（例:
ffmpeg -i out.mp4 -vf fps=2 frames/%03d.png）、読み取ります。各ホールド中に全ての画面が読み取れるか、キャプションがプラットフォームの安全ゾーンと重なっていないか、テキストが読まれるべきときにアニメーション中に表示されていないか。 - デコードの完了、再生時間、fps、フレーム数、ラウドネス、ピークを確認。最終ファイルの SHA-256 を記録。
- HyperFrames の lint/レイアウトチェックとキャプションフレームのコントラストサンプルを実行。
- すべてのソースアセット（ビルド/日付付きのスクリーン、B-roll ライセンス、音楽ライセンス）と最終ハッシュを結びつけるマニフェストを保持。
7. 境界
- 実際の UI のみ。記録できないフロー（サインインの停止、未リリース機能）はカット。決してモックしない。
- ダウンロードした参考動画、コンタクトシート、トランスクリプトはプライベート分析資料。クリエイティブと一緒にアップロードしない。
- 測定され、ソースが明示されていない限り、人気、ROI、時間節約の主張をしない。
- クリエイティブの承認は公開ではない。スケジュールと投稿は別の、確認済みのステップ。