app-store-screenshots

App Store スクリーンショットジェネレーター

概要

iOS App Store のスクリーンショットを、UI の紹介ではなく広告として描画し、html-to-image を使って Apple が指定する解像度で書き出す Next.js ページを作成します。スクリーンショットは、App Store でコンバージョンを促す最も重要な素材です。

基本原則

スクリーンショットは説明資料ではなく、広告です。 各スクリーンショットで売り込むアイデアは1つです。UI を見せているなら、それは間違いです。売り込むのは、感情や成果、あるいは悩みの解消です。

ステップ 1：ユーザーに次の質問をする

コードを書く前に、以下の質問をすべてユーザーにしてください。回答を得るまで先に進まないでください。

必須

1. アプリのスクリーンショット — 「アプリのスクリーンショットはどこにありますか？（実機で撮影した PNG ファイル）」
2. アプリアイコン — 「アプリアイコンの PNG はどこにありますか？」
3. ブランドカラー — 「ブランドカラーは何色ですか？（アクセントカラー、テキストカラー、背景の希望）」
4. フォント — 「アプリではどのフォントを使っていますか？（または、スクリーンショットに使いたいフォントは何ですか？）」
5. 機能一覧 — 「アプリの機能を優先順位順に挙げてください。アプリが最も得意とすることは何ですか？」
6. スライド数 — 「スクリーンショットは何枚必要ですか？（Apple では最大10枚まで使用できます）」
7. スタイルの方向性 — 「どのようなスタイルにしたいですか？例：温かみのある／自然な、暗め／ムーディー、クリーン／ミニマル、大胆／カラフル、グラデーション主体、フラット。参考にしたい App Store のスクリーンショットがあれば共有してください。」

任意

8. iPad のスクリーンショット — 「iPad のスクリーンショットもありますか？ある場合は、iPad 用の App Store スクリーンショットも生成します（ユニバーサルアプリでは推奨です）。」
9. コンポーネント素材 — 「浮遊する装飾として使いたい UI 要素の PNG（カード、ウィジェットなど）はありますか？なければ問題ありません。使用しません。」
10. ローカライズ済みスクリーンショット — 「複数の言語でスクリーンショットを作成しますか？アプリが英語のみでも、地域別 App Store での掲載順位向上に役立ちます。作成する場合は、言語を教えてください。（例：en、de、es、pt、ja、ar、he）」
11. テーマプリセットシステム — 「アートディレクションは1つにしますか？それとも、スクリーンショットの見た目をすばやく切り替えられる再利用可能なビジュアルテーマ（例：clean-light、dark-bold、warm-editorial）が必要ですか？」
12. 追加の指示 — 「具体的な要件、制約、希望はありますか？」

回答から判断する項目（質問せず、自分で決める）

ユーザーのスタイルの方向性、ブランドカラー、アプリの美的傾向に基づいて、次の項目を決めてください。

• 背景のスタイル：グラデーションの方向、色、明るいベースにするか暗いベースにするか
• 装飾要素：スタイルに合わせて、ブロブ、グロー、幾何学模様、または装飾なしから選ぶ
• 暗いスライドと明るいスライド：それぞれの枚数、暗い表現に適した機能
• タイポグラフィの扱い：ブランドの個性に合わせたウェイト、字間、行の高さ
• カラーパレット：ブランドカラーからテキストカラー、セカンダリーカラー、影の色合いを導き出す
• テーマプリセット名：曖昧なスタイルの希望を、ユーザーが切り替えられる再利用可能なテーマ ID にする
• RTL の動作：RTL のロケール（ar、he、fa、ur）がある場合は、テキストを翻訳するだけでなく、意図的にレイアウトを反転する

重要： プロセスの途中でユーザーから追加の指示があれば、それに従ってください。ユーザーの指示は、常にスキルの既定の設定より優先されます。

ステップ 2：プロジェクトをセットアップする

パッケージマネージャーを検出する

利用可能なものを確認し、次の優先順位で使用してください：bun > pnpm > yarn > npm

# Check in order
which bun && echo "use bun" || which pnpm && echo "use pnpm" || which yarn && echo "use yarn" || echo "use npm"

