play-store-screenshots

Play ストアのスクリーンショット生成ツール

概要と基本理念

このスキルは、Next.js と html-to-image を使用して、広告に重点を置いた Google Play ストアのスクリーンショットを生成します。基本的な原則は、スクリーンショットは広告であり、ドキュメントではないということです。各スライドでは、UI を紹介するのではなく、1 つの成果、感情、または解決策を伝えます。

Apple App Store とは異なり、Play ストアでは、アプリのストア掲載ページに目立つ形で表示される横長のバナー、フィーチャー グラフィック（1024×500px）も必要です。このスキルでは、スマートフォンのスクリーンショットと並ぶ主要な素材として扱います。

---

検索フェーズ

目的は、誤った前提でユーザーの時間を無駄にすることなく、できるだけ早く生成を始めることです。方針は、必要なことを尋ね、推測できることは推測し、作業内容を常に提示してから、次に進む前に確認することです。

---

ステップ 1 — 先に尋ね、後から確認する

ファイルを見る前に、推測できないことを 1 つだけ質問します。

「主な機能を 3～6 個教えてください。それぞれの機能がユーザーのどのような問題を解決するのか、簡単に説明してください。」

これはマーケティング上の判断です。ファイルやスクリーンショットからは答えられません。アプリの価値提案を知っているのはユーザーです。

ユーザーが問題の観点を含めずに機能名だけを挙げた場合（例：「オフラインモード、ダークテーマ、お気に入り」）、次のように追加で尋ねます。

「それぞれについて、その機能がなかったらユーザーはどのようなことに不便を感じるでしょうか？」

これが確認できるまでは、ステップ 2 に進まないでください。

---

ステップ 2 — 素材をスキャンして見つける

機能がわかったら、現在のディレクトリをスキャンして素材を探します。次のものを確認してください。

• スクリーンショット：現在のフォルダーまたは screenshots/ サブフォルダー内の .png / .jpg ファイル
• アプリアイコン：まず標準的な Android パスを確認します。

  app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
  app/src/main/res/mipmap-xxhdpi/ic_launcher.png
  

  Android プロジェクトでない場合は、icon*.png、logo*.png、または app-icon.* という名前のファイルを探します。

必要なものがちょうど見つかった場合は、ファイルを一覧表示して、次のように伝えます。

「次のスクリーンショットが見つかりました：[一覧]。これらを使用します。よろしいですか？」

候補が複数見つかり、どれが適切かわからない場合は、それらを表示して次のように尋ねます。

「複数の PNG ファイルが見つかりました。使用するアプリのスクリーンショットはどれですか？」

何も見つからない場合は、直接尋ねます。

「このディレクトリにスクリーンショットが見つかりませんでした。Android アプリのスクリーンショットはどこに保存されていますか？」

曖昧さがあるときに、黙って推測してはいけません。ファイルを 1 つ間違えるだけで、作業全体が無駄になります。

---

ステップ 3 — スクリーンショットからビジュアル設定を導き出す

スクリーンショットを確認したら、視覚的に分析し、以下の項目を導き出します。コードを書く前に、確認事項を短いブロックにまとめて提示してください。

Here's what I picked up from your screenshots — let me know if anything looks off:

  App name:    Aarti Mandir
  Primary:     #C9822A  (toolbar orange)
  Background:  #FFF8F0  (warm cream)
  Text:        #2D1A00  (dark brown)
  Accent:      #C9822A
  Theme:       editorial  (warm/earthy tones)
  Font:        Inter  (default — let me know if you use a specific font)
  Frame:       white  (light app)
  Slides:      5

ユーザーが確認または修正するまで、先に進まないでください。ここで 10 秒確認するだけで、色を間違えたためにすべてを作り直す事態を防げます。

各値の導き出し方：

値	導き出し方
アプリ名	スクリーンショットから読み取ります（ツールバー、スプラッシュ画面、アイコンのラベル）
メインカラー	UI の主要な色（ツールバー、ヘッダー、選択中のタブ、塗りつぶしボタン）
背景色	画面コンテンツの大部分の背景色
テキスト色	背景から判断します。暗い背景 → #FFFFFF、明るい背景 → #111111
アクセントカラー	CTA ボタン、ハイライト、トグル、選択中の状態
セカンダリカラー	グラデーションの組み合わせ色。メインカラーの色相を 15～20 度ずらすか、UI で見えるセカンダリカラーを使用します
テーマ	暗い背景 → dark-bold · 明るい／白の背景 → clean-light · 暖色系／アースカラーの背景 → editorial · ブランドカラーが背景全体を占める → vibrant
フォント	アプリのスクリーンショットに特徴的な書体が明確に使われている場合を除き、デフォルトの Inter
フレームカラー	暗いアプリ（暗いツールバーと背景） → black · 明るいアプリ → white
スライド数	デフォルトは 5

スクリーンショットから値を判断できない場合は、質問してください。推測してはいけません。

「スクリーンショットからメインのブランドカラーをはっきり確認できません。メインのブランドカラーの HEX カラーコードを教えてください。」

---

Step 4 — 確認してから、生成する

ユーザーが Step 3 の概要を確認したら、config.js と index.html の生成に進みます。予期しないことが起きない限り、これ以上質問しないでください。

暗黙のデフォルト（ユーザーから話題に出ない限り、絶対に質問しないでください）：

• tablet.enabled: false
• locales: ["en"]
• featureGraphic.style: "gradient"
• featureGraphic.subtext: "Available on Google Play"

---

質問する項目と、判断して補う項目

