Figma でアプリのストアスクリーンショットを作成する方法 — App Store / Google Play 対応

取り組みの背景

アプリをストアに公開する際、最初に目に飛び込むのがスクリーンショットです。ユーザーの印象を大きく左右するこの素材を、いかに効率よく、高品質に制作するか——これがアプリのダウンロード数を大きく変えます。

App Store・Google Play のスクリーンショット仕様をおさえる

スクリーンショット制作を始める前に、各プラットフォームの仕様を正確に理解することが重要です。仕様違いは後の修正に多くの時間を費やすことになります。

App Store の詳細仕様と各デバイス対応

App Store では複数のデバイスサイズに対応する必要があります。各デバイスで異なるスクリーンショットが表示されるため、主要な端末サイズすべてに対応することが推奨されます：

大型デバイス対応（推奨）

6.7 インチ：1290 × 2796 px（アスペクト比 19.5:9）— iPhone 15 Pro Max など
6.5 インチ：1284 × 2778 px（アスペクト比 19.5:9）— iPhone 14 Pro, 15 など
推奨：最低でもこの 2 サイズは対応すること

標準デバイス対応（オプション）

5.5 インチ：1242 × 2208 px（アスペクト比 9:16）— iPhone 8 Plus 互換
4.7 インチ：750 × 1334 px（アスペクト比 9:16）— iPhone 6s など
古いデバイスを考慮する場合に推奨

iPad 対応（タブレットユーザー向け）

iPad（横向き）：2732 × 2048 px（アスペクト比 4:3）
iPad Pro（縦向き）：2048 × 2732 px
ユニバーサルアプリの場合、必ず対応すること

必要枚数は最低 2 枚、最大 10 枚です。Apple は複数サイズのスクリーンショットを用意することで、より良いプレビュー体験をユーザーに提供できると考えています。一般的には、最初の 3-5 枚で主要機能を説明し、残りで詳細機能やユースケースを紹介します。

Google Play の詳細仕様と対応方法

Google Play はシンプルですが、細かい要件があります：

推奨サイズとフォーマット

推奨サイズ：1080 × 1920 px または 1440 × 2560 px
フォーマット：PNG または JPEG（圧縮率は自由）
アスペクト比：9:16 が推奨（9:16 以外でも受け付けるが、表示が崩れる可能性）
最大ファイルサイズ：各ファイル 8 MB（ただし 1-2 MB 程度がベスト）

デバイス別対応考慮

スマートフォン（メイン）：1080 × 1920 px
タブレット：1440 × 2560 px
必要枚数：最低 2 枚、最大 8 枚

Google Play は比較的融通があり、若干のサイズ違いにも対応してくれます。ただし、公式の仕様に合わせることが品質向上につながる点は変わりません。

Figma でテンプレートを準備する

では、実際に Figma でスクリーンショット用のテンプレートを作成していきます。

ステップ 1: フレームの作成と基本設定

Figma を開き、新しいファイルを作成します。左側のメニューから「フレーム」ツール（フレームアイコン）を選択し、以下の寸法でフレームを作成してください：

App Store 用フレーム

フレーム名：AppStore_67in_ja（言語コード付き）
寸法：1290 × 2796 px
背景：白または淡いグレー（編集時の視認性のため）

Google Play 用フレーム

フレーム名：GooglePlay_1080x1920_ja
寸法：1080 × 1920 px
背景：白または淡いグレー

複数の言語対応が必要な場合は、この時点で言語ごとのページを分けておくと管理しやすくなります。Figma のページ機能（左パネルの「Pages」タブ）を使用して、以下のような構成にすることをお勧めします：

Page 1: Template（テンプレート用）
Page 2: Japanese（日本語版）
Page 3: English（英語版）
Page 4: Screenshots_Draft（制作中の版）

ステップ 2: デバイスモックアップの配置と設定

Figma には充実したプラグインが用意されています。「Figma Community」から以下のプラグインを探し、インストールしましょう：

推奨プラグイン

「Device Frame Generator」：多数のデバイスフレームを自動生成
「Apple Devices」：リアルな iPhone/iPad フレーム
「Device Mockups」：複数プラットフォームのモックアップ
「Angle」：デバイスを 3D 角度で傾ける（プレゼン用）

