app-store-screenshots

App Store スクリーンショット

競合アプリのスクリーンショットを調査し、戦略を立て、リリース可能な品質のスクリーンショットを作成して、App Store Connect にアップロードします。

概要

スクリーンショットは App Store のコンバージョンに不可欠です。ユーザーの 90% は 3 枚目のスクリーンショットを過ぎるとスクロールしません。このスキルでは、競合調査から最終アップロードまでの一連の手順を扱います。

重要：正しいスクリーンショットの寸法

iPhone 6.9" (Required): 1260 x 2736   ← iPhone 16 Pro Max
iPhone 6.7":             1290 x 2796   ← iPhone 16 Plus, 15 Pro Max
iPad 13" (Required):     2064 x 2752   ← iPad Pro M4

WARNING: Many online sources (including older versions of this skill) incorrectly
list 1290x2796 or 1320x2868 as the 6.9" dimension. The correct 6.9" dimension
is 1260 x 2736. Verify at: https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications/

---

ワークフロー 0 — オンボーディングインタビュー

開始する前に、ユーザーのアプリと目標に関する情報を集めます。

質問する項目

1. Is this a new app or an existing app?
   □ New app (focus on competitor research)
   □ Existing app (can also analyze current performance)

2. What is your app's category?
   [Select from App Store categories - see category-codes in references]

3. Describe your app in one sentence:
   [Used to extract keywords for competitor search]

4. What is your app name?
   [Used for folder organization]

5. What are your main competitors? (optional)
   [If known, provide app names or IDs]

6. Do you have Sensor Tower API access?
   □ Yes (enhanced competitor finding)
   □ No (use iTunes API + RSS feeds only)

7. What locales do you need screenshots for?
   [e.g., en-US, tr, de-DE, ja]

出力

プロジェクトのフォルダー構成を作成します。

{app_name}_screenshots/
├── competitors/
├── analysis/
├── your_app/
│   ├── iphone/
│   ├── ipad/
│   └── assets/
├── preview/
├── export/
│   └── locales/
│       ├── en-US/
│       └── {other locales}/
└── README.md

---

ワークフロー 1 — 競合アプリを探す

分析するカテゴリの主要な競合アプリを特定します。

ステップ 1：キーワードで検索する

アプリの説明からキーワードを抽出し、iTunes で検索します。

GET https://itunes.apple.com/search?term={keywords}&entity=software&country=us&limit=25

ステップ 2：上位ランキングを取得する

RSS フィードを通じて、カテゴリ内の上位アプリを取得します。

GET https://rss.applemarketingtools.com/api/v2/us/apps/top-free/50/apps.json?genre={genreId}

ステップ 3：絞り込みとランキング（Sensor Tower を利用する場合は任意）

Sensor Tower API が利用可能な場合：

GET https://app.sensortower.com/api/ios/apps?app_ids={ids}

ダウンロード数と収益の推定値を使って、「成功している」アプリを見つけます。

ステップ 4：上位 3 つの競合アプリを選ぶ

候補をユーザーに提示します。

## Competitor Candidates

| # | App Name | Rating | Reviews | Category Rank |
|---|----------|--------|---------|---------------|
| 1 | Calm | 4.8★ | 1.2M | #1 Health |
| 2 | Headspace | 4.9★ | 850K | #2 Health |
| 3 | Insight Timer | 4.9★ | 450K | #5 Health |

Select 3 competitors to analyze (enter numbers): [1, 2, 3]

---

ワークフロー 2 — スクリーンショットをダウンロードして分析する

競合アプリのスクリーンショットをダウンロードし、分析を作成します。

ステップ 1：スクリーンショットの URL を取得する

各競合アプリについて：

GET https://itunes.apple.com/lookup?id={appId}&country=us

レスポンスから次の項目を抽出します。

• screenshotUrls — iPhone のスクリーンショット
• ipadScreenshotUrls — iPad のスクリーンショット

重要：スクリーンショット配列が空の場合の代替手段

iTunes API から screenshotUrls: [] が返されるアプリは多くあります。これはよくあることで、レート制限の問題ではありません。API によって、一部のアプリのスクリーンショットが単に含まれないだけです。

代替手段（上から順に試してください）：

1. 別の国コードを試します： us、gb、de、cy、tr、au

   GET https://itunes.apple.com/lookup?id={appId}&country=gb
   

