Product Page Headerは、App Storeでアプリを開いた人が最初に目にするものです。AppleがWWDC26で追加したもので、iOS 27とiPadOS 27以降で表示されます。この記事では、正確なサイズ、デザインで意識すべきセーフエリア、ヘッダーが表示される場所を解説します。
結論から言うと： Product Page Headerは3840 × 1646ピクセル（21:9）、透過のないJPEGまたはPNGです。大事な要素はすべて、中央にある1646 × 661のアートセーフエリアに収めてください。同じサイズの5〜30秒の動画を代わりに使うこともできます。
Product Page Headerとは #
プロダクトページの一番上、Appアイコン、名前、スクリーンショットの上に表示される横長の画像または動画です。スクリーンショットと違って、アプリの画面を見せる必要はありません。Appleは、ブランド、季節のキャンペーン、新しいコンテンツなどに使い、プロダクトページ全体の雰囲気を決めるものにすることを勧めています。
ヘッダーは3つあるクリエイティブアセットの1つで、ほかに検索結果アセットと、その両方に使えるユニバーサルアセットがあります。これらがどう組み合わさるかは、WWDC26での変更点のまとめで解説しています。
表示される場所 #
- プロダクトページの最上部。iPhoneでもiPadでも、どの向きでも表示されます。
- カスタムプロダクトページ。 ページごとに独自のヘッダーを設定できるので、広告やウェブサイトからのリンク先に、それに合ったビジュアルを表示できます。
- プロダクトページの最適化。 異なるヘッダーのビジュアルを比較テストできます。
- アプリがフィーチャーされたとき。 App Storeでアプリがフィーチャーされると、クリエイティブアセットが表示されることがあるとAppleは説明しています。
ヘッダーが表示されるのはiOS 27とiPadOS 27以降だけです。それより古いバージョンのユーザーには、ヘッダーのないプロダクトページが表示されます。
Product Page Headerのサイズ #
| 画像 | 動画 | |
|---|---|---|
| サイズ | 3840 × 1646ピクセル | 3840 × 1646ピクセル |
| アスペクト比 | 21:9 | 21:9 |
| 形式 | .jpeg、.jpg、.png | .mov、.m4v、.mp4 |
| フレームレート | — | 30または60 fps |
| 長さ | — | 5〜30秒 |
| その他のルール | アルファチャンネルや透過は不可 | ループ再生。デフォルトはミュートで、ユーザーが解除可能 |
サイズは範囲ではなく、この値ちょうどです。ヘッダーの枠には5244 × 2950のPNGのユニバーサルアセットも使えます。詳しくはユニバーサルアセットのガイドをご覧ください。サイズはAppleのクリエイティブアセットの仕様に基づいており、2026年10月21日に確認しました。
ヘッダーのセーフエリア #
Appleはドキュメントにセーフエリアの数値を載せていません。数値があるのは、PhotoshopとPixelmator用のヘッダーテンプレートの中で、アートセーフエリアの枠として示されています。正確な縮尺で描くと次のとおりです。
Product Page Header 21:9
3840 × 1646 px
セーフエリア 1646 × 661（キャンバスの43% × 40%）
| ピクセル | キャンバスに占める割合 | |
|---|---|---|
| キャンバス | 3840 × 1646 | 100% |
| アートセーフエリア | 1646 × 661 | 幅の43%、高さの40% |
| セーフエリアの位置 | x 1097、y 493（左上の角） | 縦横とも中央 |
| 左右の余白 | それぞれ1097 | |
| 上下の余白 | それぞれ493 |
この枠はかなり小さめです。1枚の画像で、縦に持ったiPhoneと横に持ったiPadの両方を埋めなければならないため、幅の半分以上、高さの大部分が切り取られることがあります。そこで、次の点を意識しましょう。
- テキスト、ロゴ、主役になる要素は枠の中に入れる。 見出し、キャラクターの顔、製品の写真などです。
- 残りは切り取られても困らないもので埋める。 背景、テクスチャ、中央だけが残っても成り立つシーンなどです。
- 要素を端に揃えない。 左上の角に置いたロゴはセーフエリアの外にあり、消えてしまうかもしれません。
- プレビューで確認する。 App Store Connectのプレビューでは、提出前に、iPhoneとiPad、両方の向き、すべての言語でページを確認できます。
Appleによるデザインのヒント #
- 伝えたいことは1つに絞る。 情報が詰め込まれた雑然としたヘッダーは埋もれてしまいます。
- 初めて訪れた人に向けてデザインする。 アプリを知らない人にとって最も魅力的なものを見せましょう。
- テキストを入れるなら短く。 画像を説明するのではなく、画像に何かを付け加える短いフレーズにし、対応するすべての言語に翻訳しましょう。
- 価格、割引、URL、著作権記号は入れない。 ほかのプラットフォームやストア、Editor's ChoiceなどのAppleのアワードも入れないでください。
- 4+のコンテンツにする。 アプリのレーティングがそれより高くても同様です。
- 動画の場合： 印象的なポスターフレームを選び、一番の見せ場から始め、きれいにループさせ、音声なしでも伝わるようにしましょう。
ヘッダーのアップロード方法 #
方法は2つあり、どちらもApp Reviewを通ります。
- アプリのバージョンと一緒に。 App Store Connectのバージョンページでヘッダーを追加し、プレビューで確認して、バージョンを提出します。
- Asset Libraryで。 画像や動画を単独でアップロードし、新しいバージョンなしで審査に提出します。
アセットが承認されれば、ヘッダーをそのアセットに切り替えてすぐに公開できます。季節やキャンペーンのヘッダーも、リリースではなく、ちょっとした変更で済みます。
ヘッダーはスクリーンショットの代わりにはならない #
スクリーンショットは引き続きヘッダーのすぐ下に表示され、ユーザーがダウンロードを決める前にスクロールして見るのも、やはりスクリーンショットです。ヘッダーとスクリーンショットは、同じ色、タイポグラフィ、メッセージを使ったひとつのセットとして計画し、一緒に更新しましょう。