mcpField
R
remotion-ad-video

remotion-ad-video

github.com/leosssvip-dotマーケティング・グロース11048 回インストール20 週間前に更新
リポジトリ

remotion-ad-video について

remotion-ad-video は、成果重視の広告動画を制作する Skill です。AI エージェントが企画と制作を担い、標準では Remotion、要望に応じて Hyperframes でレンダリングします。素材収集から台本、絵コンテ、出力チェックまで扱います。

主な機能

  1. 01製品情報に基づく広告企画
  2. 02Web とストアの公開素材収集
  3. 03台本と絵コンテの作成
  4. 04Remotion または Hyperframes でのレンダリング
  5. 05表現・形式・出力品質の確認

活用シーン

  1. 01製品リンクから短尺広告動画を制作
  2. 02TikTok、Reels、Shorts 向けの広告バリエーション作成
  3. 03製品概要から台本と絵コンテを作成
  4. 04広告レンダリング用チェックリストの準備

インストール

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

$npx skills add https://github.com/leosssvip-dot/remotion-ad-video-skill --skill remotion-ad-video

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/hyperframes-template/
index.html
package.json
README.md
variables.json
assets/remotion-template/
package.json
README.md
tsconfig.json
assets/remotion-template/src/
AdVideo.tsx
Burst.tsx
CaptionTrack.tsx
ChargeBar.tsx
default-props.json
FakeOS.tsx
Finish.tsx
FlipMove.tsx
Fonts.tsx
Impact.tsx
index.tsx
KineticText.tsx
motion.ts
Root.tsx
SceneTransition.tsx
schema.ts
references/
ad-aesthetic-qa.md
ad-brief-contract.md
ad-exemplars.md
ad-intake.md
asset-harvest.md
audio-caption-system.md

詳細

Remotion 広告動画

概要

このスキルを使うと、AI エージェントと決定論的なコードレンダラーを組み合わせ、パフォーマンス重視の広告動画を制作できます。クリエイティブと制作のワークフローはエージェントが担います。デフォルトのレンダラーは Remotion です。ユーザーが HTML ベースの動画作成を求める場合や、既存の Hyperframes プロジェクトがある場合は、Hyperframes にも対応しています。

使用する場面

以下の場合に使用します。

  • デフォルトでは商品リンクから15秒の広告動画を制作します。ユーザーが長尺を希望する場合に限り、30秒または45秒にします。
  • Google Play、App Store、SaaS、ランディングページから、商品の紹介広告を制作します。
  • TikTok、Reels、Shorts、Meta の正方形動画、YouTube の横長動画向けにバリエーションをまとめて制作します。
  • 商品の概要から、スクリプト、ストーリーボード、Remotion の props または Hyperframes の変数、レンダリングの QA チェックリストを作成します。

以下の場合は使用しないでください。

  • 広告コンバージョンを目的としない長尺のエディトリアル動画。
  • ライセンス音楽、第三者の音楽、有名人や特定可能な人物の肖像、権利を持たない有料ストック素材やフォントなど、明らかに使用できない素材。
  • ユーザーが承認済みのコピーを提供していない、規制対象の医療、金融、法律、収益に関する訴求。

素材と訴求に関するポリシー(制限的ではなく、実用的な対応を基本とします)。

  • このスキルは、広告主が有料キャンペーン(パフォーマンス広告/UA/アフィリエイト/代理店)で使用する広告クリエイティブを制作するものであり、商品の社内スタッフ向けではありません。商品やアプリが公開している素材は、標準的なクリエイティブ素材として扱います。ストアアイコン、スクリーンショット、フィーチャーグラフィック、Open Graph 画像、ロゴ、ブランドカラーは、デフォルトで収集して使用してください。公開されているストア素材について、「権利確認」が取れるまで作業を止めないでください。
  • ストアの公開指標(評価、ダウンロード数、レビュー数)は使用できます。ストアを出典として、実際の数値を使用してください(例:「Google Play で4.0★、1,000万件以上のダウンロード」)。数値を捏造したり、水増ししたりしないでください。
  • 最終的な商標、比較訴求、ライセンスに関する判断は、広告主が各配信先に応じて行います。引き継ぎ時に残る責任を明記してください。制作をその確認の条件にしないでください。
  • 生成したプレースホルダーは、適切なスクリーンショットを確実に切り出せない場合など、素材に本当に不足がある場合の代替手段であり、デフォルトではありません。収集した実際の素材を優先してください。

