// 01構図はゼロから考えるものではない
自作アプリのスクショを作ろうとしたとき、最初に手が止まるのは 「何をどう並べればいいのか分からない」という点だと思います。私たちもそうでした。
このとき有効だったのは、デザインを考えることではなく、先に上位アプリを50本ほど眺めることでした。 カテゴリを問わず並べて見ていくと、レイアウトのバリエーションが思ったより少ないことに気づきます。 ほとんどが、これから挙げる型のどれかか、その組み合わせです。
型が収束するのには理由があります。ストア掲載ページでのスクショは、 横スクロールのサムネイルとして、非常に小さく、一瞬だけ見られるものだからです。 凝った構図は縮小に耐えません。生き残っているのは、小さくても成立する型だけです。
以下の図は各パターンの骨格だけを示したシルエットです。 濃いグレーの角丸が端末モックアップ、細いバーが文字（キャプション）を表しています。 特定のアプリのデザインを再現したものではありません。
// 02よく見る6つの型
A. トップキャプション型
A
上にコピー、下に端末
画面上部に短いキャッチコピー、その下に端末モックアップを置く型です。 圧倒的に採用例が多く、迷ったらこれで大きな失敗はありません。
強いのは、サムネイルが上から順に読まれるという性質に素直に沿っている点です。 文字が上端にあるぶん、リストを流し見されてもコピーだけは視界に入ります。
B. ボトムキャプション型
B
端末を上、説明を下に
A の上下を入れ替えた型です。アプリ画面そのものに訴求力があるとき—— ゲーム、写真編集、地図系など、絵で伝わるアプリで選ばれます。
弱点は、文字が下端に来るぶんサムネイルでは読まれにくいこと。 コピーは「見て分かる内容の補足」に留め、説明の主役にしないほうが機能します。
C. 全画面型（フレームなし）
C-1 ／ 縦向き
実機の画面をそのまま
装飾もコピーも入れず、撮った画面をそのまま提出する型です。 情報量が最大になり、作業コストはほぼゼロ。
ただしサムネイルでは細部がつぶれ、何のアプリか伝わりにくくなります。 すでに指名検索で来る前提のアプリや、UI 自体が売りのツールでは成立しますが、 新規獲得を狙う段階では不利になりがちです。
C-2 ／ 横向き
横画面のアプリはそのまま横向きで出す
横向きでプレイするゲームや動画系アプリでは、掲載枠そのものが横長になります。 縦向きの枠に横画面を無理やり収めると上下に大きな余白ができるので、素直に横向きで提出する形です。
縦向きとの一番の違いは並び方です。横長の枠は画面幅をほぼ使い切るため、 1枚あたりの面積が大きく、1枚の印象は強く出ます。 その代わり一度に視界へ入る枚数が減るので、後半の枚数はより見られにくくなります。 1枚目に集約する意識は縦向き以上に重要です。
注意点として、縦向きと横向きを混在させないこと。 並びの高さが揃わず、掲載ページの見た目が崩れます。アプリの向きに合わせてどちらかに統一してください。
なお横向きでも、A・B のようにコピーを載せる型はそのまま使えます。 ここでは C の派生として挙げていますが、「向き」と「型」は独立して選べると考えてください。
D. アングル型（傾け配置）
D-1 ／ 1枚に収める
端末を斜めに置く
端末モックアップを数度傾ける型。A や B の派生ですが、 並んだときにリズムが生まれて目に留まりやすくなります。
角度は控えめが鉄則です。傾けすぎると画面内の文字が読めなくなり、 端末の角が切れて雑に見えます。5〜10度程度で十分に効果が出ます。
D-2 ／ 隣へまたぐ
端末を1枚に収めず、隣へ続かせる
傾けた端末を枠に収めず、右端で断ち切って次の1枚に続きが現れるようにする型です。 E（パノラマ）と同じ「またぎ」の発想を、背景ではなく端末そのものでやるものだと考えると分かりやすいと思います。
横スクロールしたときの繋がりが強く出るので、目を引く効果は D-1 より上です。 一方で端末が切れているぶん、1枚単独では意図が伝わりません。 使うなら 1枚目には適用せず、2枚目以降の連続する箇所に限るのが安全です。
なお E と同じく、途中に1枚差し込むと繋がりが崩れて作り直しになります。
E. パノラマ型（背景が複数枚をまたぐ）
E
背景の図柄を隣の1枚へ繋げる
背景のグラデーションや図形を、複数枚にまたがるように配置する型です。 横スクロールしたときに絵が繋がり、作り込まれている印象を与えます。
注意点として、繋がって見えるのは複数枚が同時に見えているときだけです。 1枚単位で表示される場面では意味を持たないので、各枚が単独でも成立するように設計しておく必要があります。 また、途中に1枚差し込むと全部作り直しになります。
F. 分割型（コピー優先・端末は断ち切り）
F
コピーの面積を優先し、端末は枠外へ抜く
上（または左）にまとまった文章を置き、端末は枠に収めず下端・右端から抜けさせる型です。 機能の説明にどうしても文字数が必要な、業務系・ツール系アプリで見かけます。
端末をあえて切ることで、文字の面積を確保しつつ端末自体は大きく見せられるのがこの型の要点です。 A のように全体を収めようとすると、文字と端末が両方小さくなって共倒れになります。
ただしサムネイルで本文はまず読めません。1行目だけは別格に大きくし、 残りは「文章がある」という質感だけ伝わればいい、と割り切るのが実用的です。
// 03枚数は機能数から逆算する
型が決まったら次は枚数です。ここは感覚で決めず、見せたい機能の数から逆算するのが分かりやすい方法です。
基本の考え方は「1枚 = 1メッセージ」。1枚に複数の訴求を詰め込むと、 サムネイルサイズではどれも伝わらなくなります。逆に言えば、 伝えたい機能が3つなら本体は3枚、ということになります。
そのうえで、枚数の内訳はこう組むと安定します。
| 位置 | 役割 | 入れる内容 |
|---|---|---|
| 1枚目 | 結論 | アプリが何なのかを一言で。機能ではなく用途 |
| 2〜4枚目 | 根拠 | 主要機能を1枚ずつ。多くても3つに絞る |
| 5枚目以降 | 補強 | 差別化要素・対応環境・無料である旨など |
実際に効くのは1枚目で、ここだけは別格に重要です。 掲載ページで最初に表示され、検索結果の一覧にも出るため、 残りの枚数を作り込むより 1枚目を練り直すほうが効果は大きくなります。
1枚目に入れるコピーは、機能名（「タイマー機能搭載」）ではなく、 ユーザー側の言葉（「集中が続く25分」）に寄せると伝わりやすくなります。 機能名は 2枚目以降で説明すれば足ります。
枚数の下限はストア側の要件も確認してください。 Google Play はスクリーンショット最低2枚（推奨4枚以上）が条件です。 詳細は前回の記事にまとめています。
// 04どの型を選ぶか
型の選択は好みではなく、アプリの性質で決めたほうが失敗しません。目安は次のとおりです。
| アプリの性質 | 向いている型 |
|---|---|
| 用途を言葉で説明する必要がある | A（トップキャプション） |
| 画面の絵そのものが売り（写真・地図） | B または C-1 |
| 横画面のゲーム・動画系 | C-2（横向きで統一） |
| 一覧で埋もれたくない・競合が多い | D-1（アングル） |
| ブランドとして見せたい・素材を作り込める | D-2（またぎ）または E（パノラマ） |
| 機能の説明に文字数が要る（業務系） | F（分割） |
| とにかく早く公開したい | C（全画面）で公開し、後から差し替え |
重要なのは、1本のアプリの中で型を混ぜないことです。 A と B と D が混在していると、統一感がなく仕上がりが雑に見えます。 型はひとつ決めて、全枚数で通すのが基本になります。
// 05やりがちな失敗
- 文字が小さい — 制作時は等倍で見ているので気づきません。サムネイルサイズに縮小して確認するのが唯一の対策です
- コピーが長い — 一行で読み切れない説明は読まれません。おおむね15〜20字が上限の感覚です
- 1枚目が機能紹介になっている — 1枚目は「何のアプリか」であって、機能一覧の先頭ではありません
- 背景色とコピー色のコントラストが低い — 淡い背景に白文字は、縮小すると消えます
- 端末の画面が実物と違う — インストール後の落差はレビュー評価に直結します。誇張は避けたほうが無難です
// 06StoreShots でどこまで作れるか
ここまで挙げた型のうち、私たちのツール StoreShots で実際に組めるものを整理しておきます。 できることだけでなく、現時点でできないことも明記します。
| 型 | 対応 | 作り方 / 制限 |
|---|---|---|
| A トップキャプション | 対応 | 見出し・強調ワード・サブテキストを入力し、位置Yを上へ。端末は位置・サイズで下に寄せる |
| B ボトムキャプション | 対応 | A のテキスト位置Yを下方向へ振るだけ。端末側を上に寄せて調整 |
| C-1 全画面（縦） | 対象外 | 撮った画像をそのまま提出する型なので、ツールを通す必要がありません |
| C-2 横向き | 未対応 | 現在は縦向きの出力のみ。横画面ゲーム向けの横向き出力は今後の課題です |
| D-1 アングル | 対応 | 端末の回転（±45°）に加え、前後・左右の傾き（各±35°）で疑似3Dの角度も付けられます |
| D-2 またぎ | 対応 | レイアウトを「またぎ」にすると端末が複数枚をまたいで描画されます。1枚ごとに端末の表示／非表示も切り替え可能 |
| E パノラマ | 一部 | 背景は1枚ごとの2色グラデーション。図柄を複数枚に連結させる機能はありません。またぎ表現は D-2（端末）で代替できます |
| F 分割 | 対応 | テキストの幅・揃え・位置と、端末の位置・サイズを組み合わせれば、端末を枠外へ抜く配置も作れます |
型以外にツール側で担当している部分
- 枚数 — 1〜3枚を並べて同時に編集できます。「独立」か「またぎ」かをレイアウトで選択
- 端末モックアップ — スマートフォン（Black / Silver）とタブレット、App Store 向け・Google Play 向けをそれぞれ用意
- 出力サイズ — 前回の記事で扱ったストア要件のサイズちょうどで書き出します
- フィーチャーグラフィック — Google Play 用の
1024 × 500も同じ画面から作成できます - 書き出し形式 — PNG / JPEG
StoreShots が引き受けているのは「型を組むための部品と、ストア要件どおりの書き出し」までです。 どの型を選ぶかという判断そのものは、現状では利用者側に委ねられています。
// 07テンプレート化を検討しています
前節のとおり、今は各スライダーを自分で動かして構図を組む必要があります。 ただ、この記事で見たようにパターンが有限であるなら、 そこはテンプレートとして先回りできるはずです。
具体的には A〜F の型をプリセットとして持たせ、 型を選んで画像とコピーを入れれば全枚数ぶん揃うという形にできないかを考えています。 優先度としては、対応済みの A・B・D-1・D-2 をプリセット化するのが先で、 その次に未対応の C-2（横向き出力）と E（背景の連結）を機能として足す、という順序になりそうです。
とはいえ「この型が欲しい」「この型は要らない」という感覚は、 実際に使う側と私たちの想像とでずれているかもしれません。 運営者情報のページに連絡先がありますので、要望があればぜひお寄せください。
StoreShots
ブラウザだけで完結するストア用スクリーンショット作成ツールです。 端末モックアップへの流し込みと、ストア要件に沿ったサイズでの書き出しに対応しています。 登録不要・無料で、画像はサーバーに送信されません。
// ref関連記事
本記事の内容は、ストア掲載ページの実例を観察して整理した経験則であり、各ストアが定めた公式のガイドラインではありません。 App Store は Apple Inc.、Google Play は Google LLC の商標です。本記事は各社が提供・承認したものではありません。