これらを使うことで、リアルなデバイスフレーム（端末の枠）を自動的に挿入できます。プラグインを実行して、先ほどのフレームサイズに合わせたデバイスモックアップを配置します。

設定のポイント：

プラグインを開く前に、フレームの寸法を決めておく
プラグインで正確なデバイスモデルを選択
フレームに自動的にモックアップが適用される
必要に応じて「Angle」プラグインで傾き角度を調整

ステップ 3: 背景とレイアウトの設計

スクリーンショットの背景には、以下のような工夫が効果的です：

背景パターン別の効果

グラデーション背景：単色より視覚的に洗練されます。推奨は 2-3 色の微妙なグラデーション
- 例：淡いブルーから白へのグラデーション
- 作成方法：矩形を描画 → Design パネルの「Fill」で「Gradient」を選択
ブランドカラーの活用：統一感が生まれます。メインカラーを20%の透明度で背景に使用
余白の確保：情報量が多すぎないか確認。1フレームに情報は3-5項目程度が最適
視線の流れ：Z字読みを意識した配置（上左 → 右 → 下左 → 下右）

実装例 実例として、Rork で生成されたアプリの場合、AI が自動生成した UI 上に、さらにテキストレイヤーを追加することでストア向けの見栄えに調整します。

具体的な手順：

AI 生成の UI を PNG で出力
Figma にインポート（右上の「Assets」→ 「Import」）
デバイスモックアップの内側にペースト
テキストレイヤーを上に重ねる
グラデーション背景を下層に配置

テキストとタイポグラフィの工夫

スクリーンショットは「見せる」ための素材です。テキストは必ず含めるべきかは、ASO（App Store Optimization）戦略に基づいて判断してください。

推奨される情報と配置戦略

キャッチコピー：「このアプリで何ができるか」を 1 行で表現
- 文字数：15-25 文字（日本語）
- フォントサイズ：48-56px（1290×2796 フレーム内での推奨）
- 位置：画面上部 20-30% の位置
機能説明：最大 3 行程度に絞る
- 各項目 1-2 行、簡潔に
- 箇条書き形式で視認性向上
- 文字サイズ：32-40px
CTA（行動喚起）：「ダウンロード」など
- ボタン形式で視認性を高める
- 色は目立つ色（ブランドカラーのアクセント色）
- 位置：画面下部

タイポグラフィの階層設計

テキスト要素は以下のような階層構造を持たせることが重要です：

推奨サイズスケール

メインタイトル：48-56px（太字、ウェイト 700-800）
サブタイトル：32-40px（中程度、ウェイト 600）
本文：24-28px（標準、ウェイト 400-500）
補助情報：16-20px（標準、ウェイト 400）

フォント選択

日本語：「Noto Sans JP」「Hiragino Sans」など、見やすい選択肢
英語：「Inter」「Roboto」「Montserrat」など、モダンなサンセリフ推奨
混合：日本語と英語で異なるフォントを使用する場合、バランスを確認

テキストは画面下部に配置し、iPhone の安全領域を考慮して余白を確保します。フォントサイズは最低でも 32px 以上を目安に、視認性を優先しましょう。

安全領域の考慮：

画面上部：ノッチ分（44-48px）の余白を確保
画面下部：ホームインジケータ分（34px）の余白を確保
左右：両側 16-20px の余白を確保

実装のポイント：Rork との組み合わせ

Rork で自動生成されたアプリの UI をスクリーンショットに組み込む場合、以下の手順がおすすめです：

効率的なワークフロー

Rork から UI を PNG 出力
- 「Export」メニューで「PNG」形式を選択
- 解像度は最高品質（2x または 3x）を指定
- 背景は透明にする（チェックボックスで確認）
Figma にインポート
- Assets パネルから「Import」を選択
- 出力した PNG をドラッグ&ドロップ
- フレーム内のデバイス画面領域にペースト
- UI が収まるようサイズ調整
キャッチコピーと背景を追加
- テキストツール（T キー）で冒頭のコピーを入力
- グラデーション背景を下層に配置
- 色調がマッチしているか確認
複数言語版を複製して文字を変更
- フレーム全体を右クリック → 複製
- ページ名を言語別に変更（_ja → _en など）
- テキストレイヤーだけを編集
- レイアウトが崩れないか確認

