clementsprs/product-motion-film

プレミアムプロダクトモーションフィルム

ブランド自身のローンチビデオのように見え、かつ生き生きと感じられる、約40秒のプロダクトフィルムのレシピ：UI駆動、人物なし、ナレーションなし、音楽と少数のサウンドアクセント。実際のローンチフィルム（パートナーブランド自身のコンテンツレビューを含む）で約15回のレビューを経て洗練されました。以下のすべてのルールは、レビューで指摘されたメモから始まりました。

コードパターン：references/remotion-patterns.md。ブランド読み取り：references/brand-reading.md。ブリーフフォーマット：references/brief-template.md。

最初に収集する入力

1. ブリーフ：機能ごとに1行（ユーザーが何を求め、プロダクトが何をし、AIが何と答えるか）。ない場合は作成し（references/brief-template.md）、構築前に承認を得てください。
2. ブランドのライブサーフェス：トピックに最も近いマーケティングページとプロダクトアプリをブラウザで開いてください。
3. ユーザーが持参するアセット：ロゴタイプ（SVG）、アイコン、背景パターン、パートナー・チャンネルロゴ（実際のファイル）、ライセンスされたwoff2フォント、架空の人物用のアバター（生成またはライセンス）、音楽：生成前に気に入っているトラックがあるか尋ねてください。
4. フォーマット：最初に16:9。1:1と4:5のカットは16:9が承認された後にのみ行います。

ブラウザを開けない場合は、その旨を伝え、スクリーンショットを依頼してください。記憶からブランドの色や書体を推測しないでください。

1. ライブサイトとアプリからブランドを読み取る

ページ内の小さなスクリプト（getComputedStyleをH1、body、プライマリボタン、カードに使用。references/brand-reading.md参照）を使用して実際の値を取得します：見出しフォント/ウェイト/トラッキング、インクとセカンダリーグレー、アクセント、カードの角丸とヘアライン、背景処理、シグネチャービジュアル（例：夜空の背景）、ロゴタイプSVG。すべての値を、読み取った場所と時刻とともに1つのtheme.tsに書き込んでください。他の場所にはカラーリテラルを記述しないでください。

汎用モーションキット上に構築されたバージョンは「プレミアムではなく、ブランドに合っていない」として却下されました。ブランド自身のライブシステム上に構築してください。

2. 構造：1つの連続した会話

パート	長さ	内容
フック	~5秒	連携するAIをフルロゴと名前で表示、1つのチップで切り替え、最後にすべてのアイコンを一緒に表示。短い2行の主張（インク+グレー）。プロダクトのロゴタイプがスラムイン（「<プロダクト> がそれを実現します。」）
会話 ×4	~各7〜10秒	プロンプトが立ち上がり、中央に大きくタイプされる→送信される→右にスライド→ステータスライン（「<プロダクト>を検索中…」+実際のツール名、ドット→✓）→プロダクトカードがスレッド内に表示され、完全に再生される→AIの返信がメッセージバブル内にストリーミング表示される
フィナーレ	~3.2秒	ブランドの暗い背景がフルフレームで立ち上がる（唯一の暗い瞬間）。「[ロゴ]の全能力を、あなたのAIに。」、プレーンなURL

• インターティシャル、タイトルカード、上部のキャプションはなし。 1つの議論が機能を示します。新しいプロンプトがトランジションになります：スレッドがスクロールし、新しいメッセージが立ち上がることで以前のやり取りが押し上げられます。ステップ内ではカメラはプロンプト→プロダクトカード→返信と移動します。

• 一度に1つのことに焦点を当てる。 チャットとプロダクトを分割画面で表示しない（「画面に情報が多すぎる」）。

• 全体を通して明るいグラウンド。 プロダクトの結果はカードとして会話内に表示されます。フィルムの途中で暗いパネルが立ち上がると、不自然なカットのように感じられます。暗色はエンドカードのみ。

