App Storeスクリーンショットのカラーパレット
多くのApp Storeスクリーンショットのパレットは同じ理由で失敗します。27インチのモニターでは美しく見えるのに、App Storeが実際に表示するサイズでは判別しにくくなってしまうのです。カルーセルは商品ページではフル解像度で表示されますが、検索結果や「このアプリに似ている」欄ではサムネイル幅での表示になります。どちらかのサイズでしか機能しないパレットは、もう一方でコンバージョンを失います。
3つの表示コンテキスト
これらは3つの独立したデザイン制約として捉えてください。一方で優れたパレットが、もう一方では劣る場合があります。
- フルサイズ（iPhoneで1290 × 2796）。商品ページの表示。タップ後にユーザーが着地する場所です。微妙なグラデーションの移行、細かいテキスト、複雑な重ね塗りの色もここでは読み取れます。多くのデザイナーはこのサイズのみでテストしています。
- 検索サムネイル（約300 × 650）。App Store検索で、競合アプリのアイコンと並んで表示される最初の3つのカルーセルパネルです。細かいディテールは消えます。コントラストの高いカラーブロックは読み取れますが、微妙なグラデーションは潰れてしまいます。
- 周囲のアプリとの比較。検索結果でスクリーンショットが単独で表示されることはありません。周囲の7つのアプリにはそれぞれ独自のパレットがあります。同じカテゴリのアプリが全員暖色系を使っているときに自分も暖色系にすると、スクリーンショットが壁に溶け込んでしまいます。
5色ルール
5色がおおよその上限です。メインの背景色1色（または2色間のグラデーション）、テキストのメイン色1色、強調用のアクセント色1色、そして実際のアプリのスクリーンショットから入ってくる色です。6色目を追加しようとすると、通常は上に追加するのではなく、どこかの色を削ることになります。
これは美学の問題ではありません。サムネイルは視覚情報を大幅に圧縮するため、色が多すぎるパレットはくすんだ一色のような見た目になってしまうからです。4〜5色という範囲であれば、200pxでもそれぞれの色が明確に区別できます。
コントラスト: WCAG AAは省略できません
パネルの背景に対するキャプションのテキストは、WCAG AA（本文テキストで4.5:1、24pt以上の大きなテキストで3:1）を満たす必要があります。Appleが確認しているからではありません。Appleは確認していません。サムネイルサイズではAA未満のものは文字通り読めなくなるからです。エクスポート前に、最終的なキャプションの色と背景色の組み合わせをコントラストチェッカーで確認してください。
よくある失敗例：わずかに明るいダークグレーのグラデーションの上にダークグレーのテキスト。Figmaでは洗練されて見えますが、サムネイル幅では完全に消えてしまいます。
カテゴリの慣習は出発点であってルールではありません
自分のApp StoreカテゴリのトップApp 20件を確認してください。主要なパレットカラーをメモします。それがカテゴリの慣習、つまりユーザーが「このカテゴリで信頼できるアプリ」と結びつけているパレットです。それに合わせる（リスクは低く、差別化も低い）か、意図的に外す（リスクは高く、うまくいけば差別化は高い）かを選べます。
慣習を外すことが有効なのは、明確な理由がある場合です。Notionのカテゴリ（生産性）は2022年当時、明るいパステル調が主流でした。Notionはほぼモノクロに近い配色と微妙な温かみを選択し、より真剣なプロダクトとして映りました。Headspaceのカテゴリ（メンタルウェルネス）は柔らかいパステルであふれていましたが、Headspaceのディープオレンジのグラデーションは攻撃的にならずに目立っていました。「まず合わせてから外す」が安全な手順です。最初のプロダクトローンチでは合わせ、インストールデータを比較できるようになってから初めて外しましょう。
「検索での隣接比較」チェック
リリース前に次を実施してください。自分のアプリがランク入りしている（またはランク入りを目指している）キーワードを2〜3件、App Storeで検索します。そのキーワードのトップアプリ下に表示されるスクリーンショットの帯を確認します。デザインしたパレットは、周囲のアプリから目立っているでしょうか、それとも溶け込んでいるでしょうか。
これは30秒でできるチェックですが、多くのチームが省略しています。単独で見たときにユニークに見えたスクリーンショットのパレットが、検索結果で上下に並ぶ5つの競合と同じ青から紫へのグラデーションになっていることがあります。修正はたいていアクセントカラー1色の変更で済みます。
ダーク、ライト、またはその他
明確なポジションを決めてください。背景を主にダーク系にするか、主にライト系にするか、またはパネル全体で一貫したグラデーションファミリーにするかです。1つのカルーセルの中でダークとライトのパネルを混在させるのは最もよくある失敗パターンです。デザインにディレクションがなかったように見えてしまいます。
カテゴリごとにどちらが優れているかはダークモードとライトモードの比較を参照してください。要点：ゲーム・音楽・写真・動画・AIではダークが優位、生産性・教育・ウェルネスではライトが優位、それ以外は五分五分でブランドが決め手になります。
カラーとローカライズ
色はロケールによって異なる意味を持ちます。赤は中国語圏では縁起の良い色（繁栄）ですが、ヨーロッパの多くの地域ではネガティブな印象があります。白は東アジアの多くの地域で葬儀の色とされています。明るい緑は「進め」を意味する場所もあれば、「嫉妬」を意味する場所もあります。多くのアプリにとって、こうした差異はブランドの一貫性を上回るほど大きくありません。1つのパレットを選んでグローバルに展開して問題ないでしょう。ロケールごとのパレットを気にする必要があるのは、色の象徴性がポジショニングの重要な要素（高級品、ウェルネス、金融など）であり、かつアクションに移せるデータがある場合に限られます。
今週やるべきこと
- 現在のスクリーンショットを幅200pxで確認してください。そのサイズで読めないものは変更が必要です。
- すべてのキャプションについて、パネルの背景に対してWCAG AAのコントラストを確認してください。
- 主要な3つのキーワードで検索し、周囲の文脈をスクリーンショットに収めてください。自分のパレットは目立っていますか。
- 新しいデザインをリリースする場合は、最大5色に絞ってください。6色目を追加するということは、どこかの1色を削ることを意味します。