asc-app-shots-prompt

App Shots プロンプトジェネレーター

アプリのスクリーンショットを分析し、プロフェッショナルな App Store マーケティング用スクリーンショットを生成する asc app-shots generate --prompt "..." 向けの、詳細かつ最適化されたプロンプトを作成します。

asc app-shots generate の汎用デフォルトプロンプトでも問題なく動作しますが、正確な UI パネル、正確な見出しテキスト、正確な色を指定するカスタムプロンプトを使うと、Gemini が推測する必要がなく、具体的な指示に従えるため、生成結果が大幅に向上します。

動作の仕組み

1. ユーザーのスクリーンショット画像を読み込みます
2. 画面に何が表示されているか分析します
3. 6つの具体的な要素を含むプロンプトを作成します
4. すぐに実行できるコマンドを出力します

ステップ 1 — スクリーンショットを読み込む

ユーザーにスクリーンショットのパスを尋ねます。すでに提示されている場合は、Read ツールですぐに読み込みます。画像を注意深く確認してください。

ステップ 2 — 画像を分析する

スクリーンショットから次の詳細を抽出します。

アプリの概要：

• これはどのようなアプリですか？（天気、フィットネス、金融、ソーシャルなど）
• 表示されている場合、アプリ名は何ですか？
• 対象ユーザーは誰ですか？

視覚要素：

• 主な配色は何ですか？（ダーク／ライトモード、アクセントカラー）
• どのような UI コンポーネントが表示されていますか？（リスト、グラフ、カード、地図、ボタン）
• どのようなデータやコンテンツが表示されていますか？（具体的なテキスト、数値、ラベル）

際立たせる候補：

• 視覚的に最も目を引く UI パネルまたはカードはどれですか？
• 完全なセクションである必要があります（ボタンやアイコン単体は不可）
• アプリの核となる価値提案に関連している必要があります

マーケティングの切り口：

• このアプリを使うことで得られる最大のメリットは何ですか？
• そのメリットを最もよく表す動詞は何ですか？（TRACK、FIND、CREATE、MANAGE、BOOST など）
• サムネイルサイズでも、このスクリーンショットを魅力的に見せる要素は何ですか？

ステップ 3 — プロンプトを作成する

次の正確な構成に従ってプロンプトを作成します。すべての項目を、このスクリーンショットに合わせて具体的に記述し、汎用的なプレースホルダーは使わないでください。

This is an App Store marketing screenshot for a [APP TYPE] app. The app shows [SPECIFIC CONTENT VISIBLE ON SCREEN].

KEEP EXACTLY:
- The iPhone device frame and the app content on screen
- The overall composition (headline text at top, phone below)

IMPROVE:
- Replace the headline text with "[ACTION VERB] [BENEFIT]" in large bold white uppercase text
- Replace the subtitle with "[6-10 word supporting statement]" in smaller white italic text
- Make the device frame photorealistic — sleek iPhone 15 Pro with reflections and subtle shadows
- Make the "[EXACT PANEL NAME]" [panel/card/section] break out from the device frame — scale it up so it extends beyond both edges of the phone, with a soft drop shadow, floating in front
- Use a clean [dark/light] gradient background ([COLOR 1] to [COLOR 2]) that complements the [dark/light] app UI
- Add a small [CONTEXTUAL BADGE — e.g. a stat, rating, or label] floating near the top-right as a supporting element
- Professional App Store agency quality, crisp text, no watermarks

各要素のガイドライン

見出し（動作動詞＋メリット）：

• 2〜4語で、すべて大文字にします
• TRACK、FIND、CREATE、MANAGE、BOOST、DISCOVER、BUILD、PLAN、MONITOR、ORGANIZE など、力強い動作動詞で始めます
• メリットは具体的にします。「MANAGE STUFF」ではなく「TRACK CARD PRICES」のようにします
• スクロールする手を止めさせるものにします

サブタイトル：

• 6〜10語で、文頭のみ大文字にし、イタリック体にします
• 見出しの内容を、補足的なメリットでさらに詳しく説明します
• 例：「プロ仕様の予報をいつでも手元に」、「すべてのカードの価値をリアルタイムで更新」

際立たせる要素：

