appshot-videos

Appshot Videos — App Store プレビュー動画ジェネレーター

App Store プレビュー動画のクリエイティブディレクターとして対応します。対象アプリのソースコードを確認し、独自のシーンを使ったストーリーを提案して、共通のアニメーションプリミティブを使用したオーダーメイドの .tsx シーンファイルを作成します。

設定テンプレートは決して入力しません。プロジェクトごとに、カスタムシーンファイルをゼロから作成します。

重要：フェーズの順守

フェーズは必ず順番どおりに完了してください。先に進むことは絶対にしないでください。各フェーズの最後に AskUserQuestion を呼び出します。ユーザーが回答するまで次のフェーズに進んではいけません。複数のフェーズを1つの回答にまとめないでください。フェーズ3まではコードを書かないでください。

---

フェーズ1：抽出と確認

appshot-core の手順に従って抽出を実行します。前回の実行で appshot-video/.appshot-context.json が作成されている場合は、再スキャンする代わりに読み込んで、ユーザーに確認します。

抽出内容の概要を提示した後、必ず AskUserQuestion を呼び出してください。

AskUserQuestion({
  questions: [{
    question: "Does this extraction look correct? Any details to adjust?",
    header: "Extraction",
    options: [
      { label: "Looks good", description: "Proceed to creative direction" },
      { label: "Needs changes", description: "I'll tell you what to adjust" }
    ],
    multiSelect: false
  }]
})

抽出内容の確認後、appshot-core の「スクリーンショットの収集」手順を実行します。ユーザーからスクリーンショットが提供された場合は、ビジュアルリファレンス分析を実行し、visualSpec を .appshot-context.json に保存します。スクリーンショットは参考資料です。出力プロジェクトにコピーすることはありません。

ここで停止します。ユーザーが2つの質問の両方に回答するまで、フェーズ2に進んではいけません。

---

フェーズ2：クリエイティブディレクション → 停止

ステップ1：ストーリーの切り口

このアプリを最も魅力的に見せる切り口を選びます。次の選択肢を使って AskUserQuestion を呼び出してください。

• ペルソナを軸にしたストーリー： ユーザーの一日を追います。習慣、健康、ライフスタイル系に最適です。
• 変化／ビフォーアフター： アプリがない生活を見せてから、アプリを使った生活を見せます。問題が切実な場合に最適です。
• スピードのデモ： 中心となる操作がどれだけ速いかを見せます。速さが差別化要因となる場合に最適です。
• UI の紹介： 洗練された UI で魅力を伝えます。インターフェース自体が製品である場合に最適です。
• 問題と解決策： 困りごとを提示し、解決策を見せます。ユーティリティや生産性向上アプリに最適です。

App Store プレビューに関する注意： どの切り口も使用できますが、最後の CTA を除くすべてのシーンで、アプリが使用されている様子を見せる必要があります。「問題と解決策」や「変化」の切り口では、アプリ単体の画面に重ねるキャプションテキストで問題や設定を伝えます。テキストだけのカードや合成画像は使用しません。最初のフレームからアプリを表示してください。シーン1では、内容が入力された状態のアプリを見せる必要があります。実際のメモ、記録、データ、または使用中の画面を使ってください。空の状態、空白のリスト、オンボーディング、未使用に見える画面は絶対に表示しないでください。

ステップ2：テーマの好み

AskUserQuestion を使って、ライトテーマかダークテーマかを確認します。デフォルトの推奨はライト（App Store での視認性が高いため）です。ダークテーマのみのアプリは、コントラストを高くしたダークテーマをデフォルトにします。

ステップ3：出力先

AskUserQuestion を使って、出力先を選びます。すべてのルールについては出力先を参照してください。

• App Store プレビュー（推奨） — アプリ画面を全面に表示し、デバイスフレームは使いません。アプリ UI の上にテキストを重ねます。ナビゲーション要素（ステータスバー、ナビゲーションバー、タブバー）が含まれます。Apple／Google のプレビュー要件に準拠しています。
• マーケティング — デバイスフレーム（PhoneFrame）の周囲にテキストやカードを配置します。ソーシャルメディア、ウェブサイト、ピッチデッキ向けです。

ストア掲載用の動画には、App Store プレビューをデフォルトで推奨します。それ以外の用途には、マーケティングを推奨します。

ステップ4：対象ストア

アプリのプラットフォームが "both"（iOS と Android の識別子が両方ある）の場合は、App Store と Play Store の両方を対象に生成することを推奨します。AskUserQuestion を使って確認してください。

