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

技術メモ

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

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

 

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

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

 

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

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

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

 

 

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

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

 

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

 

 

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

 

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

 

AppStoreからダウンロード

 

※Android版も開発中です。

 

 

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

 

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

・スクリーンショット → 最終的にAppStoreに掲載するために提出する画像

・スクショ → iOS Simulatorでスクリーン画像をキャプチャすること

 

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

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

 

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

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

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

・スクショした画像を加工

・Keynoteを使って端末画像のスクリーン部分にスクショした画像をはめこむ

 

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

 

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

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

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

 

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

 

記事執筆時点(2020/4/11)では以下のスクリーンショットが必要です。

デバイスのサイズまたはプラットフォームスクリーンショットのサイズ
6.5 インチ(iPhone 11 Pro Max, iPhone 11, iPhone XS Max, iPhone XR)1242 x 2688 ピクセル(縦向き)

2688 x 1242 ピクセル(横向き)
5.5 インチ(iPhone 6s Plus、iPhone 7 Plus、iPhone 8 Plus)1242 x 2208 ピクセル(縦向き)

2208 x 1242 ピクセル(横向き)
12.9 インチ (第 3 世代 iPad Pro)2048 x 2732 ピクセル(縦向き)

2732 x 2048 ピクセル(横向き)
12.9 インチ (第 2 世代 iPad Pro)2048 x 2732 ピクセル(縦向き)

2732 x 2048 ピクセル(横向き)

 

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

 

例えば、

・iPhone 11 Pro Maxが写っている、2688 x 1242 ピクセル(横向き)のスクリーンショット

・iPhone 8 Plusが写っている、2208 x 1242 ピクセル(横向き)のスクリーンショット

・第 3 世代 iPad Proが写っている、2732 x 2048 ピクセル(横向き)のスクリーンショット

※第 2 世代 iPad Pro用は、第 3 世代 iPad Proと提出するスクリーンショットのサイズが同じなので流用できます。

を提出する。

 

という感じです。

 

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

 

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.

 

画像の拡張子は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 | Sarun
Learn how to do all of this without any external tools.

 

スクショした画像を加工

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

 

画像背景 透過・透明(一部、部分的に透明にできます) | 無料オンラインフリーソフト
画像の背景(指定した色)を透過、透明に切り抜き、変更できるWebアプリ(全て無料のフリーソフト)です。やり方・方法も簡単!画像の透明にしたい場所をクリックするだけです。

 

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

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

 

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

Keynoteを起動します。

 

その後

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

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

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

 

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

 

 

 

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

 

 

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

 

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

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

 

 

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

 

‎さぶすく
‎【サブスクリプションの管理に特化したシンプルなアプリ】 余計な機能は一切ありません。 月額、もしくは年額で契約しているサービスを賢く管理しましょう。 サービスの解約を忘れてしまい、余分にお金を支払ってしまった経験は誰にでもあるはず。 料金支払日を入力することで、支払い前にプッシュ通知でお知らせします。 ...

 

技術メモ
スポンサーリンク
スポンサーリンク
のすけをフォローする
やばブロ!

コメント