---
version: alpha
name: Apple (apple.com/jp)
description: 極限まで削ぎ落とされたミニマリスト・コンシューマー・テック・ブランド。フルブリードの製品ビジュアル、フロステッドグラスナビ、SF Pro タイポグラフィ、単一のブルーCTAを核とする。
sources:
  - https://www.apple.com/jp/
  - https://www.apple.com/v/home/cm/built/styles/main.built.css
  - https://www.apple.com/api-www/global-elements/global-header/v1/assets/globalheader.css
  - https://www.apple.com/ac/localnav/9/styles/ac-localnav.built.css
  - https://www.apple.com/jp/global/styles/global.css
notes:
  - 全カラー値はCSSソースから直接抽出（直接証拠）
  - フォントファミリーはCSSのfont-family宣言から抽出（直接証拠）
  - ブレークポイントはメディアクエリから抽出（直接証拠）
  - コンポーネントのborder-radiusは推論（ソースに明示なし。視覚観察より）
  - Apple商標・ロゴは使用不可（ガイドライン準拠）
colors:
  primary: "#0071e3"
  primary-hover: "#0077ed"
  primary-active: "#006edb"
  primary-dark: "#2997ff"
  text-primary: "#1d1d1f"
  text-secondary: "#6e6e73"
  text-tertiary: "#86868b"
  text-quaternary: "#747478"
  surface-white: "#ffffff"
  surface-light: "#f5f5f7"
  surface-very-light: "#fbfbfd"
  surface-dark: "#161617"
  surface-dark-alt: "#18181a"
  surface-dark-2: "#1d1d1f"
  link: "#0066cc"
  focus: "#0071e3"
  border-light: "#d2d2d7"
  border-dark: "#424245"
  nav-frosted-light: "rgba(245, 245, 247, 0.8)"
  nav-frosted-dark: "rgba(29, 29, 31, 0.8)"
  nav-opened-light: "#fafafc"
  nav-opened-dark: "#161617"
  nav-text-light: "rgba(0, 0, 0, 0.8)"
  nav-text-dark: "rgba(255, 255, 255, 0.8)"
  button-dark: "#1d1d1f"
  accent-purple: "#ba62fc"
  accent-pink: "#f2416b"
  accent-orange: "#f55600"
  accent-yellow: "#edd142"
  accent-green: "#3e935c"
  accent-teal: "#007d96"
  accent-sky: "#0090f7"
typography:
  base:
    fontFamily: '"SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif'
    fontSize: "106.25%"
    notes: "≈17px。SF Proはシステムフォント扱いで /wss/fonts から配信"
  japanese:
    fontFamily: '"SF Pro JP","SF Pro Text","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif'
    notes: "日本語専用スタック。SF Pro JPが優先"
  nav:
    fontSize: "12px"
    fontWeight: "400"
  nav-header:
    fontSize: "17px"
  display-hero:
    fontSize: "clamp(40px, 7vw, 96px)"
    fontWeight: "700"
    letterSpacing: "-0.005em"
    notes: "推論。Appleのhero見出しはビューポートに連動するスケール"
  body:
    fontSize: "17px"
    lineHeight: "1.47"
  body-small:
    fontSize: "14px"
    lineHeight: "1.43"
  caption:
    fontSize: "12px"
    lineHeight: "1.33"
  button:
    fontSize: "17px"
    fontWeight: "400"
    notes: "プロモ内ボタンは14px。通常CTAは17px"
breakpoints:
  xsmall: "320px"
  small: "734px"
  medium: "1068px"
  large: "1440px"
  wide: "1441px+"
  nav-collapse: "833px"
  notes: "Appleのブレークポイント体系。small≤734 / medium735-1068 / large1069-1440 / wide≥1441"
spacing:
  gutter: "12px"
  gutter-1-5x: "18px"
  section-vertical: "clamp(60px, 8vw, 120px)"
  ribbon-height: "44px"
  ribbon-height-mobile: "60px"
  nav-height: "44px"
  nav-height-wide: "48px"
  notes: "gutterは12px固定。セクション縦余白は推論"