2. App Store のウェブページの HTML をスクレイピングします： App Store のページは JavaScript を使ってクライアント側で描画されますが、生の HTML ソースには、データ属性に埋め込まれた mzstatic.com のスクリーンショット URL が含まれていることがよくあります。

   Fetch: https://apps.apple.com/us/app/id{appId}
   Search HTML source for: mzstatic.com URLs containing screenshot patterns
   Filter for URLs with dimensions in the path (e.g., /1242x2208bb.png)
   

3. 手動でキャプチャします： 最後の手段として、ユーザーに端末上で App Store の掲載ページのスクリーンショットを撮るか、ブラウザーでウェブページを開くよう案内します。

ステップ 2：スクリーンショットをダウンロードする

import requests
import os
import json
import subprocess
from pathlib import Path

def download_screenshots(app_id, app_name, output_dir, country="us"):
    # Fetch app data — try multiple countries if needed
    countries = [country, "us", "gb", "de", "au", "cy"]
    data = None

    for cc in countries:
        response = requests.get(f"https://itunes.apple.com/lookup?id={app_id}&country={cc}")
        result = response.json()
        if result["resultCount"] > 0:
            app = result["results"][0]
            if app.get("screenshotUrls"):
                data = app
                break

    if not data:
        print(f"WARNING: No screenshots found for {app_name} via iTunes API")
        print("Try scraping the App Store web page HTML for mzstatic.com URLs")
        return None

    # Create directories
    base_path = Path(output_dir) / "competitors" / app_name
    iphone_path = base_path / "iphone"
    ipad_path = base_path / "ipad"
    iphone_path.mkdir(parents=True, exist_ok=True)
    ipad_path.mkdir(parents=True, exist_ok=True)

    # Download and verify dimensions
    screenshots_meta = []
    for i, url in enumerate(data.get("screenshotUrls", []), 1):
        filepath = iphone_path / f"{i:02d}.png"
        img = requests.get(url)
        with open(filepath, "wb") as f:
            f.write(img.content)

        # Verify actual dimensions (CDN may return smaller than requested)
        dims = get_image_dimensions(filepath)
        screenshots_meta.append({
            "index": i,
            "url": url,
            "actualWidth": dims[0],
            "actualHeight": dims[1]
        })

    # Save enriched metadata
    metadata = {
        **data,
        "downloadDate": str(date.today()),
        "screenshotCount": len(data.get("screenshotUrls", [])),
        "ipadScreenshotCount": len(data.get("ipadScreenshotUrls", [])),
        "screenshotDetails": screenshots_meta
    }
    with open(base_path / "metadata.json", "w") as f:
        json.dump(metadata, f, indent=2)

def get_image_dimensions(filepath):
    """Get actual pixel dimensions. CDN URLs don't upscale."""
    # macOS: sips -g pixelWidth -g pixelHeight {file}
    # Linux: identify {file} (ImageMagick) or python Pillow
    from PIL import Image
    img = Image.open(filepath)
    return img.size

CDN の寸法に関する警告

CDN は画像をアップスケールしません。 開発者が 5.5 インチのスクリーンショット（1242x2208）をアップロードした場合、URL の末尾に 1320x2868bb.png を指定しても、元の 1242x2208 の画像が通知なく返されます。ダウンロード後は必ず実際の寸法を確認してください。

ステップ 3：各競合アプリを分析する

各競合アプリについて、次の項目を分析して記録します。

## Screenshot Analysis: {App Name}

### Overview
- **iPhone Screenshots:** {count}
- **iPad Screenshots:** {count}
- **Actual Dimensions:** {width}x{height} (may differ from URL)
- **Visual Style:** [Device mockup / Lifestyle / UI-only / Hybrid]
- **Color Palette:** [Primary colors observed]

### Screenshot Breakdown

| # | Type | Caption/Text | Feature Shown | Notes |
|---|------|--------------|---------------|-------|
| 1 | {type} | "{caption}" | {feature} | {notes} |
| 2 | {type} | "{caption}" | {feature} | {notes} |
...

### Strategy Analysis
- **Hook (Screenshot 1):** {description}
- **Flow:** {how screenshots progress}
- **Text Style:** {short/long, benefit/feature focused}
- **Device Frames:** {yes/no, style}
- **ASO Keywords in Captions:** {observed keywords}

### Strengths
- {strength 1}
- {strength 2}

### Weaknesses
- {weakness 1}
- {weakness 2}

competitors/{app_name}/README.md として保存します。

---