入力	対応方法
機能とユーザーの課題	必ず質問する — 推測できません
スクリーンショットのパス	検索し、見つかった場合は確認、見つからない場合や曖昧な場合は質問
アプリアイコンのパス	標準パスを検索し、見つかった場合は確認、見つからない場合は質問
アプリ名	スクリーンショットから読み取り、概要で確認
ブランドカラー	見た目から抽出し、概要で確認。不明瞭な場合は質問
テーマ	背景色から推測し、概要で確認
フォント	デフォルトは Inter。概要で確認し、アプリで特徴的なフォントが使われている場合はその旨を伝える
デバイスフレームの色	アプリの雰囲気から推測
スライド数	デフォルトは 5。概要で伝え、ユーザーは変更可能
タブレット／ロケール／横向き	デフォルトはオフ／en／縦向き。質問せず、ユーザーから話題に出た場合のみ有効にする

---

プロジェクトのアーキテクチャ

このスキルは、新しいフォルダーに2 つのファイルを生成します。フレームワークは不要で、npm install やビルド手順もありません。

play-store-screenshots/
├── index.html      ← rendering engine, export logic, overview mode (don't edit)
├── config.js       ← ALL customization: copy, colors, slides (edit this)
└── screenshots/    ← user's raw Android app screenshots + app icon
    ├── app-icon.png
    ├── screen1.png
    └── screen2.png

AI が config.js を作成します。index.html はそこから読み込み、すべてをレンダリングします。

使用するには、1 行のローカルサーバーでフォルダーを配信します（ローカル画像の読み込みに必要です）。Chrome で開き、「Export All」をクリックします。

# Pick any one of these — whatever is available:
python3 -m http.server 8080
npx serve .

次に http://localhost:8080 を開きます。

エクスポートしたファイルに関する注意：「Export All」をクリックすると、ブラウザーからファイルがダウンロードされます。ファイルはシステムのダウンロードフォルダーに保存されます。Play Console にアップロードする前に、そこで名前を変更し、整理してください。

このプロジェクトを git にコミットするべきですか？

いいえ。スクリーンショット生成ツールは使い捨てのツールです。PNG を作成したら、このプロジェクトの役目は終わりです。長期的に保管する価値があるのは、次のファイルのみです。

• エクスポートした PNG（Play Console にアップロード）
• 後で再生成または調整する場合の config.js

一時フォルダーで作業してください。アプリのリポジトリには追加しないでください。

---

config.js リファレンス

AI が作成する必要があるファイルは config.js のみです。通常の JavaScript で、TypeScript、インポート、ビルド手順は不要です。

架空のアプリを使った完全な動作例が、このスキルディレクトリの example-config.js にあります。出発点としてコピーしてください。

const config = {
  app: {
    name: "Your App",
    icon: "screenshots/app-icon.png",
  },

  brand: {
    primary: "#6366F1",       // dominant brand color
    secondary: "#4F46E5",     // gradient partner / secondary brand color
    background: "#FFFFFF",    // canvas background
    surface: "#F4F4F8",       // card / panel backgrounds
    text: "#111111",          // headline color
    textMuted: "#666666",     // caption / label color
    accent: "#F59E0B",        // highlight, call-to-action color
  },

  // "clean-light" | "dark-bold" | "vibrant" | "editorial"
  theme: "clean-light",

  device: {
    color: "black",           // "black" | "white" | "silver"
  },

  slides: [
    {
      id: "hero",
      layout: "text-top",
      screenshot: "screenshots/screen1.png",
      label: "INTRODUCING",
      headline: "Your app name.\nYour outcome.",
      // Leave subtext empty on hero — let the visual breathe
    },
    {
      id: "feature-one",
      layout: "text-top",
      screenshot: "screenshots/screen2.png",
      label: "FEATURE NAME",
      headline: "Short benefit\nstatement here.",
      subtext: "One supporting sentence, maximum.",
    },
    // Add 2–8 slides total — all use layout: "text-top"
  ],

  featureGraphic: {
    headline: "The app headline goes here",
    subtext: "Available on Google Play",
    // "gradient" | "solid" | "screenshot-backed"
    style: "gradient",
    // Only used when style is "screenshot-backed"
    screenshot: "screenshots/screen1.png",
  },

  // Optional: set enabled: true and add tablet screenshots to activate
  tablet: {
    enabled: false,
    sizes: ["10-inch"],       // "7-inch" | "10-inch" | both
  },

  // Add locale codes to generate localized sets: "de", "fr", "ar", "he", etc.
  locales: ["en"],
};

複数ロケールのコピー

locales に複数の項目が含まれる場合は、文字列の値をロケールマップに変更します。

slides: [
  {
    id: "hero",
    layout: "text-top",
    screenshot: { en: "screenshots/en/screen1.png", de: "screenshots/de/screen1.png" },
    label: { en: "INTRODUCING", de: "NEU" },
    headline: { en: "Your app.\nYour way.", de: "Deine App.\nDein Weg." },
  },
]

---

スライドのレイアウト

1 つのレイアウトを一貫して使用します。

すべてのスマートフォン用スライドで、同じ構成を使用します。上部にテキスト、その下に大きなスマートフォン。これは制約ではなく、縦長の Play ストアのスクリーンショットに適したパターンです。効果的な方法です。

┌─────────────────────┐
│   App Name          │  ← small, top padding ~6% of canvas height
│                     │
│   LABEL             │  ← all-caps label
│   Big headline      │  ← largest text on the slide
│   here.             │
│   Subtext sentence. │  ← optional, smaller
│                     │
│  ┌───────────────┐  │
│  │               │  │
│  │  [screenshot] │  │  ← phone, large, centered
│  │               │  │
│  │               │  │  ← bottom of phone crops off canvas (intentional)
└──┴───────────────┴──┘

標準のスマートフォンサイズ — 次の値をそのまま使用してください：

プロパティ	値
スマートフォンの幅	PHONE_W * 0.82（≈885px）
スマートフォンの高さ	phoneWidth * 2.15（≈1903px — キャンバスよりも縦長）
スマートフォンの左位置	(PHONE_W - phoneWidth) / 2（中央揃え）
スマートフォンの上位置	PHONE_H * 0.34（上から約653px）
下部の切り抜き	スマートフォンの高さの約25%がキャンバスからはみ出します — 意図的な配置で、奥行きを生み出します

スマートフォンの下部がキャンバスの端を越えるのは、意図的で望ましい配置です。スマートフォンが視覚的に安定し、フレーム全体が表示されると生じる不自然な空白をなくします。

テキストブロックの配置：

テキストコンテナーは height: PHONE_H * 0.32 の範囲に収まり、overflow: hidden を指定します。コンテンツはその中で垂直方向に中央揃えされます。スマートフォンは PHONE_H * 0.34 の位置から始まり、テキストブロックの下端とスマートフォン上端の間には約2%の余白ができます。これにより、ラベルチップや最後の見出し行がデバイスのフレームに触れるのを防ぎます。

要素	位置
アプリ名／ブランド	top: PHONE_H * 0.06、中央揃え
ラベル	top: PHONE_H * 0.13、中央揃え
見出し	ラベルの下、中央揃え、font-size: PHONE_W * 0.09
補足テキスト	見出しの下、中央揃え、font-size: PHONE_W * 0.038

テキストブロック全体を、キャンバスの高さの上部32%以内に収めてください（コンテナーの overflow: hidden によって制御されます）。テキストが収まらない場合は、見出しを短くしてください。スマートフォンを下にずらしてはいけません。

---

feature-graphic (フィーチャーグラフィックのみ — スマートフォン用スライドではありません)

横長のキャンバス（1024×500px）。デバイスのモックアップは使用しません。構成は次の2種類から選べます。

• アイコンを左に配置： 左側の3分の1にアプリアイコン（180×180）、右側の3分の2に見出しと補足テキストを配置
• アイコンを中央に配置： 上部中央にアプリアイコン、その下に見出し、さらにその下に補足テキストを配置

背景は、選択した featureGraphic.style を使ってキャンバス全体を塗りつぶします。

---

対応レイアウト

テンプレートで実装されているレイアウトは、次の2種類のみです。

• text-top — ほとんどのスライドで使用します（上記を参照）
• full-bleed — グラデーションオーバーレイを重ねた全画面スクリーンショット。テキストを上部に重ねて配置します

それ以外の layout 値を指定すると、赤いエラーボックスが表示されます。layout: "text-bottom"、layout: "split-screen"、layout: "hero-left"、layout: "hero-right" を指定したスライドは作成しないでください。これらは実装されていません。

full-bleed レイアウト

スクリーンショットがキャンバス全体に広がります（width:100%; height:100%; object-fit:cover）。スクリーンショットの上に暗いグラデーションが重なり、上部から（高さの約35%にわたって）透明になっていきます。ラベルと見出しは、このグラデーションの上に白文字で表示されます。デバイスのモックアップは使用しません。

このレイアウトは1枚のスライドのみに使用してください。アプリのスクリーンショット自体に視覚的な訴求力がある場合に最も効果的です。画面要素が密集したUI（リストや設定画面など）のスクリーンショットには使用しないでください。full-bleed のスライドを連続して配置するのも避けてください。

┌─────────────────────┐
│   LABEL             │  ← white text over gradient
│   Big headline      │
│   here.             │
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│  ← gradient fade
│                     │
│  [screenshot fills  │
│   entire canvas]    │
│                     │
└─────────────────────┘

---

Android デバイスのモックアップ（CSS のみ）

Android のスマートフォンフレームは、純粋な CSS で実装されているため、PNG アセットは不要です。 特定の画像ファイルに正確なピクセル値を合わせなければならない、壊れやすい PNG のオフセット依存を避けられます。

コンポーネント：<AndroidPhoneMockup>

プロパティ：screenshot（文字列のパス）、color（"black" | "white" | "silver"）、width（数値、px）、height（数値、px）

レンダリングされる構造と主な比率（すべての値はコンポーネントの width / height から算出）：

┌──────────────────────┐  outer frame (corner radius: width*0.12)
│          ●           │  punch-hole camera: width*0.028 diameter, centered, top height*0.018
│  ┌────────────────┐  │  screen: left/right inset width*0.030, top/bottom inset height*0.025
│  │                │  │
│  │  [screenshot]  │  │
│  │                │  │
│  └────────────────┘  │
│        ───────       │  home indicator: width*0.30 wide, height*0.003 tall, bottom height*0.015
└──────────────────────┘

プロパティ	値
外側の角丸半径	width * 0.12
フレームの境界線の太さ	width * 0.008
画面の左右の余白	width * 0.030
画面上部の余白	height * 0.025
画面下部の余白	height * 0.028
カメラの直径	width * 0.028
上端からカメラ中心までの距離	height * 0.018
ホームインジケーターの幅	width * 0.30
ホームインジケーターの高さ	height * 0.003
下端からホームインジケーターまでの距離	height * 0.014

color プロパティに応じたフレームの色：

• "black" → フレーム #1C1C1E、境界線 #3A3A3C、画面の背景 #000000
• "white" → フレーム #F2F2F7、境界線 #D1D1D6、画面の背景 #FFFFFF
• "silver" → フレーム #8E8E93、境界線 #636366、画面の背景 #111111

重要： スマートフォンのフレームや境界線には、ブランドカラーを絶対に使わないでください。フレームには、必ず上記のニュートラルカラーセットのいずれかを使用してください。フレームの境界線にブランドカラー（アプリのアクセントカラーであるオレンジや紫など）を使うと、素人っぽく見え、画面のコンテンツから注意をそらします。フレームは視覚的に目立たせず、UI と競合しないようにしてください。

フレームには、背景から浮かび上がらせるための柔らかなドロップシャドウも付けてください。

box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.10);

