デザイン未経験でも合格ラインのApp Storeスクリーンショットを作る方法
デザインがリリースの妨げになるべきではありません。テンプレートを正しく選び、いくつかの基本ルールを守れば、個人開発者でもプロらしいスクリーンショットを作れます。肝心なのは、自由な思いつきを減らし、一貫性を増やすことです。
結論
デザインの知識は不要です。既成テンプレートを1つ選び、配色とフォントを統一し、1枚につき1つの売りだけを載せ、コピーは短い文で。あとは各デバイスの寸法で書き出すだけで、プロらしい見た目になります。
空白のキャンバスではなく、既成テンプレートから始める
空白のキャンバスは、苦手な領域に足を踏み入れさせるだけです。既成テンプレートはレイアウト、余白、セーフエリア、デバイスフレームまでもう整えてあります。あなたはスクリーンショットとコピーを差し替えるだけです。
- アプリの雰囲気に近いテンプレートを選ぶ。いちばん派手なものは狙わない。
- 実際のスクリーンショットをスロットに入れ、同じビジュアルスタイルを保つ。
- 変更するのはコピーだけ。レイアウトと余白には触らない。
- 各デバイスの寸法で書き出し、セーフエリアを1つずつ確認する。
配色とフォント:少ないほど良い
配色は2〜3色に抑えます。主色1つ、強調色1つ、残りは白黒グレー。ブランドカラーを強調に使うほうが、多色を並べるよりずっとプロらしく見えます。
フォントはサンセリフ1ファミリーで十分です。見出しは太字、本文は標準。同じ画像内で2〜3種を混ぜるのではなく、サイズとウェイトで階層を作ります。
コピー:1行に1つの売り
1枚につき売りは1つ。見出しは数語に収め、ひと目で読み終えられるようにします。
機能名を並べるのではなく、ユーザーが得る結果を描く。専門用語や長い従属節は避けます。
複数デバイスへの寸法対応とよくある失敗
同じデザインをiPhone、iPad、必要なら折りたたみにも合わせます。内容が同じなら同じデザインをそれぞれ書き出せますが、寸法は各自の要件を満たし、セーフエリアも再確認が必要です。
自作でよくある失敗は、文字が小さすぎる、要素が端に張り付いている、どの画像も文字で埋まっている、色が多すぎる、スクリーンショットに実在のキャリア名やテストデータが写っている、などです。順に確認すれば見栄えはぐっと良くなります。
FAQ
デザイン経験がまったくなくても合格レベルのスクリーンショットは作れますか?
できます。既成テンプレートを使い、配色とフォントを統一し、コピーを短くすればプロらしい見た目になります。肝心なのは自由なアレンジを控えることです。
1つのデザインを全デバイスにそのまま使えますか?
内容が同じなら同じデザインを使い回せますが、各デバイスのピクセル寸法はそれぞれ満たす必要があり、セーフエリアも再確認が必要です。
1枚あたり、どれくらいの文字量が適切?
少ないほど良いです。1枚に売りは1つ、見出しは数語に収め、残りは画面そのものに任せます。文字が多いと要点が見えなくなります。
システムフォントを使ってもよい?
使えますし、おすすめです。システムのサンセリフはクリアで多言語対応も良好。スタイルを統一し、ウェイトとサイズで階層を作れば十分プロらしくなります。
デザイン未経験でも、プロらしいスクリーンショットを
Store Connect Studioには既成テンプレートと公式デバイスキャンバスを内蔵。スクリーンショットとコピーを差し替えるだけで出図でき、MacでもiPhoneでも作業し、ワンタップでApp Store Connectへ同期できます。