• プロダクトがあらゆるAIと連携する場合（MCPサーバー、パブリックAPI）はAIニュートラル： チャット内に単一のアシスタントのロゴ、書体、色は使用しません。ヘッダー = 「<プロダクト> MCP」チップ+「連携先」+AIアイコン。返信はプロダクトの本文フォントで、プロダクトカラーのテールがまだ到着中の単語に付きます。

• AIはメッセージバブルで会話します（白、左、ユーザーのグレーバブルの反対側）。 ベアな返信テキストはキャプションのように読まれ、「会話の一部」とは見なされません。アバターは不要です。

• 返信の前に実行を完了する： 返信はカードが完了したときにのみ開始されます。ステップの長さ = タイピング + ステータス + カード自身の実行時間 + 返信。

• モバイルサイズ： 1920×1080キャンバス上で、プロンプト ~62px、ステータス ~44px、返信 ~58px。プロダクトカードは ~1.2〜1.4倍にスケール（カードごとに、最も高いものでもヘッダーを超えないように）。

• エージェント主導バリアント（プロダクトがAIエージェントである場合）： 役割を反転させた同じ文法。エージェントが最初に書き（白いバブル、ヘッダーにそのマークとワードマーク）、ユーザーが決定します（グレーのバブル、ライブ波形と文字起こし付きのボイスノート）。デバイスを見せ、書かない： フォンモーメントはロック画面で開き、エージェントのプッシュ通知がドロップインし、タップするとバナーがアプリを開くようにフルフレームに拡大し、会話はその中にあります。アプリアイコンは白いタイル上のエージェントの顔です。デバイスは幅に表示されます： フォンモーメントは電話フレーム内に収まり（狭いカラム、通知がその中に開く）、ラップトップモーメントはフル幅を使用します。フレームはその間でバネで開き、履歴全体が新しい幅に再フローします（スレッドを電話用とラップトップ用の2回レイアウトし、フレームで位置とサイズをブレンド）、会話が消えることはありません。デバイス名は一度だけ記述します（「あなたのラップトップで」）、後の区切りには時間のみ表示します。長さを合わせるために証拠シーン（顧客事例、リファレンス）をカットしないでください。それはリクエストで戻ってきました。エージェント主導フィルムでは、エージェントの小さなマークが各メッセージの隣に配置されます（AIニュートラルなMCPフィルムとは異なります）。複数デバイスにわたる1日は、切り替わるヘッダーコンテキストチップ（「あなたの電話で · 8:42 AM」→「あなたのラップトップで」）とスレッド内の時間区切りで表現され、デバイスフレームは使用しません。アイテムリスト（エージェント/ユーザー/ボイス/カード/区切り、それぞれに読み取り時間あり）として構築し、そこから開始位置、レイアウト、スクロールカメラを計算します。

• プロアクティブエージェントバリアント（外部向けに推奨）： エージェントがあなたのために働くことを強調する場合、チャットをまったく表示しません。エージェントがPUSHし（エージェントの声のヘッダーライン+カード）、ユーザーは承認またはスキップをタップするだけです（プレス＋リップル、その後「承認済み」チップ。エージェントがリストをプッシュする場合は行ごとにスキップ/承認）。プッシュされたカードに既にアクションボタンがある場合（「今日の通話に追加」）、ユーザーはそのボタンをタップし、個別の承認行はありません。ユーザーが指示をタイプする場合（「イントロをカットして送信して」）はプレーンなLLMチャットとして読み取られます。承認を超えた1つの瞬間を許可します：ユーザーがエージェントに洞察で答える質問をする場合（「トムについて知っておくべきことは？」）またはその場で追加で依頼する場合。決してコピーの修正は行いません。外部カットはエネルギーで開きます：実際のアプリ通知の嵐が積み重なり揺れ、投げ飛ばされ、その後「スレッドが多すぎます。」そしてエージェントのマークがスラムイン。

3. コピー