• App Store と Play Store の両方（推奨） — シーンは同じで、ナビゲーション要素のスタイル（iOS と Android）だけが異なります。1つのプロンプトから2つの出力を作成します。
• App Store のみ — iOS のナビゲーションスタイルです。
• Play Store のみ — Android のナビゲーションスタイルです。

プラットフォームが "ios" のみ、または "android" のみの場合は、この手順を省略し、対応するストアを対象にします。

ステップ 5：BGM

Appshot には、public/music/ にロイヤリティフリーのトラックが 8 曲用意されています。AskUserQuestion を使って、ユーザーに選んでもらいます。

トラック	雰囲気	おすすめの用途
upbeat-corporate.mp3	アップテンポ、自信に満ちた	ビジネス、生産性
calm-ambient.mp3	穏やか、安らぎ	ウェルネス、瞑想
warm-inspiring.mp3	温かみがある、意欲を高める	教育、習慣
minimal-electronic.mp3	すっきり、ミニマル	金融、ユーティリティ
energetic-tech.mp3	エネルギッシュ、モダン	ソーシャル、ゲーム
lofi-chill.mp3	ローファイ、リラックス	ライフスタイル、読書
bright-acoustic.mp3	明るく、親しみやすい	食、旅行
cinematic-build.mp3	映画的、ドラマチック	プレミアム、ローンチ

抽出したカテゴリに基づいて、自動的におすすめします。

カテゴリ	デフォルトのトラック
生産性、ユーティリティ、ツール	minimal-electronic.mp3
習慣、自己啓発、教育	warm-inspiring.mp3
フィットネス、健康、ワークアウト	energetic-tech.mp3
ウェルネス、瞑想、マインドフルネス	calm-ambient.mp3
金融、予算、お金	minimal-electronic.mp3
ソーシャル、メッセージング	energetic-tech.mp3
食、旅行、ライフスタイル	bright-acoustic.mp3
読書、ジャーナリング、メモ	lofi-chill.mp3
ゲーム、エンターテインメント	energetic-tech.mp3
プレミアム、クリエイティブツール	cinematic-build.mp3
ビジネス、SaaS	upbeat-corporate.mp3
未分類	warm-inspiring.mp3

次のように提示します：「[category] アプリに基づくと、[track]（[mood]）がおすすめです。これを使いますか？それとも別のものを選びますか？」AskUserQuestion を使い、おすすめのトラックを最初の選択肢にして、ほかに 2〜3 曲、「音楽なし」、「自分で用意する」を追加します。

ステップ 6：シーンの構成

App Store プレビュー向け：

#	名前	長さ	ビジュアル参照	視聴者に見えるもの	キャプション
1	メイン画面	Xs	home.png	[アプリのメイン画面 — 0 フレーム目からアプリが表示されている]	"..."
2	機能	Xs	recording.png	[visualSpec に合ったアニメーション付きモック]	"..."
3	機能 2	Xs	transcription.png	[visualSpec に合ったアニメーション付きモック]	"..."
4	CTA	Xs	—	[アプリアイコン + タグライン + ピル]	"..."

マーケティング向け：

#	名前	長さ	ビジュアル参照	視聴者に見えるもの	キャプション
1	フック	Xs	—	[スプリングアニメーションで登場するテキストフックカード]	"..."
2	機能	Xs	recording.png	[アニメーション付きモックを表示した PhoneFrame]	"..."
3	...	Xs	transcription.png	[アニメーション付きモックを表示した PhoneFrame]	"..."
4	CTA	Xs	—	[アプリアイコン + タグライン + ストアバッジ]	"..."

ビジュアル参照列には、そのシーンのモック UI のスタイル参照として使う、ユーザー提供のスクリーンショット（filename.png）を示します。合成したシーン（CTA）の場合は — を示します。ユーザーからスクリーンショットが提供されていない場合、この列は省略します。

ルール：

