見出し画像

スクショをスマホ画像にはめ込んでストア掲載用画像を作成する


App Store, Google Play等のアプリストアに並ぶアプリの紹介画像で、↑の画像の右側部分のような、スクリーンショットをスマホ画像にはめ込んだ画像をよく見ませんか?

僕もこんな画像を作ろうと、「画像素材がどこかに落ちてるのかな〜」と「スマホ 画像 素材」あたりでググったりして素材を探すも、これが意外と見つからず。

ちょっと手間取ったのでメモ。

Apple製デバイスの画像素材

検索ワードを変えながら探していたところ、以下の記事に出会いました。
App Store提出用のスクリーンショットを無料で自作する | やばブロ! 

上記記事ではAppleのサイトで画像素材がダウンロードできること、また素材にスクショ画像をはめ込む方法が紹介されています。

Appleの素材サイトはこちら。iPhone, iPad, Mac, Apple Watchなどの素材が公開されています。

Marketing Resources and Identity Guidelines

各素材はPhotoshop向けのpsd形式でダウンロードできます。上記記事ではjpgに変換してkeynoteで画像を作成しているようです。詳しい手順は上記記事をご覧ください。

Google製デバイスの画像素材

Google も同じようなものを出してるんじゃないかと探したところ、下記のサイトで公開していました。

Device Art Generator

こちらでは、Google Pixel等の素材がダウンロードできます。
配布の仕方が少し特殊で、
・規定のサイズのスクショ画像をブラウザ上にドラッグ&ドロップ
・プレビューが表示され、影や反射のあり/なしを設定
・プレビューをクリックしてダウンロード
という流れです。

その他のメーカー

Samsung, SONY, ASUS, SHARPあたりも同じような画像素材を公開していないか探してみましたが見つからず。。
もし見つけたら教えてください。

Canvaで画像作成

GoogleのサイトでPixel端末の画像にスクショを埋め込んだものを作成し、アプリストア用の画像を作成する際に使用しました。
ちなみに、上記画像の作成は(ロゴの作成も含め)Canvaを使用しています。非デザイナー・絵心なしの私でも簡単に画像素材を作成でき、非常に助かっています。

公開したアプリについて

ちなみに今回作ったのは、数字をぽちぽちタップするミニゲームです。
もしよかったらプレイしてみてください。

今回初めてのUnity開発, 初めてのアプリリリースでいろいろハマったので、そのあたりの話もどこかで消化できればと思っています。

この記事が気に入ったらサポートをしてみませんか?