基本的なワークフロー

1. 情報収集

広告に必要な素材だけを集めます。URL がある場合は、ツールを利用できるときは公開中のページを確認してください。利用できない場合は、商品名、ターゲット顧客、主な訴求内容、スクリーンショット、ロゴ、ブランド上の制約を尋ねてください。 ソースの品質、クレームの安全性、またはアセットの権利が不明な場合は、references/ad-intake.md を読み込んでください。 すべての URL 案件で、ストーリーボードやコードの作成前に references/ad-brief-contract.md を読み込んでください。ソースの分類後に ad-brief.json を作成または更新し、事前確認の回答やデフォルト値をそこに記録してください。 URL ベースの案件では、ストーリーボードの作成前に references/asset-harvest.md を読み込んでください。 スキルのテスト、初回の反復、またはユーザーが速度を重視する場合は、references/fast-test-workflow.md を読み込んでください。 ユーザーが Hyperframes を指定した場合、対象リポジトリがすでに Hyperframes を使用している場合、オープンソースのレンダラーライセンスが優先事項の場合、または ad-brief.json に renderEngine: "hyperframes" がある場合は、references/hyperframes-output.md を読み込んでください。 URL のみの案件では、ストーリーボードやコードの作成前に references/preflight-questionnaire.md を読み込んでください。必須の事前確認として、フォーマットとクリエイティブルートの 2 項目を必ず最初に質問してください。ユーザーが質問なし、可能な限り最速のデフォルト設定、または推定デフォルトを使ったベンチマーク実行を明示的に求めた場合に限り、質問を省略してください。任意の追加質問は、これら 2 項目の回答後に、広告の内容を実質的に変える場合に限って行ってください。 縦型、正方形、横型の出力をユーザーが選ぶ必要がある場合は、references/platform-presets.md を読み込んでください。 製品カテゴリがゲームやソーシャルフィードのパターンに明確に当てはまらない場合は、references/industry-angle-library.md を読み込んでください。 カジュアルゲーム、モバイルゲーム、アプリストアのゲーム掲載情報、パズルゲーム、ハイパーカジュアルゲーム、またはシンプルなゲームプレイのループでは、references/game-ad-patterns.md を読み込んでください。 ショート動画、ソーシャル、クリエイター、UGC、ライブショッピング、コミュニティ、またはコンテンツフィードのアプリでは、references/social-feed-ad-patterns.md を読み込んでください。 ユーザーが複数の選択肢、広告の一括作成、または単一のサンプルではなく商用品質の広告を求めている場合は、references/variant-system.md を読み込んでください。 どちらのエンジンでもモーションを実装する前に、references/motion-language.md を読み込んでください。これは、モーションが単調な線形補間にならないようにするためのイージング、スタッガー、キネティックタイポグラフィの語彙です(Remotion の場合は src/motion.ts と KineticText、Hyperframes の場合は GSAP)。

言語ポリシー:

  • ユーザー向けの事前確認質問は、ユーザーが現在やり取りしている言語で行ってください。ユーザーとの会話が中国語の場合、ソース URL が英語であっても、format と creativeRoute の質問は中国語で行ってください。
  • 収集したタイトル、説明、スクリーンショット、掲載文、またはページ本文からソース/リンクの言語を判定してください。動画の台本、字幕、CTA、画面上のコピーは、デフォルトで判定したソース言語で作成してください。
  • ad-brief.json に interactionLanguage、sourceLanguage、outputLanguage を記録してください。ユーザーが別の動画言語を明示的に求めた場合に限り、outputLanguage を変更してください。