テーマに合わせて不透明度を調整します。明るい背景では薄い影、暗い背景では濃い影にしてください。

側面ボタン（任意のディテール。リアリティが向上します）：

• 電源ボタン：右側、上端から全高の 38% の位置、高さは全高の 8%、幅は横幅の 0.6%
• 音量アップ／ダウンボタン：左側、上端から 32% と 42% の位置に縦に配置し、寸法は同じ

---

プレミアムなデザイン要素

基本的なスクリーンショットとプレミアムな見た目のスクリーンショットを分けるのは、装飾レイヤー、つまり背景の処理、ラベルのデザイン、スマートフォンの背後に作る繊細な奥行きです。これらはすべてスライドのキャンバスに適用する純粋な CSS です。

背景の処理

スライドの背景に、単色の塗りつぶしを使わないでください。少なくとも 2 つの要素を重ねます。

1. ベースのグラデーション — ブランドカラーを使った、斜め方向または放射状の複数段階のグラデーション
2. 装飾用のオーブ — テキストやスマートフォンの背後に配置する、大きくぼかした円を 2～3 個

/* Example: dark theme with purple brand */
.slide {
  background: linear-gradient(160deg, #080613 0%, #120B22 60%, #060410 100%);
  position: relative;
  overflow: hidden;
}

/* Blurred decorative orb */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 1;
}