ワークフロー 3 — 比較して傾向を特定する

競合アプリ横断の分析を作成します。

比較表

## Competitor Comparison

### Visual Style

| Aspect | Competitor 1 | Competitor 2 | Competitor 3 |
|--------|--------------|--------------|--------------|
| Screenshot Count | 8 | 6 | 10 |
| Style | Device mockup | Lifestyle | Hybrid |
| Text Amount | Minimal | Heavy | Medium |
| Color Theme | Blue/Purple | Green/White | Orange/Black |
| Device Frames | Yes | No | Yes |
| Frame Type | Dynamic Island | N/A | Dynamic Island |

### Caption Patterns

| Screenshot | Competitor 1 | Competitor 2 | Competitor 3 |
|------------|--------------|--------------|--------------|
| 1 (Hook) | "Find Peace" | "Sleep Better" | "Meditate Daily" |
| 2 | "Sleep Stories" | "Guided Sessions" | "Track Progress" |
| 3 | "Daily Calm" | "Reduce Stress" | "Join Community" |

### ASO Keywords in Screenshots
| Keyword | Comp 1 | Comp 2 | Comp 3 | Search Volume |
|---------|--------|--------|--------|---------------|
| "calorie" | ✓ | ✓ | ✗ | High |
| "tracker" | ✓ | ✗ | ✓ | High |
| "AI" | ✗ | ✓ | ✓ | Medium |

### Common Patterns
1. {pattern 1}
2. {pattern 2}
3. {pattern 3}

### Differentiation Opportunities
1. {opportunity 1}
2. {opportunity 2}

analysis/competitor_comparison.md として保存します。

---

ワークフロー 4 — キャプション用の ASO キーワード調査

キャプションを書く前に実施してください。 2025 年 6 月以降、スクリーンショットのキャプションは Apple の検索アルゴリズムによるインデックス登録の対象となっているため、キーワードの配置が重要です。

ステップ 1：カテゴリのキーワードを調査する

GET https://itunes.apple.com/search?term={category}&entity=software&country=us&limit=25

競合アプリ名とサブタイトルからキーワードの傾向を抽出します。

"Cal AI - Calorie Tracker" → keywords: cal, ai, calorie, tracker
"Lifesum: AI Calorie Counter" → keywords: ai, calorie, counter
"YAZIO – Calorie Counter & Diet" → keywords: calorie, counter, diet

ステップ 2：価値の高いキーワードを特定する

競合分析をもとに、次の基準でキーワードをランク付けします。

• 競合アプリ名での出現頻度（多いほど、妥当性が確認されています）
• 検索ボリューム（App Store の候補表示から推定）
• 自分のアプリとの関連性

ステップ 3：キーワードをスクリーンショットに割り当てる

各スクリーンショットのキャプションには、少なくとも 1 つのターゲットキーワードを含めます。

## Keyword-Optimized Screenshot Captions

Target keywords: calorie, tracker, AI, scan, food, diet

| # | Before (generic) | After (ASO-optimized) | Keywords |
|---|-------------------|-----------------------|----------|
| 1 | "Snap It. Track It." | "Scan Food, Count Calories" | scan, food, calories |
| 2 | "See Your Progress" | "AI Calorie Tracker" | AI, calorie, tracker |
| 3 | "Eat Smarter" | "Smart Diet Insights" | diet, insights |

ステップ 4：市場ごとにキーワードをローカライズする

市場によって検索のされ方は異なります。

| Locale | Top Keywords |
|--------|--------------|
| en-US | calorie tracker, food scanner, diet app |
| tr | kalori sayacı, yemek takip, diyet uygulaması |
| de-DE | kalorienzähler, ernährung, diät tracker |
| ja | カロリー計算, 食事管理, ダイエット |

---

ワークフロー 5 — スクリーンショットを計画する

分析とキーワード調査に基づいて、スクリーンショットの計画を作成します。

スクリーンショット戦略のフレームワーク

The "Value-Usage-Trust" Formula:
1. VALUE — What the user gets (hook) + primary keyword
2. USAGE — How it works (key features) + feature keywords
3. TRUST — Social proof (ratings, awards)

スクリーンショット計画を作成する

## Screenshot Plan: {Your App Name}

### Strategy
- **Style:** {chosen style based on analysis}
- **Count:** {recommended: 6-8}
- **Text Approach:** {based on competitor analysis}
- **Differentiator:** {what makes yours unique}
- **Target Keywords:** {from Workflow 4}

