---
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` ベースで完全に再実装する | ライトテーマに半透明オーバーレイをかけてダークに見せる |