/* Top orb — sits behind the text block */
.orb-top {
  width: 700px; height: 700px;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #7C3AED 0%, transparent 70%);
  opacity: 0.28;
}

/* Bottom orb — sits behind the phone */
.orb-bottom {
  width: 900px; height: 900px;
  top: 500px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #4338CA 0%, transparent 70%);
  opacity: 0.20;
}

テーマに応じてオーブの不透明度を調整します。

• ダークテーマ：0.25–0.40
• ライトテーマ：0.08–0.15（ごく柔らかな色味の効果で、かろうじて見える程度）

ピル型バッジとしてのラベル

ラベルは背景付きのピル型バッジにしてください。単なるテキストにしてはいけません。この変更ひとつで、スライドは寄せ集めではなく、デザインされたものに見えるようになります。

/* All values below are illustrative — scale relative to W as shown in comments */
.label-pill {
  display: inline-flex;
  align-items: center;
  padding: 12px 32px;     /* W*0.011 W*0.030 */
  border-radius: 100px;
  font-size: 28px;        /* W * 0.026 */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 32px;    /* W * 0.030 */
}

/* Dark theme — glass/translucent variant */
.label-pill-glass {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
}

/* Dark theme — colored variant (hero slide or high-emphasis labels) */
.label-pill-accent {
  background: rgba(124, 58, 237, 0.18);   /* use brand primary at ~18% */
  color: #C4B5FD;                          /* lighter tint of primary */
  border: 1.5px solid rgba(124, 58, 237, 0.32);
}

/* Light theme */
.label-pill-light {
  background: rgba(201, 130, 42, 0.12);   /* brand primary at ~12% */
  color: #92600E;                          /* darker shade for contrast */
  border: 1.5px solid rgba(201, 130, 42, 0.25);
}

見出しのタイポグラフィ

字間を詰め、繊細なテキストシャドウを付けて奥行きを出します。

/* font-size must be set via inline style using the proportional system — not hardcoded */
.headline {
  /* font-size: W * 0.090  (set inline, not in CSS class) */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Dark theme only */
.slide-dark .headline {
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.40);
}

ヘッダーのアプリアイコン

ラベルの上に、角丸のアプリアイコン（約 80px）を表示します。余計な要素を加えずに、すべてのスライドでブランドアイデンティティを印象づけられます。

.app-icon {
  width: 80px; height: 80px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30);
  margin-bottom: 20px;
}

スマートフォンのアンビエントグロー（ダークテーマのみ）

背景とスマートフォンの間に放射状の光彩を配置すると、デバイスが上に貼り付けられているのではなく、光の中に溶け込んでいるように見えます。

.phone-glow {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-primary) 0%, transparent 65%);
  filter: blur(80px);
  opacity: 0.18;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;   /* above background orbs, below phone */
}

明るい背景には光彩を追加しないでください。濁ったシミのように見えます。

ノイズテクスチャのオーバーレイ（任意。高級感のある仕上がりに）

控えめな SVG ノイズテクスチャを加えると、グラデーションが平坦さを失い、印刷物のような質感になります。不透明度は非常に低く保ちます。

.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 100;
}

---

エクスポート仕様

スマートフォン縦向き（最優先 — 常に必須）

1080 × 1920px

すべてこの解像度でデザインしてエクスポートします。Play Store は縦横比が 1:2～2:1 の画像ならどのサイズでも受け付けます。1080×1920 であれば、すべてのスマートフォンに対応できます。

スマートフォン横向き（任意）

1920 × 1080px

横向き優先の UI を持つゲームやアプリに適しています。ユーザーのアプリが主に横向きで使われる場合は、この形式も用意してください。

タブレット（任意）

画面	寸法
7インチ	1200 × 1920px
10インチ	1600 × 2560px

フィーチャーグラフィック（Play ストアで必須）

1024 × 500px

Play ストアの掲載ページの上部に表示される横長バナーです。スマートフォンのスクリーンショットではなく、デバイスのフレームはありません。すべてのアプリで必須です。

定数

// Phone portrait (primary)
const PHONE_W = 1080;
const PHONE_H = 1920;

// Phone landscape (optional)
const PHONE_LAND_W = 1920;
const PHONE_LAND_H = 1080;

// Tablet 7-inch (optional)
const TAB7_W = 1200;
const TAB7_H = 1920;

// Tablet 10-inch (optional)
const TAB10_W = 1600;
const TAB10_H = 2560;

// Feature graphic (required)
const FG_W = 1024;
const FG_H = 500;

---

コピーの戦略とメッセージ

各スライドには、ラベル、見出し、任意の補足テキストという3つのテキスト要素があります。それぞれ役割が異なります。3つすべてを適切に仕上げれば、スライドは一瞬で魅力を伝えます。

---

ステップ1：機能の説明をコピーに変える

ユーザーが機能を説明したとき、同じ説明をそのまま返してはいけません。代わりに、次のように尋ねます。

「この機能がなかったら、どんなことで不安になったり、困ったりするでしょうか？」

その不安が見出しになります。機能はあくまで解決策です。