components:
  button-primary:
    backgroundColor: "#0071e3"
    color: "#ffffff"
    borderRadius: "980px"
    padding: "12px 22px"
    fontSize: "17px"
    hover:
      backgroundColor: "#0077ed"
    active:
      backgroundColor: "#006edb"
    notes: "ピル形状。角丸は非常に大きい（推論）"
  button-primary-dark:
    backgroundColor: "#1d1d1f"
    color: "#ffffff"
    borderRadius: "980px"
    padding: "12px 22px"
  button-secondary:
    backgroundColor: "transparent"
    color: "#0071e3"
    border: "1.5px solid #0071e3"
    borderRadius: "980px"
    padding: "12px 22px"
  link-more:
    color: "#0071e3"
    fontSize: "17px"
    notes: '"さらに詳しく" パターン。矢印なし。hover時underline'
  globalnav:
    height: "44px"
    backgroundColor: "rgba(245, 245, 247, 0.8)"
    backdropFilter: "saturate(180%) blur(20px)"
    color: "rgba(0, 0, 0, 0.8)"
    fontFamily: '"SF Pro Text"'
    fontSize: "12px"
    position: "fixed"
    dark:
      backgroundColor: "rgba(29, 29, 31, 0.8)"
      color: "rgba(255, 255, 255, 0.8)"
  product-tile:
    backgroundColor: "#f5f5f7"
    borderRadius: "18px"
    overflow: "hidden"
    padding: "40px 40px 0"
    notes: "ホームページのプロダクトカード。角丸18pxは推論（視覚観察）"
  product-tile-dark:
    backgroundColor: "#1d1d1f"
    color: "#f5f5f7"
    borderRadius: "18px"
  hero-section:
    textAlign: "center"
    paddingTop: "var(--global-nav-collective-height)"
    notes: "フルブリードビジュアル。テキストは上部または下部にオーバーレイ"
imagery:
  photography:
    style: "高解像度製品写真。純白または純黒背景が多い"
    format: "WebP / HEIC。高DPI対応（2x/3x）"
    notes: "製品単体ショットとライフスタイルショットを場面により使い分け"
  gradient:
    usage: "ダークテーマ切り替え時のみ使用。通常は単色背景"
    dark-hero: "linear-gradient(from #1d1d1f at top)"
  icons:
    font: "SF Pro Icons（Appleシステムアイコン）"
    size: "デフォルト17px相当"
  motion:
    easing: "cubic-bezier(0.4, 0, 0.6, 1)"
    fast-easing: "cubic-bezier(0.25, 0.1, 0.3, 1)"
    duration-short: "0.24s"
    duration-medium: "0.32s"
    notes: "Apple は ease-in-out 系の曲線を多用。ハードなバウンスは使わない"
logo:
  restrictions:
    - "Apple ロゴ（ リンゴマーク）は商標。再現・模倣は禁止"
    - "製品名・サービス名は正確なスペルと大文字小文字を維持"
    - "Appleのスローガン・タグラインの模倣は禁止"
  nav-representation: "テキストリンク '(Apple)' として実装。SVGロゴは使用しない"
---

## 概要

Apple のビジュアルシステムは **製品そのものを語る**設計になっている。UI は背景に退き、製品画像とタイポグラフィが主役。インタラクションは控えめで、ひとつのブルー（`#0071e3`）がすべてのCTAを統一する。

日本語サイトでは SF Pro JP と日本語フォントスタックが基本。全体的なレイアウト・コンポーネントは英語版と同一。

---

## カラー

### プライマリカラー

| ロール | 値 | 用途 |
|--------|-----|------|
| `primary` | `#0071e3` | CTAボタン背景、リンク強調、フォーカスリング |
| `primary-hover` | `#0077ed` | ボタンホバー状態 |
| `primary-active` | `#006edb` | ボタン押下状態 |
| `primary-dark` | `#2997ff` | ダークテーマでのリンク・アクセント |