必須の決定事項:

  • 製品名またはアプリ名。
  • ターゲット顧客と課題。
  • サイズプリセットと正確な寸法:プラットフォーム固有のフォーマットが指定されていない場合は、縦型、正方形、または横型。
  • 動画の長さ:ショート広告はデフォルトで 15 秒とし、説明により深さが必要な場合、またはユーザーが希望する場合に限り、30 秒または 45 秒にします。
  • 主なコンバージョン目標を 1 つ。
  • 使用可能なアセットと権利の状況。
  • 想定する商用利用に対する Remotion ライセンスの適合性。
  • レンダリングエンジン:ユーザーまたは呼び出し元による明示的な選択、対象プロジェクトですでに使われている技術スタック、ローカルのレンダラーの利用可否の順に確認して決定してください。Remotion と Hyperframes の両方が利用可能な場合は、どちらを使うか尋ねてください。どちらも利用できない場合は、いずれかのインストールを提案してください。

ユーザーが決める必要はない、記録するデフォルト設定:

  • 音声モードは、手早く作成する URL 案件、スピード重視のテスト、初回の反復では sfx-only がデフォルトです。商用品質、複数案の一括作成、または「もっとクリエイティブに」という依頼では、スクリプト付きのナレーションを含むフルサウンドスケープ(music-sfx)をデフォルトとし、質問はしません。ナレーションなしで、クリック音を 1 つ繰り返すだけの大胆な広告は単調になります。ただし、ユーザーが無音でも内容が伝わる仕様、特定の音楽プラン、またはプラットフォーム固有のサウンドプランを希望した場合に限り、確認してください。 URL を使うジョブでは、最低限、ファビコン、タッチアイコン、Open Graph 画像、表示されているロゴまたはスクリーンショット、ブランドカラーを取得するよう試みる必要があります。E コマースの商品 URL では、クリエイティブ制作を始める前に、scripts/harvest-ecommerce-assets.mjs を使って商品のメイン画像も取得するよう試みる必要があります。リンク先の商品を広告の主題とし、プラットフォームやストアの文脈は副次的なものにします。利用可能な公開アセットは、生成したプロジェクトの public/<brand>/ フォルダーにローカル保存し、可能であればアセットマニフェストを作成または更新して、staticFile() でアセットを参照します。

クリエイティブ制作の前に、URL を使うジョブでは scripts/classify-ad-source.mjs を実行します。言語がわかっている場合は --interaction-language <current-user-language> を、既存のプロジェクト内で作業する場合は --project-dir <target-project> を渡し、ユーザーが明示的に指定した場合に限り --render-engine remotion|hyperframes を渡します。それ以外の場合は、--render-engine auto によるエンジンの検出に任せます。プロジェクトディレクトリがある場合は、出力を ad-brief.json に書き込みます。ブリーフは、ソースタイプ、言語計画、レンダーエンジン、レンダーエンジンの理由、事前確認のデフォルト値または回答、フォーマット、音声モード、ブロッカー、アセット要件の信頼できる情報源です。ad-brief.json にブロッカーがある場合、preflight_answers_required、render_engine_choice_required、render_engine_install_required が含まれている場合、または assetPlan.status が blocked/user_required の場合は、作業を中止し、不足している判断またはアセットについて尋ねます。最初のクリエイティブ事前確認では interactionPlan.choiceQuestions を使用し、まずフォーマットとクリエイティブルートだけを、interactionLanguage で尋ねます。エージェントが構造化された選択 UI に対応している場合は、そこで選択肢を提示します。対応していない場合は、同じ選択肢をテキストで提示します。音声は同期した SFX を含む状態をデフォルトとします。ユーザーからサイレントセーフ、音楽、ナレーション、またはプラットフォーム固有のサウンド計画を求められた場合に限り、音声について尋ねます。長い自由回答形式の質問リストを最初に提示しないでください。--preflight-mode defaults を使うのは、ユーザーが質問を省略することを明示的に承認した場合に限ります。

2. 戦略

