アプリプロモーションビデオ（Remotion + 実機iPhone + 実UI）
この方法は4つの小規模iOSアプリ（Unblock、Talljakt、Georama、Quiz）で開発され、あらゆるアプリで繰り返し使えるように書かれています。アプリ固有のものはすべて examples/ に、再利用可能な部品は templates/ にあります。詳細なテクニック、落とし穴、調整可能な変数は references/techniques.md にあります。あなたは建築前にそれを読む必要があります。
言語: ユーザーが使用している言語で話しかけてください。もしノルウェー語で始めたら、ノルウェー語で答えてください。動画内のテキストの言語は別の選択肢です（下記の質問3）。
0. まずインタビュー（短め）
これらをまとめて質問してください（AskUserQuestionまたは1メッセージで）。デフォルトを提案し、ユーザーが「デフォルトで」と答えられるようにします。
- 長さ: 20～60秒。デフォルトは約30秒。
- フォーマット: 9:16 縦型 1080×1920。デフォルトは60fps。1:1や16:9も可能。
- 画面上のテキストの言語。
- 用途: プライベート共有、ソーシャル（Reels/TikTok、セーフゾーン）、App Storeプレビュー。App Storeプレビューは実際の録画でなければならず、最大30秒、架空の3D効果は禁止されているため、この方法には適していません。
- 画面から浮き上がるUIの量: なし（控えめ：実際の録画、フォーカスズーム、アプリ独自のトランジションのみ。
examples/kjopを参照）、微妙（1～2つのヒーローモーメント）、中程度、フル（すべてが浮き上がる）。デフォルトは微妙から中程度。なしはプレーンな日常アプリ（リスト、フォーム、設定）に適しています。フルは部品が自然に物理オブジェクトであるアプリ（ゲームのタイル）に適しています。通常のアプリ（リスト、フォーム、カード）では、1～3つの主要要素のみを浮き上がらせ、残りは画面に留めます。 - 創造的自由度: エージェントがコンセプトを考えてよいですか？
- 音楽: コードで生成（デフォルト、ライセンス不要）または独自のトラック。各アプリに独自のサウンドパレットを割り当て、2つの動画が決して同じように聞こえないようにします（
references/techniques.md#soundを参照）。 - 表示する機能（3～5つ）、そしてアプリの「ヒーロー」要素または瞬間は何ですか？
- エンディング: 実績のある2つのオプション。アプリに応じて選択し、不明な場合は尋ねてください。 (a) アプリ独自の要素から構築されたロゴロックアップ（Unblock：ロゴが3Dタイルから組み立てられ、最後に真鍮のタイルが着地する）。 (b) スローガンを上部に配置したホーム画面（アイコン＋名前が最後の行になる）。Talljakt：「6つの数字。 / 1つのターゲット。 / [アイコン] Talljakt。」
- 電話の色: コズミックオレンジ、ディープブルー、シルバー。アプリのアクセントカラーに合うものを選んでください。
回答は主に、コンセプト、画面から浮き上がる量、テンポ（bpm）、色を決めます。
0a. 飛行前チェック：ツールチェーンを確認
何かを構築する前に、インストールされているものを確認し、短いリストで報告してください。不足しているものがあればインストールを申し出て、ユーザーが承諾した場合のみインストールしてください（これらはシステム変更です）。既に存在するものはスキップしてください。
| ツール | 確認 | インストール |
|---|---|---|
| Xcode + コマンドラインツール | xcodebuild -version, xcode-select -p | App Store（Xcode）、その後 xcode-select --install |
| iPhone 17 Pro デバイスタイプを持つiOSシミュレーターランタイム | xcrun simctl list runtimes, `xcrun simctl list devicetypes | grep "iPhone 17 Pro"` |
| baguette | baguette --version | brew install baguette |
| Blender | ls /Applications/Blender.app | brew install --cask blender |
| Node 22 | node --version | nvm install 22（または brew install node@22） |
| ffmpeg | ffmpeg -version | brew install ffmpeg |
| Python 3 + Pillow | python3 -c "import PIL" | python3 -m pip install --user pillow |
| Homebrew（上記のため） | brew --version | brew.sh の公式インストールスクリプト（ユーザーが実行） |
その後、Remotionプロジェクトをセットアップし（references/techniques.md#setup）、iPhoneモデルを一度変換します（下記ステップ6）。どちらもプロジェクトローカルであり、リポジトリ内で作業する以外の追加の許可は必要ありません。
0b. 納品フォルダ（Macごとに1回）
完成した動画は、プロジェクトの out/ だけでなく、マシン上の固定フォルダに納品されます。選択内容はMacごとに ~/.config/app-promo/destination に保存されます（1行、フルパス）。
- 開始時にファイルを読みます。存在する場合は、そのフォルダを尋ねずに使用します。
- 存在しない場合は、一度尋ねます（AskUserQuestion）：
~/Movies/App Promos（推奨）、プロジェクトのout/フォルダ、デスクトップ、またはカスタムパス。フォルダを作成し、パスを~/.config/app-promo/destinationに書き込みます。 - ユーザーはいつでも尋ねることで変更できます。その場合はファイルを更新します。
1. ワークフロー
- アプリを読む。 README、カラートークン（
Color(、hex、テーマ構造体を検索）、フォント、コピー。良い部分は動画内でアプリ自身のコピーを使用します。 - デバッグエントリポイントを見つける 再生せずに状態を表示するため：起動引数（
--design-*）、URLスキーム（myapp://design-home?state=…）、フィクスチャ。存在しない場合は、アプリにDEBUG専用フックを追加する前に尋ねてください。 - 専用のiPhone 17 Proシミュレーターにビルドしてインストールする。 スクリーンショットは1206×2622でないと、電話モデルの画面と一致しません。
references/techniques.md#simulatorを参照。 3b. 実際の画面録画の場合： references/recording.md を読んでください。最初にシーンとタップポイントを準備し、UI検査、ビルド、動画分析を録画中に行わずに短いテイクを録画し、Remotionの前に生のタイミングを確認します。フローフル全体の単一連続テイク（examples/quizのように）は、すべての数字、プログレスバー、履歴エントリを一貫させます。 - 各状態のスクリーンショットを撮る。 静止/切り抜きシーケンスの場合は、実際のタップで再生し、タップのたびにスクリーンショットを撮ります（
references/consistency.mdを参照）。動画の場合は、別のリハーサルでその検査を行い、最終テイク中には決して行わないでください。ステータスバーを固定します（9:41、100%、放電中、または緑色の充電インジケーターを表示）。baguette describe-uiで要素フレームを取得します。 - UI要素を切り抜く アプリ固有の
tools/prep_<app>.pyを使用します。これはtemplates/tools/prep_helpers.py（スプライト、空の背景、矩形のJSON）を使用します。各セットを視覚的に確認します（マゼンタに合成）。 - iPhoneモデルを変換する baguette（USDZ）からGLBにBlenderで変換します（
templates/tools/convert_model.py）。 - Remotionプロジェクトをセットアップする または既存のものを再利用します：
templates/src/three/*、Title.tsx、brand.ts、remotion.config.ts、tools/sheet.sh、tools/prep_helpers.pyをコピーします。 - ビートシート（
timeline.json）をBPMグリッド上でフレーム単位で書きます（120 bpm、60 fps = 1拍あたり30フレーム）。画像と音の両方がこのファイルを読み取ります。 - シーンを連続した「ワンテイク」として構築する： カメラは静止したままで、電話リグが動きます。画面の変化はトランジションで隠します：スピン、アプリ自身のナビゲーション、要素からのズームまたはワイプ、プッシュ、フリップ、ウィップパン、マッチカット、早送り。これらを変化させ、動画あたりスピンは最大2回まで。
references/techniques.md#transitionsを参照。 - コンタクトシート（
tools/sheet.sh f1 f2 …）でキーフレームを繰り返し確認します。それを見てください。フル動画をレンダリングします（高速：30秒で約1～2分）。 - チェックポイント： 残りを構築する前に、最初の約12秒をユーザーに表示します。
- サウンドトラックを生成する（
tools/<app>_audio.mjs、例からコピー）同じタイムラインから。レンダリングし、ラウドネスを測定し（ffmpeg -af ebur128、目標は−14～−16 LUFS）、ユーザー用にファイルを開きます。
12b. 一貫性チェック（納品前に必須）。 電話画面に表示されているものとその外で強調表示されているものの不一致は、AIアーティファクトのように見えます。references/consistency.md を確認し、すべてのトランジション、画面変更、リフトの前後±2フレームのコンタクトシートをレンダリングします。
13. 共有テキスト： 動画が共有される場所に貼り付けるための短いテキストを書きます（以下の形式）。クリップボードにコピーし（pbcopy）、返信でコードブロックに表示します。ファイルとして保存しないでください。
14. 納品： 最新の承認済みレンダリングを納品フォルダ（0b）に <アプリ名> promo.mp4 としてコピーします。同じアプリの以前の納品を上書きします。バージョン履歴（-v2、-v3 …）は out/ に残ります。返信で納品ファイルのパスを教えてください。
共有テキスト形式
テキストは通常Slackに投稿されるため、Slackの書式（mrkdwn）を使用します：単一アスタリスクで囲んだ太字タイトルと、"• " で始まる箇条書き（貼り付けられた "- " はリストになりません）。動画の言語で書いてください。
*<アプリ名> – <2～4語の短いタグライン、できれば動画内のもの。>*
<一文：アプリの説明、誰のためのものか、何をするものか。>
• <ポイント：核となる動作、具体的かつ能動的>
• <ポイント：アプリが提供する選択肢（トピック、モード、エリア、ペースなど）>
• <ポイント：…>
• <ポイント：報酬/共有/特別な点>
ルール：4～5ポイント、ポイントの末尾にピリオドなし、読者に直接語りかける、具体的な動詞、マーケティングの決まり文句なし。アプリが実際にどう使われるかから始める：最初の2～3ポイントは、オプションや追加要素の前に具体的に仕組みを説明します。次に、動画が示すものだけでなく、アプリで何ができるかを説明します：オプションをポイントごとにグループ化します（「国、首都、国旗を練習」）ことで、読者が範囲を理解できるようにします。アプリ独自の名前を使用し、各モードが実際に何をするかコードで確認してください（READMEは古くなることがあります）。examples/*/share.txt を参照。
2. 実績のあるコンセプトテンプレート
1つのヒーロー、すべてを結びつける1つの動き、アプリ自身のコピー：
| パート | Unblock | 一般 |
|---|---|---|
| フック 0～2.5秒 | タイルが暗闇に浮かぶボードに落下。電話なし。「詰まった。」 | アプリが解決する問題を、アプリ自身の要素で、電話なしで示す |
| リビール | カメラが引きながら、電話がボードの周りに組み立てられる | 同じ要素がアプリの中にあることが判明 |
| コアループ | ビートに合わせて4手。画面外のカウンター | 3～4ビートでの主要アクション |
| ヒーローモーメント | ヒーローが画面から飛び出しカメラに向かって飛ぶ。真鍮のフラッシュ | 1つのビッグモーメント（画面外効果、またはアプリ自身の最高のアニメーションをスローモーションで） |
| ペイオフ | 結果画面。3Dスターが跳ね出す | 報酬または結果 |
| 機能（間のトランジションを変化） | レベルピッカー、デイリーカード、スコア | 2～3の機能、それぞれに1つの強調要素 |
| アウトロ | 3Dタイルから構築されたロゴ。タグライン | アプリの要素からのロゴロックアップ、またはスローガン＋名前のホーム画面 |
アプリに本当に優れた独自アニメーションが1つある場合（Quiz：「答えを表示」ボタンが「不正解/正解」に裂ける）、それをヒーローにします：ズームイン、スピードランプでスローダウン、独自のサウンドを割り当て、キャプションは付けないでください。
2b. 優れたアプリプロモからの視覚的デバイス
優れたリファレンスは画面とコンテンツを使用し、レイアウトだけではありません。動画ごとに少なくとも3～4つ計画してください：
- 画面をクロップする： 1つの部分だけが表示されるように十分近づけます（タイマー、ボタン行、方程式）。電話はフレーム端で切られます。
focusポーズを使用します。 - 電話の横または前にコンテンツカード： アプリからの実際のカードやポスター（共有カード、結果カード、提案）を、電話の後ろまたは前に、わずかに回転した平面として配置します。
- 複数のコンテンツカードを一度に： 3～5種類のバリエーション（ページ、ソリューション、ポスター）を扇状に広げます。
- 複数のデバイス： ストーリーが共有または「全員に同じ」の場合、2台の電話を並べ、上部に名前チップを配置します。アプリが対応している場合は、電話＋Watch/iPad（baguetteにはiPadとWatchのモデルがあります）。
- アプリの要素を装飾として： 実際のタイル、ボタン、チップ、アイコンが背景に漂う（ぼかし＝遠く）、または電話の上に拡大されてタイポグラフィになります。1つのテーマモチーフ（パルスライン、クレヨンストローク、方眼紙）。
- アプリが作るものをオブジェクトとして： プリント、ポスター、カード。理想的には電話なしで。
- 吹き出しや思考バブル 電話で起こらないことに対して（Quiz：話された答えがカードの横に飛び出し、その後「正解/不正解」ボタンに落ちて「押す」）。
2c. テキストとフレーミング
- 上部の大きな中央揃えタイトルがメッセージを伝えます： 1行あたり2～4語、最大2行、2行目またはキーワードをアクセントカラーに。
- 下部の小さなキャプションは控えめに、タイトルを明確にする必要がある場合のみ（30秒の動画で2～3回）。読みやすくなければなりません：少なくとも約50ピクセル、明るい背景と影のあるチップ内に（浮遊テキストではなく）、電話のフレームと決して交差しないように低く配置し、少なくとも2秒間表示します。
- アプリが実際に行うことのみを主張します。 機能について書く前に、それが実際に何であるかを確認してください。
- 全画面テキストカード がサポートされています：色付きの表面（アプリのプライマリカラー）に大きな中央揃え2行タイトル、最後にフォーカスされていた要素からワイプインし、次のシーンにスライドアウトします。エンディングの前の息継ぎや橋渡しとして1つ使用し、理想的には視聴者に挑戦する質問をします（「間に合うかな？」）。激しいアクションからエンド画面に直接ジャンプしないでください。
examples/talljaktとexamples/quizのQuestionCardを参照。 - 隅に固定のアプリアイコンと名前はありません。 名前は最後、ロゴ内またはスローガンの最後の行としてのみ表示します。
- フレームをクリーンに保つ：1シーンあたり1アイデア。機能に表示するものがほとんどない場合（設定など）、それだけでシーンを与えるのではなく、別のシーンのキャプションまたは短いフォーカスとして組み込みます。タイトル＋ズームした電話＋要素の行＋キャプションを同時に避けてください。
- テンポ：無駄な時間なし。 すべてのシーンは開始から約1秒以内にイベントがあり、静的な画面にタイトルが1.5秒以上載ることはありません。繰り返されるステップ（クイズの質問2～13）は早送りできます。
- 選択肢をテキストではなくアクションとして表示します。 アプリにモードや設定がある場合、デフォルトが選択されている様子（カードが少し浮き上がる）、代替案をタップする様子（浮き上がり、画面状態が変わる）、そしてそのモードに導くスタートをタップする様子を表示します。
- そうでなければ不明瞭なインタラクション（メニューを開く、オプションを選ぶ）には、タップインジケーター（押し込まれ波紋が広がる円）を、アプリが実際に応答するものに付けます。
3. 原則
- 再現されたUIよりも実際のUI。 アプリのHTMLコピーではなく、スクリーンショット、録画、切り抜きを使用します。変更する必要のあるテキスト（カウンター、スコア）は、PILでアプリのフォントで描画し、オリジナルと照合します。
- 「画面外」は控えめに。 それはスパイスです。デフォルトは1つのヒーローモーメントと1～2つの浮き上がった機能です。
- ズームとフォーカスが強調のための主要なツールです。 カメラを画面の該当部分に動かします。
- 常にアプリのインタラクションを表示します。 静的状態だけではありません。アプリがタッチにどのように応答するかを示してください。
- 速いカットはスピード感を生みます。 静的状態の長いショットを避けてください。
- アプリの視覚的アイデンティティを尊重します。 アプリのカラー、フォント、デザイン言語を使用してください。
- 共有前に一貫性を確認します。
references/consistency.mdは必須です。 - 納品フォルダに納品します。 プロジェクトフォルダだけではありません。
4. 参照
references/techniques.md– 詳細なテクニック、落とし穴、調整可能な変数references/consistency.md– 納品前の一貫性チェックリストreferences/recording.md– 実際の画面録画の手順examples/– 特定のアプリの例と共有テキストtemplates/– 再利用可能なRemotionコンポーネントとツール