### テキスト

| ロール | 値 | 用途 |
|--------|-----|------|
| `text-primary` | `#1d1d1f` | 本文、見出し（ライトテーマ） |
| `text-secondary` | `#6e6e73` | サブテキスト、説明文 |
| `text-tertiary` | `#86868b` | プレースホルダー、補足情報 |
| `text-quaternary` | `#747478` | ナビ補助テキスト |

### サーフェス

| ロール | 値 | 用途 |
|--------|-----|------|
| `surface-white` | `#ffffff` | 標準ページ背景 |
| `surface-light` | `#f5f5f7` | カード背景、セカンダリセクション |
| `surface-very-light` | `#fbfbfd` | ごく薄い背景（ナビ展開時） |
| `surface-dark` | `#161617` | ダークテーマ背景 |
| `surface-dark-2` | `#1d1d1f` | ダークカード背景 |

### ナビゲーション専用

ナビゲーションはフロステッドグラス。背景色はスクロール状態とテーマにより変わる。

- ライト：`rgba(245, 245, 247, 0.8)` + `backdrop-filter: saturate(180%) blur(20px)`
- ダーク：`rgba(29, 29, 31, 0.8)` + `backdrop-filter: saturate(180%) blur(20px)`

### アクセント（限定使用）

アクセントカラーは特定製品・キャンペーンに紐付き使用。汎用的なUI要素には使わない。

`#ba62fc`（パープル）/ `#f2416b`（ピンク）/ `#f55600`（オレンジ）/ `#edd142`（イエロー）/ `#3e935c`（グリーン）

---

## タイポグラフィ

SF Pro は Apple のシステムフォント。ウェブでは `/wss/fonts` 経由でサーブされる。日本語コンテンツには SF Pro JP が優先される。

### フォントスタック（日本語）

```css
font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons",
             "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
             "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
             "Helvetica Neue", "Helvetica", "Arial", sans-serif;
```

### スケール

| ロール | サイズ | ウェイト | line-height | 用途 |
|--------|--------|----------|-------------|------|
| display-hero | ~80–96px | 700 | 1.05 | ヒーロー見出し |
| h2 | ~40–56px | 700 | 1.1 | セクション見出し |
| h3 | ~28–32px | 600 | 1.15 | カード見出し |
| body | 17px | 400 | 1.47 | 本文 |
| body-small | 14–15px | 400 | 1.43 | 補足テキスト |
| nav | 12px | 400 | — | ナビゲーションアイテム |
| caption | 12px | 400 | 1.33 | キャプション、法的テキスト |

**注：** display/h2/h3のサイズはブレークポイントで段階的にスケールする。ピクセル値は推論。

---

## レイアウト

### グリッドとガター

- ガター幅：`12px`（`--gutter-width`）
- 標準コンテナ最大幅：~1440px（推論）
- コンテンツ幅：中央揃え、左右パディングで制御

### ブレークポイント

```
≤ 320px   : xsmall（最小端末）
≤ 734px   : small（スマートフォン）
735–1068px: medium（タブレット）
1069–1440px: large（デスクトップ）
≥ 1441px  : wide（大型ディスプレイ）
≤ 833px   : ナビゲーションがハンバーガー化
```

### セクション構造

- 各セクションはフルブリード（100vw）
- 見出しとCTAは中央揃えが基本
- 製品タイルは2カラムグリッド（デスクトップ）→ 1カラム（モバイル）

---

## コンポーネント

### グローバルナビゲーション

- `position: fixed`、`height: 44px`
- フロステッドグラス（`backdrop-filter: saturate(180%) blur(20px)`）
- フォントサイズ：12px
- ロゴはページ左端（Appleロゴマーク）
- 右端：検索・ショッピングバッグアイコン

```css
/* ライトテーマ */
background: rgba(245, 245, 247, 0.8);
backdrop-filter: saturate(180%) blur(20px);
color: rgba(0, 0, 0, 0.8);

/* ダークテーマ */
background: rgba(29, 29, 31, 0.8);
backdrop-filter: saturate(180%) blur(20px);
color: rgba(255, 255, 255, 0.8);
```

