asc-screenshots

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

概要

iPhone と iPad 向けの App Store スクリーンショットを広告として（UI の紹介ではなく）レンダリングし、Apple が要求する解像度で html-to-image を使って書き出す Next.js ページを作成します。FrameMe を使用して、アプリのスクリーンショットを公式の Apple デバイスベゼルにピクセル単位の精度で合成します（Dynamic Island を含む）。スクリーンショットは、App Store でコンバージョンを促す最も重要な素材です。

基本原則

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

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

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

必須

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

任意

9. ローカライズ — 「複数の言語でスクリーンショットを作成しますか？作成する場合は、どの言語にしますか？（例：英語、ドイツ語、フランス語）。プレビューで言語を切り替えるスイッチャーを利用できます。」
10. プロジェクトの保存先 — 「後から変更したり、言語を追加したりできるように、スクリーンショットジェネレーターのプロジェクトを残しておきますか？残す場合は、どこに作成しますか？（例：アプリのリポジトリ内）」
11. コンポーネントの素材 — 「浮遊する装飾として使いたい UI 要素の PNG（カード、ウィジェットなど）はありますか？なければ、使わなくても問題ありません。」
12. 追加の指示 — 「具体的な要件、制約、好みはありますか？」

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

ユーザーのスタイルの方向性、ブランドカラー、アプリのデザインに基づいて、以下を決めます。

• 背景スタイル：グラデーションの方向と色、ベースを明るくするか暗くするか
• 装飾要素：ブロブ、グロー、幾何学模様などを使うか、使わないか。スタイルに合わせる
• ダーク／ライトのスライド：それぞれの枚数、ダークな表現に適した機能
• タイポグラフィの表現：ウェイト、字間、行の高さ。ブランドの個性に合わせる
• カラーパレット：ブランドカラーからテキストカラー、セカンダリーカラー、シャドウの色味を決める

重要： ユーザーがプロセスの途中で追加の指示を出した場合は、必ず従ってください。ユーザーの指示は常にスキルの既定値より優先されます。

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

要件

• Node.js 18 以降
• FrameMe — ピクセル単位で正確なデバイスフレーム表示（Dynamic Island を含む）に必要です。ソースからビルドしてインストールします。

  git clone https://github.com/joshluongo/frameme.git /tmp/frameme
  cd /tmp/frameme && swift build -c release
  strip .build/release/frameme
  cp .build/release/frameme /usr/local/bin/frameme
  

  FrameMe がインストールされていない場合は、先にインストールするようユーザーに依頼してください。

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

利用可能なものを確認し、次の優先順位で使用します：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 --app --src-dir --no-eslint --import-alias "@/*"
bun add html-to-image jszip

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

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

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

ファイル構成

project/
├── public/
│   ├── app-icon.png            # User's app icon
│   ├── framed/                 # FrameMe output (device-framed screenshots)
│   │   ├── iphone/
│   │   │   ├── en/             # Per-locale if localized UI screenshots
│   │   │   │   ├── home_framed.png
│   │   │   │   └── ...
│   │   │   └── de/             # (if single language, skip locale dirs)
│   │   │       └── ...
│   │   └── ipad/
│   │       └── ...
│   └── screenshots/            # Raw app screenshots (before framing)
│       ├── iphone/
│       │   ├── en/
│       │   │   ├── home.png
│       │   │   └── ...
│       │   └── de/
│       │       └── ...
│       └── ipad/
│           └── ...
├── src/app/
│   ├── copy.json               # Localized copy (editable without touching code)
│   ├── layout.tsx              # Font setup
│   └── page.tsx                # The screenshot generator (single file)
└── package.json

アプリの UI がどの言語でも同じで（マーケティング文言のみが変わる場合）、ロケール用のサブディレクトリは省略してください。すべての言語で同じデバイス画像をフレームに収めて使います。

ジェネレーターは page.tsx + copy.json で構成されます。 ルーティング、追加のレイアウト、API ルートは不要です。ユーザーがコンポーネントを編集せずに文言を更新できるよう、すべてのテキストを copy.json に保存します。