プロジェクトのひな形を作成する（既存の Next.js プロジェクトがない場合）

# With bun:
bunx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
bun add html-to-image

# With pnpm:
pnpx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
pnpm add html-to-image

# With yarn:
yarn create next-app . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
yarn add html-to-image

# With npm:
npx create-next-app@latest . --typescript --tailwind --app --src-dir --no-eslint --import-alias "@/*"
npm install html-to-image

スマートフォンのモックアップをコピーする

このスキルには、あらかじめ寸法を調整した iPhone のモックアップ mockup.png（この SKILL.md と同じ場所にあります）が含まれています。プロジェクトの public/ ディレクトリにコピーしてください。モックアップファイルは、このスキルファイルと同じディレクトリにあります。iPad のモックアップは不要です。iPad のフレームは CSS のみで作成します。

ファイル構成

project/
├── public/
│   ├── mockup.png              # iPhone frame (included with skill)
│   ├── app-icon.png            # User's app icon
│   ├── screenshots/            # iPhone app screenshots
│   │   ├── home.png
│   │   ├── feature-1.png
│   │   └── ...
│   └── screenshots-ipad/       # iPad app screenshots (optional)
│       ├── home.png
│       ├── feature-1.png
│       └── ...
├── src/app/
│   ├── layout.tsx              # Font setup
│   └── page.tsx                # The screenshot generator (single file)
└── package.json

注： iPad のモックアップ PNG は不要です。iPad のフレームは CSS で描画されます（下記の iPad モックアップコンポーネントを参照）。

多言語対応： 言語ごとにロケールフォルダーを作成し、その中にスクリーンショットを配置します。ジェネレーターが base パスを切り替えるため、すべてのスライド画像の src は同じままです。

└── screenshots/
    ├── en/
    │   ├── home.png
    │   ├── feature-1.png
    │   └── ...
    ├── de/
    │   └── ...
    └── {locale}/

iPad のスクリーンショットもローカライズする場合は、同じロケール構成を反映します。

└── screenshots-ipad/
    ├── en/
    ├── de/
    └── {locale}/

ジェネレーター全体は単一の page.tsx ファイルです。 ルーティング、追加のレイアウト、API ルートはありません。

多言語対応：ロケールタブ

LOCALES 配列とロケールタブをツールバーに追加します。すべてのスライドの src で base を使い、パスをハードコードしません。

const LOCALES = ["en", "de", "es"] as const; // use whatever langs were defined
type Locale = typeof LOCALES[number];

// In ScreenshotsPage:
const [locale, setLocale] = useState<Locale>("en");
const base = `/screenshots/${locale}`;

// Toolbar tabs:
{LOCALES.map(l => (
  <button key={l} onClick={() => setLocale(l)}
    style={{ fontWeight: locale === l ? 700 : 400 }}>
    {l.toUpperCase()}
  </button>
))}

// In every slide — unchanged between single and multi-language:
<Phone src={`${base}/home.png`} alt="Home" />

テーマプリセットとロケールメタデータ

スライドコンポーネントを書き換えずにテーマと言語を切り替えられるよう、小さな設定レイヤーを追加します。

const LOCALES = ["en", "de", "ar"] as const;
type Locale = typeof LOCALES[number];

const RTL_LOCALES = new Set<Locale>(["ar"]);

const THEMES = {
  "clean-light": {
    bg: "#F6F1EA",
    fg: "#171717",
    accent: "#5B7CFA",
    muted: "#6B7280",
  },
  "dark-bold": {
    bg: "#0B1020",
    fg: "#F8FAFC",
    accent: "#8B5CF6",
    muted: "#94A3B8",
  },
  "warm-editorial": {
    bg: "#F7E8DA",
    fg: "#2B1D17",
    accent: "#D97706",
    muted: "#7C5A47",
  },
} as const;

type ThemeId = keyof typeof THEMES;

const COPY_BY_LOCALE = {
  en: { hero: "Build better habits" },
  de: { hero: "Baue bessere Gewohnheiten auf" },
  ar: { hero: "ابنِ عادات أفضل" },
} satisfies Record<Locale, { hero: string }>;