例：

• ユーザーの説明：「オフラインモード — インターネットがなくてもアプリを使える」
• 不安：アプリが必要なときに、電波の届かない場所にいること
• 見出し："圏外でも\n大丈夫。" または "いつもの祈りを。\nいつでもそばに。"
• 避ける表現："オフラインで動作" または "オフライン対応"

例：

• ユーザーの説明：「フォントサイズを変更できる」
• 不安：小さな文字を読むのがつらい。特に年配のユーザーにとって
• 見出し："文字を大きく。\n言葉を読みやすく。" または "自分に合った読み方で。"
• 避ける表現："フォントサイズを調整可能" または "アクセシビリティ機能"

例：

• ユーザーの説明：「お気に入りに保存する／祈りをブックマークする」
• 不安：よく使うものを探すために、すべてをスクロールして見て回ること
• 見出し："あなたの祈りを。\nいつでもそばに。" または "好きなものを\n保存しよう。"
• 避ける表現："お気に入りシステム" または "コンテンツをブックマーク"

---

ステップ2：見出しを書く

見出しはスライドで最も大きな文字です。サムネイルサイズでも1秒以内に伝わる必要があります。

効果的な6つのパターン。機能の感情的な訴求に合うものを選びましょう。

パターン1：悩みを解決する

問題を示し、解決策をほのめかします。短く、印象的に。

"圏外でも\n大丈夫。" "探すのは終わり。\nすぐ見つかる。" "また忘れた？\nもう忘れない。"

パターン2：自分のものにする（所有格＋結果）

自分のものだという感覚を生みます。親しみを感じさせます。

"あなたの祈りを。\nいつでもそばに。" "あなたのペースで。\nあなたの成長を。" "あなたのデータ。\n決めるのはあなた。"

パターン3：その瞬間を描く（具体的な瞬間を描写する）

ユーザーがメリットを得る具体的な瞬間を描写します。実感しやすくなります。

"いつもの祈りを。\n指先ひとつで。" "正午までに完了。\n毎日。" "アプリを開いて。\n心を落ち着けよう。"

パターン4：シンプルな対比（前と後をほのめかす）

短い2行にします。1行目で緊張感を生み、2行目で解消します。

"文字を大きく。\n言葉を読みやすく。" "ワンタップ。\nすぐにアクセス。" "雑音を減らす。\n集中力を高める。"

パターン5：誘いかける（能動的な動詞＋ご褒美）

動詞から始めます。活気があり、率直です。

"好きなものを\n保存しよう。" "何でも見つかる。\nすぐに。" "言語を切り替えよう。\nいつでも。"

パターン6：宣言する（自信に満ちたアイデンティティの表明）

アプリが何であるかを、大胆に示します。ヒーロースライドに最適です。

"いつもの祈りを。\n指先ひとつで。" "本気で\n集中しよう。" "毎日の\n祈りを、シンプルに。"

---

ステップ3：ラベルを書く

ラベルは、見出しの上に置く小さな大文字のタグです。読者にこれから伝えるメリットのカテゴリを知らせ、見出しの訴求力を高めます。

ルール：

• 1～3語、すべて大文字
• 機能名ではなく、メリットのカテゴリを示す
• 下に続く見出しへの好奇心を引き出す

機能	悪いラベル	良いラベル
オフラインモード	OFFLINE MODE	100% OFFLINE
フォントサイズ設定	ACCESSIBILITY	READ COMFORTABLY
お気に入り	BOOKMARKS	FAVOURITES
バイリンガル	LANGUAGES	BILINGUAL
ダークモード	DARK MODE	EASIER ON EYES
毎日のリマインダー	NOTIFICATIONS	DAILY REMINDER

---

Step 4: サブテキストを書く

サブテキストは、見出しの下に添える補足の一文です。省略してもかまいません。特にヒーロースライドでは、見出しだけで十分な場合は空欄にします。

使用する場合は、次の点を守ります。

• 見出しで意図的にぼかした、具体的な詳細を1つ加える
• 企業的ではなく、会話のような表現にする
• 最大8〜10語
• 別の言葉で見出しを繰り返さない

見出し	悪いサブテキスト	良いサブテキスト
"Every prayer.\nAt your fingertips."	"Access all your prayers easily in one place"	"Aarti • Chalisa • Mantra — all in one place"
"No signal?\nNo problem."	"The app works without an internet connection"	"Every prayer, always available."
"Bigger text.\nClearer words."	"You can adjust the font size for better readability"	"Adjust font size to suit you."
"Save what\nyou love."	"Save your favourite prayers as bookmarks"	"Quick access to your most-used prayers."

---

すべてに適用されるルール

1枚につき1つのアイデア。 「and」を使いたくなったら、1枚ではなく2枚に分けましょう。

1行あたり3〜5語。 意図的に改行しましょう。改行はデザインの一部であり、折り返しの偶然ではありません。

短い言葉を選びます。 1〜2音節が目安です。10歳の子どもでもすぐに理解できるか試してみましょう。

名詞より動詞。 「Save what you love」は「Favourites management」より優れています。「Find anything」は「Search functionality」より優れています。

次の言葉は使わないでください： seamless、powerful、advanced、robust、intuitive、innovative、comprehensive、streamlined、leverage、utilize。どれも何も伝えません。

---

完全版：悪い例 → よい例

機能の説明	悪い見出し	良い見出し
"Task management with priorities"	"Advanced task management"	"Done by noon.\nEvery day."
"Syncs across devices"	"Cross-device sync"	"Your phone.\nYour tablet.\nOne list."
"Analytics dashboard"	"Powerful analytics"	"See what's\nactually working."
"Push notifications"	"Real-time notifications"	"Never miss\nwhat matters."
"Home screen widget"	"Customizable widgets"	"Your info.\nRight there."
"Offline mode"	"Works offline"	"No signal?\nNo problem."
"Font size control"	"Accessibility features"	"Bigger text.\nClearer words."
"Save favourites"	"Bookmark system"	"Your prayers.\nAlways close."
"Dark mode"	"Dark mode support"	"Easier on\nyour eyes."
"Language switch"	"Bilingual support"	"Hindi or English.\nYou choose."