### Screenshot Sequence

#### Screenshot 1: Hook / Value Proposition
- **Caption:** "{ASO-optimized caption}"
- **Subtitle:** "{supporting text}"
- **Visual:** {description of what to show}
- **Keywords:** {keywords included}
- **Goal:** Grab attention, communicate core value

#### Screenshot 2: Key Feature #1
...

### Design Guidelines
- **Colors:** {recommended palette}
- **Font:** {recommendation}
- **Device Frame:** Use Dynamic Island style (not notch)
- **Safe Zones:** Keep text 120px from edges, 160px from top
- **Caption Font Size:** 140-160px title, 48-56px subtitle
- **Letter Spacing:** -4px to -5px for bold impact

### Export Dimensions
- [ ] iPhone 6.9": 1260 x 2736 (iPhone 16 Pro Max)
- [ ] iPad 13": 2064 x 2752
- [ ] PNG format, no transparency
- [ ] Under 8 MB each

your_app/plan.md として保存します。

---

ワークフロー 6 — スクリーンショットを作成する（HTML/CSS エクスポートツール）

HTML/CSS ビルダーを使って、リリース可能な品質のスクリーンショットを作成します。

ステップ 1：export-tool.html を生成する

スクリーンショットを正確なピクセル寸法でそれぞれ表示する、自己完結型の HTML ファイルを作成します。完全なテンプレートについては、templates/export-tool.html を参照してください。

主な構成要素：

• 正確な目標寸法（1260x2736）のスクリーンショット用 canvas div
• ブラウザー内プレビュー表示用の CSS transform: scale()
• PNG エクスポート用の html2canvas.js
• スクリーンショットごとのカスタマイズ（背景、テキスト、アセット）

ステップ 2：スマートフォンフレームコンポーネント

旧式のノッチではなく、最新の Dynamic Island フレームを使用します。

.phone-frame {
    position: relative;
    width: 380px;
    height: 780px;
    border-radius: 55px;
    border: 8px solid #8a8a8f; /* Titanium color */
    background: #000;
    box-shadow:
        inset 0 0 0 3px #1a1a1a,
        6px 0 0 -2px #6b6b6f,    /* Power button */
        -6px 40px 0 -2px #6b6b6f, /* Volume up */
        -6px 90px 0 -2px #6b6b6f; /* Volume down */
    overflow: hidden;
}

.dynamic-island {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 40px;
    background: #000;
    border-radius: 22px;
    z-index: 10;
}

ステップ 3：タイポグラフィシステム

一貫性を保つため、キャプションのレイアウトを標準化します。

.screenshot-title {
    font-size: 140px;
    font-weight: 900;
    letter-spacing: -4px;
    line-height: 1.05;
    text-align: center;
}

.screenshot-subtitle {
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1px;
    opacity: 0.85;
    text-align: center;
}

ステップ 4：アセットの統合

アプリのアセットを組み込むためのガイド：

• アプリアイコン（PNG、背景透過）
• マスコット／キャラクター画像
• 実機から取得した UI スクリーンショット
• ドラマチックな効果を出すため、絶対位置指定と overflow を使って配置

重要：エクスポートツールの配信

⚠️ NEVER open export-tool.html as a file:// URL.
   Canvas export will fail with: "Tainted canvases may not be exported"

✅ ALWAYS serve via HTTP:
   python3 -m http.server 8080
   Then visit: http://localhost:8080/export-tool.html

✅ Add crossorigin="anonymous" to ALL <img> tags
✅ In html2canvas config, use: { useCORS: true }

---

ワークフロー 7 — スクリーンショットをエクスポートする

正しい寸法でエクスポートする方法は 2 つあります。

方法 A：ブラウザーでのエクスポート（html2canvas）

エクスポートツールに CDN 経由で html2canvas を含めます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
async function exportScreenshot(elementId, filename) {
    const element = document.getElementById(elementId);
    const canvas = await html2canvas(element, {
        width: 1260,
        height: 2736,
        scale: 1,
        useCORS: true,
        logging: false
    });

    const link = document.createElement('a');
    link.download = filename;
    link.href = canvas.toDataURL('image/png');
    link.click();
}
</script>

方法 B：Puppeteer によるヘッドレスキャプチャ（自動化に推奨）

Puppeteer を使うと、フォントと画像をより確実に出力できます。

const puppeteer = require('puppeteer');