const [themeId, setThemeId] = useState<ThemeId>("clean-light");
const [locale, setLocale] = useState<Locale>("en");

const theme = THEMES[themeId];
const copy = COPY_BY_LOCALE[locale];
const isRtl = RTL_LOCALES.has(locale);

色をハードコードする代わりに、どこでもテーマトークンを使います。RTL ロケールでは、スクリーンショットのキャンバスに dir={isRtl ? "rtl" : "ltr"} を設定し、左右非対称のレイアウトは意図的に反転させます。

自動化用にクエリパラメーターをサポートします。

// ?locale=de&theme=dark-bold&device=ipad

フォントの設定

// src/app/layout.tsx
import { YourFont } from "next/font/google"; // Use whatever font the user specified
const font = YourFont({ subsets: ["latin"] });

export default function Layout({ children }: { children: React.ReactNode }) {
  return <html><body className={font.className}>{children}</body></html>;
}

ステップ 3：スライドを計画する

スクリーンショットのフレームワーク（ストーリーの流れ）

このフレームワークを、ユーザーが指定したスライド数に合わせて調整します。すべての枠を使う必要はありません。適切なものを選んでください。

枠	目的	注記
#1	ヒーロー／主なメリット	アプリアイコン＋キャッチコピー＋ホーム画面。ほとんどの人が目にするのはこれだけです。
#2	差別化要素	競合アプリと比べて、このアプリが独自である理由
#3	エコシステム	ウィジェット、拡張機能、ウォッチなど、メインアプリ以外の要素。該当しない場合は省略します。
#4 以降	コア機能	スライドごとに 1 つの機能を紹介し、重要なものから順に並べます
最後から 2 番目	信頼の証	アイデンティティやこだわり。「[X] を求める人のために作られた」
最後	その他の機能	追加機能や近日公開機能をピル形式で列挙します。機能が少ない場合は省略します。

ルール：

• 各スライドで訴求するアイデアは 1 つです。1 枚のスライドで 2 つの機能を紹介してはいけません。
• スライドごとにレイアウトを変え、同じテンプレート構成を繰り返さないでください。
• 視覚的なリズムをつけるため、背景色を反転させたスライドを 1〜2 枚含めます。

ステップ 4：まずコピーを書く

レイアウトを作る前に、すべての見出しの承認を得てください。コピーが悪ければ、優れたデザインも台無しになります。

絶対に守るルール

1. 見出し 1 つにつきアイデアは 1 つ。 「そして」で 2 つのことをつないではいけません。
2. 短く、よく使われる言葉を使う。 1〜2 音節を目安にします。分野固有のものでない限り、専門用語は避けます。
3. 1 行あたり 3〜5 語。 App Store のサムネイルサイズでも読める必要があります。
4. 改行位置には意図を持たせる。 <br /> で改行位置を調整します。

3 つのアプローチ（スライドごとに 1 つ選ぶ）

種類	効果	例
瞬間を描く	自分がそれをしている姿を思い浮かべられます	「アプリを開かずにコーヒーを確認。」
結果を示す	使った後の暮らしを伝えます	「買ったコーヒーすべてに居場所を。」
悩みを解消する	問題を示し、それを解決します	「最高のコーヒーを無駄にしない。」

うまくいかない表現

• 機能を見出しに列挙する： 「タグ、カテゴリー、メモでアイテムをすべて記録」
• 「そして」で 2 つのアイデアをつなぐ： 「X を記録して、Y を見逃さない」
• 複文： 「持っている Y ごとに X を保存してカスタマイズ」
• 曖昧で理想を掲げるだけの表現： 「すべてのアイテムを記録」
• マーケティングの流行語： 「AI を活用したヒント」（実際に AI を使っている場合を除く）

よくない見出しを改善する例

レイアウトを作る前に、弱いコピーを書き直すため、次のパターンを参考にしてください。