Rork は複数言語対応を容易にするため、この効率性を最大限活かすことがポイントです。

テンプレート化による時間短縮

最初の 1 言語版に 2-3 時間かかったとしても、一度テンプレートが完成すれば、次のスクリーンショット制作は 30 分程度で完結します。

テンプレート活用の工夫：

Component 化：頻繁に使うテキストスタイルやボタンをコンポーネント化
Variant 設定：言語別・デバイスサイズ別のバリアントを事前に作成
Auto Layout：テキスト変更時にレイアウトが自動的に調整されるよう設定

エクスポート設定と品質管理

最後に、正確にエクスポートします：

PNG エクスポートの最適化

フォーマット：PNG（圧縮率は高くしても品質損失が少ない）
解像度：1x（各フレームの寸法をそのまま出力）
背景を含める：チェックボックスで確認
ピクセルサイズ：指定のサイズから変更しない

一括エクスポートの手順

Figma の右側パネルで「エクスポート」セクションを展開し、複数フレームを一括エクスポートできます。フレーム名を言語コード（例：ja_6_7_inch、en_6_7_inch）にしておくと、後で管理しやすくなります。

手順：

エクスポート対象フレームをすべて選択（Shift+クリック）
右パネルの「Export」セクションを展開
「+」ボタンで新規エクスポート設定を追加
PNG フォーマットを選択
「Export all」でフォルダを選択して一括出力

ファイルサイズと品質のバランス

App Store：各ファイル 5 MB 未満が目安（アップロード時の制限）
Google Play：8 MB 以下（公式上限）
実運用：1-2 MB 程度が最適（ダウンロード速度の観点から）

圧縮方法：

Figma のネイティブ圧縮で 70-80% のファイルサイズを実現
必要に応じて、TinyPNG などでさらに最適化

多言語展開の効率化

複数言語でストア公開する場合、テンプレートの力が活躍します：

言語別制作フロー

ベース言語（日本語）のフレームを完成
- すべてのデザイン、レイアウト、スタイルを確定
- 最低 3-5 言語版を視野に入れた余裕あるテキスト配置
複製して、テキストだけ変更
- ページを複製（右クリック → Duplicate）
- 言語ごとのフォルダに整理
- テキストレイヤーのみ編集
レイアウトが崩れないか確認
- 言語によって文字数が大幅に異なることに注意
- ドイツ語は日本語の 1.5-2 倍長くなる傾向
- 中国語は逆に短くコンパクト
- 自動テキストリサイズを避け、事前に文字数を調査
一括エクスポート
- すべてのフレームを選択
- 一括エクスポート機能で効率化

Figma では、テキスト置き換えが容易で、デザイン変更の心配がありません。ただし、言語によってテキスト長が異なるため、フレーム設計時に十分な余裕を持たせる点が肝心です。

言語別のテキスト長考慮

日本語：基準値（100%）
英語：120-130%
ドイツ語：150-180%
中文（簡体字）：80-90%
中文（繁体字）：85-95%

まとめと次のステップ

Figma を使ったスクリーンショット制作は、テンプレート化することで大幅に効率化できます。最初は時間がかかるかもしれませんが、一度テンプレートを作れば、複数言語対応や A/B テストも容易になります。

制作時間の目安

初回（テンプレート作成）：3-4 時間
2 言語目以降：各 30-40 分
多言語展開（5 言語）：計 4-5 時間で完結

次のステップとして推奨される施策

各プラットフォームでの A/B テスト運用：複数案を用意して効果測定
スクリーンショットの文言改善による CVR 向上：データに基づいた言葉選び
季節ごとのスクリーンショット更新：キャンペーンに合わせたデザイン刷新
ユーザーテスト：実際のユーザーに見せてフィードバック収集

高品質なスクリーンショットは、アプリの成功に不可欠な要素です。ぜひこの方法を参考に、魅力的なストア素材の制作にお役立てください。