App Storeへアプリを公開する際、スクリーンショットは決められたサイズで用意する必要があります。
「iPhoneの実機を持っていない」
「スクリーンショットのサイズが合わない」
という方でも、ブラウザのデベロッパーツールとFigmaを使えば簡単に作成できます。
この記事では、私が実際に行っているApp Store用スクリーンショットの作成方法を紹介します。
私流なので、他にいい方法があったら教えてください！
App Storeのスクリーンショットサイズを確認する
まずはApple公式の仕様を確認しておきます。
Apple Developerのヘルプはこちらです。
2026年8月のサイズは下記でした。
スクリーンショットサイズで重要なこと
勘違いしやすいポイントですが、Appleが指定しているのは画像ファイル自体のサイズです。
つまり、規定されている画像のサイズをアップロードできれば、その中でどのようにデザインするかは自由です。
iPhoneの枠いっぱいに画面を表示する必要はありません。
余白を付けたり、説明文を入れたり、画像を小さく配置したりしても問題ありません。
手順① この後使うデバイスの枠に合う高画質スクリーンショットを撮る
私は1320 × 2868pxのスクショ画像を作ったので、それで説明します！
ここでは、この後使う枠（iPhone16Pro Max）に合うようなスクショ画像を撮るための方法です。
今回はChromeのデベロッパーツールを使います。
※XcodeのiPhone 17 Pro Maxシミュレーターでも1320×2868pxのスクリーンショットを取得できますが、ここでは誰でも使えるブラウザの方法を紹介します。
① 開発者ツールを開く
スクリーンショットを撮りたいページを開き、
- F12
- または右クリック → 検証
をクリックします。
② デバイスモードに変更する
左上のスマートフォンアイコンをクリックし、
表示モードを
レスポンシブ
へ変更します。
サイズを
440 × 956
に設定します。
これがiPhone16Pro Maxの大きさになります。
③ Device Pixel Ratio（DPR）を3に設定する
続いて右上の「…」をクリックします。
以下の順番で設定します。
- 「デバイスのピクセル比を追加」をクリック
- 画面上部に「DPR」が表示される
- DPRを「3」に変更
DPRとは？
DPR（Device Pixel Ratio）は、1つのCSSピクセルを何個の実際のピクセルで描画するかを表す値です。
DPRを1のまま撮影すると、
440×956px
の画像しか取得できません。
これを後から1320×2868へ拡大すると画質が粗くなってしまいます。
必ず撮影前にDPRを3へ変更しておきましょう。
すると
1320×2868px
の高解像度画像を取得できます。
④ スクリーンショットを保存する
デベロッパーツールを開いたまま
Cmd + Shift + P
を押します。
検索欄が表示されるので
日本語環境なら
スクリーンショット
英語環境なら
screenshot
と入力します。
スクリーンショットをキャプチャ
をクリックすると保存が完了します。
手順② Apple公式のiPhoneフレームをダウンロードする
Appleは公式でiPhoneのベゼル素材を無料配布しています。
こちらから
UI Kit（Figma）
をダウンロードします。
Figmaで開く
ダウンロード後は
Figmaで開く
をクリックします。
初回は利用規約への同意画面が表示されるので、そのまま同意します。
Figmaの画面で、左側の一覧から「アセット」をクリック
Product Bezels（プロダクトベゼル）
を選択すると各機種のフレームが表示されます。
今回は
iPhone 16 Pro Max
を使用します。（形・色が好み）
手順③ Figmaでスクリーンショットを作成する
ここからは実際に画像を合成します。
そのままのファイルでもできましたが、新規ファイルを作成して作る場合は、画面左上のFigmaマークをクリックして「ファイル」→「新規デザイン」から作ることができます。
① 新しいフレームを作成する
ツールバーの
フレームツール（F）
を選択し、適当なサイズのフレームを作成します。
右側のサイズを
1320 × 2868 px
へ変更します。
② 素材を配置する
フレーム内へ
- AppleのiPhoneベゼル
- 先ほど取得したスクリーンショット
を配置します。
レイヤーは
- iPhoneフレーム（上）
- スクリーンショット（下）
になるようにします。
③ iPhoneフレームのサイズを変更する
Apple公式のベゼルはインスタンスになっています。
そのままではサイズ変更できないため、
ベゼルを右クリックして
インスタンスの切り離し
を選択します。
すると自由に拡大・縮小できるようになります。
④ スクリーンショットを合わせる
最後に
- iPhoneフレーム
- スクリーンショット
の位置やサイズを調整します。
好みに合わせて
- 余白を付ける
- タイトルを入れる
- 背景色を付ける
など自由にデザインできます。
複数枚をまとめて作る方法
スクリーンショットを5枚程度まとめて作る場合は、1枚ずつ書き出すより効率の良い方法があります。
① 横長のフレームを作成する
例えば5枚作る場合は、
1320 × 5枚分
の横長フレームを作成し、その中にスクリーンショットを並べてデザインします。
背景も1枚で管理できるため、デザインの統一感が出しやすくなります。
② （方法１）Split Objectプラグインを使う方法
最初に設定しておく必要があります。（途中からやったら変になった）
Figmaのプラグイン
Split Object
を利用すると、一括で画像を書き出せます。
手順
- 横長フレーム作成
- 下のタブ「アクション」
- Split Objectを実行
- 横方向を作成枚数に設定
- 1番上が水平「4（作りたい枚数）」、3番目が垂直は「1」
👆間隔が開いてしまって、指示の大きさになりません。
👇２と４番目は0にしてください
これで1枚ずつ分割されます。
② （方法2） Sliceで書き出す
Sキー
を押して
Slice
を選択します。
書き出したい画像サイズに合わせてSliceを作成し、Sliceを選択した状態でプレビューを確認し、OKならエクスポートします。
Sliceの注意点
Sliceが背景より下の階層にあると、背景が書き出されないことがあります。
Sliceを親階層に配置してからエクスポートすると失敗しにくくなります。
まとめ
今回紹介した方法なら、実機やXcodeがなくてもApp Store用スクリーンショットを作成できます。
App Storeのスクリーンショットはアプリの第一印象を左右する重要な要素です。画像サイズだけでなく、見やすいレイアウトや統一感のあるデザインも意識して作成していきたいと思います！
なにかご意見がございましたらお問い合わせください！