よくない例	よい例	効果がある理由
習慣を記録して、モチベーションを維持	連続記録を途切れさせない	アイデアが 1 つで、すばやく理解できる
AI による要約とスマートな並べ替えでタスクを整理	メモを次のアクションに変える	結果を先に伝え、専門用語も少ない
タグ、フィルター、お気に入りでレシピを保存	夕食をすばやく見つける	UI ではなく、ユーザーのメリットを訴求している
予算を管理して、支払いを忘れない	お金の行き先を把握する	約束が明確で、二重の主張がない
AI を活用したウェルネスサポート	今夜はもっと穏やかに	感情面の結果が具体的

コピーの作成

1. 3つのアプローチを使って、スライドごとに3つの案を作成します
2. それぞれを腕の長さほど離して読みます。1秒で理解できなければ、複雑すぎます
3. 各行が3～5語になっているか確認します。そうでなければ、改行を調整します
4. それぞれの理由を添えて、ユーザーに案を提示します

プロンプトの例

ユーザーの依頼が曖昧、または詳細不足の場合は、内部で次のような形に整えます。

Build App Store screenshots for my habit tracker.
The app helps people stay consistent with simple daily routines.
I want 6 slides, clean/minimal style, warm neutrals, and a calm premium feel.

Generate App Store screenshots for my personal finance app.
The app's main strengths are fast expense capture, clear monthly trends, and shared budgets.
I want a sharp, modern style with high contrast and 7 slides.

Create exportable App Store screenshots for my AI note-taking app.
The core value is turning messy voice notes into clean summaries and action items.
I want bold copy, dark backgrounds, and a polished tech-forward look.

パターンは次のとおりです。

1. アプリのカテゴリ＋中核となる成果
2. 優先順位順の主な機能
3. 希望するスライド数
4. スタイルの方向性

ローカライズのルール

• 見出しを直訳すると長くなったり、不自然になったりする場合は、直訳しないでください。
• 同じ訴求内容を維持しながら、対象市場向けにコピーを書き直します。
• ロケールごとに改行を再確認します。ドイツ語、フランス語、ポルトガル語では、主張を短くする必要があることがよくあります。
• RTL 言語では、構図が左右の重心に依存する場合、バッジの配置、補助的な装飾、スマートフォンのオフセットも反転します。

コピーのスタイルを参考にするアプリ

• Raycast — 具体的で説明的。各スライドで具体的な価値を1つ伝えます
• Turf — 極めてシンプルな動詞を使い、話しかけるような表現です
• Mela / Notion — 温かみがあり、ミニマルで、洗練されています

ステップ 5：ページを構築する

アーキテクチャ

page.tsx
├── Constants (IPHONE_W/H, IPAD_W/H, SIZES, design tokens)
├── LOCALES / RTL_LOCALES / THEMES / COPY_BY_LOCALE
├── Phone component (mockup PNG with screen overlay)
├── IPad component (CSS-only frame with screen overlay)
├── Caption component (label + headline, accepts canvasW for scaling)
├── Decorative components (blobs, glows, shapes — based on style direction)
├── iPhoneSlide1..N components (one per slide)
├── iPadSlide1..N components (same designs, adjusted for iPad proportions)
├── IPHONE_SCREENSHOTS / IPAD_SCREENSHOTS arrays (registries)
├── ScreenshotPreview (ResizeObserver scaling + hover export)
└── ScreenshotsPage (grid + locale tabs + theme tabs + device toggle + export logic)

書き出しサイズ（Apple 必須、縦向き）

iPhone

const IPHONE_SIZES = [
  { label: '6.9"', w: 1320, h: 2868 },
  { label: '6.5"', w: 1284, h: 2778 },
  { label: '6.3"', w: 1206, h: 2622 },
  { label: '6.1"', w: 1125, h: 2436 },
] as const;

最大サイズ（1320x2868）でデザインし、書き出し時に縮小します。

iPad（任意）

ユーザーから iPad のスクリーンショットが提供された場合は、iPad の App Store スクリーンショットも生成します。

const IPAD_SIZES = [
  { label: '13" iPad', w: 2064, h: 2752 },
  { label: '12.9" iPad Pro', w: 2048, h: 2732 },
] as const;

iPad のスライドは 2064x2752 でデザインし、縮小します。iPad のスクリーンショットは任意ですが、推奨されます。iPad 専用アプリでは必須であり、ユニバーサルアプリの掲載品質も向上します。