• プロンプトは1人の人物が会話を続けているように聞こえる： 継続性は以前の内容への言及から生まれます（「彼らに対して」、「これらのシグナル」、「これを実行」）、最大1つの軽い反応。すべてのプロンプトに賞賛の言葉はありません。
• 具体的で価値を伝える、ステップ間で共有される語彙を持つ（例：すべてのプロンプトで「購買意図シグナル」）。
• 数字は最小限： フックにはなし（価格なし）。数字はカード内にのみ存在します。主張の数字はブリーフに出典があります。UIの数字は例示としてフラグが立てられます。人物と企業は架空です。
• ステータスラインには実際のツール名またはAPI名を使用し、プロダクトの実際のツールリストと照合してください。決して発明しないでください。
• ロゴは名前を置き換える： クロージングライン内のロゴタイプ。ロゴタイプ+ワードロックアップはその単語スペースを保持します。URLに矢印やボタンはありません。ビデオ内でクリック可能なものはありません。

4. プロダクトカード：AIが実際に何をしたかを表示

• ステップごとに1枚のカード、3〜4行、ヘッダーにプロダクトのフルロゴタイプ。
• 定性的でAI時代のアウトプット、配管ではない： {{firstName}}マージタグは使用しません（「AI時代には十分に定性的ではない」）。1つのレコードに対してリアルタイムで書かれた実際のメッセージ、そのデータから描画されたフレーズをマーカースイープでハイライト、1行のアングルを表示。
• ワークフローは条件分岐のあるフロー： ステップ（実際の単語付き）→「3日待機」→「開封されず」→メール /「開封、返信なし」→ライブ波形付き音声メッセージ。1行の日付アイコンではありません。カードはフローが描画されるにつれて下方向に成長します。空のブロックは絶対にありません。
• 実際のチャンネルロゴ（LinkedIn、Gmail…）が信頼性を高めます。
• ステータスリストはモダンな実行ログ： 塗りつぶされる細いレール、ドットは保留中→スピニングリング→ブランドカラーの塗りつぶされたチェックマーク、ステップごとの結果行、小さな所要時間。緑のチェックが付いたボックスアイコンは「古臭い」と見なされます。
• 状態変化はそれ自身の瞬間： トグルはカードが着地するのを待ち、トラックがフェードインし、ノブが押しつぶされ、パルスリングが広がり、「アクティブ」ラベルがポップし、その後初めて実行が開始されます。
• 表示されているアクションに属さないUIはカット： スケジューリングステップのチームチャット要約カードは「意味をなさない」。

5. モーション文法：要素でダイナミックに、ホールドで読みやすく

基準：すべての要素に物理演算があり（公開例：Alloの「We decided to give Grok Bot a phone」、2026年10月、マスコット不要）、AIアシスタント自身のローンチフィルム（フレームレスの会話、大きなタイプ）。

• 到着するすべてのものにイージングではなくスプリング： spring()（オーバーシュート付き。設定済みプリセットと減衰するkick()がパターンファイルにあり）。
• 単語はわずかに傾いてスプリングで登場し、 ラインが構築されるにつれて互いを押し出します。古いラインは投げ捨てられ、フェードだけでは消えません。ロゴタイプはスラムインし、ラインが一度揺れます。
• スレッドカメラ： テキスト長の推定からスレッドをレイアウトし、フォーカスポイント間（新しいプロンプト中央→カード中央→返信ビュー内）をソフトスプリングでスクロール。送信時とカード着地時に小さなパンチ。ヘッダーは白いフェードの上に置かれ、スクロールされたコンテンツが下をすり抜けます。
• カードはスプリングで着地（ わずかな傾き、ツールコールが着地したときの小さなバンプ）。行はスライドイン、タグとチェックはポップ、バーはオーバーシュート、プレビューはフリップ。
• ホールドは長く、モーションは速く： 3.2秒のステップは「速すぎて読めない」と言われました。ダイナミズムはスナッピーなエントランス（0.3〜0.6秒）から生まれ、ホールドを短くすることからは生まれません。返信は毎秒約9単語、次のプロンプトの前に約1秒。期間と可読性が競合する場合、可読性が優先されます：ステップを削除することを提案してください。
• ハードカットなし、フレーム全体のクロスフェードなし：1つの連続した空間。

