いい感じのApp Store用スクリーンショットを無料で作成する方法

開発した iPhone アプリをアプリストアからダウンロードしてもらうためには、いい感じのスクリーンショットが必要です。個人開発の場合は自分でスクリーンショットを作らないといけません。デザインの心得があまりないエンジニアにとってはしんどい作業ですよね。

そこで、私がやっている（おそらくきっとそこそこいい感じであろうと自分では思っている）App Store 提出用スクリーンショットの作成手順をご紹介します。環境は Mac です。

アプリの広告を非表示にする

エミュレータでアプリを動かしているときは、AdMob バナーなどの広告には「Test Ad」が表示されているかと思います。バナーが表示されている状態でスクリーンショットを撮るのはよろしくないので消します。なお、以前に「Test Ad」がスクリーンショットに入っている状態でアップルの審査に提出したことがあります。その時はバナーが入らないよう修正を求められました。

スクショを撮る

以下のコマンドで、エミュレータのスクショをとります。

xcrun simctl io booted screenshot --mask black ファイル名

アプリがスマホのみ対応でも、5.5 インチ(iPhone 6,6s,7,8 plus)と 6.5 インチ(iPhone XS,11ProMax)の 2 パターンを用意する必要があります。

iPhone 画面サイズ早見表（図付き）

スクリーンショットの四隅を切り抜く

コマンドで作成したエミュレータのスクショのうち 6.5 インチ版は、四隅が黒く塗られた矩形になっています。このままだと見栄えが悪いので、四隅の黒い部分を削除します。

エミュレータのスクショ画像をプレビューで開き、メニュー「表示」「マークアップツールバーを表示」でツールバーアイコンの左から 2 番目の「インスタントアルファ」をクリックします。

四隅の黒い部分を適当にドラッグ＆ドロップして選択状態にしてから切り取り(Command+X)してください。スクリーンショットの四隅がとれて四角が丸くなります。

端末画像をダウンロードする

エミュレータのスクショ画像と組み合わせる端末画像を用意します。iPhone・iPad は Apple 公式からダウンロードできます。

Marketing Resources and Identity Guidelines - App Store - Apple Developer

Keynote で提出用スクショを作成する

Keynote のスライドサイズを調整する

Apple に提出が必要なスクショサイズは以下の通りです。

• 5.5 インチ: 1242x2208 px
• 6.5 インチ: 1242x2688 px

Keynote のスライドサイズを上記サイズに合わせます。

1. Keynote 右サイドバー上部の「書類」ボタンをクリック
2. 「スライドのサイズ」から「カスタムのスライドサイズ」を選択
3. 必要なスクショサイズに合わせて数値を入力

スライドをいい感じに仕上げる

果たして本当にいい感じなのか判断つかないところもありますが、完成イメージです。

いい感じに仕上げる手順は以下の通りです。

1. エミュレータのスクショ画像とダウンロードした端末画像を重ねて配置
2. 背景色をアプリのテーマカラーに変更
3. キャッチコピーやセールスポイントなどの文字列を追加

エミュレータのスクショ画像がテーマカラーの上に置かれているだけで、なんとなくそれっぽくなる気がします。アプリストアで公開されている他アプリのスクショも参考にしつつ、配置を変更したり文字列を追加したりしてみます。

スライドを画像ファイルとして書き出す

あとは画像ファイルとして出力すれば作業終了です。

1. メニュー「ファイル」「書き出す」「イメージ」
2. 画像フォーマットと書き出すスライドのページを選択して「次へ」
3. 保存先を選択して「書き出す」

後始末

作成した提出用スクリーンショットや Keynote ファイルを Git 管理しておくと良いと思います。変更履歴が追えるし、アプリ関連のリソースとして一箇所にまとまります。