デバイス切り替え

両方のデバイスに対応する場合は、ツールバーのサイズドロップダウンの横に切り替えボタン（iPhone / iPad）を追加します。サイズドロップダウンは、選択したデバイスに応じて iPhone と iPad のサイズを切り替える必要があります。ヘッドレス／自動キャプチャのワークフロー向けに、?device=ipad URL パラメーターに対応します。

テーマとロケールの切り替え

ロケールとテーマのセレクターは、デバイスとサイズのセレクターと同じツールバーに配置します。これにより、ジェネレーターが一度きりのページではなく、小さなコントロールパネルになります。

• locale はスクリーンショットのフォルダーとコピーの辞書を切り替えます
• theme はデザイントークンのみを切り替えます
• device は iPhone／iPad のスライドレジストリを切り替えます
• size は書き出し解像度のみを切り替えます

レンダリング戦略

各スクリーンショットはフル解像度（1320x2868px）でデザインします。コピーは2つ用意します。

1. プレビュー：ResizeObserver を使った CSS transform: scale() で、グリッドカードに収まるようにします
2. 書き出し：position: absolute; left: -9999px を使い、実際の解像度で画面外に配置します

スマートフォンのモックアップコンポーネント

同梱の mockup.png には、事前に測定された次の値があります。

const MK_W = 1022;  // mockup image width
const MK_H = 2082;  // mockup image height
const SC_L = (52 / MK_W) * 100;   // screen left offset %
const SC_T = (46 / MK_H) * 100;   // screen top offset %
const SC_W = (918 / MK_W) * 100;  // screen width %
const SC_H = (1990 / MK_H) * 100; // screen height %
const SC_RX = (126 / 918) * 100;  // border-radius x %
const SC_RY = (126 / 1990) * 100; // border-radius y %

function Phone({ src, alt, style, className = "" }: {
  src: string; alt: string; style?: React.CSSProperties; className?: string;
}) {
  return (
    <div className={`relative ${className}`}
      style={{ aspectRatio: `${MK_W}/${MK_H}`, ...style }}>
      <img src="/mockup.png" alt=""
        className="block w-full h-full" draggable={false} />
      <div className="absolute z-10 overflow-hidden"
        style={{
          left: `${SC_L}%`, top: `${SC_T}%`,
          width: `${SC_W}%`, height: `${SC_H}%`,
          borderRadius: `${SC_RX}% / ${SC_RY}%`,
        }}>
        <img src={src} alt={alt}
          className="block w-full h-full object-cover object-top"
          draggable={false} />
      </div>
    </div>
  );
}

iPad のモックアップコンポーネント（CSS のみ）

事前に測定された PNG フレームを使う iPhone のモックアップとは異なり、iPad ではCSS のみのフレームを使います。これにより、別個のモックアップ素材が不要になり、どの解像度でもすっきり表示できます。

**重要な寸法：**フレームのアスペクト比は 770/1000 にする必要があります。これにより、内側の画面領域（幅 92% × 高さ 94.4%）が iPad のスクリーンショットの 3:4 のアスペクト比に一致します。比率を誤ると、黒帯が表示されたり、スクリーンショットが引き伸ばされたりします。

function IPad({ src, alt, style, className = "" }: {
  src: string; alt: string; style?: React.CSSProperties; className?: string;
}) {
  return (
    <div className={`relative ${className}`}
      style={{ aspectRatio: "770/1000", ...style }}>
      <div style={{
        width: "100%", height: "100%", borderRadius: "5% / 3.6%",
        background: "linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%)",
        position: "relative", overflow: "hidden",
        boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 40px rgba(0,0,0,0.6)",
      }}>
        {/* Front camera dot */}
        <div style={{
          position: "absolute", top: "1.2%", left: "50%",
          transform: "translateX(-50%)", width: "0.9%", height: "0.65%",
          borderRadius: "50%", background: "#111113",
          border: "1px solid rgba(255,255,255,0.08)", zIndex: 20,
        }} />
        {/* Bezel edge highlight */}
        <div style={{
          position: "absolute", inset: 0, borderRadius: "5% / 3.6%",
          border: "1px solid rgba(255,255,255,0.06)",
          pointerEvents: "none", zIndex: 15,
        }} />
        {/* Screen area */}
        <div style={{
          position: "absolute", left: "4%", top: "2.8%",
          width: "92%", height: "94.4%",
          borderRadius: "2.2% / 1.6%", overflow: "hidden", background: "#000",
        }}>
          <img src={src} alt={alt}
            style={{ display: "block", width: "100%", height: "100%",
              objectFit: "cover", objectPosition: "top" }}
            draggable={false} />
        </div>
      </div>
    </div>
  );
}