async function captureScreenshot(url, elementId, outputPath) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Set viewport to exact screenshot dimensions
    await page.setViewport({ width: 1260, height: 2736 });
    await page.goto(url, { waitUntil: 'networkidle0' });

    // Clone element into a fixed full-size wrapper
    // (direct capture fails because of CSS transform: scale)
    await page.evaluate((id) => {
        // Hide all existing page content
        for (const child of document.body.children) {
            child.style.display = 'none';
        }

        // Create fixed wrapper at exact viewport size
        const wrapper = document.createElement('div');
        wrapper.style.cssText = `
            position: fixed; top: 0; left: 0;
            width: 1260px; height: 2736px;
            overflow: hidden; z-index: 99999;
        `;

        // Clone the target element at full size (no transform)
        const original = document.getElementById(id);
        const clone = original.cloneNode(true);
        clone.style.cssText = `
            transform: none;
            width: 1260px; height: 2736px;
            position: absolute; top: 0; left: 0;
        `;

        wrapper.appendChild(clone);
        document.body.prepend(wrapper);
    }, elementId);

    await page.screenshot({
        path: outputPath,
        clip: { x: 0, y: 0, width: 1260, height: 2736 }
    });

    await browser.close();
}

エクスポートした寸法を確認する

エクスポート後は必ず確認してください。

# macOS
sips -g pixelWidth -g pixelHeight screenshot.png

# Linux (ImageMagick)
identify screenshot.png

# Expected: 1260 x 2736 (iPhone 6.9")

エクスポート時の命名規則

{nn}_{name}_{locale}.png

Examples:
01_hook_en-US.png
02_scan_food_en-US.png
03_ai_tracker_en-US.png
01_hook_tr.png
02_yemek_tara_tr.png

---

ワークフロー 8 — スクリーンショットをローカライズする

複数の App Store ロケール向けに、ローカライズ版を作成します。

ステップ 1：テンプレートシステム

テキストレイヤーを差し替えられるように、スクリーンショットをデザインします。

• すべてのロケールでビジュアルレイアウトを統一する
• ロケールごとに変更するのはテキスト／キャプションのみ
• ビジュアルアセット（デバイスフレーム、UI、マスコット）は同一にする

ステップ 2：キャプションを翻訳する（翻訳するだけでなく、ローカライズする）

各ロケール向けに ASO 最適化キーワードを使用します（ワークフロー 4 を参照）。

| Screenshot | en-US | tr | de-DE |
|------------|-------|-----|-------|
| 1 | "Scan Food, Count Calories" | "Yemeği Tara, Kalori Say" | "Essen Scannen, Kalorien Zählen" |
| 2 | "AI Calorie Tracker" | "AI Kalori Takibi" | "KI Kalorienzähler" |
| 3 | "Smart Diet Insights" | "Akıllı Diyet Analizi" | "Smarte Diät-Einblicke" |

ステップ 3：ロケールごとにエクスポートする

export/
└── locales/
    ├── en-US/
    │   ├── 01_hook.png
    │   ├── 02_feature1.png
    │   └── ...
    ├── tr/
    │   ├── 01_hook.png
    │   └── ...
    └── de-DE/
        ├── 01_hook.png
        └── ...

ステップ 4：並べて確認する

アップロード前に、すべてのロケールを一緒にプレビューして、一貫性を確認します。

---

ワークフロー 9 — App Store Connect にアップロードする

App Store Connect API を使って、スクリーンショットをプログラムからアップロードします。

前提条件

• App Store Connect API キー（.p8 ファイル）
• Key ID と Issuer ID
• App Store Connect にアプリが作成済みであること
• 編集可能なバージョン（PREPARE_FOR_SUBMISSION 状態）

JWT 認証

const jwt = require('jsonwebtoken');
const fs = require('fs');

const privateKey = fs.readFileSync('AuthKey_{keyId}.p8');
const token = jwt.sign(
    {
        iss: ISSUER_ID,
        iat: Math.floor(Date.now() / 1000),
        exp: Math.floor(Date.now() / 1000) + 1200,
        aud: 'appstoreconnect-v1'
    },
    privateKey,
    { algorithm: 'ES256', header: { alg: 'ES256', kid: KEY_ID, typ: 'JWT' } }
);

API の流れ

1. アプリを検索する：

   GET /v1/apps?filter[bundleId]={bundleId}
   

