Apple.com製品ページ風設計ガイド -- "Product Hero"
apple.com 製品ページの本質は「製品が全て」という哲学にある。UIは製品の背景に徹し、巨大な余白の中に製品が浮かぶ。スクロールという行為そのものがコンテンツ体験の一部となる。
本テンプレートは Apple のプロダクトページから着想を得た「Product Hero」設計システムを定義する。ダークとライトのセクションが映画のシーンのように交互に現れ、1セクションに1メッセージという原則が圧倒的なインパクトを生む。
核心となる設計思想
1セクション1メッセージ。80px超のヘッドライン、1-2文のサブコピー、そして製品画像。それ以外は何も置かない。余白は最も重要な「要素」であり、要素間の余白は要素そのものより多く取る。
1. デザイン哲学 -- 「製品が全てを語る」
Apple.com の手法 -- 余白のミニマリズム
apple.com は1ページに大量の情報を載せているが、1画面（ビューポート）に見えるのは常に1つのメッセージだけ。巨大なテキスト、短いコピー、そしてフルブリードの製品画像。この「圧倒的に少ない情報量」が逆に強い印象を残す。
セクション交互配置の効果
ダーク（#000000）とライト（#ffffff）と グレー（#f5f5f7）のセクションが交互に現れることで、スクロールするたびに「新しいシーン」が始まる感覚を生む。映画のシーン切り替えのような体験がユーザーを引き込む。
ヒーロープレビュー
2. カラーパレット
ダークセクション
Hero
#000000
Text on Dark
#f5f5f7
Light Blue
#2997ff
ライトセクション
Base
#ffffff
Subtle
#f5f5f7
Headline
#1d1d1f
Secondary
#86868b
Apple Blue
#0071e3
3. タイポグラフィ
フォントスケール
Hero Display 80px
Section Display 56px
Subheadline 28px
Body Large -- Apple製品の特徴を簡潔に伝える本文テキスト
Body -- 製品仕様や機能の説明に使われる標準テキスト
Caption / Nav Link -- 12px
4. コンポーネント
ナビゲーション（ブラー背景）
CTA ボタン
スペックグリッド
チップ
A18 Pro
ディスプレイ
6.7"
カメラ
48MP
バッテリー
33時間
5. レイアウトパターン
セクション交互配置
Apple の製品ページは以下のパターンでセクションが交互に並ぶ:
- ダークヒーロー (#000000) -- 製品名 + キャッチコピー + 製品画像
- ライト機能紹介 (#ffffff) -- 機能の大見出し + サブコピー + 画像
- グレースペック (#f5f5f7) -- スペック比較グリッド
- ダーク機能紹介 (#000000) -- 別機能の紹介
- ライト比較テーブル (#ffffff) -- モデル比較
Dark Hero Section
#000000
Light Feature Section
#ffffff
Gray Spec Section
#f5f5f7
Dark Feature Section
#000000
スペーシング原則
- ヒーロー上下余白: 120px
- セクション上下余白: 80px
- 見出しとサブコピー間: 16px
- サブコピーとCTA間: 32px
- コンテンツ最大幅: 980px（テキスト）/ 100%（画像）
6. 比較テーブル
Pro
Pro Max
ディスプレイ
6.3"
6.7"
チップ
A18 Pro
A18 Pro
カメラ
48MP
48MP + 5x
7. 実装上の注意点
Do
- 1セクション1メッセージを厳守する
- ヒーローは80px以上の巨大テキストで始める
- ダークとライトのセクションを交互に使う
- CTAは pill shape で統一する
- テキストは中央揃え
- サブコピーは1-2文に収める
- ナビはブラー背景で常に透過
Don't
- カード型レイアウトを多用しない
- 影を装飾的に使わない
- テキストを長く書かない
- 明るい色を多用しない
- 複数のCTAを並べない
- フォントサイズを小さくしすぎない（最低14px）
8. レスポンシブ対応
| ブレークポイント | ヒーロー文字 | スペック列 | 画像 |
|---|---|---|---|
| Mobile (<734px) | 40px | 1列 | 幅100% |
| Tablet (734-1068px) | 64px | 2列 | 幅100% |
| Desktop (1068px+) | 80px | 3-4列 | 最大幅 |
9. Agent プロンプト例
ダークヒーロー:
背景 #000000、100vh。ヘッドライン #f5f5f7, 80px, weight 700, letter-spacing -1.5px。
サブコピー rgba(245,245,247,0.80), 21px。CTA #0071e3 pill。スペックセクション:
背景 #f5f5f7。4カラムグリッド。数値 #1d1d1f, 28px, weight 600。
ラベル #86868b, 14px。中央揃え。ナビゲーション:
背景 rgba(255,255,255,0.72) + blur(20px)。高さ 44px。sticky。
リンク #86868b, 12px。CTA #0071e3 pill 12px。