Cursorで作るApp Storeスクリーンショット：ステップバイステップガイド

Cursor — Twitterのインディー界隈で注目のAIコーディングアシスタント兼ハッカー向けエディタ — にワークフローの一部を移している多くの開発者の皆さんは、おそらくコードやコミット、テストをすべてあのウィンドウ内で完結させていることでしょう。でも、アプリをリリースするにはコードだけでは足りません。いつかはApp StoreやGoogle Playで高いコンバージョンを狙うスクリーンショットが必要で、その準備に足止めされるのはドキュメント文字列でも経験したことのない感覚かもしれません。

ここでは、私がMac上で—ほとんどはCursor内で、生成とエクスポート時にほんの少しだけブラウザへ移動しつつ—iOSとAndroid両方でストア用に仕上げるスクリーンショットセットを作る方法を紹介します。これは迅速かつ反復的なワークフローです。デザイナーに渡してFigmaで凝りたい方には向いていません。シミュレータのPNGをエクスポートしてレイアウトを何度も作り直すことにうんざりしているなら、ぜひ読み進めてください。

ステップ1：シミュレータでスクリーンショットを撮る

XcodeのSimulatorか接続デバイスでアプリを実行します。App Store Connectには複数サイズの画像が必要です。iOSなら6.7インチ(iPhone 14/15 Pro Max、1284x2778)と6.5インチ(iPhone 12/13 Pro Max、1242x2688)のスクショは必須です。AndroidはGoogle Playであらゆる画面サイズがリストされていますが、1080x1920がスマホ画面としての中央値です。Appleのドキュメントには必要な寸法が書かれていますが、定期的にデバイスが非推奨になるため、時間を無駄にしないようにApp Store Connectの要件を必ず確認しましょう。

Simulatorでスクリーンショットを撮るには、Command+SでデスクトップにPNGが保存されます。（iOS 17以降で使えない時はメニューのファイル > スクリーンショット保存を試してください。）AndroidはAndroid StudioのエミュレータでカメラボタンかControl+Sです。すべてをバージョン管理したい場合は、これら画像をプロジェクトの/screenshotsフォルダにまとめておきましょう。Cursorならフォルダ切り替えも簡単なので、やらない理由はありません。

ステップ2：使う画面を選ぶ

すべての画面をアプリリストに載せる必要はありません。最大5枚に絞り、最も洗練された流れを見せます：オンボーディング、コア機能、ペイウォール、そして（B2Bやワークフローが複雑なアプリなら）スピーディーに価値を伝える画面を選びましょう。ユーザーデータがスクショに必要なら、リアルなデモコンテンツを使いましょう。空白の多い状態はコンバージョンを下げます。参考にカテゴリー上位のアプリ（例：Duolingo、Sudoku.com）の画面順をチェックすると良いです。長く空白のプレースホルダーやバグに見えそうなものは避けてください。

ステップ3：ストアのガイドラインとテキスト制限を確認

Appleはテキストのオーバーフロー、著作権付きロゴ、UIの不具合でレビューを蹴ることがあります。Googleはそこまできびしくないものの、実際の機能を正しく表現するスクリーンショットを望んでいます。テキストを重ねる場合は、一文に絞りましょう（ヘッドラインなら20〜30文字程度がベストで、14ptフォントでiPhone画面幅の約半分です）。ローカライズするなら、英語より長くなるドイツ語やロシア語などにも対応を考慮してください。

ニッチな生産性アプリで翻訳に数週間かける例も見てきました。もしあなたのアプリがまだ自国でトップ100に入っていなければ、ローンチ時の翻訳は後回しにし、海外からのトラフィックが実際に来てから再検討するのが賢明です。

ステップ4：ScreenshotWhaleでストア用スクショを生成

