アプリ紹介のスクリーンショットを無料で作る方法【Google Play Console, Inkscape】
スマホアプリをGoogle Play StoreやApp Storeに公開するには、スクリーンショットをアップロードすることが必要です。
しかし、興味をより持ってもらえるようなスクリーンショットにするには、単にスマホで撮ったスクリーンショットにするのではなく、文字などを入れることが効果的でしょう。
今回の記事では、無料でできる、文字を入れたスクリーンショットの作成方法を紹介します。
※この記事では、スマホのフリー素材を加工することでスマホに画像をはめ込んでいますが、モックアップジェネレーターというはめ込み画像を作ることができるソフト（例：MockUPhone）を使えば、かんたんにはめ込むことができるので、それを使いましょう。
一応、その部分は試行錯誤の結果としてこの記事に残しておきます。
今回作るスクリーンショットはこちら↓
環境・方針
- Windows 10 Home
- Inkscape 1.1
今回は、Inkscapeというフリーソフトを使ってスクリーンショットを作っていきます。
また、私が作成したアプリはiOSアプリではなくAndroidアプリなので、Google Play Storeに公開することを前提にスクリーンショットを作っていきます。
そのため、細かなスクリーンショットの仕様がApp Storeに公開する場合と異なると思いますので、注意してください。
作成していくスクリーンショットは、Google LLCが作成した電卓アプリのスクリーンショットを参考にし、また、Google Play Console公式ヘルプ（以下「公式ヘルプ」）を参考にしています。
スクリーンショットを撮る
まず、アプリのスクリーンショットを撮りましょう。
スクリーンショットの撮り方は機種によって異なると思うので、各々確認してください。
アプリの主な機能がわかる画像を撮るようにしましょう。
公式ヘルプには次のように記載されています。
スクリーンショットによってアプリ内またはゲーム内の実際のエクスペリエンスを示し、ユーザーがアプリやゲームのエクスペリエンスの様子を想定できるよう主な機能やコンテンツに焦点を当てる必要があります。
公式ヘルプ
アプリ内にバナー広告を表示している場合は、機内モード等にしてインターネット接続を切った後にアプリを起動すると、バナー広告を後で編集で消す手間が省けます。
公式ヘルプによれば、通知バー内のバッテリー、Wi-Fi、モバイル サービスのロゴは完全に表示すべきとのことなので、アプリ起動後は、機内モードをオフにしてインターネットに接続し、通知バー内のWi-Fiやアンテナのロゴを表示させましょう（基本的に広告の読み込みは画面表示時に行っていると思うので、一旦インターネット接続なしでアプリを開けば、その後インターネットに接続しても広告は表示されない状態が続くと思います）。
また、Google Play Consoleでは、最低2枚スクリーンショットをアップロードしないとアプリを公開できないので、2枚以上スクリーンショットを撮るようにしましょう。
公式ヘルプによれば、推奨は、アプリの場合は4枚以上、ゲームの場合は3枚以上です。
上限は8枚です。
撮った画像は、Googleフォトなどを利用して、パソコンへ保存しておきましょう。
私が撮ったスクリーンショット（今回の素材）↓
スマホのフリー素材のダウンロード
今回参考にしたGoogleの電卓アプリのスクリーンショットでは、スマホ自体の画像が使われています。
そこで、スマホのフリー素材をダウンロードします。
今回は、ぱくたそというサイトにあった、白背景とスマートフォンの写真という素材を利用します。
ぱくたその写真素材は、商用利用可で（写真素材の商品化販売は不可）、写真素材の加工・合成・変形・変換も許されています（ご利用規約 – ぱくたそより）。
当然、フリーだからといってまったくルールがないわけではないので、しっかりと利用規約を確認しましょう。
さて、さきほど示した白背景とスマートフォンの写真のページで、下の方にスクロールすると無料ダウンロードというところがあり、そこで、S, M, Lからサイズを選んでダウンロードすることができます。
この写真では、Mは1600×1080、Lは5688×3840です。
公開するスクリーンショットはフルHD以上の解像度が推奨され（公式ヘルプより）、今回私は、縦のフルHDのスクリーンショット（1080×1920）を作成します。
そのため、Mでは縦の解像度が足りないので、Lをダウンロードします。
Inkscapeの起動・画像インポート
Inkscapeをダウンロードしていない方は、こちらの公式ページからダウンロードしましょう。
初回起動時は、設定画面のようなものが表示されますが、特にいじらずに進めて、以下のInkscapeの新規ドキュメント画面を開きましょう（このあたりはInkscapeバージョンによって異なると思います）。
この画面を開いたら、さきほどダウンロードした「白背景とスマートフォンの写真」と、スマホで撮ったスクリーンショットを、このInkscapeの画面にインポートします。
ファイルをこの画面にドラッグすればインポートできます。
インポート時にダイアログが表示されますが、そのままOKを押して大丈夫です。
インポートした画像は重なっていると思うので、軽く整理しておきましょう。
画面内では拡大・縮小もできます。
このあたりで、このファイルを一旦名前をつけて保存しておくといいでしょう（Ctrl+SでOKです）。
名前をつけて保存した後は、こまめにCtrl+Sを押して上書き保存して、データを失うことのないようにしましょう。
スクリーンショットのベース作成
次に、スクリーンショットのベースとなる1080×1920の長方形を作成します。
一番左側の列の水色の四角（矩形ツール）を選択（Rを押せば選択できます）。
画面をドラッグすると四角形を描くことができます。とりあえず大きさは気にしなくて大丈夫です。
四角形を描いたら、上の列にある mm というところを px に変更し、幅を1080に、高さを1920に変更します。
これで、1080×1920の長方形を作成できました（色は違うかもしれません）。
次に、色を変更します。
右側の列にあるブラシのアイコン（オブジェクト…の編集）を選択します（Shift+Ctrl+Fでも選択できます）。
すると、RGB値を入力する等により、選択しているオブジェクトの色を変更することができます。
この色は、AppBarの色や、アイコンに使っている色にするといいでしょう。
できれば、Material Colorの中から選ぶことをおすすめします（RGB値を確認したい場合はこちらのサイト）。
スマホの切り抜き
次に、 「白背景とスマートフォンの写真」 にあるスマホのみを切り抜きます。
矩形ツールを選択し、「白背景とスマートフォンの写真」 にあるスマホにかぶせるように長方形をつくります。
この際、スマホにきちんとかぶせられているかどうかわかるように、右下にある不透明度を下げましょう。
不透明度を下げたら、右側の列の一番上にある黒い矢印（選択ツール）を選び、スマホの枠に長方形がきちんと合うよう、拡大し、黒い矢印をドラッグして合わせていきます（ボタンなどの突起は無視して、辺が合うように調整したほうが、きれいに切り抜くことができます）。
きちんとスマホと長方形とを合わせたら、長方形の角を丸くしていきます。
再び矩形ツールを選択して、右上の白い丸を下にドラッグします。
すると、長方形の角を丸くすることができます。
この丸みも、拡大をして、スマホにしっかりと合わせましょう。
合わせたら、再び選択ツールを選び、今描いた角丸の図形と「白背景とスマートフォン写真」を同時に選択します（同時選択はShiftを押しながらできます）。
同時選択したら、下の画像のように、オブジェクト > クリップ > 設定 を選択します。
すると、スマホを切り抜くことができます。
スクリーンショットのベースに画像を集める
いよいよ、すでに作ったスクリーンショットのベースに、画像を集めていきます。
先程切り取ったスマホをCtrl+Dで複製します。
複製したらその前に作ったスクリーンショットのベースに重ねます。
この際、スクリーンショットのベースの後ろにスマホが隠れてしまう場合は、オブジェクト > 前面へ を選択してください（Page Upを押してもできます）。
そして、スマホの大きさを調整します。
この際、サイズ調整はCtrlを押したまま黒い矢印をドラッグして行ってください（でないと、スマホの縦横比が変更されてしまします）。
今回参考にしたGoogleの電卓アプリのスクリーンショットのように、画面の下をベースの下辺に合うようにして、上に文字を入れられるくらいの大きさにします。
このあと位置については調整するので、厳密に位置を調整する必要はありません。
撮ったスクリーンショットをスマホの画面に合わせる
次に、自分のスマホで撮ったスクリーンショットをスマホの画面に合わせます。
の前に！
忘れずにしておきたいのが、スマホで撮ったスクリーンショットの通知バーの編集です（私は今回忘れており、ここの部分だけ後で記事に挿入したため、この部分の後にある画像は、通知バーが編集されていない状態のままです）。
通知バーの編集
通知バーがよく見えるよう、拡大しておきます。
そして、矩形ツールを選択して、通知バーに時刻・Wi-fi・モバイルのアンテナ・バッテリー以外のものが表示されないように、長方形を作ります。
長方形を作ったら、右の色が設定できるところの下の方にあるスポイトツールを選択し、通知バーのところをクリックして通知バーの色を採取します。
すると、作成した長方形が通知バーの色に変わります（不透明度は100にしましょう）。
そして、この長方形とスマホで撮ったスクリーンショットを同時選択して、Ctrl+Gを押して、グループ化をしましょう。
これで通知バーの編集が完了します。
スマホの画面に合わせる
inkscapeの画面上にすでにあるスクリーンショット１枚を複製し、スマホの画面に合わせます。
この際、黒い画面に対してスクリーンショットを気持ち大きめにしてもいいと思います（その方が楽です）。
そして、スマホの画面に合わせる際位置調整すると思いますが、位置調整はキーボードの矢印キーを押すことででき、さらに細かい調整をするときはAltキーを押しながらしてみてください。
また、お持ちのスマホによっては、画面比率がこの写真のスマホに合わない場合があると思います。
その場合は、とりあえず画面の幅だけ写真のスマホと合わせておきましょう。
整列
そうしたら、スクリーンショットのベースとスマホで撮ったスクリーンショットの整列をします。
右側の列の一番下のグラフのようなアイコン（オブジェクトを整列及び配置）を選択してください（Shift+Ctrl+Aでも選択できます）。
すると、整列と配置というのが表れます。
そして、スクリーンショットのベースとスマホで撮ったスクリーンショットを同時選択して、整列と配置のうち一番上にある整列の中から、「中心を垂直軸に合わせる」と「下端で揃える」を選択してください。
すると、スクリーンショットのベースとスマホで撮ったスクリーンショットをきれいに整列させることができます。
この際、スマホで撮ったスクリーンショットとスマホとがずれると思うので、しっかりと合わせましょう。
画面比率がこの写真のスマホに合わない場合は、左右の端だけ合わせて、上下はスマホができるだけ違和感のない形になるような位置に調整しましょう。
飛び出した部分を消す
次に、スクリーンショットのベースから飛び出したスマホの一部を消します。
まず、スクリーンショットのベースを複製し、複製したものをこの横あたりへ仮り置きしておきます。
そして、先程まで作ったスクリーンショットのベース・スマホ・スマホで撮ったスクリーンショットの組み合わせをグループ化します。
グループ化するには、 スクリーンショットのベース・スマホ・スマホで撮ったスクリーンショットを同時選択して、Ctrl+Gを押します。
グループ化したら、仮置しておいたスクリーンショットのベースの複製を、グループ化してあるスクリーンショットのベースに合わせます（きれいに合わせられるようにガイドが出ます）。
合わせたら、スマホの切り抜きでやったように、グループ化したものとスクリーンショットのベースの複製を同時選択し、オブジェクト > クリップ > 設定 を選択します。
すると、スクリーンショットのベースから飛び出したスマホの一部を消すことができます。
文字の挿入
仕上げに、文字を挿入します。
一番左側にあるAのアイコン（テキストツール）を選択します（Tを押しても選択できます）。
そして、ドラッグしてテキストボックスを作成し、文字を入力します。
文字を入力したら、文字を選択してから、上の列にある、フォントファミリ・フォントスタイル・フォントサイズを変更します。
私は、Yu Gothic・Bold・64ptにしました。
そして、文字の色を変えるには、右側の整列と配置のタブからフィル/ストロークのタブに切り替えて、色を設定してください。
文字を設定し終えたら、選択ツールに戻り、右側の整列と配置タブを選びます。
そして、テキストとグループ化した画像を、「中心を垂直軸に合わせる」などを選択して整列させましょう。
これで、スクリーンショットの完成です！といいたいところですが、このスクリーンショットを画像として出力する必要があります。
画像の出力
出力するには、右側の列にある紙から矢印が生えているアイコン（このドキュメントまたは選択オブジェクトをPNG画像として出力）を選択します（Shift+Ctrl+Eでも選択できます）。
すると、今まで整列と配置があった場所にPNG画像としてエクスポートというのが表れます。
次に、作成したスクリーンショットとテキストを同時選択します（ここでCtrl+Gでグループ化しておいてもOKです）。
選択したら、右側の PNG画像としてエクスポートのところで、ページ・描画全体・選択範囲・カスタムのトグルボタンのうち、「選択範囲」が選択されていることを確認します。
そして、その下にある画像サイズが、幅：1080, 高さ：1920になっていることを確認します。
そうしたら、その下にあるエクスポート先というボタンを選択して、エクスポート先とファイルの名前を設定し、保存を押します。
すると、画像が出力されます！
これで、スクリーンショットの完成です。
次のスクリーンショットを作成する
次のスクリーンショットを作成するには、完成させたスクリーンショットを利用します。
まず、完成させたスクリーンショットを複製し、スマホで撮ったスクリーンショットも複製します（通知バーの編集を忘れずに！）。
複製させたら、適当な場所に移動させます。
次に、その複製物を重ねます。
下の画像のように、元のスマホで撮ったスクリーンショットに合わせるように重ねます。
右下または左下に合わせるようにしましょう。その際、下の画像のようにガイドが表示されていることを確認してください。
すると、画像のサイズがあっていないと思うので、しっかりと合わせます。
次に、文字を変更します。
文字がスクリーンショットとしてグループ化されていて文字を選択できない場合は、Ctrl+Uを押してグループ化を解除します。
グループ化を解除したら、文字のところをクリックして、その後テキストツールを選択します。
すると、文字が編集可能になるので、編集しましょう。
編集し終わったら、すでにやったように、整列と配置を利用して、整列させましょう。
あとは、同じように出力させれば完成です。
まとめ
ということで、無料でできる文字を入れたスクリーンショットの作成方法を紹介しました。
効率的でない部分やきれいにできていない部分もあるとは思いますが、とりあえず個人でアプリを公開する際のスクリーンショットとしては、これがある程度の水準のものを作れる方法なのではないかと思います。
ぜひこの記事で紹介した編集方法を利用して、スクリーンショットだけでなく、アプリアイコンやフィーチャーグラフィックも作成してみてください！
Inkscapeの使い方をもっと学びたい方はこちら↓