iPhone と比べた iPad のレイアウト調整：

• iPad のモックアップには width: "65-70%" を使います（iPhone は 82-86%）。iPad は高さに対して幅が広いためです
• iPad を2台並べるレイアウトも、幅を調整すればスマートフォンを2台並べるレイアウトと同じように使えます
• キャプションのフォントサイズは canvasW に応じて調整します（iPad は 2064、iPhone は 1320）
• 同じスライドデザインとコピーを再利用できます。Phone コンポーネントを IPad に置き換え、配置を調整してください

タイポグラフィ（解像度に依存しない）

すべてのサイズはキャンバス幅 W を基準とします。

要素	サイズ	ウェイト	行の高さ
カテゴリーラベル	W * 0.028	600（セミボールド）	デフォルト
見出し	W * 0.09～W * 0.1	700（ボールド）	1.0
メイン見出し	W * 0.1	700（ボールド）	0.92

Phone Placement Patterns

スライドごとに変化をつけてください。同じレイアウトを続けて使わないでください。

中央に配置したスマートフォン（ヒーロー、単一機能）：

bottom: 0, width: "82-86%", translateX(-50%) translateY(12-14%)

重ねて配置した2台のスマートフォン（比較）：

Back: left: "-8%", width: "65%", rotate(-4deg), opacity: 0.55
Front: right: "-4%", width: "82%", translateY(10%)

スマートフォン＋浮遊する要素（ユーザーからコンポーネントの PNG が提供された場合のみ）：

Cards should NOT block the phone's main content.
Position at edges, slight rotation (2-5deg), drop shadows.
If distracting, push partially off-screen or make smaller.

「その他の機能」スライド（任意）

アプリアイコン、見出し（「さらに多くの機能があります。」）、機能を示すピルを配置した、暗色またはコントラストのある背景にします。より控えめなピルを使った「近日公開」セクションを追加することもできます。

ステップ 6：エクスポート

html2canvas ではなく html-to-image を使う理由

html2canvas は CSS フィルター、グラデーション、ドロップシャドウ、バックドロップフィルター、複雑なクリッピングで問題が発生します。html-to-image はブラウザー標準の SVG シリアル化を使用するため、すべての CSS を忠実に処理できます。

エクスポートの実装

import { toPng } from "html-to-image";

// Before capture: move element on-screen
el.style.left = "0px";
el.style.opacity = "1";
el.style.zIndex = "-1";

const opts = { width: W, height: H, pixelRatio: 1, cacheBust: true };

// CRITICAL: Double-call trick — first warms up fonts/images, second produces clean output
await toPng(el, opts);
const dataUrl = await toPng(el, opts);

// After capture: move back off-screen
el.style.left = "-9999px";
el.style.opacity = "";
el.style.zIndex = "";

エクスポート一覧

プロジェクトが複数のロケールとテーマに対応している場合は、一度の操作でユーザーがすべてをエクスポートできるよう、まとめてエクスポートするヘルパーを追加してください。

const jobs = LOCALES.flatMap(locale =>
  ACTIVE_THEME_IDS.flatMap(themeId =>
    ACTIVE_DEVICES.flatMap(device =>
      getSlidesFor(device).map((slide, index) => ({
        locale,
        themeId,
        device,
        index,
        slide,
      })),
    ),
  ),
);

ファイルを適切に並べ替えられ、メタデータを保持できる名前にします。

01-hero-en-clean-light-iphone-1320x2868.png
01-hero-ar-dark-bold-ipad-2064x2752.png