シーンを書く前に、広告の主軸となる切り口を 1 つ選びます。静的なスライドデッキのような出力を避けるため、実装前に references/creative-direction.md を読み込みます。テンプレートから始めるのではなく、insight(顧客が抱える唯一の本質的な葛藤、または承認済みの意外な事実)から始めます。

  • 課題訴求のフック:問題を先に提示し、商品で解決します。
  • デモによる実証:商品またはアプリが実際に機能する様子を見せます。
  • オファーによるコンバージョン:割引、トライアル、セット販売、または期限を提示します。
  • ソーシャルプルーフ:評価、レビュー、成果、または利用実績を示します。
  • 比較:導入前と導入後、または新旧の方法を対比します。
  • ゲームプレイのスペクタクル:シンプルなゲームでは、機能を説明する代わりに、熱量の高いコアループを再現します。
  • フィードになじむスペクタクル:ソーシャルアプリや短尺動画アプリでは、高速スワイプ、クリエイター動画、ライブ配信/ショップのオーバーレイ、コメント/いいねのレール、音に反応するカットを再現します。

主張には observed(ページ上の事実、および評価、ダウンロード数、レビュー件数などの公開ストア指標)、user_supplied、inferred、または blocked のタグを付けます。ストアに帰属を明記した実際の公開ストア数値も含め、observed と user_supplied は自由に表示できます。inferred または blocked の数値は表示せず、数値を捏造したり、実際より大きく見せたりしてはいけません。

実在の商用サンプルにはすべて、コピーだけでなく、見る人の目を引き付けて止めるビジュアルのアイデアが必要です。例:チャットの吹き出しが完了したタスクに変わる、ワークフローが導入前/導入後で劇的に短縮される、商品のスクリーンショットから機能が飛び出す、ターミナルコマンドをきっかけに自動化が目に見える形で実行される。

すべてのコンセプトで、ストーリーボードやコードの作成前に大胆なレイアウトのアイデアも定める必要があります。ポスターのように大きな文字、主役となるビジュアルを 1 つに絞る、非対称な構図、大胆なトリミング、大きく見せた商品/アプリのフレーム、躍動感のある分割画面、段階的な見せ方などが挙げられます。コントラストや動きによって広告らしさが生まれる場合を除き、整然とした中央揃えのスライドレイアウトは避けます。 大胆さを標準にしてください。品よく控えめで、プレゼンにもそのまま使える広告では、スクロールの手を止められません。各コンセプトを心地よい範囲を超えて押し出し、少なくとも1つのスペクタクル演出(超現実的なスケール、物理法則を無視した表現、世界の歪曲、誇張されたビフォーアフター、最大限の動的な爆発、重大な危機の演出、UIが命を宿す演出、時間の分断――spectacleMove enum)で感情をドラマチックに表現し、「えっ、何これ?」と思わせる瞬間を作ってください。誇張はビジュアルと感情表現に限り、数値や事実に関する主張はすべて正確で、情報源に裏付けられたものにしてください。仕組みについては、references/creative-direction.md(Bold By Default)と references/ad-exemplars.md(Spectacle / Exaggeration Mechanics)を読み込んでください。

情報源に裏付けられた数値の根拠がある場合は、静止したコピーではなく、動きとして演出してください。評価数をカウントアップし、割引率を0から最終的なパーセントまで一気に表示し、価格や節約額を転がるように所定の位置へ収め、ダウンロード数やレビュー数を刻々と増やし、スコアをゲームのHUDのように弾けさせます。最終値には承認済みの数値をそのまま使い、裏付けのない主張や誇張した主張はアニメーションにしないでください。

シンプルなゲーム、特にアプリストアの掲載用では、通常、ゲームプレイ風のシミュレーションをビジュアルのアイデアにしてください。落下するピース、スワップ、合体、衝突、スコアのポップアップ、爆発、レベルアップの瞬間、失敗寸前の救済、報酬の連鎖などが該当します。静止スクリーンショットは根拠を示す素材にすぎず、それだけでは広告になりません。

ショート動画、クリエイター、ソーシャルフィード系のアプリでは、通常、フィードに馴染むシミュレーションをビジュアルのアイデアにしてください。スクロールやコンテンツの切り替えがあるスマートフォンのフレーム、クリエイターの画像、UIのレール、サウンドやエフェクトのステッカー、情報源で裏付けられている場合のLIVEやShopチップを使い、製品の説明ではなく、プラットフォームそのものを感じさせるクイックカットにしてください。