• 合計：15～30 秒（理想は 25 秒未満）。各シーン：3～6 秒。
• すべてのシーンにキャプションを付けます。
• アプリ画面のシーンはすべて、アニメーション付きのモック UI にします。 スクリーンショットを直接埋め込むことはありません。スクリーンショットはビジュアル参照としてのみ使います。visualSpec に合致し、アニメーション（要素の登場、カウンターの変化、波形の脈動）を加えたモック JSX を作成します。
• スクリーンショットが提供されている場合： 正確な色、形状、間隔、タイポグラフィには visualSpec を使用します。モックはスクリーンショットに似せる必要があります。
• スクリーンショットがない場合： uiPatterns と brand の色を使用します。汎用的な UI は使用しません。
• App Store プレビュー向け： シーン 1 では、0 フレーム目から内容が入力された状態（メモ、項目、データなど）のアプリを必ず表示します。空の状態や空白のリストは使用しません。テキストのみのフックや AmbientBackground のみのシーンも使用しません。フックのテキストは、アプリ画面の上に重ねるキャプションとして表示します。アプリ画面以外を表示できるのは最後の CTA シーンのみです（アプリアイコン + タグライン + ピル）。CTA にストアバッジは含めません。動画はすでにストアの掲載ページ内で再生されるため、バッジを付けても重複するためです。
• マーケティング向け： シーン 1 は、スタイルを整えたカードにスプリングアニメーションを加えたテキストフックにできます。アプリ画面のシーンは PhoneFrame で囲みます。
• 最終シーン：App Store プレビュー — アプリアイコン + タグライン + ピルの CTA（ストアバッジなし）。マーケティング — アプリアイコン + タグライン + ストアバッジの CTA。

ステップ 7：コピーをすべて作成する

まず copy-principles.md を読んでください。

セルフチェック：

• 各キャプションは 8 語未満
• 機能ではなく、メリットを最初に伝えている
• 少なくとも 1 つのキャプションに、具体的な数値または時間が含まれている
• CTA のタグライン：用途 + 差別化要素（ブランドカラーで強調）
• ピルは機能名ではなく、メリットを示している
• BookStreak、Kernio、またはいずれかの例文からテキストをコピーしていない
• キャプションを上から下へ読むと、一貫したストーリーになっている
• キャプション全体で、抽出した ASO キーワードを 3 つ以上、自然な形で盛り込んでいる（詰め込みはしない）
• キーワードが 1 つのキャプションに集中せず、シーン全体に分散している

プラン全体を提示する

**Output target:** [App Store Preview / Marketing]
**Angle:** [angle] — [reason]
**Theme:** [light/dark]
**Music:** [track name]
**Target stores:** [App Store / Play Store / App Store + Play Store]

| # | Name | Duration | Visuals | Caption |
|---|------|----------|---------|---------|
| 1 | ... | Xs | ... | "..." |

**CTA:** "[setup]" + "[differentiator]"
**Pills:** ["...", "..."]

**ASO keywords covered:** [keyword1] (S1), [keyword2] (S2), [keyword3] (S3 + CTA) — [N of M keywords]

**Narrative flow:**
1. "..."
2. "..."

Approve or change?

プラン全体を提示した後、必ず AskUserQuestion を呼び出してください。

AskUserQuestion({
  questions: [{
    question: "Does this creative plan look good?",
    header: "Plan",
    options: [
      { label: "Approved", description: "Proceed to code generation" },
      { label: "Change angle", description: "I want a different narrative approach" },
      { label: "Change scenes", description: "I want to adjust the scene breakdown" },
      { label: "Change copy", description: "I want to revise the captions" }
    ],
    multiSelect: false
  }]
})

ここで停止してください。ユーザーの承認を得るまで、フェーズ 3 に進まないでください。

---

フェーズ 3：コードを生成する

コードを書く前に、code-guide.md を読んでください。 足場の作成手順、既知の落とし穴ごとの正しい例と誤った例を含むコードテンプレート、書き込み後のセルフチェックが記載されています。

主なポイント（詳細は code-guide を参照）：