2. 編集可能なバージョンを検索する：

   GET /v1/apps/{id}/appStoreVersions?filter[appStoreState]=PREPARE_FOR_SUBMISSION
   

   有効なフィルター状態：PREPARE_FOR_SUBMISSION、DEVELOPER_REJECTED、 REJECTED、METADATA_REJECTED、WAITING_FOR_REVIEW、IN_REVIEW、 PENDING_DEVELOPER_RELEASE、READY_FOR_SALE

   警告： READY_FOR_DISTRIBUTION は有効な状態値ではありません。

3. ローカライズを取得／作成する：

   GET /v1/appStoreVersions/{id}/appStoreVersionLocalizations
   

4. スクリーンショットセットを作成する：

   POST /v1/appScreenshotSets
   

   Body：

   {
     "data": {
       "type": "appScreenshotSets",
       "attributes": {
         "screenshotDisplayType": "APP_IPHONE_67"
       },
       "relationships": {
         "appStoreVersionLocalization": {
           "data": { "type": "appStoreVersionLocalizations", "id": "{locId}" }
         }
       }
     }
   }
   

5. 既存のスクリーンショットを削除する（置き換える場合）：

   DELETE /v1/appScreenshots/{screenshotId}
   

6. スクリーンショットごとに実行する：

   a. Reserve: POST /v1/appScreenshots
      { fileName, fileSize, sourceFileChecksum (MD5) }
   
   b. Upload binary to the URL(s) provided in response
   
   c. Commit: PATCH /v1/appScreenshots/{id}
      { uploaded: true, sourceFileChecksum: MD5 }
   

表示タイプのマッピング

IMPORTANT: APP_IPHONE_69 does NOT exist in the API.
iPhone 6.9" screenshots map to the 6.7" display type.

| Device          | API Display Type          | Accepted Dimensions |
|-----------------|--------------------------|---------------------|
| iPhone 6.9"     | APP_IPHONE_67            | 1260 x 2736         |
| iPhone 6.7"     | APP_IPHONE_67            | 1290 x 2796         |
| iPhone 6.5"     | APP_IPHONE_65            | 1284 x 2778         |
| iPhone 6.1"     | APP_IPHONE_61            | 1179 x 2556         |
| iPad 13"        | APP_IPAD_PRO_3GEN_129    | 2064 x 2752         |
| iPad 12.9"      | APP_IPAD_PRO_3GEN_129    | 2048 x 2732         |

詳細については、asc-upload-api.md を参照してください。

---

クイックリファレンス — API

タスク	エンドポイント
アプリを検索	itunes.apple.com/search?term={q}&entity=software
アプリを照会	itunes.apple.com/lookup?id={id}&country={cc}
トップ無料	rss.applemarketingtools.com/api/v2/{cc}/apps/top-free/{limit}/apps.json
トップ有料	rss.applemarketingtools.com/api/v2/{cc}/apps/top-paid/{limit}/apps.json
カテゴリ別	RSS フィードに ?genre={genreId} を追加
ASC：スクリーンショットセット	POST /v1/appScreenshotSets
ASC：スクリーンショットをアップロード	POST /v1/appScreenshots

---

フォルダー構成

{app_name}_screenshots/
├── competitors/
│   ├── {competitor_1}/
│   │   ├── iphone/
│   │   │   ├── 01.png
│   │   │   └── ...
│   │   ├── ipad/
│   │   │   └── ...
│   │   ├── metadata.json
│   │   └── README.md
│   ├── {competitor_2}/
│   └── {competitor_3}/
├── analysis/
│   ├── competitor_comparison.md
│   └── patterns.md
├── your_app/
│   ├── plan.md
│   ├── iphone/
│   │   ├── 01_hook.png
│   │   └── ...
│   ├── ipad/
│   │   └── ...
│   └── assets/
│       ├── ui_screenshots/
│       └── photos/
├── preview/
│   └── index.html
├── export/
│   ├── export-tool.html
│   ├── capture.js
│   └── locales/
│       ├── en-US/
│       └── {other locales}/
└── README.md

---

参照ファイル

ファイル	用途
screenshot-specs.md	すべてのデバイスサイズと技術要件
analysis-templates.md	競合分析用テンプレート
itunes-api.md	API エンドポイントとフォールバック戦略
asc-upload-api.md	App Store Connect アップロード API
export-pipeline.md	html2canvas と Puppeteer によるエクスポートガイド
preview-website.html	プレビューツールのテンプレート
export-tool.html	スクリーンショット作成ツールのテンプレート