フォントのセットアップ

// 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>;
}

ステップ 2.5：FrameMe でスクリーンショットをフレームに収める

ページを作成する前に、FrameMe を使って各スクリーンショットをデバイスのベゼルにはめ込みます。これにより、Dynamic Island、角丸、ベゼルをすべて保った、ピクセル単位で正確なデバイス画像が作成されます。

デバイスのベゼル

このスキルには、Apple 公式のベゼルが含まれています（この SKILL.md と同じ場所にあります）。ユーザーがスクリーンショットを撮影したデバイスに合ったベゼルを使用してください。

ベゼルファイル	デバイス	画像サイズ
iphone-17-pro.png	iPhone 17 Pro（6.1"）	1350×2760
iphone-17-pro-max.png	iPhone 17 Pro Max（6.9"）	1470×3000
ipad-pro-11.png	iPad Pro 11" M4	1880×2640
ipad-pro-13.png	iPad Pro 13" M4	2300×3000

すべてのスクリーンショットをフレームに収める

質問 #8 に対するユーザーの回答に基づき、一致するベゼルを選択してください。

SKILL_DIR="<path to this skill's directory>"

# Frame screenshots per locale (en is required, others optional)
for LANG in en de fr; do
  # iPhone (pick the matching bezel)
  mkdir -p public/framed/iphone/$LANG
  frameme "$SKILL_DIR/iphone-17-pro.png" public/screenshots/iphone/$LANG/*.png --output public/framed/iphone/$LANG
  # OR: frameme "$SKILL_DIR/iphone-17-pro-max.png" ...

  # iPad (pick the matching bezel)
  mkdir -p public/framed/ipad/$LANG
  frameme "$SKILL_DIR/ipad-pro-11.png" public/screenshots/ipad/$LANG/*.png --output public/framed/ipad/$LANG
  # OR: frameme "$SKILL_DIR/ipad-pro-13.png" ...
done

アプリの UI が言語間で変わらない場合（マーケティング文言だけが異なる場合）は、en/ で一度だけフレームに収めます。Device コンポーネントの onError フォールバックにより、すべてのロケールで英語の画像が使用されます。

FrameMe は自動的に次の処理を行います。

• ベゼルのアルファチャンネルから画面領域を検出します
• スキャンラインごとのマスクを作成します（Dynamic Island や角丸に対応）
• スクリーンショットをベゼルの背面に合成します
• filename_framed.png を出力します

重要な注意事項

• ベゼルは撮影デバイスに合わせてください — 一致しないベゼルを使用すると、画像が切れたり位置がずれたりします
• FrameMe はサイズ変更を行いません — スクリーンショットはベゼルの画面領域に合ったサイズにしてください
• フレームに収めた画像は page.tsx から参照されます — 広告レイアウトでは、ユーザーに最終的なデバイスの外観が表示されます

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

スクリーンショットのフレームワーク（ナラティブアーク）

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

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

ルール：

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

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

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

絶対に守るルール

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

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

種類	効果	例
ある瞬間を描く	自分がその行動をしている姿を想像できます	「アプリを開かずに、コーヒーをチェック。」
結果を示す	その後の生活がどうなるかを伝えます	「買ったコーヒーすべての居場所。」
悩みを解消する	問題を示し、それを解決します	「せっかくのコーヒーを無駄にしない。」

うまくいかない表現

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

コピーのプロセス

1. 3つのアプローチを使い、スライドごとに3つの案を作成します
2. 腕を伸ばした距離からそれぞれを読みます。1秒で理解できなければ、複雑すぎます
3. 各行が3〜5語になっているか確認します。そうでなければ、改行を調整します
4. それぞれの理由を添えて、案をユーザーに提示します
5. ローカライズする場合：承認された見出しを、指定されたすべての言語に翻訳します。各言語のトーンやフォーマルさを尊重します。言語によって改行の調整が必要になる場合があります。ドイツ語やフランス語は、英語より長くなることがよくあります。

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

• Raycast — 具体的で説明的、スライドごとに具体的な価値を1つ提示
• Turf — きわめてシンプルな動詞を使った、会話調の表現
• Mela / Notion — 親しみやすく、ミニマルで、洗練された表現

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

アーキテクチャ

page.tsx
├── Constants (IPHONE_W, IPHONE_H, IPAD_W, IPAD_H, design tokens)
├── LOCALES (code, label, asc locale code for App Store Connect)
├── ASC_DEVICE (maps "iphone" → "APP_IPHONE_67", "ipad" → "APP_IPAD_PRO_3GEN_129")
├── COPY (imported from copy.json — localized strings per language, keyed by slide name)
├── Device component (renders a pre-framed device image — just an <img>)
├── Caption component (label + headline)
├── Decorative components (blobs, glows, shapes — based on style direction)
├── Screenshot1..N components (one per slide, with iPhone and/or iPad variants)
├── SCREENSHOTS array (registry, with device type tag)
├── ScreenshotPreview (ResizeObserver scaling + hover export)
└── ScreenshotsPage (grid + toolbar with language switcher + device filter + Export/Export All Languages)

書き出しサイズ（最大サイズのみ — Apple が小さいディスプレイ向けに自動でスケーリングします）

App Store Connect では、デバイスごとに最大サイズのスクリーンショットを受け付け、小さいディスプレイ向けには自動でスケーリングします。生成するのは次のサイズのみです：

// iPhone 6.9" — covers all iPhone sizes
const IPHONE_W = 1320;
const IPHONE_H = 2868;

// iPad 13" — covers all iPad sizes
const IPAD_W = 2064;
const IPAD_H = 2752;

レンダリング戦略

各スクリーンショットは、書き出し時のフル解像度でデザインします。2つのコピーを用意します。

1. プレビュー：ResizeObserver 経由の CSS transform: scale() で、グリッドカードに収まるようにします
2. 書き出し：position: absolute; left: -9999px でオフスクリーンに配置し、実際の解像度で表示します

iPhone と iPad の両方がリクエストされた場合：

• セクションを分ける：iPhone と iPad を別々のセクションにレンダリングし、デバイスの見出し（<h2>iPhone</h2>、<h2>iPad</h2>）と、それぞれ独自のグリッドを設けます。1つのグリッドに混在させないでください。
• デバイスフィルター：ツールバーに「すべて／iPhone／iPad」の切り替えを設け、セクションの表示と非表示を切り替えます。
• 各セクションでは SCREENSHOTS.filter(s => s.device === "iphone") などでフィルターします。

ローカライズ

ユーザーが複数の言語を希望する場合は、コードに触れずにテキストを編集できるよう、コピー全体を別の copy.json ファイルに保存します。

src/app/copy.json

{
  "en": {
    "iphone-hero": { "headline": "Spam texts,<br/>silenced.", "pills": ["Smart", "Private"] },
    "iphone-privacy": { "label": "On-device AI", "headline": "Completely<br/>private.", "sub": "..." }
  },
  "de": {
    "iphone-hero": { "headline": "Spam-SMS,<br/>verstummt.", "pills": ["Intelligent", "Datenschutz"] },
    "iphone-privacy": { "label": "KI auf dem Gerät", "headline": "Vollständig<br/>privat.", "sub": "..." }
  }
}

page.tsx でインポートし、型キャストします。

import COPY_JSON from "./copy.json";
const COPY = COPY_JSON as Record<Locale, Record<string, SlideCopy>>;

各スライドコンポーネントは現在のロケールを受け取り、COPY[locale][slideName] からコピーを参照します。ツールバーには、共有の locale 状態を更新する言語切り替え（<select> ドロップダウン）が含まれます。選択肢は {label} ({code}) の形式（例：「English (en)」）で表示し、ラベルのアルファベット順に並べます。これにより、ユーザーは書き出す前に、どの言語でもすべてのスライドをプレビューできます。

書き出す際は、ファイル名にロケールを含めます：01-iphone-hero-en-1320x2868.png、01-iphone-hero-de-1320x2868.png。「すべてを書き出す」ボタンでは、現在選択されている言語が書き出されます。すべての言語を書き出す場合は、言語を切り替えて、それぞれを書き出します。

ローカライズされたデバイス画像： アプリのスクリーンショットが言語ごとに異なる場合（ローカライズされた UI など）、フレーム付き画像をロケール別に整理します：public/framed/iphone/en/、public/framed/iphone/de/ など。スライドコンポーネントでは、パスに現在のロケールを使用します：src={/framed/iphone/${locale}/iPhone-01_framed.png}。英語（en）はデフォルトとして必須です。他の言語は任意で、画像が見つからない場合は英語にフォールバックします（Device コンポーネントの onError 経由）。

デバイスコンポーネント

FrameMe はデバイスのフレーム付き画像（ベゼルとスクリーンショットを合成した画像）を生成するため、デバイスコンポーネントは <img> タグだけで構成されます。CSS によるクリッピング、画面位置の計算、border-radius の調整は不要です。

function Device({ src, alt, style }: {
  src: string; alt: string; style?: React.CSSProperties;
}) {
  return (
    <img
      src={src}
      alt={alt}
      style={style}
      draggable={false}
      onError={(e) => {
        // Fall back to English if localized image is missing
        const img = e.currentTarget;
        const enSrc = img.src.replace(/\/(?!en\/)[a-z]{2}\//, "/en/");
        if (img.src !== enSrc) img.src = enSrc;
      }}
    />
  );
}

フレーム付き画像には、Dynamic Island、角丸、画面のコンテンツがピクセル単位で正確に合成されたデバイスのベゼルがすでに含まれています。デバイス周囲の透明部分により、どのような背景にも自然になじみます。onError のフォールバックにより、ロケール固有の画像がない場合も、英語版へスムーズに切り替わります。

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

すべてのサイズはキャンバス幅 W に対する相対値です（デバイスに応じて IPHONE_W または IPAD_W を使用します）。

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

デバイスの配置パターン

スライドごとに変化をつけてください。同じレイアウトを続けて使うことは絶対に避けてください。

デバイスを中央に配置（ヒーロー、単一機能）：

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 device's main content.
Position at edges, slight rotation (2-5deg), drop shadows.
If distracting, push partially off-screen or make smaller.

iPad 固有のレイアウトに関する注意点

iPad のスクリーンショットは横長に近いアスペクト比（2064×2752 で、iPhone の約 1:2.2 よりも 3:4 に近い）です。これにより、レイアウトに次のような影響があります。

• キャンバスに対してデバイス画像の幅が広くなるため、窮屈にならないよう幅を狭くしてください（82〜86% ではなく 70〜78%）。
• デバイスの幅が広く、横方向のスペースが少なくなるため、キャプションは横ではなく、デバイスの上に配置する必要がある場合があります。
• 2台のデバイスを配置するレイアウトでは、縮小率を上げて、重なりを大きくすると効果的です。
• iPad は画面の表示領域が広く、アプリの UI が読みやすいため、コンテンツを積極的に見せましょう。

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

アプリアイコン、見出し（「さらに多くの機能」）、機能を示すピルを配置した、暗色またはコントラストの強い背景を使用します。ピルを目立たなくした「近日公開」セクションを含めることもできます。

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

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

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

エクスポートの実装

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

// CRITICAL: el must be the slide component's root div (position: relative),
// NOT the offscreen wrapper. Use ref on wrapper, then ref.firstElementChild.
// toPng must capture the element that owns the positioned children.
const wrapper = el.parentElement!;

// Before capture: move wrapper on-screen
wrapper.style.left = "0px";
wrapper.style.opacity = "1";
wrapper.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 wrapper back off-screen
wrapper.style.left = "-9999px";
wrapper.style.opacity = "";
wrapper.style.zIndex = "";

iPhone のスライドには W = IPHONE_W, H = IPHONE_H を、iPad のスライドには W = IPAD_W, H = IPAD_H を使用してください。

画面外コンテナーの設定：ラッパー div は position: absolute; left: -9999px とし、fontFamily を設定します。ref はラッパー自体ではなく、その内部にあるスライドのルート div（firstElementChild 経由）を参照する必要があります。

ref={(el) => { if (el?.firstElementChild) exportRefs.current.set(i, el.firstElementChild as HTMLDivElement); }}

主なルール

• 2回呼び出す方法：最初の toPng() でフォントと画像が遅延読み込みされます。2回目の呼び出しで、きれいに出力されます。この方法を使わないと、エクスポート結果が空白になります。
• キャプチャ時は画面上に配置：toPng を呼び出す前に、一時的に left: 0 に移動します。
• 画面外のラッパー：position: absolute; left: -9999px を使用します（fixed ではありません）。ラッパーには width／height を設定しないでください。スライドコンポーネントに独自の寸法を定義させます。
• サイズ変更は不要：各スライドはすでに正確なエクスポート解像度になっています。キャンバスのスケーリング処理は不要です。
• Zip エクスポート（asc-client 互換）：エクスポートボタンを2つ用意します。「Export ({LOCALE})」は現在の言語をエクスポートします。「Export All Languages」はすべてのロケールを順に処理し（状態を設定して再レンダリングを待ってからキャプチャ）、asc-client 互換の zip を作成します。構成は次のとおりです。

  en-US/APP_IPHONE_67/01_hero.png
  en-US/APP_IPAD_PRO_3GEN_129/01_hero.png
  de-DE/APP_IPHONE_67/01_hero.png
  

  デバイスタイプの対応付け：iphone → APP_IPHONE_67、ipad → APP_IPAD_PRO_3GEN_129。各ロケールの項目には、App Store Connect のロケールコードを示す asc フィールドが必要です（例：{ code: "en", label: "English", asc: "en-US" }）。ファイルはアルファベット順に並べられるため、ゼロ埋めのプレフィックスを使用してください：01_name.png。
• ワンクリックでエクスポート：個別の PNG をダウンロードし、ファイル名にデバイスを含めます：01-iphone-hero-en-1320x2868.png。
• 順次エクスポートする際は、300ms の間隔を空けます。
• 画面外コンテナーに fontFamily を設定します。
• 番号付けには String(index + 1).padStart(2, "0") を使用します。

よくある間違い

間違い	修正方法
すべてのスライドが同じに見える	デバイスの位置を変えます（中央、左、右、デバイス2台、デバイスなし）
装飾要素が見えない	サイズと不透明度を上げます。見えないより、目立ちすぎるほうがよいです
コピーが複雑すぎる	「腕を伸ばした距離から1秒で読めるか」テストを行います
浮遊要素がデバイスを隠している	画面外の端か、デバイスの上に移動します
背景が単調な白または黒	グラデーションを使います。控えめなものでも奥行きが生まれます
要素が多すぎる	浮遊要素を取り除き、デバイスとキャプションだけにします
シンプルすぎる／余白が多すぎる	大きめの装飾要素や、端に浮遊要素を追加します
見出しに「and」を使っている	2枚のスライドに分けるか、アイデアを1つ選びます
スライド間に視覚的なコントラストがない	明るい背景と暗い背景を組み合わせます
エクスポートが空白になる	二重呼び出しの方法を使います。キャプチャ前に要素を画面内に移動します
エクスポートの上部が空白で、コンテンツが下部にある	toPng は画面外のラッパーではなく、スライドのルート div（position: relative を持つもの）を対象にする必要があります
FrameMe がインストールされていない	ソースからビルドします。リポジトリをクローンし、swift build -c release を実行して、バイナリを PATH にコピーします
フレーム付き画像の見た目がおかしい	元のスクリーンショットがベゼルの画面解像度と一致していることを確認します