【Figma】アプリストア用スクリーンショットの作り方
App Store や PlayStore にモバイルアプリを公開する際、アプリを紹介するためのスクリーンショットが必要となります。本記事では、Figma (フィグマ) を使って、モダンで目立つ宣伝用スクリーンショットを作成する方法を紹介します。
はじめに
本記事で目指すスクリーンショット
まず最初に、Figma で作成したアプリ紹介用のスクリーンショットを紹介します！
本記事の手順で作成したスクリーンショット (4 枚)
Figma (フィグマ) とは
Figma は、ブラウザ上でチームメンバーとデザインできるツールです。Adobe XD や Sketch などに引けを取らず、デザイナーが UI デザインやワイヤーフレームを作るのに適したプラットフォームです。無料プランでも非常に多くの機能があるので、私みたいなデザイナー以外の人がちょっとした広告やチラシを作るためにも最適なツールです。
Figma トップページ
※ 本記事では、スクリーンショットの作成に必要な機能だけを紹介します。
準備編
提出するスクリーンショットの仕様について
App Store Connect に提出するスクリーンショットの種類は、iOS と iPad で異なります。iOS のみに対応させる場合はスクリーンショットを 2 種類、iPad にも対応させる場合は合計 3 種類のスクリーンショットを用意する必要があります。
iOS 用スクリーンショット
iOS では、5.5 インチと 6.5 インチ端末用のスクリーンショットを用意する必要があります。スクリーンショットは、縦向きもしくは横向きで用意できますが、本記事では縦向きスクリーンショットを作成します。
6.5 インチ端末用
1284 x 2778 ピクセル (縦向き)
2778 x 1284 ピクセル (横向き)
5.5 インチ端末用
1242 x 2208 ピクセル (縦向き)
2208 x 1242 ピクセル (横向き)
iPad 用スクリーンショット
iPad では、第２世代 (ベゼルなし) と第３世代用 (ベゼルあり) のスクリーンショットを用意しますが、スクリーンショットのサイズは両方とも同じです。
iPad 端末用
2048 x 2732 ピクセル (縦向き)
2732 x 2048 ピクセル (横向き)
参照: https://help.apple.com/app-store-connect/?lang=jp#/devd274dd925
Android 用スクリーンショット
Android は、様々な画面幅の端末があることからか、iOS/iPad ほどの細かい仕様はありません。厳密にはサイズの下限と上限がありますが、iOS のスクリーンショットを流用することで特に問題ありません。ただ、Android と iOS で UI が変わるのであれば、一部修正することが好ましいでしょう。
スクリーンショットで使う画像素材
Apple 製品の端末フレーム (ベゼル) は、Apple Developer が公式に提供しています。例えば、本記事の執筆時 (2022年6月) には、iPhone 11 ~ 13 のベゼルが用意されていました。
後ほど詳しく紹介しますが、アプリのスクリーンショットをベゼルに埋め込み表示することで、モダンで綺麗な画像に仕上がります。
いざ、実践
1) 新しいデザインファイルを作成する
Figma に登録またはログインしたら、"New design file" から新しいデザインファイルを作成します。
2) 背景色を決める
まずは、背景色を定義するためのフレーム (Frame) を用意します。フレームのサイズは、高さが上記で紹介したスクリーンショットサイズの高さで、幅は上記で紹介した幅 x スクリーンショット枚数で作成します。
例えば、今回の例では、縦向き 6.5 インチ iOS のスクリーンショットを 4 枚作成したいと思うので、(1284*4=5136) x 2778 ピクセルのフレームを用意します。
右手の Fill メニューで Linear を選択し、背景をグラデーションにしています
必要に応じて、ページやレイヤーの名前を調整します。
3) フレームをスライスで分ける
先ほど作成したフレームが背景になりますが、このままでは一つの大きい画像のままです。今回の例では 4 枚のスクリーンショットを作成するので、1284 x 2778 ピクセルのスライスを 4 つ作成し、画像を 4 分割します。
スライスを作成します
4 つのスライスが作成され、背景フレームの上でピッタリと並べます
4) 端末フレーム (ベゼル) を配置する
Apple Developer が提供している画像素材をダウンロードして、ベゼル PNG 画像を背景の上に配置します。今回の例では、iPhone 13 Pro Max の画像素材を配置します。
ベゼルは背景画像よりも大きい場合がありますので、必要に応じてサイズを調整します。この際、縦横比をロックして、サイズを調整します。
ベゼルの向きやサイズを調整して、モダンな紹介スクリーンショットにします
追加したベゼル画像は、先ほど追加したスライスよりも下のレイヤーにあるように、レイヤーの順序を調整します (スクリーンショットの赤枠で囲んだ部分を参照)。
5) テキストコンテンツを追加する
各スライスにタイトル文字を入れて、アプリ名やアプリの機能を紹介します。
強調したい文字を太字にしたり、デザインを変えることでテキストがより目立ちます。今回の例では、強調したい文字の下に赤く細長い長方形を配置しています。
上部のテキストメニューからテキストを追加します
6) スクリーンショットを追加する
これからアプリのスクリーンショットを追加しますが、まずは別のページにスクリーンショットを追加します。ベゼルに配置するスクリーンショットは、今回新しく作成するページのスクリーンショットを参照することによって、いつでも手軽にスクリーンショットが置き換えられます。
新しい空のページを作成します
アプリのスクリーンショットを 4 枚ドラッグ & ドロップします
すべてのスクリーンショットが追加されたら、スクリーンショットをテンプレートとして再利用可能なコンポーネントに変換します。
スクリーンショットを右クリックして、Create Component を選択します
7) スクリーンショットを配置する
新しく追加したスクリーンショットコンポーネントをコピーして、ベゼルを用意していたページにペーストします。
ベゼルのサイズや傾きを変更している場合は、スクリーンショットがベゼルに納まるサイズに調整する必要があります。ベゼルの角は丸みがある場合があるので、スクリーンショットの角をクロップする必要があります。
コピーしたコンポーネントの Frame メニューでサイズや傾きを調整します。ベゼルにギリギリ納まるサイズに変更し、Corner Radius を 50 くらいに設定し、Clip Content で角をクロップします
同様の手順で他のスクリーンショットも配置すると、概ね完成です。
すべてのスクリーンショットを配置しました
8) 別の端末用のデザインを準備する
今回の手順では 6.5 インチ iOS のスクリーンショットを準備しましたが、5.5 インチや iPad のスクリーンショットを続けて準備する場合は、ステップ 2 ~ 7 を繰り返すことで作成できます。スクリーンショットを流用する場合は、ステップ 6 は不要です。
9) スライスをエクスポートする
最後に、４ 枚のスライスをエクスポートします。この際に、ベゼルやスクリーンショットなどのすべてのレイヤーがスライスより下のレイヤーになっていることを改めて確認します。
スライスをエクスポートする
最後に、今回の例で出力されたスライスを １ 枚載せます。
２ 枚目のスライスです
これにて、紹介スクリーンショットの作成は完成です！
宣伝
私が開発しているアプリの紹介スクリーンショットも同じ手順で作成しました。アプリストアに上がっているので、もしよろしければチェックしてみてください！
また、ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。
カロリーを指定してメニューを選べるので、ネタで遊んでみてください！
おわりに
Figma を活用することで、アプリ紹介用のスクリーンショットを非デザイナーが簡単に作成することができます。無料で今すぐ初められるので、是非試してみてください！
Discussion