muapps

iOSアプリ開発で得られた知見をメモ代わりに投稿します。

AppStore用プレビュー画像の作り方

f:id:muapps:20200217012230p:plainf:id:muapps:20200217012506p:plain
左: スクショのみ、右: スクショ+文字

ASO対策的にスクリーンショットをそのまま貼り付けるより、機種のイメージにはめ込んで周りに文字をつけたほうがいいとされています。 このようなAppStore用プレビュー画像を作成する方法としては2通りあると思います。

  1. サービスを利用する
    APPLAUNCHPADなど

  2. 自分で作る

1を使えば簡単にできると思いますが、無料分以上の機能を使うにはそれなりにお金がかかります。 ここでは私がサービスを使わず自力で作成した手順を自分用メモを兼ねてまとめます。

もっと簡単な方法や標準的な方法があればコメントもらえると嬉しいです。

プレビュー画像の作り方

  1. スクリーンショットを撮る。
    機種によってはノッチがあったり画面の角が丸くなっているためスクリーンショットを加工する。
    以下のサイトではドラッグ&ドロップで加工してくれる。
    iPhone X / XSなどのスクリーンショットを角丸化&ノッチを再現するツールβ

  2. アートワークを以下からダウンロードする。
    Apple製品画像

  3. 画像編集ソフト(フリーならGimpなど)でアートワークとスクショを合成し、PNG形式で書き出す。

  4. Keynoteでスライドの画面サイズを指定のサイズ(スクリーンショットの仕様)に設定して作成した画像と好きなテキストを挿入する。

まとめ

スクリーンショットは長方形なので、機種によってノッチがあったり角丸になっていると加工方法に悩みますね。
自力で作るときみんなどうやってるんだろう。。