ユーザーが方向性を1つに厳密に指定した場合を除き、すべての案件で実装前に concepts.json を作成してください。短時間のテストや簡単なURL案件では、簡略版(1行のフィールドで3つのコンセプト)を使用します。解像度は低くてもかまいませんが、創造性を下げてはいけません。以前の「商用品質の場合のみ」という例外が、テンプレートの使い回しを標準的な案件に持ち込む原因そのものでした。少なくとも3つの異なるコンセプト(フックの仕組みと structure が異なり、色やコピーだけが違うものではない)を作成してください。それぞれに signatureMoment(この製品だけが実現できるフレーム)と spectacleMove を設定し、references/variant-system.md を使って採点したうえで、references/concept-contract.md に従ってください。references/ad-exemplars.md から演出の仕組みを取り入れ、ありきたりなテンプレートではなく、優れた広告を基準にしてください。その後、以下のゲートで評価してください。

node scripts/validate-creative.mjs <project-dir>/concepts.json

ゲートを通過するまでストーリーボードを開始しないでください。選択したコンセプトは attention、distinctiveness、boldness がそれぞれ4以上、claimSafety が3以上でなければなりません。また、forceDefaultReason を記録していない限り、その structure を定型の「フック/悩み/デモ/根拠/CTA」の流れに暗黙のうちに合わせてはいけません。attention、distinctiveness、boldness が3で、まあまあ許容できる程度のコンセプトでは採用されません。より大胆なコンセプトを選ぶか、修正してください。boldness はアイデアの誇張やドラマチックさを採点する指標であり、主張の真実性を採点する指標ではありません。最も優れたコンセプト、またはユーザーが選択したコンセプトを実装し、その structure、firstFrame、motionIdea がストーリーボードに反映されていることを確認してください。

3. ストーリーボード

コードを書く前に、時間配分を決めたストーリーボードを作成します。シーンの契約については、references/storyboard-contract.md を読み込みます。 ユーザーが別の言語を明示的に指定していない限り、動画内で使用するすべてのコピーには ad-brief.json の outputLanguage を使用します。

デフォルトの構成はありません。選択したコンセプトの structure からシーンリストを導き出します(references/storyboard-contract.md の「Mapping rules」を参照)。15 秒の場合、次の厳格なビート配分ルールを常に適用します。

  • フックは最初の 2 秒以内に伝わるようにし、製品を見せます。
  • CTA には少なくとも 2.5 秒を確保して維持します(最後のシーンに transitionOut を設定しません)。
  • フックと CTA の間はすべて、コンセプトに沿った内容にします。非線形の構成(CTA を先に見せて繰り返す、3 段階のエスカレーション、カウントダウンの逆転、ワンカット)も可能です。references/ad-exemplars.md の「Structure-Diverse Shapes」を参照してください。
  • インパクト、数値の変化、再登場、トランジションの予備動作など、もうひとつのビートを加えずに 2.5 秒を超えて続くシーンは作りません。

各ビートでは、視覚的なアイデアをひとつに絞ります。動画内のテキストに段落を使わず、モバイルで収まりやすい短い行を優先します。ほとんどのシーンでは、見出し 1 つと補足文 1 行までにします。複数のテキストブロックを同じ大きさで並べるのではなく、目立たせる単語や数字を大きくします。出典に基づく数値の主張をシーンで使う場合は、レンダラーが値をアニメーション表示できるように、from、to、prefix/suffix、decimals、短いラベルを含む metric プランを用意します。ゲームではテンポの速い動的なショットを使います。カットを入れてもかまいませんが、各ショットにはゲームプレイ、製品の動き、キャラクターや世界の動き、または視覚的な見せ場を含め、静止した情報カードだけにはしません。 ソーシャルアプリやショート動画アプリでは、カットを入れるのが一般的です。各ショットは、静止した機能紹介カードではなく、フィードに流れる瞬間、クリエイターのクリップ、通知、サウンドキュー、ライブ配信やショップの場面、またはアクションを促す場面のように感じられるものにします。 音楽、効果音、ボイスオーバー、字幕、またはサイレント自動再生時の読みやすさを扱う場合は、references/audio-caption-system.md を読み込みます。

4. テンプレート