6. 音楽とサウンド

• 気分が良く、彈みがあり、モダン： 約115〜122 bpm、クラブキックのない明るくスナッピーなドラム、彈みのあるベース、プラック/ギター/マリンバ、クラップとスナップ。レビューで却下されたもの：穏やかなピアノベッド（「もっとダイナミックに」）、4つ打ちエレクトロポップ（「ナイトクラブすぎる」）、レトロなもの（「古臭い」）。
• 選んだトラックが短すぎる場合（ ストックグルーヴは約25秒が多い）：フルセクションの4小節ブロック全体を小節境界で繰り返し、イントロの後に開始してフィルムがフルエネルギーで開くようにし、最後のフレームで実際のエンディングを保持します。選んだトラックをタイムストレッチしないでください。レシピはパターンファイル（「サウンド」）にあります。
• 生成する場合： フィルムの正確な長さをリクエストし、それに基づいて構築する前に1秒あたりのラウドネスを確認してください。モデルはプロンプトの構造を無視します（あるテイクはドロップ前に15秒間静かに座っていました）。機能したプロンプトはパターンファイルにあります。
• SEは視認できる原因がある場合のみ（ロゴスイッチとカード着地時のポップ、送信時のクリック、プロンプト立ち上がり時とフィナーレ時のソフトなウィッシュ、最後のステップがチェックされたときのチャイム）。約-14 LUFSにミックス。

7. 品質：非常にシャープ

• マスターは超解像2倍（--scale=2、CRF 14、JPEG 100、x264 slow）。レビューのラウンドではストレートな1080pレンダリングを使用できます。
• 大きなサーフェスにCSSぼかしなし。大きなbox-shadowのぼかしなし（Chromeでバンディングが発生するため、代わりに放射状グラデーションを使用）。ローカルのwoff2フォント、制限付きウェイト付き。fill="currentColor"のSVGは<Img>内で黒くレンダリングされるため、fillを書き換えてください。
• ピクチャーのみの変更：--mutedで一度レンダリング、各オーディオミックスをWAVとしてレンダリングし、マルチプレックス。オーディオのみの変更：既存のピクチャーに再マルチプレックス。

8. 構築とレビューループ

1. Remotionプロジェクトをスキャフォールドし（パターンファイルの構造）、theme.tsを埋め、ユーザーのアセットをpublic/に配置します。
2. この順序でフィルムを書く：ロゴリスト+フックコピー、PROMPTS、TOOLS、STATUSES、REPLIES、ステップごとの1つのカードコンポーネント（高さとスケール）、その後タイムライン定数（開始と期間は計算済み）、音楽オフセット。
3. フルレンダリングの前にすべてのステップでスチル（npx remotion still ... --frame=<秒×60> --scale=0.5）、コンタクトシートとして：重なり、折り返し、ヘッダー下のカード、空のブロック、残存する単一アシスタントブランディング。
4. 最初に1080pレビューを送信。承認後にのみ4Kおよびソーシャルカット。すべての修正を同日中にこのスキルに書き戻します。

カードの高さは測定され、推測されない： スレッドレイアウトは各カードの高さを予約し、過小評価があると次のメッセージがカードの下に滑り込む原因になります（452pxで予約された要約カードが実際には約530でレンダリングされ、オーバーラップしました）。実際のパーツ（ヘッダー+本文パディング+行×行の高さ）を合計し、フルレンダリングの前にすべてのカードの最終状態のスチルをその後のアイテムと照合します。

完了条件

• AIとの1つの会話として読め、一度に1つのことに焦点が当たり、すべての行がスマートフォンでの最初の視聴で読める。
• AIが答える前に各ステップがプロダクト内で完了し。全てのプロダクトカードは実際のチャンネルロゴを使用して、実際の定性的なアウトプットを示す。
• 何もモーションなしで到着したり去ったりしない。何も...

（翻訳は元の内容に基づいており、必要に応じて調整が可能です。）