### ボタン

**プライマリ（ブルー）**
```css
background: #0071e3;
color: #ffffff;
border-radius: 980px;   /* ピル形状 */
padding: 12px 22px;
font-size: 17px;
```

**プライマリ（ダーク）**
```css
background: #1d1d1f;
color: #ffffff;
border-radius: 980px;
padding: 12px 22px;
```

**"さらに詳しく" リンク**
```css
color: #0071e3;
font-size: 17px;
text-decoration: none;
/* hover時: underline */
```

### 製品タイル（ライト）

```css
background: #f5f5f7;
border-radius: 18px;
overflow: hidden;
padding: 40px 40px 0;
```

### 製品タイル（ダーク）

```css
background: #1d1d1f;
color: #f5f5f7;
border-radius: 18px;
```

---

## イメージとモーション

- **製品写真：** 純白 / 純黒背景の高解像度単体ショット
- **ライフスタイル写真：** 自然光・屋外での使用シーン
- **グラデーション：** ダークテーマ切り替え時のみ。通常は単色
- **アイコン：** SF Pro Icons（システムフォントに内包）
- **モーション：** `cubic-bezier(0.4, 0, 0.6, 1)` をデフォルトイージングとして使用。0.24s 短め

---

## ロゴと商標

- Appleロゴ（リンゴマーク）は**模倣・再現禁止**
- 製品名は正確な表記を維持（"iPhone" "MacBook" など）
- Appleのスローガン模倣も禁止

---

## Do's and Don'ts

