Apple Web
Apple.com のような、静かで自信に満ち、タイポグラフィを重視し、プロダクトに奉仕するモーションを持つプロダクトマーケティングページを構築します。このスキルのすべての値は、実際の apple.com プロダクトページ（2026年11月版）から測定され、reference/measured-tokens.md に記録されています。
これはスタイルシステムであり、クローンではありません。Apple のコピー、製品名、ロゴ、写真、アイコンファイル、フォントファイルをコピーしてはいけません。ユーザーの製品に合わせたオリジナルコンテンツを書いてください。
ファイル
| パス | 用途 |
|---|---|
library/apple-web.css | トークン、タイプクラス、レイアウト、コンポーネント。最初にリンクします。 |
library/apple-web.js | スクロールリビール（スクロールによる要素の表示）、スティッキーナビの状態制御、スクロールスクラブ、ギャラリー、カウントアップ機能。依存関係はありません。 |
demo/index.html | すべてのコンポーネントを使用した完全な動作サンプルページ。これを出発点としてコピーします。 |
reference/measured-tokens.md | 生の測定値：タイプスケール、カラー、角丸、イージング、ブレークポイント。 |
reference/page-anatomy.md | Apple のプロダクトページがセクションごとにどのようにシーケンスされているか。 |
reference/anti-slop.md | ページがAI生成に見える原因となる要素と、Appleスタイルでの修正方法。 |
ワークフロー
library/をプロジェクトにコピーします。<head>にapple-web.cssを、defer属性でapple-web.jsをリンクします。demo/index.htmlを出発点にします。reference/page-anatomy.mdのセクション順序を維持してください。- まずコピー（テキスト）を書きます。見出しは2〜5単語で、末尾にピリオドを付けます（例：「速い。本当に速い。」）。ボディコピーはグレーで、1つのフレーズだけ白でハイライト表示します。
- セクションごとに1つのテーマを選択します：
theme-dark（黒）、theme-light（#f5f5f7）、theme-white。長いページでは交互に使用し、同じテーマを3回以上連続させないでください。 - 完了する前に、以下のチェックリストを実行してください。
Apple らしさを実現するルール
タイポグラフィ
- 1つのファミリーのみ使用。Apple デバイスではシステムSF Pro、それ以外では Inter（CSSのスタックで処理）。セカンドディスプレイフォントやセリフ強調は使用しません。
- すべての見出しでウェイト600。ボディは400。700〜900や300は使用しません。
- トラッキング（カーニング）はサイズに応じて変化：ボディ（17px → -0.022em）とヒーロー（64px以上 → -0.009em）では負の値、19〜32pxではやや正の値。タイプクラスを使用し、一律に
letter-spacingを設定しないでください。 - 見出しは短く、マーケティングセクションでは中央揃え、メディアと並ぶロックアップでは左揃え。
- ダークセクションのボディコピーは
#86868b。<strong>でフレーズを強調します（レンダリングは#f5f5f7、同じウェイト）。太字のボディは使用しません。
カラー
- グレースケールのページ。1つのアクセントカラー：リンク/アクションブルー
#0071e3（ダークセクションではリンクに#2997ff）。色は製品画像から提供され、UIからではありません。 - UIやテキストにグラデーションは使用しません。グロー、色付きシャドウも使用しません。
レイアウト
- コンテンツ幅：テキストは980px、メディア行は1260px、ビューポート最大1440px。ブレークポイントは1068px / 734px。
- セクションパディング：デスクトップで上部120px、下部120〜176px。余裕があり、決して窮屈にしません。
- 角丸タイル：大型タイルは半径28px、小型カードは18px。ボタンはピル型（半径980px）。
モーション
- UI状態のイージングは
cubic-bezier(0.4, 0, 0.6, 1)。持続時間は100ms（ホバー）、240ms（透明度）、320ms（カラー/ナビ）、スクロールリビールは最大1秒。 - リビールは透明度＋30〜40pxの上昇で、要素がビューの約15%に入ったときに1回だけ実行。兄弟要素は80〜120ms の間隔を空けます。
- プロダクトの重要な瞬間はスクロールスクラブ（スクロール位置に連動した進行）を使用し、自動再生はしません。
- タイルのホバー：カード内のメディアにわずかなスケール（1.02）を適用し、カードのシャドウには適用しません。
prefers-reduced-motion：すべてが瞬時のフェードになります。ライブラリが自動処理します。
ナビゲーション
- 44pxのグローバルナビ、その下に52pxのスティッキーなローカルナビ。左に製品名、右にリンクと小さな青い「購入」ピルボタン。スティッキーになると透過します（
blur(20px) saturate(180%)）。
チェックリスト（AIスロップ防止）
- 絵文字、丸で囲んだアイコンの機能グリッド、「✨」、紫/ティールのグラデーションは使用しない。
- 見出しは宣言文であり、疑問文や「Unlock / Elevate / Seamless / Revolutionize」ではない。
- 統計内のすべての数字には単位が付き、主張である場合は脚注マーカーがある。
- セクションごとに最大1つのCTAスタイル（青いピルボタン、または
›付きの青いテキストリンク）で、両方を大きくしない。 - メディアが支配的で、テキストが派手なグラデーションの上に浮かぶカードの中に置かれることはない。
- すべてのテキスト要素にクラスベースのトラッキングが設定されており、デフォルトのブラウザ太字は使用しない。
- ページ最下部の脚注セクションは12px、
#86868b。 - 1440px、1068px、734px、375px の幅で確認し、さらに縮小モーション設定でも確認する。
詳細な修正リストについては reference/anti-slop.md を参照してください。