アプリを作ったあと、ストアに公開するためには、説明文やアイコンだけでなく、ストアに載せるスクリーンショット画像も用意する必要があります。
最初は、アプリ画面のスクリーンショットを何枚か撮って並べればよいのかなと思っていました。でも実際に作ってみると、これが思った以上に難しい。
ストア画像は、ただアプリの画面を見せるだけではなく、「このアプリで何ができるのか」「どんな人に使ってほしいのか」「初めて見た人に伝わるか」を考える必要がありました。
今回は、旅行計画共有アプリ「TAVIshare」のストア画像を作ったときに考えたこと、つまずいたこと、便利だった方法をまとめます。
ストア画像は、ただのスクショではなかった
アプリストアに載せる画像なので、最初はアプリ画面をそのまま見せればよいと思っていました。でも、実際に作ってみると、ストア画像は「アプリの説明資料」に近いものだと感じました。
TAVIshareは、旅行の予定を同行者と一緒に作ったり、旅程ややりたいこと、持ち物リストを共有したりできるアプリです。
そのため、画像では、旅行の予定を作れること、同行者と共有できること、やりたいことを整理できること、持ち物リストも管理できること、旅行前の準備から当日まで使えることを伝える必要がありました。
ただ画面を並べるだけだと、「旅行アプリっぽい」ことは伝わっても、具体的に何が便利なのかが弱くなってしまいます。ストア画像は、アプリの画面を見せながら、アプリの使い方も伝えるものなんだと気づきました。
1枚目で何を伝えるかが一番難しかった
特に悩んだのが、1枚目の画像です。1枚目は、アプリの第一印象になります。ここで何のアプリかわからないと、その後の画像まで見てもらえないかもしれません。
TAVIshareは、単なる旅行メモアプリではなく、同行者と一緒に予定を作っていくアプリです。最初は「旅の予定を共有」のような表現も考えました。
ただ、「共有」と言うだけだと、完成した予定を誰かに渡すような印象にもなります。このアプリで伝えたいのは、旅行前にみんなで予定を作っていく感じです。
そこで、1枚目のメインコピーは、旅の予定を、みんなで作ろうという方向にしました。
「共有できます」と説明するよりも、「みんなで作ろう」と言った方が、旅行前に友達や家族と予定を相談しながら使うイメージが伝わりやすいと感じました。
画面の中身も、実はかなり考える
ストア画像では、アプリ画面の中に表示するサンプルデータも大事でした。旅行アプリなので、旅程には行き先や予定を入れる必要があります。ただ、このサンプル旅程を作るのが意外と難しかったです。
本当にありそうな旅行予定にしたい。でも、実在の予約情報や個人情報っぽくは見せたくない。旅行の楽しさは出したい。でも、ごちゃごちゃしすぎると画面が読みにくい。このバランスを考える必要がありました。
たとえば、予定のタイトルや時間、メモの内容も、入れすぎると情報量が多くなります。一方で、何も入っていない画面だと、実際に使うイメージが湧きません。
ストア画像では、アプリの機能だけでなく、画面の中に入れるサンプル文言まで含めて設計する必要があるんだと感じました。アプリ画面は、機能を見せる場所であると同時に、アプリの雰囲気を伝える場所でもありました。
最初はFigmaで端末フレームに入れようとした
ストア画像を作るとき、最初はシミュレータのスクリーンショットボタンでアプリ画面だけを撮影して、それをFigmaで作った端末風の枠の中に収めようとしていました。
アプリストアの画像では、スマホ画面を端末フレームに入れて見せているものをよく見かけます。なので、最初は自分でも、画面だけ撮って、Figmaで端末っぽい枠を作って、その中にスクリーンショットをはめ込む方法で作ろうとしました。
ただ、実際にやってみると、なんとなくチープな感じになってしまいました。枠の線、角丸、画面との余白、端末っぽさのバランスが難しく、少しでも違和感があると「それっぽく作った感」が出てしまいます。
自分で端末フレームを作るのは、思っていたよりも難しかったです。そこで、Figmaで無理に端末フレームを作るのではなく、iPhoneシミュレータのウィンドウごとスクリーンショットを撮る方法に変えました。
Macのウィンドウ単位スクショがかなり便利だった
今回、特に便利だったのがMacのウィンドウ単位スクリーンショットです。使った操作はこれです。
Shift + Command + 4 → Space → Optionを押しながらEnterこの方法だと、選択したウィンドウだけをきれいにスクリーンショットできます。便利だったのは、iPhoneシミュレータのウィンドウごと撮れるところです。
App Storeの紹介画像では、端末をそのまま載せたような画像をよく見かけます。Macのウィンドウ単位スクショを使うと、iPhoneシミュレータの外枠ごと撮れるので、それに近い雰囲気の画像がすぐ作れました。
自分で端末フレームを作ってスクリーンショットをはめ込むより、自然に見えました。さらに、Optionを押しながら撮ると、ウィンドウの影が入らず、素材として扱いやすくなります。
あとから画像編集で切り抜いたり、影を消したりするより、最初からきれいな状態で撮れるのはかなり楽でした。
シミュレータのスクショボタンとの使い分けも大事
一方で、シミュレータ側のスクリーンショットボタンも便利です。シミュレータのスクショボタンは、シミュレータの画面内だけを撮影できます。つまり、端末の外枠は入らず、アプリ画面そのものだけが撮れます。
これはこれで、アプリ画面だけを素材として使いたいときには便利です。たとえば、Figmaで別のレイアウトに組み込んだり、画面だけを大きく見せたりしたいときには、シミュレータのスクショボタンの方が使いやすいと思います。
今回やってみて、スクリーンショットは「どちらが正解」というより、用途に応じて使い分けるのがよさそうだと感じました。
- 端末ごと見せたいときは、Macのウィンドウ単位スクショ。
- 画面だけを素材として使いたいときは、シミュレータのスクショボタン。
この使い分けを知っているだけで、ストア画像作りがかなり楽になります。最初は「スクリーンショットを撮るだけ」と思っていましたが、撮り方によって画像の印象はかなり変わりました。
QRコードやIDは、そのまま載せないようにした
TAVIshareには、旅行メンバーを招待するための共有機能があります。その画面には、QRコードや招待IDのような情報が表示されます。共有機能はアプリの特徴なので、ストア画像でも見せたい部分でした。
ただ、読み取れそうなQRコードやIDがそのまま写っているのは少し気になります。サンプルであっても、見る人によっては「これは読み取っていいものなのか」と思うかもしれません。
また、実際に使えるものではないとしても、ストア画像にIDっぽいものがそのまま出ていると、見た目としても少し不安になります。そのため、QRコードっぽい部分やIDは、読めないように加工しました。
ストア画像では、見せたい機能と、見せすぎない方がよい情報を分ける必要があると感じました。特に、共有、招待、ID、ユーザー情報が出る画面は、そのまま載せずに確認した方が安心です。
サイズ指定がよくわからなかった
ストア画像を作るときに、地味に悩んだのが画像サイズです。ChatGPTで確認したところ、iPhone用のスクリーンショット画像として 1320×2868px というサイズが出てきました。
ただ、調べていくと、端末のスクリーンサイズによって指定されている画像サイズが違うようで、結局どれを用意すればよいのかがよくわかりませんでした。
全部の端末サイズに合わせて画像を作らないといけないのか。どれか一つ作れば、他の端末にも使えるのか。そもそも、どのサイズが正しいのか。このあたりでかなり迷いました。
いったん今回は、一番大きなサイズっぽい 1320×2868px で作ることにしました。大きいサイズで作っておけば、他の端末サイズにはストア側である程度合わせてくれるらしい、という理解です。
ただ、これが正解かどうかはまだわかりません。ちゃんとストアに掲載できたら、ここはまた書き直そうと思います。サイズの話は、実際にやってみるまでかなりわかりにくかったです。
スマホで見たときの読みやすさも大事だった
画像サイズに加えて、文字の大きさや配置も考える必要がありました。パソコンの大きな画面で作っているときは読める文字でも、スマホのストア画面で見ると意外と小さく感じることがあります。
逆に、文字や画面を大きくしすぎると、今度は見せたいアプリ画面が入りきらなくなります。ストア画像は、きれいに作るだけではなく、スマホで見たときにちゃんと読めることが大事でした。
特に、画像に入れるコピーは短くした方が見やすいです。長い説明を入れるよりも、旅の予定を、みんなで作ろう、持ち物リストで忘れ物を防ぐのように、機能やメリットがすぐ伝わる言葉にする方がよさそうだと感じました。
ストア画像は、じっくり読んでもらうものというより、ぱっと見て何となく伝わることが大事なのかもしれません。
作ってみてわかったこと
ストア画像を作る作業は、思っていたよりも「デザイン作業」だけではありませんでした。むしろ、アプリの説明を整理する作業に近かったです。
どの画面を見せるか。どんな順番で見せるか。どんな言葉を添えるか。画面の中にどんなサンプルデータを入れるか。見せない方がよい情報はないか。どの方法でスクリーンショットを撮ると自然に見えるか。どのサイズで作ればよいのか。
そういうことを考えているうちに、自分のアプリが何を届けたいのかも整理されていきました。TAVIshareの場合は、旅行前に、同行者と予定・やりたいこと・持ち物を一緒に整理できるアプリとして見せるのが一番伝わりやすいと感じました。
アプリ本体を作るだけでも大変ですが、公開するためには、ストア画像や説明文など、まだまだ準備することがあります。でも、ストア画像を作ることで、アプリの見せ方や伝え方がかなりはっきりしました。
個人開発でアプリを公開するなら、ストア画像作りは思った以上に大事な工程でした。