🎴

アプリ作成後にApple Storeに提出するスクショをFigmaで無料で作成する方法

2022/06/22に公開

Figma

こんにちは！

開発したアプリを公開するためには、Apple Storeにたくさんのスクショを提出しないといけません。今回はそのスクショをFigmaを使って無料で作成する方法をご紹介します。

今回作成するもの

今回作成するものはこちらです。

こちらは私が作成したアプリで実際に使用しているスクショです。

スマホで以下にアクセスすると確認することができます。

前提

Macがある
Simulatorがある
Figmaのアカウントがある（無料で作れます）
自分のアプリがある

frameを作成

ではまずfigmaにログインし、frameを作成します。
下記画像の赤矢印が指している箇所をクリックするとFrameが押せるようになるのでそれをクリックします。

ドラッグして自分が作成したいスクショのサイズくらいのframeを作成します。それからそのframeをクリックすると画面右側に横幅や縦幅を数字で入力できる箇所が出てくるのでそこで正確なサイズを指定します。

現状はこのような感じです。

左が見本、右が今作成したframeです

frameに色をつける

frameが真っ白なので背景をつけていきます。

frameをクリックすると右側にFillを設定できる箇所（下記画像参考）が表示されるので「FFFFFF」となっているのを「B91C1C」に変更します。

B91C1Cというのは https://tailwindcss.com/docs/customizing-colors から取ってきました。適当に良さそうな色を決めて、そのコードを取得しましょう。

FillにB91C1Cを入力してエンターを押すと、frameが真っ白から真っ赤になりました。

frameに文字を入れる

次にframeに文字を入れます。

画面左上のTをクリックします。そして先ほど作成したframe上でドラッグし、テキスト用の枠を作成します。そしてそれから文章を入力します。

現状は以下のような状態です。

ローカルでアプリを起動し、Simulatorをスクショする

上記がSimulatorのスクショです。
私はMacのデフォルトの画面のままでしたが、この時Simulatorの後ろを白にしておくと後から楽です。

背景を消す

余計な背景を消していきます。背景を消すためにアプリ等をインストールする必要はありません。Macに最初から入っているものを使います。

Finderから該当の写真を開いてください。
それから右上の鉛筆マークを押してから、左上の赤矢印が指している箇所をクリックしてください。

そして背景を選択すると以下のような状態になります。
※ 一度に削除する必要はありません。少しずつ選択すればOKです。

この状態でキーボードのバツボタン（バックスペース？）を押すと背景が消えます。この作業を何回か繰り返し、背景を完全になくします。背景が黒だとSimulatorの外枠の色とかぶって消しづらいのでスクショを撮るときに背景を白にしておくと便利です。

最終状態↓(背景を白にしなかったので少し残っています。。)

frameに画像を入れる

先ほど作成した画像をframeに入れていきます。

赤矢印の箇所をクリックした後、Place imageをクリックします。先ほどの画像を選択し、frameに入れます。そして画像の大きさを調節すればOKです。

エクスポート

赤矢印が指している「Export Frame１」をクリックすると画像がエクスポートされます。
※ Frame1はフレーム名。フレーム名が〇〇なら「Export 〇〇」となる。

終わりに

アプリの審査で必要なスクショをいっぱい作成するのは大変ですが、Figmaを使えばコピペもできますし、何よりも無料で作成できます。初めてアプリを作ったときはどうやってスクショを準備しようか迷うと思いますが（私がそうでした。）、Figmaで作るのも良いのではないかと思います。

Figma以外にもっと便利なものがありましたらコメントで教えてください。
最後までお読みいただきありがとうございました。