---

フィーチャーグラフィックの見出し

基本ルールは同じですが、横長のキャンバスには余裕があるため、最大8語まで使えます。アプリの中心的な価値を1行で表しましょう。改行は不要です。

"The app that changes how you pray" ✓ "Every devotional. One beautiful app." ✓ "Your daily devotional companion" ✓

---

技術的な実装

セットアップ

新しいフォルダーを作成し、その中に2つのファイルを作成します。

mkdir play-store-screenshots
cd play-store-screenshots
mkdir screenshots
# Copy the user's app screenshots and icon into ./screenshots/

次に、config.js（AIが入力）とindex.html（AIが生成）を作成します。これでセットアップは完了です。パッケージマネージャーもインストール手順も必要ありません。

index.html の構造

<head>では、すべてをCDN経由で読み込みます。ローカル依存関係はありません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  
  <script src="https://unpkg.com/[email protected]/dist/html-to-image.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
  
  <script src="config.js"></script>
</head>
<body>
  
  <div id="topbar">...</div>

  
  <div id="slide-grid">
    
    
  </div>

  
  <div id="export-canvases" style="position:fixed;left:-9999px;top:0;z-index:-1">...</div>

  <script>
    // All rendering and export logic here
  </script>
</body>
</html>

重要な原則：グリッドでは、すべてのスライドを常に表示します。「一度に1枚」表示するモードも、切り替え機能もありません。 グリッドがそのままインターフェースです。エクスポートする前に、すべてのスライドを一目で確認できます。

タイポグラフィ

上記の<link>タグでフォントを読み込みます。標準的な候補は、Inter、Plus Jakarta Sans、DM Sansです。ユーザーが希望を指定している場合は、それに合わせます。

スライドのレンダリングでは、フォントサイズをすべてキャンバス幅に対する比率で設定し、pxの値を直接指定しないでください。

// Typography scale — derive from canvas width W
function typography(W) {
  return {
    label:      W * 0.028,   // all-caps category label
    headline:   W * 0.090,   // standard headline (1–2 lines)
    headlineLg: W * 0.100,   // hero slide headline (larger)
    subtext:    W * 0.038,   // supporting sentence
    caption:    W * 0.030,   // small secondary text
  };
}

これにより、変更を加えなくても、あらゆるエクスポート解像度でテキストを正しく表示できます。

見出しの改行をレンダリングする

重要： config.js の見出しでは、行を分けるために \n を使います（例："Every prayer.\nAt your fingertips."）。これをレンダリングするために white-space: pre-line に頼らないでください。これは実際の改行文字にしか対応しておらず、設定値に含まれるリテラルな2文字のシーケンス \n には機能しません。HTML に挿入する前に、必ずヘルパーを使って変換してください。

const nl2br = (text) => text.replace(/\\n|\n/g, '<br>');

これらの値を HTML に挿入する箇所では、すべて nl2br(slide.headline) と nl2br(slide.subtext) を使用してください。

テーマシステム

名前付きのテーマを4つ、プレーンな JS オブジェクトとして定義します。config.theme キーでテーマを選択します。

const THEMES = {
  "clean-light": {
    bg: "#FFFFFF",
    fg: "#111111",
    accent: config.brand.primary,
    muted: "#888888",
    surface: "#F4F4F8",
  },
  "dark-bold": {
    bg: "#0A0A0A",
    fg: "#FFFFFF",
    accent: config.brand.accent,
    muted: "#999999",
    surface: "#1A1A1A",
  },
  "vibrant": {
    bg: config.brand.primary,
    fg: "#FFFFFF",
    accent: config.brand.accent,
    muted: "rgba(255,255,255,0.7)",
    surface: config.brand.secondary,
  },
  "editorial": {
    bg: "#F8F5F0",
    fg: "#1A1A1A",
    accent: config.brand.primary,
    muted: "#7A7A7A",
    surface: "#EDE9E3",
  },
};

const theme = THEMES[config.theme];

スライドグリッドのスケーリング

各スマートフォンスライドを、ビューポートの高さにゆとりを持って収まるように拡大・縮小します。単一のスケール係数を計算し、すべてのスライドラッパーに適用してください。

const TOPBAR_H = 52;  // height of the top controls bar in px

const SCALE = Math.min(
  (window.innerHeight - TOPBAR_H - 64) / PHONE_H,          // fit vertically
  (window.innerWidth - 80) / (PHONE_W * config.slides.length + 20 * (config.slides.length - 1))
);

document.querySelectorAll(".slide-wrap").forEach(wrap => {
  wrap.style.width  = `${PHONE_W * SCALE}px`;
  wrap.style.height = `${PHONE_H * SCALE}px`;
});
document.querySelectorAll(".slide").forEach(slide => {
  slide.style.transform      = `scale(${SCALE})`;
  slide.style.transformOrigin = "top left";
});

フィーチャーグラフィックは同じ行に表示されます。高さがスマートフォンスライドと視覚的に一致するよう、比例して拡大・縮小してください。

const fgScale = (PHONE_H * SCALE) / FG_H;
fgWrap.style.width  = `${FG_W * fgScale}px`;
fgWrap.style.height = `${FG_H * fgScale}px`;
fgEl.style.transform      = `scale(${fgScale})`;
fgEl.style.transformOrigin = "top left";

画面外のエクスポート用キャンバスは、常にフル解像度にします。拡大・縮小しないでください。

---

フィーチャーグラフィックの実装

フィーチャーグラフィックは独立したコンポーネントであり、スマートフォンスライドではありません。1024×500px のキャンバスに単独でレンダリングされます。

重要：キャンバスのサイズを正確に指定する

キャンバス要素のサイズは CSS で明示的に指定してください。コンテンツに応じてブラウザーにサイズを決めさせないでください。

