Sketchを使ってApp Store用スクリーンショットを一括生成する方法

iPhone6, 6 Plusも加わって、これまで以上に準備するのが大変になったAppStoreのスクリーンショットですが、Sketch3を使ってお手軽に生成できるツールが公開されていたので使ってみました。

準備

• Sketch3（9800円とちょっとお高め）
• clusterinc/SketchToAppStore

ダウンロードしたApp Store Assets.sketchをクリックすると、スクリーンショット作成用のSketch Workflowが開きます。

背景画像の設定

背景画像を準備してStep2から実行します。Master Backgroundのところをクリックして、右側のFills > Choose Image.. から画像を選択すればOK。Opacityで適当に透明度を調整します。

各スクリーンショットの設定

Step3から実際の画面のスクリーンショット5枚を設定して行きます。先ほどと同じく、それぞれの画面をクリックして、Fills > Choose Image..から設定して行きます。全部入れるとこんな感じに画面上に反映されます。

スクリーンショットの文言を設定

Step4から各画面の文言を設定して行きます。文言は少々入れづらいですが、Statement 1〜5 x 3サイズづつ、それぞれクリックして入力します。フォントや装飾を変更したい場合は、左サイドメニューからAaの要素を選択し、右サイドメニューから変更できます。

iPhoneの色を設定

デフォルトで白に設定されていますが、左サイドメニューの 5.5 Device Setup > iPhone 6 Plusなどのそれぞれの項目の下にある「White」「Black」という項目をON/OFFすることで色を変更できます。ON/OFFは途切れていて見づらいですが、Whiteの右に目のアイコンがあるので、これをクリックすればOKです。

微調整

デフォルトの設定だと画面の下の方が結構切れてしまっていてちょっと微妙な感じだったので、端末の位置を調整します。

左サイドメニューの5.5 Device Setup > iPhone 6 Plusを選択し、右サイドメニューのPosition Yを-180、5.5 Device Setup > Screenshot1 のPosition Yを-180して526に設定します。

あとは面倒ですが、これだけだとExportで反映されないため、左サイドメニュー上部にあるPages > DON'T EDIT - Screenshots with iPhonesから同じ端末の5枚のスクリーンショットについて、同様に位置を調整します。

あとは4.7〜3.5インチもそれぞれ同様に同じ操作を...。ちなみにOpacityを0にすれば、端末の非表示も可能です。

Export

最後に右上にあるExportボタンから、おまけのAndroid版のスクリーンショットなども含まれた47枚の画像を書き出すことができます。

と、この簡単フローでこんなスクリーンショットが完成しました。Sketchは少々価格が高い感じですが、PhotoShopなどでちまちま作るより断然楽ですし、今後のバージョンアップでの画面更新の際も簡単に変更できるようになるので買って損はないかなと思います。

完成！

こちらが今回作成したスクリーンショット（4.7インチ版）です。

紹介しているアプリは現在受託で開発中のミューゼオという、自分のコレクション写真をアップロードして楽しめるサービスのアプリです。2月にリリース予定なので、リリースされましたらぜひ使ってみてください。