apple-design-web

Apple Design — Web（apple.com の言語 · スクロールテリング · エンジニアリング）

apple.com を再現する：ページの定型、象徴的なスクロールエフェクト、そしてそれが実際にどのように構築されているか。

使用する場面

• プレミアムなマーケティング／製品ランディングページを構築するとき。
• スクロール駆動のアニメーション（フレームスクラブ、ピン留め、パララックス、リビール）を実装するとき。
• Apple グレードのページに向けたフロントエンドアーキテクチャを決定するとき。

基本ルール

• ライトファースト（何よりも先にこれを行う）。 apple.com は主に ライト（#f5f5f7／白）です。ダークなヒーローは 例外 であり、意図のある瞬間に ≤1 回だけ使用します——決してデフォルトではありません。実製品を見せる こと。実デバイスのフレーム内に（実際のスクリーンショットを）配置し、抽象的なプレースホルダーは決して使いません。抑制 > 無意味なエフェクト——apple-design の references/restraint-and-antislop.md を参照してください。
• フラッグシップページではモーションにコミットする（ここではモーションこそが実質です）。 フラッグシップ／マーケティング／製品の表面では、静的なワンショットフェードだけのページは 死んだテンプレート であり、Apple グレードではありません。インタラクションの目録にコミットしてください——継続的な 減衰スクロールプログレス トランスフォーム（#1 の差別化要素）、スティッキーでピン留めされた振り付けシーン、セクション間の テーマモーフ（ライト↔ダーク）、そしてスクロールが止まったときに息づく アンビエントフロート。これはライトファースト／実製品／抑制を弱めるものではありません——両方を満たす必要があります：生き生きと AND 品味のある。モーションの予算は表面によってスケールします（ユーティリティ表面はずっと少なくなります）。references/scrollytelling-techniques.md の冒頭にある目録と、apple-design の references/restraint-and-antislop.md の表面軸を参照してください。
• 定型： スリムなスティッキー半透明ナビ（約 44〜48px、ブラー、チャプター適応色）→ 大きな中央揃えの製品ヒーロー（名前 + 1 つのタグライン + 「Learn more ›」／「Buy ›」）→ 交互に並ぶフルブリードの機能セクション、それぞれ 1 つのアイデア → ベントー機能グリッド → 技術仕様 → 太いマルチカラムフッター。
• スクロールテリングの決定木（現在の apple.com はビデオファースト）： シネマティックなヒーロークリップ → ビデオ currentTime スクラブ（apple.com が出荷しているもの——preload=none + 遅延スクロールトリガーの src + 静的開始／終了フレームの JPEG フォールバック + reduced-motion→静的フレーム。モバイル Safari のスクラブは不安定 → ImageBitmap ハイブリッド）。ユーザーが回転させるインタラクティブ 3D 製品 → WebGL-3D スクロールビューア（three.js + GLTF、KTX／Basis テクスチャ——Apple 自身の製品ビューアパターン）。多数の鮮明なフレーム／低いフレーム数でのフレーム精度 → canvas 画像シーケンス (2022 年以前の古典的な代替手段——プリロード、rAF で描画、スライディングウィンドウでの createImageBitmap デコード + .close())。継続的な要素モーション → 減衰スクロールプログレス（シャドウスクロール値を lerp する。エンジンは apple-design-motion にあります）。ライト↔ダークのチャプター → セクション間テーマモーフ（IO の離散スナップがデフォルト、rAF-lerp または animation-timeline のバリアント）。チャプター化されたカードデッキ → スティッキースタック（CSS position:sticky の段階的な top + 昇順の z-index、JS のリシード強化）。シンプルなリビール／パララックス → CSS animation-timeline: view()/scroll() と @supports + IntersectionObserver フォールバック。再利用可能な減衰スクロール + ポインタ反応エンジンは apple-design-motion にあり、このスキルはそれをページレベルのシーンに構成します。メディアの調達、エンコード、フレームデコード + 配信 → references/media-assets-and-delivery.md。
• エンジニアリング： apple.com は プログレッシブエンハンスメントされた HTML/CSS/バニラ JS（観察されたもの：Browserify の ac-* バンドル）であり、重い SPA ではありません。レスポンシブな <picture>／srcset、loading="lazy"、コンテンツハッシュ化されたイミュータブルアセット、遅延 JS。
• 決してスクロールジャックしない、巨大で最適化されていないフレームセットを決して出荷しない、常にモーションを prefers-reduced-motion でガードする。

参考資料

ファイル	用途
references/web-applecom-language.md	ページの構造 + 実測スペック、ナビ/ヒーロー/フィーチャー/フッターの HTML+CSS レシピ
references/scrollytelling-techniques.md	apple.com/iphone のインタラクション目録（生きた挙動のランキング、必ず検討すべきコアと装飾の区別）+ 動作するコード: canvas スクラバー、スティッキーシーン、IO リビール、CSS スクロール駆動アニメーション、セクションをまたぐテーマ/背景モーフ、スティッキー積み重ね型チャプターカード
references/web-frontend-engineering.md	観察された apple.com のアーキテクチャ、画像/フォント/パフォーマンス戦略、PE パターン
references/media-assets-and-delivery.md	現在の apple.com がヒーローメディアを配信する方法（ビデオファーストのリバーススペック、WebGL-3D ビューア、コンテンツハッシュ URL） · 更新された技術選定ツリー · ライセンス済みコードパターン（出所 + LICENSE） · アセット調達の IP 可否 + 自社製のみを出荷するガードレール · エンコード/キャッシュ/フレームデコード（createImageBitmap、スライディングウィンドウ、video keyint=5）

よくある間違い

• 雑然としたヒーロー / 競合する複数の CTA、弱い余白、製品の背後で忙しい背景。
• 静的なマーケティングページに重量級フレームワークを出荷すること、レンダリングをブロックする JS、最適化されていない画像。
• カクつく非 rAF のスクロールハンドラー、reduced-motion のフォールバックがない、アニメーションの背後に隠れたコンテンツ。
• フラッグシップページのアニメーション不足 — 静的なワンショット IO フェードだけ = 死んだテンプレート。マーケティング/製品の表面では、連続的な減衰スクロールプログレス + テーマモーフ + アンビエントフロート（目録）にコミットしてください。同様に: ユーティリティの表面でのアニメーション過多 — モーションバジェットを表面の軸に合わせてください。

関連: 減衰スクロール + ポインター反応エンジン → apple-design-motion · タイポグラフィ/カラー/グリッド → apple-design-foundations · ナビのガラス → apple-design-materials · CDN/画像配信 → apple-design-backend · コピーと説得 → apple-design-tactics。