#feature-graphic-canvas {
  width: 1024px;
  height: 500px;
  position: relative;
  overflow: hidden;
  /* Never set width/height from JS or let it auto-size */
}

グリッドのプレビューでは、CSS transform: scale(...) を適用して見た目のサイズを変更しますが、基になる DOM 要素のサイズは正確に 1024×500 に保ってください。キャンバスのサイズがこれ以外だと、エクスポートされる PNG の寸法が正しくなりません。

3つのスタイル（config の featureGraphic.style で設定）

gradient

キャンバス全体に、brand.primary から brand.secondary への斜めグラデーションを適用します。奥行きを出すために、ぼかしたオーブを2～3個重ねます（スマートフォンスライドと同じ手法です）。アプリアイコンを左側の3分の1の領域に垂直方向中央揃えで配置します（180×180px）。見出しは中央より右側に、サブテキストはその下に配置します。

┌──────────────────────────────────────────────────────────┐
│  ░░░░░░░░░░░░░░░░  gradient bg + subtle orbs  ░░░░░░░░░  │
│                                                           │
│   ┌──────┐   App Name                                     │
│   │ ICON │                                                │
│   │      │   Big headline here                            │
│   └──────┘   Available on Google Play                     │
│                                                           │
└──────────────────────────────────────────────────────────┘

最適な用途：ほとんどのアプリ。すっきりとプロフェッショナルな仕上がりで、どのブランドカラーにも合います。

solid

brand.background で全体を単色塗りつぶしにし、細い横方向のアクセントライン（brand.primary）と大きなアプリアイコンを中央に配置します。見出しとサブテキストはその下に中央揃えで配置します。

最適な用途：ユーティリティアプリ、生産性向上ツール、すっきりとしたミニマルなブランドアイデンティティを持つアプリ。

screenshot-backed

アプリのスクリーンショットをキャンバスの右側55%に配置し、トリミングして object-fit cover で表示します。左側45%は brand.primary の単色パネルにします。2つの領域の間は、フェザー付きグラデーションでフェードさせます。見出しとアイコンは単色パネル上に配置します。

最適な用途：UI を見せること自体がアピールポイントとなる、写真、デザイン、ソーシャルなどの視覚的に豊かなアプリ。

プレミアムなフィーチャーグラフィックの構成

同じ装飾的なオーブの手法をフィーチャーグラフィックにも適用してください。

.fg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
/* Large orb upper-left, behind icon */
.fg-orb-1 {
  width: 300px; height: 300px;
  top: -60px; left: -40px;
  background: radial-gradient(circle, var(--brand-secondary) 0%, transparent 70%);
  opacity: 0.40;
}
/* Smaller orb lower-right */
.fg-orb-2 {
  width: 200px; height: 200px;
  bottom: -40px; right: 80px;
  background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%);
  opacity: 0.30;
}

フィーチャーグラフィックのタイポグラフィ（FG_W = 1024 を基準にスケーリング）

const FGT = {
  headline: FG_W * 0.060,   // ~61px — confident, reads at small sizes
  subtext:  FG_W * 0.026,   // ~27px
  appName:  FG_W * 0.030,   // ~31px — shown above the headline
};

---

エクスポートの仕組み

優れた CSS グラデーション、フィルター、clip-path のサポートを得るため、html2canvas よりも html-to-image を優先して使用します。JSZip と FileSaver.js を使って、すべてのエクスポートを1つの ZIP にまとめます。

重要：2回呼び出すパターン

フォントと画像を正しくレンダリングするために必要です。1回目の呼び出しで遅延読み込みされたアセットをウォームアップし、2回目でクリーンな出力を生成します。1回目を省略すると、テキストがぼやけたり、画像が表示されなかったりします。

以下の captureSlide ヘルパーはこのパターンを実装しており、exportAll で使用されます。

// Moves the element on-screen momentarily (required by html-to-image),
// captures twice for clean output, then returns the data URL.
async function captureSlide(element) {
  element.style.left     = "0px";
  element.style.top      = "0px";
  element.style.position = "fixed";
  element.style.zIndex   = "9999";

  // First call: warms up fonts and images — result discarded
  await htmlToImage.toPng(element, { pixelRatio: 1 });

  // Second call: clean, correct output
  const dataUrl = await htmlToImage.toPng(element, { pixelRatio: 1 });

  // Restore to off-screen position
  element.style.left     = "-9999px";
  element.style.top      = "0px";
  element.style.position = "fixed";
  element.style.zIndex   = "-1";

  await new Promise((r) => setTimeout(r, 200));
  return dataUrl;
}

ファイル名の規則

先頭にゼロ埋めした数字を付けることで、ファイルシステム上や Play Store へのアップロード時に、ファイル名が正しいアルファベット順で並びます。

exports/phone/en/
├── 01-hero-1080x1920.png
├── 02-feature-one-1080x1920.png
├── 03-feature-two-1080x1920.png
├── 04-trust-1080x1920.png
└── 05-cta-1080x1920.png

exports/feature-graphic/
└── feature-graphic-1024x500.png

ZIP 形式での一括エクスポート

すべてのスライドを1つの ZIP ファイルにまとめ、ワンクリックでダウンロードします。個別のファイルはダウンロードされません。

// Capture helper — double-call pattern for clean font and image rendering
async function captureSlide(element) {
  element.style.left     = "0px";
  element.style.top      = "0px";
  element.style.position = "fixed";
  element.style.zIndex   = "9999";

  // First call: warms up lazy-loaded fonts and images — result discarded
  await htmlToImage.toPng(element, { pixelRatio: 1 });
  // Second call: clean, correct output
  const dataUrl = await htmlToImage.toPng(element, { pixelRatio: 1 });

  element.style.left     = "-9999px";
  element.style.top      = "0px";
  element.style.position = "fixed";
  element.style.zIndex   = "-1";

  await new Promise((r) => setTimeout(r, 200));
  return dataUrl;
}