最低限、次の操作に対応してください。

1. 現在のスライドをエクスポートする
2. 現在のロケール／デバイス／テーマのすべてのスライドをエクスポートする
3. 現在のテーマのすべてのロケールをエクスポートする
4. ユーザーから明示的に求められた場合、一覧の全組み合わせをエクスポートする

主なルール

• 2回呼び出す方法：1回目の toPng() でフォントと画像が遅延読み込みされます。2回目の呼び出しでクリーンな出力が生成されます。これを行わないと、エクスポート結果が空白になります。
• キャプチャ中は画面上に配置：toPng を呼び出す前に、一時的に left: 0 に移動します。
• 画面外のコンテナー：position: absolute; left: -9999px を使います（fixed は使いません）。
• サイズ変更：データ URL を Image に読み込み、canvas に目標サイズで描画します。
• 連続してエクスポートする場合は、間に 300ms の遅延を入れます。
• 画面外のコンテナーに fontFamily を設定します。
• 番号付きファイル名：正しく並べ替えられるよう、ゼロ埋めしたインデックスをエクスポートファイル名の先頭に付けます。例：01-hero-1320x2868.png、02-freshness-1320x2868.png など。String(index + 1).padStart(2, "0") を使います。

ステップ 7：最終 QA ゲート

ページをユーザーに返す前に、このチェックリストに沿ってすべてのスライドを確認してください。

メッセージの品質

• スライドごとにアイデアは1つ：見出しが2つのアイデアを伝えている場合は、分割するか、簡潔にします。
• 最初のスライドが最も力強い：ヒーロースライドでは、主なメリットがすぐに伝わるようにします。
• 1秒で読める：腕を伸ばした距離から見てすぐに理解できない場合は、書き直します。

ビジュアルの品質

• 同じレイアウトを続けて使わない：隣り合うスライドがテンプレートのように感じられないようにします。
• 装飾要素がストーリーを引き立てる：アプリの UI を覆わずに、躍動感を加えるようにします。
• 視覚的なリズムを作る：スライド数が十分に多い場合は、少なくとも1枚はコントラストのあるスライドを入れます。

エクスポートの品質

• 選択したエクスポートサイズに拡大縮小したときに、テキストやアセットが切れていない
• スクリーンショットがスマートフォンまたは iPad のフレーム内に正しく配置されている
• ゼロ埋めされた数値の接頭辞により、ファイル名が正しく並べ替えられる
• 同じプリセット内のすべてのスライドに、テーマのトークンが一貫して適用されている
• 翻訳後もローカライズ済みのテキストが収まっている。特に長い単語を使う言語では注意する
• RTL のスライドが、単に左右反転しただけではなく、意図をもってデザインされている

引き渡し時の対応

完成した成果物を提示する際は、次のことを行ってください。

1. スライド全体のストーリーの流れを簡潔に説明する
2. 意図的にコントラストや異なるレイアウトを採用したスライドに触れる
3. ブランドのトーン、コピー、または不足しているアセットについて置いた前提を明示する

よくある間違い

間違い	修正方法
すべてのスライドが同じ見た目になる	スマートフォンの配置を変えます（中央、左、右、2台、スマートフォンなし）
装飾要素が見えない	サイズと不透明度を上げます。見えないより、目立ちすぎるほうがよいです
コピーが複雑すぎる	「腕を伸ばした距離から1秒で読めるか」テストを行います
浮遊する要素がスマートフォンを隠す	画面の端の外側、またはスマートフォンの上に移動します
背景が単調な白または黒	グラデーションを使います。控えめなものでも奥行きが生まれます
ごちゃごちゃしすぎている	浮遊する要素を取り除き、スマートフォンとキャプションだけにシンプルにします
シンプルすぎる、または余白が多すぎる	大きめの装飾要素や、端に浮遊するアイテムを追加します
見出しに「と」が使われている	2つのスライドに分けるか、アイデアを1つ選びます
スライド間の視覚的なコントラストがない	明るい背景と暗い背景を組み合わせます
エクスポート結果が空白になる	2回呼び出す方法を使います。キャプチャする前に要素を画面内に移動します