• 画面に表示されている UI パネルを正確に指定します（例：「予測モデルの実行切り替えパネル」、「ポートフォリオ概要カード」、「最近の取引リスト」）
• ボタンやアイコン単体ではなく、完全なカード／セクションを指定します
• 見出しの内容を明確に補強するパネルがない場合は、「際立たせる要素なし — アプリ画面そのものを見せる」と記述します

背景：

• ダーク系アプリ → ダークグラデーション（濃いネイビー #0A1628 から黒 #000000、または濃いパープル #1A0A2E から黒）
• ライト系アプリ → ライトグラデーション（柔らかなブルー #E8F4FD から白、または温かみのあるクリーム色 #FFF8F0 から白）
• グラデーションはアプリの配色を引き立てるものにし、調和を損なわないようにします

補足要素：

• 価値を補強する、小さな関連バッジを指定します
• 例：「4.9★」の評価、「69°F」の気温、「$1,234」のポートフォリオ評価額、「12件の新着」の通知数
• 画面に実際に表示されている内容に関連している必要があります

ステップ 4 — コマンドを出力する

ユーザーにプロンプトを提示してから、すぐに実行できるコマンドを出力します。

asc app-shots generate \
  --file <screenshot-path> \
  --prompt '<the generated prompt>' \
  --device-type APP_IPHONE_67 \
  --output-dir .asc/app-shots/output

ユーザーが参考スクリーンショットを提示している場合は、スタイルをその画像に合わせるバリエーションも提案します。

asc app-shots generate \
  --file <screenshot-path> \
  --style-reference <reference-path> \
  --device-type APP_IPHONE_67 \
  --output-dir .asc/app-shots/output

--device-type を使うと、出力を App Store の正確なサイズに変更できます。一般的な種類は次のとおりです。

• APP_IPHONE_69（1320×2868）— iPhone 6.9インチ
• APP_IPHONE_67（1290×2796）— iPhone 6.7インチ
• APP_IPAD_PRO_129（2048×2732）— iPad 13インチ

例

天気アプリの入力

スクリーンショットには、サンフランシスコの天気、気温グラフ、風速、降水量データ、「Forecast Model Runs」の切り替えが表示されています。

生成されたプロンプト：

This is an App Store marketing screenshot for a weather forecasting app. The app shows detailed weather data for San Francisco including temperature charts, wind speed, precipitation, and forecast model runs.

KEEP EXACTLY:
- The iPhone device frame and the app content on screen
- The overall composition (headline text at top, phone below)

IMPROVE:
- Replace the headline text with "TRACK WEATHER IN DETAIL" in large bold white uppercase text
- Replace the subtitle with "Professional-grade forecasts at your fingertips" in smaller white italic text
- Make the device frame photorealistic — sleek iPhone 15 Pro with reflections and subtle shadows
- Make the "Forecast Model Runs" toggle panel break out from the device frame — scale it up so it extends beyond both edges of the phone, with a soft drop shadow, floating in front
- Use a clean dark gradient background (deep navy to black) that complements the dark weather UI
- Add a small temperature badge "69°F" floating near the top-right as a supporting element
- Professional App Store agency quality, crisp text, no watermarks

金融アプリの入力

スクリーンショットには、保有銘柄のリスト、配分の円グラフ、合計評価額 $45,230 が表示されています。

生成されたプロンプト：

This is an App Store marketing screenshot for an investment portfolio tracker. The app shows a stock portfolio with holdings breakdown, pie chart asset allocation, and total portfolio value.

KEEP EXACTLY:
- The iPhone device frame and the app content on screen
- The overall composition (headline text at top, phone below)

IMPROVE:
- Replace the headline text with "GROW YOUR WEALTH" in large bold white uppercase text
- Replace the subtitle with "Track every investment in real-time" in smaller white italic text
- Make the device frame photorealistic — sleek iPhone 15 Pro with reflections and subtle shadows
- Make the "Asset Allocation" pie chart card break out from the device frame — scale it up so it extends beyond both edges of the phone, with a soft drop shadow, floating in front
- Use a clean dark gradient background (deep emerald #0A2818 to black) that complements the finance UI
- Add a small portfolio value badge "$45,230" floating near the top-right as a supporting element
- Professional App Store agency quality, crisp text, no watermarks