App Store提出用のスクリーンショットを無料で自作する

アプリ開発が完了して、App Storeにアプリ申請する際に必要となるのが、スクリーンショットの提出です。

スクリーンショットとはApp Storeのアプリ詳細ページに表示されている説明画像のことです。

実際にApp Storeで見てみるとわかりますが、スクリーンショットといっても、ただ画面をキャプチャしただけの画像はほとんどありません。

多くのアプリ詳細ページのスクリーンショットは「説明文＋端末画像（iPhoneやiPad）」となっています。

ユーザーはスクリーンショットを見てアプリをインストールするかを決めるため、なるべく手抜きはしたくないところです。

お金を払ってもいいのであれば、APPLAUNCHPADというサービスがあります。

※一応無料プランもありますが、いい感じのデザインは全て有料

私は節約系エンジニアなので自作することにしました。

しかし、検索してもスクリーンショットの作り方が出てこなかったので私が自作した方法をまとめます。

ちなみに作成したスクリーンショットはこちらです。

※シンプルを売りにしたかったので、スクリーンショットもシンプルなデザインにしています。

サブスクリプションをシンプルに管理するアプリ「さぶすく」をリリースしたので、もし良ければ触っていただけると嬉しいです。

さぶすく

無料

posted withアプリーチ

それではスクリーンショットの作成方法を説明していきます。

※ややこしいので、この記事では「スクリーンショット」と「スクショ」という言葉を以下のように定義して使用します。

スクリーンショット画像作成の流れ

まずスクリーンショット画像作成の大まかな流れを示します。

それぞれ説明していきます。

提出に必要なスクリーンショットの枚数とサイズを確認

まずはスクリーンショットの枚数とサイズを確認します。

スクリーンショットの枚数が少なかったり、サイズが違うとリジェクトされてしまうので、最新情報を確認するようにしましょう。

スクリーンショットについては、App Store Connectのヘルプに記載があります。

https://help.apple.com/app-store-connect/?lang=ja-jp#/devd274dd925

help.apple.com

記事執筆時点（2021/5/6）では以下のスクリーンショットが必要です。

各デバイスのサイズごとにスクリーンショットは必要になるので、iPhoneとiPadの両方でアプリをリリースする場合は、最低でも3枚のスクリーンショットが必要になります。

実際にスクリーンショットを提出する時は、縦向きか横向きかを決めて「スクリーンショットのサイズ」欄のサイズになるように調整します。

Apple公式サイトから端末の画像を入手する

スクリーンショット内にiPhoneやiPadの端末画像を使用するので、Apple公式サイトから画像を入手しましょう。

Marketing Resources and Identity Guidelines - App Store - Apple Developer

Get information on using the App Store badge and Apple product images, as well as best practices for promoting apps on the App Store.

developer.apple.com

画像の拡張子はpsd（Photoshopで使用される）ですが、Keynoteでも使えます。

私はpsdファイルをjpgに変換して使用しました。

iOS Simulatorを使用してスクショする

スクリーンショット内で使用する機種のSimulatorを起動します。

例えば、スクリーンショット内でiPhone 11 Pro Maxの機種画像を使用する場合は、iPhone 11 Pro MaxのSimulatorを起動します。

その後アプリを起動して、画面をスクショします。

ターミナルで以下のコマンドを実行すると、現在のディレクトリに画像が保存されます。

ターミナル

xcrun simctl io booted screenshot --mask black <画像名>.<拡張子>

--mask black とすることでノッチ（画面上部のくぼみ）ありで画面をスクショできます。

より詳しく知りたい方は以下の記事を参照してください。

Take a screenshot and record a video in iOS Simulator | Sarunw

Learn how to do all of this without any external tools.

sarunw.com

スクショした画像を加工

スクショした画像は角やノッチ部分が黒くなっているので、切り抜きます。

画像背景 透過・透明（一部、部分的に透明にできます） | 無料オンラインフリーソフト

画像の背景（指定した色）を透過、透明に切り抜き、変更できるWebアプリ（全て無料のフリーソフト）です。やり方・方法も簡単！画像の透明にしたい場所をクリックするだけです。

www.bannerkoubou.com

上記サイトに画像をアップロードして、左のメニューから「背景透過」を選択、黒い部分をクリックして切り抜きます。

その後画像を保存します。

Keynoteで端末画像の画面部分にスクショした画像をはめこむ

Keynoteを起動します。

その後

・右上の「書類」をクリック

・スライドのサイズ「カスタムのスライドサイズ」を選択

・スクリーンショットのサイズに合わせて指定（今回は6.5 インチ横向きのスクリーンショットを作成）

として画像のサイズを修正します。

端末画像（iPhone 11 Pro Max）とスクショした画像を組み合わせて、説明文を入力します。

作成が完了したら、画像として書き出します。

これでスクリーンショットの作成が完了しました。

App Store Connectに提出しましょう！

今回の手順で作成したスクリーンショットは以下のページから確認できます。

‎サブスク管理【サブスクリプション・固定費をお得に管理】

‎【サブスクリプション（課金サービス）の管理に特化した、シンプルな節約アプリ】 余計な機能は一切ありません。 月額、もしくは年額で契約しているサービスを賢く管理しましょう。 世の中には多くのサブスクリプションサービス（月額・年額課金サービス）があります。 毎月定額で音楽を聴いたり、映画やドラマを好きなだけ見ることがで...

apps.apple.com