| Do | Don't |
|-----|-------|
| ライトテーマでは白 `#fff`・薄グレー `#f5f5f7` の2色で背景を構成する | 装飾的なグラデーションやカラフルな背景を多用する |
| CTAは `#0071e3` のピルボタン1種類に絞る | ボタンカラーを複数使い分ける |
| テキストは `#1d1d1f` + `#6e6e73` のみで階層を表現する | 中途半端な灰色でテキストを薄める |
| フロステッドグラスナビは `backdrop-filter` + 80%透過で実装する | ナビを完全不透明にする |
| モーションは 0.24s 以下に抑える | 長いアニメーションや派手なトランジションを使う |
| 製品画像はフルブリードまたは単体ショット | テキストだらけのカード |
| ダークテーマは `#161617` ベースで完全に再実装する | ライトテーマに半透明オーバーレイをかけてダークに見せる |

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "apple",
    "name": "Apple (apple.com/jp)",
    "url": "https://www.apple.com/jp/",
    "description": "極限まで削ぎ落とされたミニマリスト・コンシューマー・テック・ブランド。フルブリードの製品ビジュアル、フロステッドグラスナビ、SF Pro タイポグラフィ、単一のブルーCTAを核とする。",
    "category": "tech",
    "tags": [
      "tech",
      "minimal",
      "monochrome",
      "premium",
      "consumer"
    ],
    "theme": "light-with-dark-sections",
    "language": "ja"
  },
  "sources": [
    "https://www.apple.com/jp/",
    "https://www.apple.com/v/home/cm/built/styles/main.built.css",
    "https://www.apple.com/api-www/global-elements/global-header/v1/assets/globalheader.css",
    "https://www.apple.com/ac/localnav/9/styles/ac-localnav.built.css",
    "https://www.apple.com/jp/global/styles/global.css"
  ],
  "extractedAt": "2026-05-10",
  "notes": [
    "全カラー値はCSSソースから直接抽出（直接証拠）",
    "フォントファミリーはCSSのfont-family宣言から抽出（直接証拠）",
    "ブレークポイントはメディアクエリから抽出（直接証拠）",
    "コンポーネントのborder-radiusは推論（ソースに明示なし。視覚観察より）",
    "Apple商標・ロゴは使用不可（ガイドライン準拠）"
  ],
  "colors": {
    "groups": [
      {
        "label": "Primary",
        "tokens": [
          {
            "name": "Primary",
            "value": "#0071e3",
            "token": "--color-primary",
            "role": "CTAボタン背景、リンク強調、フォーカスリング"
          },
          {
            "name": "Primary Hover",
            "value": "#0077ed",
            "token": "--color-primary-hover",
            "role": "ボタンホバー状態"
          },
          {
            "name": "Primary Active",
            "value": "#006edb",
            "token": "--color-primary-active",
            "role": "ボタン押下状態"
          },
          {
            "name": "Primary Dark",
            "value": "#2997ff",
            "token": "--color-primary-dark",
            "role": "ダークテーマでのリンク・アクセント"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#1d1d1f",
            "token": "--color-text-primary",
            "role": "本文、見出し（ライトテーマ）"
          },
          {
            "name": "Text Secondary",
            "value": "#6e6e73",
            "token": "--color-text-secondary",
            "role": "サブテキスト、説明文"
          },
          {
            "name": "Text Tertiary",
            "value": "#86868b",
            "token": "--color-text-tertiary",
            "role": "プレースホルダー、補足情報"
          },
          {
            "name": "Text Quaternary",
            "value": "#747478",
            "token": "--color-text-quaternary",
            "role": "ナビ補助テキスト"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface White",
            "value": "#ffffff",
            "token": "--color-surface-white",
            "role": "標準ページ背景"
          },
          {
            "name": "Surface Light",
            "value": "#f5f5f7",
            "token": "--color-surface-light",
            "role": "カード背景、セカンダリセクション"
          },
          {
            "name": "Surface Very Light",
            "value": "#fbfbfd",
            "token": "--color-surface-very-light",
            "role": "ごく薄い背景（ナビ展開時）"
          },
          {
            "name": "Surface Dark",
            "value": "#161617",
            "token": "--color-surface-dark",
            "role": "ダークテーマ背景"
          },
          {
            "name": "Surface Dark Alt",
            "value": "#18181a",
            "token": "--color-surface-dark-alt",
            "role": "ダークテーマ代替背景"
          },
          {
            "name": "Surface Dark 2",
            "value": "#1d1d1f",
            "token": "--color-surface-dark-2",
            "role": "ダークカード背景"
          }
        ]
      },
      {
        "label": "Navigation",
        "tokens": [
          {
            "name": "Nav Frosted Light",
            "value": "rgba(245, 245, 247, 0.8)",
            "token": "--color-nav-frosted-light",
            "role": "フロステッドグラスナビ背景（ライト）"
          },
          {
            "name": "Nav Frosted Dark",
            "value": "rgba(29, 29, 31, 0.8)",
            "token": "--color-nav-frosted-dark",
            "role": "フロステッドグラスナビ背景（ダーク）"
          },
          {
            "name": "Nav Opened Light",
            "value": "#fafafc",
            "token": "--color-nav-opened-light",
            "role": "ナビ展開時の背景（ライト）"
          },
          {
            "name": "Nav Opened Dark",
            "value": "#161617",
            "token": "--color-nav-opened-dark",
            "role": "ナビ展開時の背景（ダーク）"
          },
          {
            "name": "Nav Text Light",
            "value": "rgba(0, 0, 0, 0.8)",
            "token": "--color-nav-text-light",
            "role": "ナビテキスト（ライト）"
          },
          {
            "name": "Nav Text Dark",
            "value": "rgba(255, 255, 255, 0.8)",
            "token": "--color-nav-text-dark",
            "role": "ナビテキスト（ダーク）"
          }
        ]
      },
      {
        "label": "Border",
        "tokens": [
          {
            "name": "Border Light",
            "value": "#d2d2d7",
            "token": "--color-border-light",
            "role": "ライトテーマの罫線・区切り"
          },
          {
            "name": "Border Dark",
            "value": "#424245",
            "token": "--color-border-dark",
            "role": "ダークテーマの罫線・区切り"
          }
        ]
      },
      {
        "label": "Accent",
        "tokens": [
          {
            "name": "Accent Purple",
            "value": "#ba62fc",
            "token": "--color-accent-purple",
            "role": "限定使用：特定製品・キャンペーン"
          },
          {
            "name": "Accent Pink",
            "value": "#f2416b",
            "token": "--color-accent-pink",
            "role": "限定使用：特定製品・キャンペーン"
          },
          {
            "name": "Accent Orange",
            "value": "#f55600",
            "token": "--color-accent-orange",
            "role": "限定使用：特定製品・キャンペーン"
          },
          {
            "name": "Accent Yellow",
            "value": "#edd142",
            "token": "--color-accent-yellow",
            "role": "限定使用：特定製品・キャンペーン"
          },
          {
            "name": "Accent Green",
            "value": "#3e935c",
            "token": "--color-accent-green",
            "role": "限定使用：特定製品・キャンペーン"
          },
          {
            "name": "Accent Teal",
            "value": "#007d96",
            "token": "--color-accent-teal",
            "role": "限定使用：特定製品・キャンペーン"
          },
          {
            "name": "Accent Sky",
            "value": "#0090f7",
            "token": "--color-accent-sky",
            "role": "限定使用：特定製品・キャンペーン"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "SF Pro Text",
        "stack": "\"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif",
        "role": "primary",
        "notes": "Appleのシステムフォント。/wss/fonts から配信"
      },
      {
        "family": "SF Pro JP",
        "stack": "\"SF Pro JP\", \"SF Pro Text\", \"SF Pro Icons\", \"Hiragino Kaku Gothic Pro\", \"ヒラギノ角ゴ Pro W3\", \"メイリオ\", \"Meiryo\", \"ＭＳ Ｐゴシック\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif",
        "role": "japanese",
        "notes": "日本語専用スタック。SF Pro JPが優先"
      },
      {
        "family": "SF Pro Icons",
        "stack": "\"SF Pro Icons\"",
        "role": "icon",
        "notes": "Appleシステムアイコン"
      }
    ],
    "scale": [
      {
        "role": "display-hero",
        "size": "clamp(40px, 7vw, 96px)",
        "weight": 700,
        "lineHeight": 1.05,
        "letterSpacing": "-0.005em",
        "notes": "推論。ヒーロー見出しはビューポートに連動"
      },
      {
        "role": "h2",
        "size": "40-56px",
        "weight": 700,
        "lineHeight": 1.1,
        "notes": "セクション見出し（推論）"
      },
      {
        "role": "h3",
        "size": "28-32px",
        "weight": 600,
        "lineHeight": 1.15,
        "notes": "カード見出し（推論）"
      },
      {
        "role": "body",
        "size": "17px",
        "weight": 400,
        "lineHeight": 1.47,
        "notes": "標準本文"
      },
      {
        "role": "body-small",
        "size": "14px",
        "weight": 400,
        "lineHeight": 1.43,
        "notes": "補足テキスト"
      },
      {
        "role": "nav",
        "size": "12px",
        "weight": 400,
        "notes": "ナビゲーションアイテム"
      },
      {
        "role": "nav-header",
        "size": "17px",
        "notes": "ナビ展開時の見出し"
      },
      {
        "role": "caption",
        "size": "12px",
        "weight": 400,
        "lineHeight": 1.33,
        "notes": "キャプション、法的テキスト"
      },
      {
        "role": "button",
        "size": "17px",
        "weight": 400,
        "notes": "通常CTAボタン。プロモ内ボタンは14px"
      }
    ],
    "japanese": {
      "fontStack": "\"SF Pro JP\", \"SF Pro Text\", \"Hiragino Kaku Gothic Pro\", sans-serif",
      "lineHeight": 1.7,
      "letterSpacing": "0.04em",
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict",
        "overflowWrap": "anywhere"
      },
      "openType": {
        "palt": false,
        "kern": true
      },
      "notes": "Appleの日本語UIは詰める方向の組版。本文に正の letter-spacing を強く付けない"
    }
  },
  "spacing": {
    "baseUnit": "12px",
    "tokens": [
      {
        "name": "gutter",
        "value": "12px",
        "role": "標準ガター"
      },
      {
        "name": "gutter-1-5x",
        "value": "18px",
        "role": "1.5倍ガター"
      },
      {
        "name": "ribbon-height",
        "value": "44px",
        "role": "リボン高さ（PC）"
      },
      {
        "name": "ribbon-height-mobile",
        "value": "60px",
        "role": "リボン高さ（モバイル）"
      },
      {
        "name": "nav-height",
        "value": "44px",
        "role": "ナビ高さ（標準）"
      },
      {
        "name": "nav-height-wide",
        "value": "48px",
        "role": "ナビ高さ（ワイド）"
      },
      {
        "name": "section-vertical",
        "value": "clamp(60px, 8vw, 120px)",
        "role": "セクション縦余白（推論）"
      }
    ]
  },
  "breakpoints": {
    "xsmall": {
      "value": "320px",
      "role": "最小端末"
    },
    "small": {
      "value": "734px",
      "role": "スマートフォン"
    },
    "medium": {
      "value": "1068px",
      "role": "タブレット"
    },
    "large": {
      "value": "1440px",
      "role": "デスクトップ"
    },
    "wide": {
      "value": "1441px+",
      "role": "大型ディスプレイ"
    },
    "nav-collapse": {
      "value": "833px",
      "role": "ナビゲーションがハンバーガー化"
    }
  },
  "radius": {
    "card": "18px",
    "button": "980px",
    "notes": "ボタンは pill 形状（実質完全な円弧）。カードは 18px（推論）"
  },
  "shadows": [],
  "components": [
    {
      "type": "button",
      "name": "Primary Button (Blue)",
      "description": "Appleの代表的なブルーCTA。ピル形状。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#0071e3",
            "color": "#ffffff",
            "borderRadius": "980px",
            "padding": "12px 22px",
            "fontSize": "17px",
            "fontWeight": "400"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#0077ed",
            "color": "#ffffff",
            "borderRadius": "980px",
            "padding": "12px 22px"
          }
        },
        {
          "label": "Active",
          "props": {
            "background": "#006edb",
            "color": "#ffffff",
            "borderRadius": "980px",
            "padding": "12px 22px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Primary Button (Dark)",
      "description": "ダーク版のCTA。ライト/ダーク両テーマで使用可。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#1d1d1f",
            "color": "#ffffff",
            "borderRadius": "980px",
            "padding": "12px 22px",
            "fontSize": "17px"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button (Outline)",
      "description": "アウトライン形式のセカンダリCTA。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#0071e3",
            "border": "1.5px solid #0071e3",
            "borderRadius": "980px",
            "padding": "12px 22px",
            "fontSize": "17px"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Link More (\"さらに詳しく\")",
      "description": "Appleの \"さらに詳しく\" パターン。矢印なし、シンプルなテキストリンク。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#0071e3",
            "fontSize": "17px",
            "textDecoration": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#0077ed",
            "textDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "navigation",
      "name": "Global Navigation",
      "description": "フロステッドグラスのグローバルナビ。スクロール時も固定表示。",
      "variants": [
        {
          "label": "Light",
          "props": {
            "height": "44px",
            "background": "rgba(245, 245, 247, 0.8)",
            "backdropFilter": "saturate(180%) blur(20px)",
            "color": "rgba(0, 0, 0, 0.8)",
            "fontFamily": "\"SF Pro Text\"",
            "fontSize": "12px",
            "position": "fixed"
          }
        },
        {
          "label": "Dark",
          "props": {
            "height": "44px",
            "background": "rgba(29, 29, 31, 0.8)",
            "backdropFilter": "saturate(180%) blur(20px)",
            "color": "rgba(255, 255, 255, 0.8)",
            "fontSize": "12px",
            "position": "fixed"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Product Tile (Light)",
      "description": "Apple のホームページで、iPad や MacBook などの製品を紹介するライト背景のカード。背景色 #f5f5f7 のソフトグレーが白ページとの自然な区切りを作り、製品画像と明るい配色で購買意欲を喚起する。ダーク版タイルと交互に配置されることでホームページ全体にリズム感が生まれる。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#f5f5f7",
            "borderRadius": "18px",
            "overflow": "hidden",
            "padding": "40px 40px 0",
            "color": "#1d1d1f"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Product Tile (Dark)",
      "description": "Apple のホームページで、Mac mini や iPhone Pro などのプレミアム製品を紹介するダーク背景のカード。背景色 #1d1d1f により白背景の隣接セクションとのコントラストを作り、製品自体の質感と高級感を際立たせる。製品画像が中央に大きく配置され、下部に製品名・価格・購入リンクが並ぶ。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#1d1d1f",
            "borderRadius": "18px",
            "overflow": "hidden",
            "padding": "40px 40px 0",
            "color": "#f5f5f7"
          }
        }
      ]
    },
    {
      "type": "section",
      "name": "Hero Section",
      "description": "Apple のページ最上部に配置される製品の主役ビジュアルセクション。画面全幅（フルブリード）に背景画像や動画を配置し、製品名・価格・CTA ボタンを中央寄せでオーバーレイ。iPhone・Mac・Apple Watch など全主要製品ページで採用されており、ブランド統一感の核となる。",
      "variants": [
        {
          "label": "Default",
          "props": {
            "textAlign": "center",
            "paddingTop": "var(--global-nav-collective-height)",
            "fullBleed": "true"
          }
        }
      ]
    }
  ],
  "imagery": {
    "photography": {
      "style": "高解像度製品写真。純白または純黒背景が多い",
      "format": "WebP / HEIC。高DPI対応（2x/3x）",
      "notes": "製品単体ショットとライフスタイルショットを場面により使い分け"
    },
    "gradient": {
      "usage": "ダークテーマ切り替え時のみ使用。通常は単色背景",
      "darkHero": "linear-gradient(from #1d1d1f at top)"
    },
    "icons": {
      "font": "SF Pro Icons（Appleシステムアイコン）",
      "size": "デフォルト17px相当"
    }
  },
  "motion": {
    "easing": {
      "default": "cubic-bezier(0.4, 0, 0.6, 1)",
      "fast": "cubic-bezier(0.25, 0.1, 0.3, 1)"
    },
    "duration": {
      "short": "0.24s",
      "medium": "0.32s"
    },
    "notes": "Apple は ease-in-out 系の曲線を多用。ハードなバウンスは使わない"
  },
  "logo": {
    "restrictions": [
      "Apple ロゴ（リンゴマーク）は商標。再現・模倣は禁止",
      "製品名・サービス名は正確なスペルと大文字小文字を維持",
      "Apple のスローガン・タグラインの模倣は禁止"
    ],
    "navRepresentation": "テキストリンク '(Apple)' として実装。SVGロゴは使用しない"
  },
  "guidelines": {
    "do": [
      "ライトテーマでは白 #fff と薄グレー #f5f5f7 の2色で背景を構成する",
      "CTA は #0071e3 のピルボタン1種類に絞る",
      "テキストは #1d1d1f + #6e6e73 のみで階層を表現する",
      "フロステッドグラスナビは backdrop-filter + 80%透過で実装する",
      "モーションは 0.24s 以下に抑える",
      "製品画像はフルブリードまたは単体ショット",
      "ダークテーマは #161617 ベースで完全に再実装する"
    ],
    "dont": [
      "装飾的なグラデーションやカラフルな背景を多用しない",
      "ボタンカラーを複数使い分けない",
      "中途半端な灰色でテキストを薄めない",
      "ナビを完全不透明にしない",
      "長いアニメーションや派手なトランジションを使わない",
      "テキストだらけのカードにしない",
      "ライトテーマに半透明オーバーレイをかけてダークに見せない"
    ]
  }
}