app-store-screenshots

App Store のスクリーンショット

インストールにつながるストアスクリーンショットを作成します。言葉が先、デザインはその次です。 すべてのセットを HTML/CSS/JS で作成し、並べて確認してからストアのサイズで書き出します。

このスキルに含まれるファイル：

• copywriting.md：各スクリーンショットに記載する内容（ステップ 3 の前に読んでください）
• STYLES.md + styles/NN-*/design.md：実績のある 18 種類のスタイル
• assets.md：画像の入手方法（まず AI 生成）と使用方法
• build.md：技術的なレシピ（フレーム、傾けたスマートフォン、テキストの調整、3D、ガラス、書き出し）

---

ステップ 0：画像生成の準備（セッションごとに 1 回）

オーガニックアセット（スマートフォンを持つ手、人、マスコット、毛皮、食べ物、製品、風景）は AI で生成します。次の順にプロバイダーを探します。

1. Codex プラグイン（ユーザーの ChatGPT プランを使用し、Codex が GPT Image で画像を生成します）。codex:codex-rescue サブエージェントまたは /codex:rescue がある場合は、それを使用します（assets.md を参照）。見つからない場合は、インストール方法をユーザーに伝えます。

   /plugin marketplace add openai/codex-plugin-cc
   /plugin install codex@openai-codex
   /codex:setup
   

2. API キー。 OPENAI_API_KEY または GEMINI_API_KEY を確認します。どちらも設定されていない場合は、ユーザーにいずれかを尋ねます。現在のモデル（2026 年 10 月）：
   • OpenAI gpt-image-2.5-flare（高速で日常使い向け）と gpt-image-2.5-sunburst（最も精密。参照画像を使った編集に使用）。透明背景の PNG を実際に出力できます。
   • Google gemini-nano-banana-2.1（Nano Banana 2.1）。最大 14 枚の参照画像、1K/2K/4K に対応。透明背景での出力には対応していません。緑色の背景で生成してから、クロマキーで抜きます。
   • モデル ID は頻繁に変わります。生成する前にプロバイダーのモデル一覧を確認し、最新の画像モデルを使用します。
3. 無料のストック写真。 ユーザーから希望があった場合、または画像生成ツールがない場合に限ります。

使用するプロバイダーを 1 行で伝えます。

---

ステップ 1：ヒアリング

まだ提供されていない項目だけを選び、1 回のメッセージで尋ねます。

1. アプリのスクリーンショット（必須）：画像でメイン画面を提示してもらいます。
2. アプリの機能と対象ユーザーを 1～2 文で説明してもらいます。
3. 参考にしたいもの（任意）：気に入っているスクリーンショットのセット。
4. 提示できる実績（任意）：星評価とレビュー数、ユーザー数、メディア掲載、受賞歴。
5. 掲載するロゴ（任意）：紹介してくれたメディア、連携するアプリ、パートナー。
6. ブランド：色、フォント、ロゴ（または「アプリで使われているものを使用」）。
7. スクリーンショットの枚数（デフォルトは 6 枚）、ストア（App Store／Google Play／両方）、言語。

---

ステップ 2：アプリを理解する

スクリーンショットを確認し、以下を整理します。

• 中核となる価値（ユーザーが望む 1 つの成果）。
• 特に強い機能を 3～6 個、メリットとして表現したもの。
• 最も印象的な画面（ヒーローとして使用）。
• カテゴリーと対象ユーザー（スタイル選びの指針）。

---

ステップ 3：ストーリーボード（コピー）。デザインに進む前に承認を得る

copywriting.md に従います。スクリーンショットごとに 1 行の表をユーザーに提示します。項目は、役割、見出し、短い説明文、表示するアプリ画面、追加のビジュアル、実績です。

• 1 枚目で惹きつけ、2 枚目で説明し、3 枚目で裏付けます（または 2 つ目のメリットを伝えます）。その後は 1 枚につき 1 つのメリットを伝え、最後に信頼を築きます。
• ユーザーから提供された実際の数値だけを使用します。

承認または修正を待ちます。

---

ステップ 4：スタイルを選ぶ