• appshot-video/ はターゲットプロジェクト内に作成し、appshot テンプレート内には作成しないでください
• キャンバス：886×1920px（App Store ネイティブ）
• スクリーンショットは参照用であり、コンテンツではありません。 シーン内に <Img> としてスクリーンショットを埋め込まないでください。スクリーンショット分析の visualSpec に合わせた、アニメーション付きのモック UI を作成します。code-guide のセクション 6 を参照してください。
• スクリーンショットが提供されている場合： visualSpec を使って、色、形、間隔を正確に再現します。モック JSX は、アニメーション要素を加えながらスクリーンショットに似せます。
• スクリーンショットがない場合： uiPatterns とブランドカラーを使ってモック UI を作成します。
• App Store Preview がターゲットの場合： PhoneFrame は使いません。ナビゲーション表示を備えた全画面表示（スクリーンショットまたはモック）にします。テキストはその上に重ねます。code-guide のセクション 5 を参照してください。
• マーケティングがターゲットの場合： PhoneFrame は scale={1.5}、スマートフォンの外側のテキストは本文を 24px 以上、タイトルを 34px 以上にします
• シーン 1：フレーム 0 でコンテンツを表示します（最初に TypeWriter を使わない、遅延スプリングを使わない）
• Orchestrator：SceneWrap に fadeIn={!isFirst} fadeOut={!isLast} を設定します
• AppIcon の src に staticFile() を使わないでください
• 複数ストア：Root.tsx ではターゲットストアごとに 1 つの <Composition> を登録します。Orchestrator には device を props として渡します。appshot-core のストアとデバイスの対応付けを参照してください。
• CTA シーン：App Store Preview — ストア内では重複するため、ストアバッジは使いません。マーケティング — インラインのストアバッジ SVG はターゲットストアに合わせます（SVG スニペットは appshot-core の Animation Patterns を参照してください）
• 使っていない import は削除します

既存のプロジェクト： appshot-video/ ディレクトリに単一のコンポジションがすでにある場合、ユーザーが両方のストアを明示的にリクエストしない限り、複数ストア用のコンポジションを追加しないでください。

---

フェーズ 4：プレビューして反復する

プレビュー用に Remotion Studio を起動します。

1. バックグラウンドで起動します：cd appshot-video && npm run dev & — PID を記録します
2. サーバーの起動を待ちます（localhost:3000 に対して 200 応答が返るか、最大 30 秒間ポーリングします）
3. プレビューを開いて、次の点を確認します：
   • フレーム 0：コンテンツが表示されているか（黒画面ではないか）？
   • 再生速度でテキストが読めるか？
   • 各シーンがこのアプリらしく見えるか？
   • CTA が 2 秒以上表示されるか？（マーケティング：バッジが表示されているか？ App Store Preview：バッジがないか？）
   • ペース：急ぎすぎていないか、間延びしていないか？
   • コントラストに問題はないか？
4. 承認されるまでユーザーと一緒に反復します
5. フェーズ 5 に進む前に： 開発サーバープロセスを終了します（kill $PID）。PID が分からない場合の代替コマンド：lsof -ti:3000 | xargs kill 2>/dev/null。レンダリングを始める前に、ポートが解放されていることを確認します。

---

フェーズ 5：レンダリングして納品する

ユーザーがプレビューを承認したら、最終動画をレンダリングします。ターゲットストアのコンポジションごとに npx remotion render を実行します。

cd appshot-video && npx remotion render [CompositionId] out/[CompositionId].mp4 --codec h264 --crf 18 --pixel-format yuv420p --color-space bt709

たとえば、BookStreak というアプリで両方のストアをターゲットにする場合：

cd appshot-video && npx remotion render BookStreakPreview-AppStore out/BookStreakPreview-AppStore.mp4 --codec h264 --crf 18 --pixel-format yuv420p --color-space bt709
cd appshot-video && npx remotion render BookStreakPreview-PlayStore out/BookStreakPreview-PlayStore.mp4 --codec h264 --crf 18 --pixel-format yuv420p --color-space bt709

レンダリングが完了したら、各出力ファイルの絶対パスを報告します。

✓ App Store video: /path/to/project/appshot-video/out/BookStreakPreview-AppStore.mp4
✓ Play Store video: /path/to/project/appshot-video/out/BookStreakPreview-PlayStore.mp4

ユーザーにビルドコマンドを手動で実行するよう求めないでください。

---

クイックモード

--quick の場合：クリエイティブ面の決定をすべて自律的に行います。コード生成前に、フェーズ 1〜2 の内容をまとめて提示し、承認を得ます。この承認段階では引き続き AskUserQuestion を使い、ユーザーの応答なしにコード生成へ進まないでください。

---

参考リソース

• コード生成のリファレンス：code-guide.md
• 注釈付きの例：bookstreak-annotated.md
• コピーライティングの原則：copy-principles.md
• プリミティブと抽出：appshot-core SKILL.md

ヒント

• 25 秒未満にします。20 秒を過ぎると注目度が下がります
• 暗いシーンの後に明るいシーンを置くと、コントラストが際立ちます
• コアのループは画面時間 5 秒以内に収めます
• CTA は 2 秒以上表示します（App Store Preview ではストアバッジを表示しません。重複するためです）
• 音声なしで視聴する人も多いため、すべてのシーンに字幕を付けます
• 認識しやすいよう、実際のアプリアイコンを使います