プロジェクトが存在せず、renderEngine が remotion の場合は、assets/remotion-template/ をターゲットのワークスペースにコピーします。Remotion プロジェクトが存在する場合は、既存のパッケージマネージャー、エントリーポイント、コンポーネントのスタイルに合わせて調整します。fontPreset がネットワークを使わないデフォルトのままでもテンプレートは @remotion/google-fonts をインポートするため、存在しない場合はインストールします。

renderEngine が hyperframes の場合は、assets/hyperframes-template/ をコピーするか、既存の Hyperframes プロジェクトに合わせて調整します。Hyperframes の出力はネイティブ HTML です。index.html がコンポジションのソース、variables.json が承認済みの広告コピーとアセットのパスを保持し、QA では npx hyperframes lint、inspect、preview、render を使用します。実装前に references/hyperframes-output.md を読み込みます。新しい広告ではネイティブの Hyperframes HTML を作成します。ユーザーが既存の Remotion ソースの移行を明示的に求めていない限り、Remotion から Hyperframes への移植ワークフローは使用しません。

Remotion テンプレートのルール:

  • 入力プロパティには Zod スキーマを使用します。
  • シーンはハードコードせず、データ駆動にします。
  • 各シーンの block には、シーンブロックの種類(cold-open-payoff、split-before-after、device-frame、stat-slam、hero-morph、ui-takeover、charge-reveal、cta-card、または standard)を設定します。これにより、選択したコンセプトの structure が、繰り返しのカードではなく、異なるレイアウトとモーションとして描画されます。コンセプトの構造にあるシーンブロックをこれらのテンプレートブロックに対応付けます。すべてのシーンを standard に押し込むのではなく、新しいブロックコンポーネントを追加します。ui-takeover(偽の通知が拡大してヒーローになる)と charge-reveal(プログレスバーを圧縮してから叩きつける)は、目的に特化したフックブロックです。弱いオープニングを考案する前に、これらを活用してください。
  • Remotion の Composition、Sequence、AbsoluteFill を使用します。
  • プラットフォーム、寸法、尺、ブランドカラー、CTA、オファー、免責事項、シーンをパラメーター化します。
  • 選択した format/platform を、実際のコンポジション寸法とシーンレイアウトに反映します。スクエアとランドスケープの出力では、縦型レイアウトをそのまま再利用しないでください。
  • 収集した実際の商品/アプリ/ストア素材(アイコン、スクリーンショット、フィーチャー画像、OG 画像、ブランドカラー)を優先します。生成したプレースホルダーは、本当に不足している部分を補う場合に限り、プレースホルダーであることを明記して使用します。
  • URL が指定されている場合は、標準的なインストール/UA 広告の入力素材として、公開されているアプリ/商品のストア素材をデフォルトで使用します。public/<brand>/ に保存し、staticFile() で参照します。
  • 評価、割引、価格、節約額、レビュー数、ゲーム/アプリのスコアについて、数値がソースで裏付けられている場合は、アニメーション付きのメトリクス/カウンタープロパティに対応します。
  • 生成した同期 SFX はデフォルトでプロパティ経由で追加します。startFrame、カテゴリ、シーン/アンカーの同期メタデータ、画面上のイベントに対応したキューの説明を備えた、多彩な生成 SFX パレットを使用し、クリック音を繰り返すだけにしないでください。音声はデフォルトの実装要素として扱い、必須の事前確認や QA のゲートにはしません。特別な音声の計画や検証を行うのは、ユーザーが無音対応、音楽、ナレーション、またはプラットフォーム固有のサウンドを求めた場合に限ります。
  • ユーザーが音楽を求めた場合は、生成、ライセンス取得済み、またはユーザー提供の音楽ベッドと、映像に同期した SFX を使って music-sfx に対応します。短時間で処理する URL ジョブや高速テストでは、デフォルトの sfx-only を使用します。
  • 商用品質、大量制作、または「もっとクリエイティブに」という依頼では、音楽ベッド+高密度な SFX+脚本付き voiceover からなるフルサウンドスケープをデフォルトにします。references/audio-caption-system.md の「Voiceover Scriptcraft」に従い、outputLanguage で、エネルギー、テンポ、トーンに変化をつけた3~5つの発話ビートとしてナレーションを作成します。生成 TTS 音声の rightsStatus は generated にします。
  • 少なくとも3種類のモーションシステムを追加します。キネティックなフック、アニメーション付きの商品/素材のリビール、CTA の強調です。スポットに「えっ、何が起きた?」と思わせる瞬間を作るため、コンセプトで指定された spectacleMove も実際の画面上のビートとして含めます(仕組みについては references/ad-exemplars.md を参照してください)。
  • references/motion-language.md の語彙を使ってアニメーションを作成し、単純な interpolate だけにしないでください。src/motion.ts のイージング(登場には power3Out、カウントアップには expoOut、ポップには backOut/springPop)と、複数要素のリビールには staggerDelay を使用します。見出し/CTA は、テキストブロック全体をフェードさせるのではなく、単語/文字に分割した KineticText で表示します。共有要素のリビール(スクリーンショット→ヒーロー、ビフォー→アフター)には FlipMove を使用します(hero-morph ブロックがすぐに使える例です)。リワード/スペクタクル/ゲームのビート(紙吹雪、コイン、スコアのポップ、爆発)には Burst を使用します。
  • すべてのシーン境界に、scene.transitionOut で方向性のあるつなぎ(whip-left/whip-right/whip-up、zoom-punch、luma-wipe、または意図的な cut)を設定します。すべてが fade のスポットは公開せず、連続する境界で同じ種類を繰り返さないでください。各境界フレームに SFX(sfx-whoosh、sfx-impact、sfx-swipe)を同期させます。CTA を見せ続けられるよう、最後のシーンにはトランジションを設定しません。
  • 各スポットで少なくとも1つ、着地に物理的な手応えを加えます。scene.impact: { atFrame, strength } のビート(フラッシュ+カメラシェイク)、またはブロックに組み込まれたスラム(メトリクスのロック、CTA のスプリング)を使い、同じフレームの sfx-impact/sfx-sub-boom に同期させます。リワードのビートに必要な場合は、scene.celebrate: { preset } を使って、プロパティから Burst のペイオフを発生させます。
  • ブランドの印象に合った fontPreset(bold-geometric、condensed-impact、editorial-serif、rounded-friendly、mono-tech)を選び、デフォルトの clean-sans による Inter の見た目のまま公開しないでください。デフォルト以外のプリセットは @remotion/google-fonts 経由で読み込みます(レンダリングごとに初回はネットワーク接続が必要です)。スポット内でちょうど1つのシーン(通常は stat-slam または cta-card)に colorMode: "inverted" を指定し、色の変化を作ります。
  • 音声プランにナレーションが含まれる場合は、props.captions にナレーションのトラックと同じタイムスタンプの、単語ごとに同期したカラオケ字幕も追加します。数字や印象的な言葉には emphasis: true を指定してください。多くのフィードはミュートで再生されるため、字幕のないナレーションは実質的に存在しないのと同じです。references/audio-caption-system.md の「Karaoke captions」を参照してください。
  • コンセプトのアートディレクションでフラットな見た目が求められていない限り、フィルム仕上げ(finish.grain/finish.vignette、デフォルトで有効)は有効のままにします。
  • シンプルなゲームでは、公開スクリーンショットまたはストアの説明を参考にした、カスタムのゲームプレイループアニメーションを少なくとも1つ含めます。
  • モバイルサイズでも読みやすいタイポグラフィを使用し、本文の詰め込みに頼らないでください。 Remotionの実装の詳細については、利用可能な場合はRemotionのベストプラクティススキルを使用してください。特に、コンポジション、パラメーター、アセット、タイミング、トランジション、音声、字幕のルールを確認してください。