ここで一旦Cursorを離れます。生のシミュレータスクリーンショットは開発者っぽさ満点で、余分なバーや無機質な背景、雑なトリミングが目立ちます。コンバージョンを狙うなら、HeadspaceやCalmのようにブランドに合ったフレームやデバイスの枠、わかりやすいテキストオーバーレイが必要です。Figmaのテンプレートも使えますが、スピードと一貫性重視ならScreenshotWhaleがオススメ。最新デバイス枠とApp Store/Google Play対応サイズの編集可能テンプレートがあり、PNGをアップロードしてスクショを差し込み、キャプション入力と色のアクセント選択を行うだけで完成します。画面ごとにそれぞれのストアが求めるピクセルサイズでエクスポートされます。軽微なトリミングやデバイスタイプの編集もブラウザ上でできるため、SketchやAffinity Designerを開く手間が省けます。

ブランドカラーがあれば、エクスポート前に背景に適用しましょう。（いまだに2021年風のパステルグラデーションを使う創業者がいますが、淡い背景に薄いテキストは読みにくいので避けてください。）アプリのUIがダークモードなら、テンプレートの雰囲気も合わせるのが自然です。白いスマホフレームを無理に使う必要はありません。

ステップ5：最終セットをエクスポート＆整理

ストアごとに必要なサイズでエクスポートします（App Store Connect用は6.7インチ、6.5インチ、Google Playは1080x1920またはタブレット・スマホ向けに指定されているサイズ）。一部の開発者はローンチ時に古いiPhoneやiPad版をスキップしますが、Appleは6.7インチ画像を縮小しますので、レイアウトが崩れてUIの切れが出ないか確認してください。ファイル名はわかりやすく付けましょう：01-onboarding-iphone15pro.pngのように、IMG_8432.pngは避けます。特に週単位で刷新したりA/Bテストするアプリでは、スクショのバージョン管理をリポジトリに残しています。

ボーナス：スクリーンショットラウンドの自動化

Cursorでビルドをスクリプト化したりMarkdownでリリースを管理しているなら、シェルスクリプト（シミュレータのCLIツールやAndroidのadb）と連携してビルド時にスクリーンショットを出力できます。生画像をクラウドフォルダに流し、そこからScreenshotWhaleへ読み込んでビジュアルを生成。ストアのアップロードAPIまで完全自動化はまだしていませんが、自動化されたエンドツーエンドのスクリーンショット生成パイプラインを使うテスターも知っています。リリース頻度が上がれば上がるほど時間の価値も高まるので、手間に時間を奪われないようにしましょう。

AI生成UIはどうする？

アプリがAI搭載型やUI主体（Arc、Lensa AI、写真編集アプリなど）なら、スクリーンショットはプロダクトと“魔法”の両方を見せる必要があります。Cursorのチャット補完やコードスニペットはこの点ではあまり役立ちません。機能を記録するだけではなく、欲求を刺激するビジュアルが必要です。背景にMidjourneyやDALL-Eを使うこともありますが、99％のアプリでは実際のUIに重ねるオーバーレイのほうが効果的です。あまりにも作り込みすぎたファンタジーは、実際にアプリで実現していなければレビュワーにマークされます。

スクリーンショットの提出と更新

スクリーンショットが用意できたら、App Store ConnectやPlay Consoleに直接アップロードします。ライトモードとダークモード両方の背景でアップロード内容をチェックしてください。特にApp Storeは白背景で表示しますし、Playは一部黒背景もあるためです。わずかなズレでもコンバージョンが即悪化するので要注意です。プレビューでレンダリングのバグを発見したら再生成して再エクスポートしましょう。妥協は禁物です。レビュワーは容赦しません。

TestFlightのパブリックベータやGoogle Playの内部トラックで最終リストを実機テストしています。ユーザーのDMやツイートで生のフィードバックを募るのも効果的です。多くのバグやトリミングミスはこちらで検出でき、エディタ上では気付きにくいです。

最終チェック：完璧さよりスピードを重視

Cursorは開発スピードを重視して作られていて、デザイン向きではありません。ピクセルパーフェクトな一発物より、素早く反復できるスクリーンショットラウンドを大切にしてください。多くのインディー開発者は最初のセットに時間をかけすぎて、結局ローンチ後に差し替えます。きちんと整ったシンプルなセットをリリースし、フィードバックを反映しながら改良し続けるほうが効率的です。スクリーンショットのピクセル細部より、機能のリリースに時間を割きましょう。