• 参考画像がある場合： styles/*/design.md ファイルが作られた手法で、そのデザインシステムを読み取ります。パネルの寸法を測り、色を抽出し、フォントを特定し、レイアウトと装飾を説明します。そのスタイルをユーザーのアプリとコピーに適用します。参考画像の内容はコピーしません。
• 参考画像がない場合： カテゴリー、対象ユーザー、ブランドカラーに最も合うスタイルを STYLES.md から 3 つ選びます。互いにはっきり異なるものを選び、ヒーローに何を使うかも変えます。スマートフォンだけが選択肢ではありません。多くのスタイルは、スマートフォンを使わずに、大きな見出しとオブジェクト、人、またはアプリから取り出した UI カードで始まります。
• ブランドに合わせます。 マスコットやキャラクターは、アプリにすでにある場合、またはユーザーが希望した場合に限って使用します。人を使うのは、人がテーマのアプリに限ります。

---

ステップ 5：3つの方向性、スクリーンショット 1 のみ

3つの方向性それぞれでスクリーンショット 1 のみをプレビュー品質で作成し、1つのページに並べて表示します。ユーザーに1つ選んでもらうか、「BにAの色を組み合わせる」のように組み合わせてもらいます。3セットすべてを完成させることはありません。

---

ステップ 6：アセット

assets.md に従います。

• アプリの画面： スマートフォンのフレームは任意です。多くの上位セットでは、UIをフレームいっぱいに表示します。ユーザーのスクリーンショットが粗雑、または古く見える場合は、古い画像を貼り付けるのではなく、HTML/CSSでUIをきれいに描き直します（機能とフローは同じにし、サンプルデータは架空のものを使用）。描き直すのは画面の内容だけです。周囲のスクリーンショットは、引き続き選択した design.md（レイアウト、書体、フレーム、装飾）に従います。古いスクリーンショットのビジュアルスタイルは決してコピーしないでください。
• AI生成： 手、人、マスコットやキャラクター、製品、食べ物、風景。透明な背景、またはキーイングで除去できる単色のクロマカラーを指定します。
• 手持ちのスマートフォン： 緑色の単色画面で生成し、実際の画面を四隅からマッピングします。
• マスコット： 1度生成し、その画像をほかのすべてのポーズの参照として再利用します。
• コードで作成： テキスト、カード、ピル、ガラス、落書き、アイコン、シンプルな3D（コイン、宝石、ロゴマーク）。

---

ステップ 7：セット全体を作成する

build.md と選択した design.md に従います。

• HTMLページは1つ。各スクリーンショットは、そのスタイルのジオメトリに沿ったパネルにします。
• 見出しは、測定した幅を使い、行ごと、単語ごとに配置します。
• 実際のアプリ画面はフレームの内側に配置します。
• AIアセットはストーリーボードに沿って配置し、確認します。

---

ステップ 8：確認してからエクスポートする

• 選択したスタイルの忠実度チェックリストと、コピーのチェックリスト（copywriting.md §9）を実行します。
• すべてのスクリーンショットをサムネイルサイズ（幅約 230 px）で確認します。見出しは読みやすいですか？メインビジュアルは明確ですか？
• scripts/export.js でエクスポートします（公式サイズは build.md → Export を参照）。
  • App Store： ios-6.9（1320 × 2868）と ios-6.3（1206 × 2622、必須のサイズクラス）。アプリが iPad で動作する場合は ipad-13（2064 × 2752）。各サイズにつきスクリーンショットは 1～10 枚、形式は PNG/JPEG、アルファチャンネルなし。
  • Google Play： play-phone（1080 × 1920、9:16）。デバイスの種類ごとにスクリーンショットは 2～8 枚、アルファなし。さらに各スクリーンショットに代替テキスト（140 文字以内）、1024 × 500 のフィーチャーグラフィック、およびアプリがタブレットに対応する場合はタブレット用セット（play-tablet、4 枚以上）。Play 用は独自の 9:16 レイアウトで作成し、Play のセーフエリアに配慮します（copywriting.md §7）。
• すべてのスクリーンショットを横一列に表示したプレビューページと、サイズごとのフォルダーを納品します。各フォルダーには 01.png、02.png、… という名前のファイルと、Play 用の alt-text.txt を含めます。

---

ステップ 9：修正する

ユーザーの依頼に応じて変更します。セット全体でコピー、スタイル、アセットの一貫性を保ちます。変更のたびに再エクスポートします。

---

ルール

• デザインより先にコピーします。 承認されていないストーリーボードをデザインしてはいけません。
• 実際の証拠のみを使います。 評価、レビュー、ユーザー数、報道を捏造してはいけません。
• 生成する人物やオブジェクトは、ストーリーボードの説明と一致させます（ポーズ、服装、色）。妥協せず、再生成してください。
• 3Dにするのは、3Dのものだけです。 平面的なものは平面のままにしてください。
• マスコットのいないアプリに、マスコットを捏造してはいけません。
• ブランドカラーを保ちます。 配色は選んだスタイルではなく、アプリのブランド（アイコン、メインのアクセントカラー）に基づきます。スタイルから取り入れるのはレイアウト、文字、装飾のみです。
• スクリーンショットごとに、適切なフレームを選びます。 フレームなし（UIカードのみ）、ソフトフレーム（角丸の画面、柔らかな光のベゼル、控えめな影。金属やボタンはなし）、またはリアルなスマートフォン（実物のフレームPNG。手持ちや傾けたヒーロー画像など、物理的な端末が必要な場合のみ）です。デフォルトでリアルなスマートフォンを使ってはいけません。また、手描きの出来の悪い「リアルな」スマートフォンも使ってはいけません。
• アプリごとに、独自の文字表現を使います。 複数のアプリを制作する際、共有ヘルパーを使って、他のアプリの見出しフォントやアクセント要素（波線の下線、蛍光ペン、ステッカー）を流用してはいけません。各アプリのブランドとスタイルに合わせて、フォントの組み合わせとアクセントマークを選んでください。
• スタイルの固定レイアウトではなく、そのDNAを取り入れます。 design.md から、配色の考え方、文字の組み合わせ、パネルの処理、装飾の語彙、デバイスの表現を取り入れます。毎回、ユーザーのアプリに合わせて新しい構図を考案してください。
• スタイルを決めるのは構造であり、色ではありません。 各スタイルには、パネルを横断するパノラマ、スクラップブック、継ぎ目をまたぐガラスシート、傾けたスマートフォンを配したカラーブロック、浮かぶUIなど、独自のレイアウト文法があります。1つの骨組みのまま色やフォントを入れ替えても、スタイルは1つのままです。複数のアプリ向けにセットを作る際は、各アプリに構造の異なるスタイルを割り当て、そのスタイルの特徴を示してください。
• スタイルはガイドであり、テンプレートではありません。 そのアプリとメッセージに合う要素を取り入れ、アプリごとに同じ形を繰り返さないでください。
• App Store のスクリーンショットに価格を表示してはいけません。各ストアのルールに従ってください。