Hyperframesテンプレートのルール:

  • ルートコンポジションでdata-composition-id、data-start、data-duration、data-width、data-heightを使用します。
  • すべてのクリップでdata-start、data-duration、data-track-indexを使用します。
  • data-composition-variablesで編集可能なフィールドを宣言し、variables.json/--variables-fileで値を渡します。
  • variables.jsonにwidth、height、layoutModeを含め、レンダリング前にそれらの値をコンポジションのdata-width/data-heightに書き戻します。
  • コピー、CTA、色、ローカルアセットのパスにはwindow.__hyperframes.getVariables()を使用します。
  • 一時停止状態のGSAPタイムラインをwindow.__timelinesに登録します。references/motion-language.mdにあるイージング/スタッガーの語彙(このパスではGSAPを直接使用)に従って構築します。登場時はpower3.out、カウントアップはexpo.out/power3.out、ポップはback.out(1.7)、複数要素の表示にはstaggerを使用します。
  • 製品/アプリのビジュアルはローカルに用意し、権利確認を済ませてください。最終出力でリモートURLに依存しないでください。
5. レンダリングの品質確認

引き渡し前にreferences/render-qa-checklist.mdを読み込んでください。

最低限の確認項目:

  • Remotion:型チェック/ビルドが成功し、フック、中盤、CTAのセクションで静止画フレームがレンダリングされること。テストや反復作業では、フルMP4の前に高速ラボの低解像度静止画を使用します。
  • Hyperframes:プレビュー/レンダリングの前にnpx hyperframes lintとinspectが成功すること。
  • テキストがはみ出したり、重なったりしていないこと。
  • ビジュアルが表示され、空白になっていないこと。
  • フック、中盤、CTAの静止画で、それぞれ異なるビジュアル状態が表示されること。
  • ソースに裏付けられた数値の証明がアニメーションで正確な最終値に到達し、文字だけの証明カードとして平坦にレンダリングされていないこと。
  • すべてのジョブでreferences/ad-aesthetic-qa.mdを使った広告美学の品質確認に合格すること(簡易テストでは、評価表をざっと確認して明らかな問題を修正する簡易チェックで構いません。商用品質の場合は、完全な採点チェックを行います)。
  • CTA、オファー、免責事項が承認済みの文言と一致していること。
  • 裏付けのない主張は削除するか、書き換えていること。
  • 出力ファイルとコマンドを報告すること。