async function exportAll() {
  const zip = new JSZip();
  const phoneFolder = zip.folder("phone");
  const fgFolder    = zip.folder("feature-graphic");

  for (const locale of config.locales) {
    const localeFolder = phoneFolder.folder(locale);

    // Phone slides
    for (let i = 0; i < config.slides.length; i++) {
      const el = document.getElementById(`canvas-${locale}-${config.slides[i].id}`);
      if (!el) continue;
      const name = `${String(i + 1).padStart(2, "0")}-${config.slides[i].id}-${PHONE_W}x${PHONE_H}.png`;
      const dataUrl = await captureSlide(el);
      localeFolder.file(name, dataUrl.split(",")[1], { base64: true });
    }

    // Feature graphic
    const fg = document.getElementById(`canvas-${locale}-feature-graphic`);
    if (fg) {
      const dataUrl = await captureSlide(fg);
      fgFolder.file(`feature-graphic-${FG_W}x${FG_H}.png`, dataUrl.split(",")[1], { base64: true });
    }

    // Tablet slides (if enabled)
    if (config.tablet && config.tablet.enabled) {
      for (const size of config.tablet.sizes) {
        const W = size === "10-inch" ? TAB10_W : TAB7_W;
        const H = size === "10-inch" ? TAB10_H : TAB7_H;
        const tabFolder = zip.folder(`tablet-${size}/${locale}`);
        for (let i = 0; i < config.slides.length; i++) {
          const el = document.getElementById(`canvas-tablet-${size}-${locale}-${config.slides[i].id}`);
          if (!el) continue;
          const name = `${String(i + 1).padStart(2, "0")}-${config.slides[i].id}-${W}x${H}.png`;
          const dataUrl = await captureSlide(el);
          tabFolder.file(name, dataUrl.split(",")[1], { base64: true });
        }
      }
    }
  }

  // Generate and trigger download of the ZIP
  const appSlug = config.app.name.replace(/\s+/g, "-").toLowerCase();
  const blob = await zip.generateAsync({ type: "blob" });
  saveAs(blob, `${appSlug}-play-store-screenshots.zip`);
}

ワンクリックで focusflow-play-store-screenshots.zip が作成され、すべてのスライドが種類と言語・地域別に整理されて格納されます。解凍して Play Console にアップロードするだけで使えます。

多言語と RTL のサポート

スクリーンショットは、exports/phone/ の下にあるロケール別フォルダーに整理されます。

exports/phone/
├── en/
├── de/
└── ar/     ← RTL locale — layouts are mirrored

RTL の検出とレイアウトのミラーリング：

const RTL_LOCALES = new Set(["ar", "he", "fa", "ur"]);
const isRtl = RTL_LOCALES.has(selectedLocale);

// Apply dir attribute to each slide container element:
// slideEl.setAttribute("dir", isRtl ? "rtl" : "ltr");
//
// CSS flexbox respects dir automatically — text and layout mirror
// without needing manual position overrides.

config.locales に複数の項目が含まれている場合、コントロールバーにロケールの <select> が作成されます。変更すると、選択した言語ですべてのプレビュー用スライドが再レンダリングされます。

---

QA チェックリスト

最終アセットをエクスポートする前に、以下をすべて確認してください。

コンテンツ

• 各スライドで伝える内容は 1 つだけです。「and」を使った複合的な主張は避けてください
• すべての見出しが、腕を伸ばした距離から 1 秒で読めるかというテストに合格しています
• 同じ機能が複数のスライドで繰り返されていません
• 一連のスライドに、導入 → 証拠 → 信頼 → CTA（または同様の構成）というストーリーの流れがあります
• サブテキスト（ある場合）は、内容を繰り返すのではなく情報を補足しています

ビジュアル

• すべてのスライドで layout: "text-top"（または最大 1 枚で "full-bleed"）を使用しています。それ以外のレイアウト値は使用していません
• テキストがスマートフォンのフレームに重なっていません（はみ出すおそれがある場合は見出しを短くしてください）
• フィーチャーグラフィックは 50% の縮尺でもはっきり読めます（Play ストアの検索結果での表示サイズです）

Play ストアの要件

• スマートフォンのスクリーンショットを最低 2 枚エクスポートしています
• デバイスタイプごとのスマートフォンのスクリーンショットは最大 8 枚です
• フィーチャーグラフィックを正確に 1024 × 500px でエクスポートしています
• すべてのスクリーンショットが JPEG または 24-bit PNG です。最終エクスポートには アルファチャンネル／透明部分を含めないでください
• すべてのファイルが 8MB 未満です
• iOS 風の UI 要素が見えていません。Dynamic Island、iPhone のノッチ形状、iOS のホームインジケーターピル、iOS のステータスバーのスタイルは使用していません
• Apple のブランディング、App Store のバッジ、iOS のシステムアイコンはどこにも含まれていません
• すべてのアセットの背景が完全に不透明です

エクスポート品質

• すべてのテキストがフル解像度でシャープかつ鮮明です（ぼやけたアーティファクトがありません）
• モックアップ内のスクリーンショットが引き伸ばされたり歪んだりしていません。元のアスペクト比を維持しています
• ぼやけたフォントを防ぐため、エクスポート時に 2 回呼び出すパターンを使用しました
• ファイル名がゼロ埋めされています（01-、02-。1-、2- ではありません）

---

エクスポート後：Play Console へのアップロード

1. Google Play Console → アプリ → ストアの掲載情報 → メインのストアの掲載情報に移動します
2. スマートフォンのスクリーンショットで、exports/phone/en/ のファイルを順番にアップロードします
3. フィーチャーグラフィックで、feature-graphic-1024x500.png をアップロードします
4. タブレット用のスクリーンショットを生成した場合は、該当するタブレットのセクションにアップロードします
5. 保存して審査に提出します

Play ストアではアップロードが即座に処理されるため、リリースを提出する前にアセットの承認を待つ必要はありません。