デザイン未経験でも合格ラインのApp Storeスクリーンショットを作る方法

Store Connect Studio ·

デザインがリリースの妨げになるべきではありません。テンプレートを正しく選び、いくつかの基本ルールを守れば、個人開発者でもプロらしいスクリーンショットを作れます。肝心なのは、自由な思いつきを減らし、一貫性を増やすことです。

結論

デザインの知識は不要です。既成テンプレートを1つ選び、配色とフォントを統一し、1枚につき1つの売りだけを載せ、コピーは短い文で。あとは各デバイスの寸法で書き出すだけで、プロらしい見た目になります。

空白のキャンバスではなく、既成テンプレートから始める

空白のキャンバスは、苦手な領域に足を踏み入れさせるだけです。既成テンプレートはレイアウト、余白、セーフエリア、デバイスフレームまでもう整えてあります。あなたはスクリーンショットとコピーを差し替えるだけです。

  1. アプリの雰囲気に近いテンプレートを選ぶ。いちばん派手なものは狙わない。
  2. 実際のスクリーンショットをスロットに入れ、同じビジュアルスタイルを保つ。
  3. 変更するのはコピーだけ。レイアウトと余白には触らない。
  4. 各デバイスの寸法で書き出し、セーフエリアを1つずつ確認する。

配色とフォント:少ないほど良い

配色は2〜3色に抑えます。主色1つ、強調色1つ、残りは白黒グレー。ブランドカラーを強調に使うほうが、多色を並べるよりずっとプロらしく見えます。

フォントはサンセリフ1ファミリーで十分です。見出しは太字、本文は標準。同じ画像内で2〜3種を混ぜるのではなく、サイズとウェイトで階層を作ります。

コピー:1行に1つの売り

1枚につき売りは1つ。見出しは数語に収め、ひと目で読み終えられるようにします。

機能名を並べるのではなく、ユーザーが得る結果を描く。専門用語や長い従属節は避けます。

複数デバイスへの寸法対応とよくある失敗

同じデザインをiPhone、iPad、必要なら折りたたみにも合わせます。内容が同じなら同じデザインをそれぞれ書き出せますが、寸法は各自の要件を満たし、セーフエリアも再確認が必要です。

自作でよくある失敗は、文字が小さすぎる、要素が端に張り付いている、どの画像も文字で埋まっている、色が多すぎる、スクリーンショットに実在のキャリア名やテストデータが写っている、などです。順に確認すれば見栄えはぐっと良くなります。

FAQ

デザイン経験がまったくなくても合格レベルのスクリーンショットは作れますか?

できます。既成テンプレートを使い、配色とフォントを統一し、コピーを短くすればプロらしい見た目になります。肝心なのは自由なアレンジを控えることです。

1つのデザインを全デバイスにそのまま使えますか?

内容が同じなら同じデザインを使い回せますが、各デバイスのピクセル寸法はそれぞれ満たす必要があり、セーフエリアも再確認が必要です。

1枚あたり、どれくらいの文字量が適切?

少ないほど良いです。1枚に売りは1つ、見出しは数語に収め、残りは画面そのものに任せます。文字が多いと要点が見えなくなります。

システムフォントを使ってもよい?

使えますし、おすすめです。システムのサンセリフはクリアで多言語対応も良好。スタイルを統一し、ウェイトとサイズで階層を作れば十分プロらしくなります。

Store Connect Studio

デザイン未経験でも、プロらしいスクリーンショットを

Store Connect Studioには既成テンプレートと公式デバイスキャンバスを内蔵。スクリーンショットとコピーを差し替えるだけで出図でき、MacでもiPhoneでも作業し、ワンタップでApp Store Connectへ同期できます。

App Store ↗

← Store Connect Studio