スキルのテストでは、デフォルトで動画を半分のサイズのドラフト出力とし、ブロック対象でない仕上げ作業のためにフルサイズのMP4を再レンダリングしないでください。references/fast-test-workflow.mdにあるブロック対象/対象外の区分を使用します。

出力要件

以下を返してください:

  • 主張の確信度を含むソースの概要。
  • ad-brief.jsonのパス、またはインラインの概要。ソースの種類、interactionLanguage、sourceLanguage、outputLanguage、renderEngine、事前確認の回答/デフォルト値、ブロッカー、フォーマット、音声モードを含めます。
  • サイズプリセットとクリエイティブルートを含む、事前確認の前提またはユーザーの回答。
  • 選択した広告の切り口とターゲットプラットフォーム。
  • スクリプトとストーリーボード。
  • Remotionのprops JSON、またはHyperframesのvariables.json。
  • 変更したファイルまたはテンプレートのパス。
  • 検証の根拠。
  • 権利、ライセンス、アセットに関する既知の不足事項。

よくある間違い

  • コンバージョン目標のある広告ではなく、汎用的な製品動画を作る。
  • フック、証明、CTAを決める前にRemotionのコードを書き始める。
  • PPTのようなテキストカードをフェードでつないだだけの動画を納品する。
  • すべてを単調な線形のinterpolateでアニメーションし、イージングやスタッガーを使わず、テキスト全体をフェードさせて動きを安っぽく見せる。references/motion-language.mdにあるイージング/スタッガー/キネティックタイポグラフィの語彙を使用します。
  • ソースURLから利用できるロゴ、ファビコン、OG画像、スクリーンショット、ブランドカラーを無視する。
  • ゲームの掲載ページをSaaSの解説動画のように扱い、躍動感のあるゲームプレイを見せない。
  • 推測または捏造した数値を事実として表示したり、実際の数値を誇張したりする。
  • 過度に制限し、ソースに実在する公開ストアのアセット(アイコン、スクリーンショット)や公開評価/ダウンロード数が利用できるのに、平凡な生成プレースホルダーや曖昧なコピーをデフォルトにする。
  • アセットをpublic/<brand>/以下にローカライズせず、最終レンダリングでリモートURLを参照する。
  • チャットでは読めても動画には適さない量のテキストを画面に詰め込む。
  • Remotionの商用ライセンス要件を無視する。

コメント