ダウンロードされるApp Storeスクリーンショットの作り方
App Storeを開いて、何でもいいので検索してみてください。検索結果の1件あたりに、あなたは何秒かけているでしょうか。2秒？ もっと短い？ 説明文などまず読んでいないはずです。目に入っているのはアイコンと名前、そして親指ほどの幅しかないスクリーンショットの帯だけ。それだけで、入れるか入れないかを決めています。
App Storeのスクリーンショットとは、そういうものです。多くの個人開発者がいちばん最後に、深夜に、シミュレータから出したまま用意する素材でありながら、インストールの可否を実際に決めているのはこれなのです。スマートフォンでストアページを開いたとき、最初の1画面に収まるのはアイコンとタイトル、そしておおよそ最初の2枚のスクリーンショットだけ。そこから先は、すでに「入れてみようかな」と傾いている人のための領域です。
だからこそ、その5枚をきちんと設計しましょう。ここからは実例を使って進めます。
スクリーンショットは、まずサムネイルサイズで判断される
ここに落とし穴があります。27インチのモニターで1290 × 2796のキャンバスに向かって作れば、仕上がりは最高に見えます。ところがユーザーが「買い物リスト」と検索した瞬間、あなたのアプリは、親指の幅とたいして変わらない帯に3枚を詰め込んだ状態で並びます。あれほど美しかった48pxのキャプションは、もう読めないただの模様です。
私はこれをサムネイルテストと呼んでいます。やり方は単純で、そして容赦がありません。フレームを1/3のサイズに縮小し、腕を伸ばした距離から眺めてみてください。 キャプションが読めないなら、それはキャプションではありません。ただのテクスチャです。
具体的には、1290 × 2796のキャンバスならキャプションは96–140px、太字、最大2行。エディタ上ではばかばかしいほど大きく感じます。それで正解です。うまくいっているスクリーンショットは、拡大して見ると例外なく「文字を盛りすぎ」に見えるものです。
一方、画面キャプチャそのものはサムネイルで読み取れる必要がありません。あの帯の中でUIのラベルを読む人などいないからです。画面の役割は証拠であり、「これは実在する、きちんと作られたアプリだ」と一目で伝えること。売り込むのはキャプションの仕事です。
キャプションがベネフィットを売り、画面がそれを証明する
出来の悪いスクリーンショットは、たいてい機能名をキャプションにしています。「スマートリスト」「音声入力」「同期」。どれもただの名称であり、名称だけで誰かがアプリを入れた例はありません。
役割を分けましょう。
- キャプション＝ユーザーが求めている結果を、ユーザー自身の言葉で。短く。二人称で書くか、主語を置かないか。
- 画面＝それが本当にできるという証拠。
「音声入力」は「ロックを解除せずに牛乳を追加。」になり、「同期」は「2人で1つのリスト。牛乳のダブり買いはゼロ。」になります。下敷きにしている画面はどちらも同じ。それでもコンバージョンはまるで違います。
1フレームにつき、伝えることは1つ。キャプションに「そして」が要るようなら、それは2フレーム分です。
実例：買い物リストアプリの5フレーム
題材はBunch。カップルやルームシェアの相手と共有できる買い物リストアプリです。私ならこの順番で、このまま出稿します。
| # | キャプション（96–140px） | 見せる画面 | このフレームの役割 |
|---|---|---|---|
| 1 | 2人で1つのリスト。牛乳のダブり買いはゼロ。 | 各アイテムに2人のアバターが付いた共有リスト | 短い一文でピッチのすべてを伝える |
| 2 | 「オーツミルク」と言うだけ。相手のリストにも即反映。 | 音声追加のアニメーション途中、アイテムが現れる瞬間 | 「登録が面倒なのでは？」という不安をつぶす |
| 3 | ごちゃ混ぜではなく、売り場ごとに並ぶ。 | 青果 / 乳製品 / 冷凍 でグループ分けされたリスト | 思わず嬉しくなる機能 |
| 4 | 火曜の夕方6時、買い忘れはゼロ。 | 店に着いたときのリマインダー通知 | 感情に効く決め手 |
| 5 | 無料。アカウントなしで今すぐ始められる。 | 大きな「リストを作成」ボタンが置かれた空状態の画面 | 最後のためらいを取り除く |
重い仕事を引き受けているのは1枚目と2枚目です。これは何のアプリなのか、そしてなぜ面倒にならないのか。ここでスワイプが止まっても、伝えるべき論拠はひと通り伝わっています。3〜5枚目は、すでに気持ちが傾いていて、決め手を探している人のためのものです。
もう一つ、5枚目は機能紹介ですらないことにも注目してください。あれは不安をつぶすためのフレームです。App Storeでもっとも活かされていない枠が、実はこの最後の1枚です。ここでは不安を取り除く（「無料」「アカウント不要」「オフラインでも動く」）か、実績を見せる（「4.8★、今月12,000件のリストが共有されました」）か、そのどちらかをやるべきです。
5枚を通して守るレイアウトのルール
- キャプションは上、単色のパネルの上に。端末は下に置き、下端で断ち切る。 この型が主流なのには理由があります。視線は上から下へ流れますし、切れた端末は「この先にもまだ画面がある」と感じさせるからです。
- キャプションを端末画面の中に置いてはいけません。UIの一部に見えてしまい、ユーザーはUIを読み飛ばします。
- 背景と書体は5枚すべてで統一。 リズムをつけたいならアクセントカラーを回していけばよいのですが、フレームごとにフォントが変わるセットは、無関係な5つのアプリのように見えます。これはBrand Kitと同じ規律です。一度決めたら、どこでもそれを使う。
- コントラスト：濃色パネル＋白のキャプション、または彩度の高いブランドカラー＋白。白いパネルに薄いグレーのキャプション、というのが私の見てきた中でいちばん多い失敗で、サムネイルサイズでもっとも跡形もなく消えるパターンです。
- キャプションは左右それぞれ8%ほどの安全マージンの内側に収めます。ストアのUIは、思っているより大胆に切り落としてきます。
Ridvay Studioで5枚セットを組み立てる
5つの別ファイルも、Figmaのライセンスも要りません。Studioなら、セット全体を1つの複数ページデザインとして作り、そこからフレームごとに手を入れていけます。
次の指示をそのまま貼り付けてください。
カップル向けの共有買い物リストアプリ「Bunch」のApp Storeスクリーンショットを、1290x2796で5ページ作成してください。背景はダークネイビー、各フレームの上部に白い太字のキャプション、その下に下端で断ち切れるスマートフォンのモックアップ。キャプションは順に「2人で1つのリスト。牛乳のダブり買いはゼロ。」／「オーツミルクと言うだけ。相手のリストにも即反映。」／「ごちゃ混ぜではなく、売り場ごとに並ぶ。」／「火曜の夕方6時、買い忘れはゼロ。」／「無料。アカウントなしで今すぐ始められる。」
返ってくるのは、一語直したいだけで作り直しになる平坦な画像ではありません。編集できる5ページです。キャプションは本物のテキストレイヤー、パネルは本物のシェイプ、アクセントは本物のカラー値。そこが肝心なところで、ここからの30分は生成のやり直しではなく、編集の時間になります。
- 各キャプションをクリックし、サイズを110px前後まで引き上げます。 そのうえでキャンバスを33%まで縮小し、読み直してください。エディタの中でできるサムネイルテストです。
- 実際の画面キャプチャをモックアップのレイヤーにドロップして、プレースホルダーを差し替えます。キャプションはそのまま。入れ替わるのは証拠の部分だけです。
- 5ページすべてでパネルの色を自社のブランドブルーに変え、書体には手を付けません。セット内での変化より、セット全体の一貫性が勝ちます。
- 1ページ目を複製し、キャプションだけを書き換えて、別の切り口を試します（「『牛乳買った？』ともう二度と送らなくていい」）。1枚目を2パターン用意することが、ストアページ全体でもっとも効くA/Bテストです。
あとはワンクリックのリサイズで、同じセットを6.9"やiPad向けのキャンバスへ展開すれば、作り直す必要はありません。各ページはPNGで書き出せます。
BunchのスクリーンショットセットをStudioで作る →
ダウンロードを取りこぼす4つのミス
ログイン画面から始めてしまう。 1枚目に、ユーザーが通り抜けなければならない画面を置いてはいけません。現実味のあるデータが入った状態で、アプリが仕事をしている様子を見せましょう。
空っぽのデモデータ。 「アイテム1、アイテム2、アイテム3」は、このアプリを誰も使っていないと自白しているようなものです。ありそうな中身で埋めてください。実在する商品名、現実的な価格、実際の人が持つであろうリストの長さで。
最後の1枚まで縦位置一辺倒で考える。 本当に「おっ」と思わせるビジュアル（グラフ、地図、全面に敷いた写真など）があるなら、それはスワイプを引き出すフレームの候補です。
アプリの中身と食い違うスクリーンショット。 2バージョン先にしか存在しない機能をキャプションで約束すれば、星1つのレビューにそう書かれます。今あるアプリのためのフレームを出しましょう。
ここまでの土台にある、階層とコントラストの一般原則も身につけておく価値があります。デザイナーではない人のためのデザイン原則にまとめてありますが、アプリのスクリーンショットは、その原則を使う場面として失敗の代償がもっとも大きい場所です。使えるのは、およそ2枚のフレームと親指のひとスワイプだけなのですから。
今夜、サムネイルテストをやってみてください。今の1枚目を3分の1に縮小し、ちらりと目をやって、初めて見た人にこのアプリが何をするものか伝わるかを自問する。伝わらないなら、あなたとはっきり高いコンバージョン率とのあいだに立ちはだかっているのは、たった一晩分の作業です。