アクセシブルなApp Storeスクリーンショット：コントラスト、文字サイズ、代替テキスト
App Storeのスクリーンショットは、ウェブページのようにスクリーンリーダーで読み上げる形には対応していません——Appleはスクリーンショットの代替テキストをユーザーに直接公開していないためです。しかし、視覚的なアクセシビリティのルール（コントラスト、文字サイズ、色の独立性）は確実に適用されており、サムネイルサイズでの読みやすさを左右するルールと同一です。同じ作業で両方を達成できるため、取り組む価値があります。
コントラスト：WCAG AAをベースラインとして
WCAG AAのコントラスト比の基準：
- 通常のテキスト：背景に対して最低4.5:1。
- 大きなテキスト（24pt以上の標準、または18pt以上の太字）：最低3:1。
- グラフィック要素・UIコントロール：3:1。
コントラストチェッカー（無料のものが多数あります）を使って、各キャプションとそれが置かれたパネルの背景とのコントラスト比を確認してください。背景がグラデーションの場合は、キャプションが置かれているグラデーションの最も明るい部分と最も暗い部分の両方でチェックしてください。
よくある失敗例：明るいオレンジから暗いオレンジへのグラデーション上に白いテキストを置くケースです。キャプションが明るいオレンジの部分に重なると、コントラストが4.5:1を下回り、サムネイルサイズでテキストが見えなくなります。
サムネイルサイズでの文字サイズ
App Storeのスクリーンショットは複数のサイズで表示されます：
- プロダクトページでのフルサイズ（幅約1290px）。
- 検索結果のプレビュー（幅約600px）。
- 検索結果のサムネイル（幅約300px）。
デザインファイル上で1290 × 2796のキャプションを60pxで作成した場合、300pxの検索サムネイルでは約14pxで表示されます。14pxは判読性の推奨最小サイズを下回ります。解決策：キャプションを80〜100pxでデザインすることで、サムネイルでは18〜22pxで表示されます。特に検索結果に表示されるパネル1〜3で重要です。
色の独立性
情報の伝達を色だけに頼らないようにしてください。最もよくある問題：背景との違いが色相のみ（たとえば緑の背景に赤いテキスト）のキャプションテキストです。赤緑の色覚特性を持つユーザーには、この2色がほとんど区別できません。
確認方法：スクリーンショットをグレースケールにしても、すべてのキャプションが読めるかどうかを確認してください。読めれば色の独立性は確保されています。読めない場合は、色相の違いだけでなく、明度（輝度）の差を増やしてください。
App Store Connectでの代替テキスト
App Store Connectは、ウェブページのalt属性のような形でスクリーンショットの代替テキストを公開していません。しかし、App Store ConnectにはスクリーンショットごとにApp Storeを閲覧するVoiceOverユーザー向けの「アクセシビリティタグ」フィールドがあります。必ず入力してください。スクリーンショットに何が写っているかの短い説明を記入します。「スクリーンショット1」ではなく、「月間支出の概要を表示したホーム画面」のように書きましょう。
これは最も効果の高いアクセシビリティ改善です。ほとんどの開発者が取り組んでいないためです。現状、App Storeを閲覧するVoiceOverユーザーは、大多数のアプリで「スクリーンショット1、スクリーンショット2」という読み上げを聞いています。パネルごとに数文の説明を書くだけで、そのユーザー層にとってのリスティングの使いやすさが劇的に向上します。
「小さいフォント・装飾的な書体」のアンチパターン
装飾的なフォント（手書き風スクリプト、極細のディスプレイフォント）は、ほぼ例外なくアクセシビリティとサムネイルの両方のテストで失敗します。フルサイズで優雅に見える細いストロークも、300pxでは読めなくなり、ロービジョンのユーザーには判読不能になります。
これらの装飾的なスタイルは、カルーセル全体でアクセントとして使う単語1つまでにとどめてください。本文のキャプションや重要なテキストには、対象サイズでストロークの太さが均一なフォントが必要です——現代的なグロテスクサンセリフ（Inter、SF Pro、Roboto）のほとんどは問題なく使えます。
キャプションの配置とセーフエリア
Appleは、App StoreのカルーセルにUI（「入手」ボタン、年齢レーティングチップ、インストール後の「開く」ボタン）を重ねて表示することがあります。キャプションがそれらの領域に重なると、隠れてしまいます。セーフゾーンにキャプションを配置してください：左右各60px、上部80px、下部はApp Store UIのために200px空けます。
リリース前に確認すること
- すべてのキャプションを、それが置かれたパネルの背景に対してコントラストチェッカーで確認してください。
- サムネイルシミュレーター（またはFigmaでサイズ変更するだけでも可）でスクリーンショットを幅300pxで確認してください。すべてのキャプションがまだ読めることを確認してください。
- グレースケールテストで色の独立性を確認してください。
- App Store Connectの各パネルにアクセシビリティタグを記入してください。
- テストチームにVoiceOverユーザーがいる場合は、リスティングを実際に閲覧してもらい、フィードバックを集めましょう。
アクセシビリティを超えた意義
WCAGがコード化したコントラストとサイズのルールは、人間の視覚に関する研究から導かれています。恣意的なものではなく、一定割合のユーザーが快適にテキストを読めなくなる閾値です。AA基準でデザインすることは、高齢のユーザー、屋外の明るい画面を使うユーザー、軽度の未矯正視力の問題を抱えるユーザー、そして検索結果を高速スクロールするすべてのユーザーを含む幅広い層のためにデザインすることを意味します。
ロービジョンのユーザーがスクリーンショットを読みやすくするルールは、晴れた日の電車の中でApp Storeをスクロールするユーザーにとっても同様に役立ちます。同じ問題、同じ解決策です。