---
version: alpha
name: Yamaha Japan (jp.yamaha.com)
description: Yamaha Music Japan の公式サイト — ヴァイオレットをコーポレートカラーとする、楽器・音響機器・音楽教育を核にした日本語コーポレートサイト。
sources:
  - https://jp.yamaha.com/
  - https://jp.yamaha.com/products/
  - https://www.yamaha.com/en/about/history/logo/
  - https://usa.yamaha.com/about_yamaha/trademark_guidelines/index.html
  - https://www.designyourway.net/blog/yamaha-logo/
  - https://www.brandcolorcode.com/yamaha
notes:
  - "直接観察: jp.yamaha.com の HTML 構造・画像ファイル名 (yamaha_purple.svg) からパープルロゴを確認"
  - "直接観察: ヘッダー白地・ナビゲーションテキスト黒・フッター白地を確認"
  - "公式資料: yamaha.com/en/about/history/logo/ によりヴァイオレットがコーポレートカラーと明記"
  - "推論: ウェブフォントスタックは CSS 直接取得不可のため標準的日本語サンセリフスタックを推定"
  - "推論: ボタン・リンクの具体的 hex 値は CSS 非公開のため観察された視覚的パターンから推定"
  - "Yamaha Motor Co., Ltd. (二輪) は別会社でレッドを使用。本ガイドは Yamaha Corporation / Yamaha Music Japan のもの"
colors:
  primary: "#48217A"
  primary-light: "#6B3FA0"
  primary-dark: "#2E1254"
  on-primary: "#FFFFFF"
  alert-red: "#E60012"
  neutral-gray: "#B5B7B6"
  text-primary: "#1A1A1A"
  text-secondary: "#555555"
  text-muted: "#888888"
  surface: "#FFFFFF"
  surface-alt: "#F5F5F5"
  border: "#E0E0E0"
  footer-bg: "#FFFFFF"
  overlay-dark: "rgba(0,0,0,0.5)"
typography:
  wordmark:
    fontFamily: "カスタム非公開サンセリフ (Yamaha専用書体)"
    note: "M字の中央縦棒が外側縦棒より短い非対称デザイン。公開フォントでは再現不可。"
  body:
    fontFamily: "'Yu Gothic', '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif"
    fontSize: "14px–16px"
    fontWeight: "400"
    lineHeight: "1.7"
  heading-l:
    fontFamily: "inherit"
    fontSize: "24px–32px"
    fontWeight: "700"
    lineHeight: "1.3"
  heading-m:
    fontFamily: "inherit"
    fontSize: "18px–22px"
    fontWeight: "700"
    lineHeight: "1.4"
  heading-s:
    fontFamily: "inherit"
    fontSize: "14px–16px"
    fontWeight: "700"
    lineHeight: "1.5"
  label:
    fontFamily: "inherit"
    fontSize: "12px–13px"
    fontWeight: "400"
    lineHeight: "1.5"
rounded:
  small: "2px"
  medium: "4px"
  large: "8px"
  pill: "9999px"
spacing:
  base: "8px"
  section-gap: "48px–80px"
  card-padding: "16px–24px"
  nav-height: "60px–80px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.medium}"
    padding: "10px 24px"
    fontWeight: "700"
    fontSize: "14px"
  button-secondary:
    backgroundColor: "transparent"
    color: "{colors.primary}"
    border: "1px solid {colors.primary}"
    borderRadius: "{rounded.medium}"
    padding: "10px 24px"
  link:
    color: "{colors.primary}"
    textDecoration: "none"
    hover: "underline"
  card:
    backgroundColor: "{colors.surface}"
    border: "1px solid {colors.border}"
    borderRadius: "{rounded.medium}"
    boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
  nav-global:
    backgroundColor: "{colors.surface}"
    borderBottom: "1px solid {colors.border}"
    height: "{spacing.nav-height}"
  badge-alert:
    backgroundColor: "{colors.alert-red}"
    color: "#FFFFFF"
    borderRadius: "{rounded.pill}"
    fontSize: "11px"
---

## 概要

**jp.yamaha.com** は Yamaha Music Japan Co., Ltd.（ヤマハ株式会社の国内販売子会社）が運営する日本語コーポレートサイト。楽器・音響機器・音楽教室・サポートを軸とし、プロ〜一般消費者まで幅広いユーザー層に対応。

サイトの視覚的アイデンティティはコーポレートカラーである**ヴァイオレット (#48217A)** を基点に、白ベースの清潔なレイアウト上でパープルのロゴとアクセントが機能する構成。


---

## カラー

| ロール | Hex | 用途 |
|---|---|---|
| `primary` | `#48217A` | ロゴ、主要リンク、プライマリボタン、アクティブ状態 |
| `primary-light` | `#6B3FA0` | ホバー状態、グラデーション上端 |
| `primary-dark` | `#2E1254` | 深いコントラストが必要な場面、テキストonパープル背景 |
| `on-primary` | `#FFFFFF` | パープル背景上のテキスト・アイコン |
| `alert-red` | `#E60012` | 重要なお知らせバッジ、エラー、警告 |
| `neutral-gray` | `#B5B7B6` | ディバイダー、非アクティブUI要素 |
| `text-primary` | `#1A1A1A` | 本文・見出し（ほぼ黒） |
| `text-secondary` | `#555555` | サブテキスト、説明文 |
| `text-muted` | `#888888` | プレースホルダー、補足テキスト、日付 |
| `surface` | `#FFFFFF` | カード背景、ヘッダー、フッター背景 |
| `surface-alt` | `#F5F5F5` | セクション区切り、hover背景 |
| `border` | `#E0E0E0` | カード枠線、ディバイダー |

### 注意点

- **Yamaha Motor Co., Ltd.** の赤 (`#E60012`, Pantone 485C) とヴァイオレットを混在させない。jp.yamaha.com はヴァイオレット優先。
- 赤はサイト内で「重要なお知らせ (`製品に関する重要なお知らせ`)」専用のアラートカラーとして限定使用。

---

## タイポグラフィ

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

```css
font-family:
  'Yu Gothic', '游ゴシック', YuGothic,
  'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
  Meiryo, メイリオ,
  sans-serif;
```

- **根拠**: CSS 直接取得不可のため、日本語コーポレートサイトの標準スタックを適用（推論）。
- 欧文部分には同スタックの `sans-serif` フォールバックが機能。

### スケール

| レベル | サイズ | ウェイト | 用途 |
|---|---|---|---|
| Heading L | 24–32px | 700 | ページタイトル、ヒーローテキスト |
| Heading M | 18–22px | 700 | セクション見出し、カードタイトル |
| Heading S | 14–16px | 700 | サブセクション、ラベル |
| Body | 14–16px | 400 | 本文、説明文 |
| Label | 12–13px | 400 | 日付、タグ、フッターリンク |

- 行間 (`line-height`) は日本語の可読性確保のため本文 **1.7**、見出し **1.3–1.4**。
- ヤマハのワードマーク書体はカスタム非公開フォント。代替として `"Bebas Neue"` または `"Barlow Condensed"` (400/700) が視覚的に近い。

---

## レイアウト

### グリッド構造

- **最大幅**: 1280px（コンテンツ幅）、中央揃え
- **余白**: 左右 16–24px（モバイル）/ 32–48px（デスクトップ）
- **カラム**: 3カラムグリッドが製品カテゴリ・ニュースカードの基本単位
- **ヒーローバナー**: フル幅 2000×800px（アスペクト比 5:2）

### セクションパターン

1. **グローバルナビゲーション** — 白背景、パープルロゴ左配置、テキストメニュー右、メガドロップダウン
2. **ヒーローカルーセル** — フル幅画像、プロフォトグラフィー、再生/一時停止コントロール
3. **ピックアップセクション** — カードグリッド（3列）、白背景カード＋画像
4. **カテゴリグリッド** — 製品カテゴリ画像カード（735×245px、3:1比）
5. **ニュースリスト** — サムネイル（230×230px）＋タイトル＋日付のリスト形式
6. **フッター** — 白背景、複数カラムのリンク集、コピーライト最下部

---

## コンポーネント

### ナビゲーション (Global Nav)

- 高さ: 約 60–80px
- 背景: `#FFFFFF`
- ロゴ: 左端配置、`yamaha_purple.svg`（パープル三叉音叉マーク＋ワードマーク）
- メインメニュー: 8カテゴリ（製品情報 / 教室・レッスン / サービス / 新着情報 / 読み物・SNS / サポート / 店舗検索 / ヤマハについて）
- 下線またはアクティブ状態は `{colors.primary}` で表示（推論）
- メガメニュー: ホバーで18以上のサブカテゴリを展開

### ボタン

```html
<!-- プライマリ -->
<button style="background:#48217A; color:#FFF; border-radius:4px; padding:10px 24px; font-weight:700;">
  テキスト
</button>

<!-- セカンダリ（アウトライン） -->
<button style="background:transparent; color:#48217A; border:1px solid #48217A; border-radius:4px; padding:10px 24px;">
  テキスト
</button>
```

### 製品カード

- 背景: `#FFFFFF`
- 画像: 756×756px（正方形）または 735×245px（横長バナー型）
- 影: `box-shadow: 0 2px 8px rgba(0,0,0,0.08)`
- 角丸: `4px`
- テキスト: 製品名 (Heading S/M)、簡易説明 (Body)

### アラートバッジ

- 赤 (`#E60012`) の小さなアイコン/バッジ
- 「製品に関する重要なお知らせ」などの安全通知に限定使用
- 過剰使用禁止 — アラート専用色として信頼性を維持

### 検索フォーム

- シンプルな水平テキスト入力 ＋ 送信ボタン
- プレースホルダー: 「サイト内を検索」
- ボタン: テキスト or 送信アイコン

---

## イメージ・ビジュアル

### フォトグラフィー

- **スタイル**: プロフェッショナル商品撮影 + ライフスタイルフォト（演奏者・ステージ）
- **トーン**: 明るく清潔感のある自然光ベース、または劇的なステージ照明
- **主要サイズ**: 2000×800px (ヒーロー)、756×756px (製品)、735×245px (カテゴリ)、230×230px (ニュース)
- **配信**: CDN 経由のダイナミックリサイズ (`impolicy=resize&imwid=xxx&imhei=xxx`)

### ガイドライン

- 楽器・演奏者が主役。テキストオーバーレイは最小限に
- 白背景の製品単体撮影が基本（ECカード向け）
- ライフスタイル画像ではブランドカラーのパープルを衣装・小道具で忍ばせることがある

---

## ロゴ使用規定

### 概要

- **マーク**: 円形に配置された三叉音叉（Three Interlocking Tuning Forks）
- **ワードマーク**: 「YAMAHA」カスタム非対称サンセリフ（M の中央縦棒が外縦棒より短い）
- **コーポレートカラー**: ヴァイオレット `#48217A`
- **白抜き版**: 暗背景用（パープル背景・写真背景）

### クリアスペース

- マーク周囲の最小余白 = ワードマーク「Y」の文字高さ分（全方向）

### 最小サイズ

- 印刷: 直径 15mm 以上
- デジタル: 30px 以上（音叉マークの視認性確保）

### 禁則

- ロゴの再デザイン・色変更・変形不可
- 他社ロゴと同列サイズで並列配置禁止（Yamaha ロゴは常に他社より大きく）
- ドメイン名への組み込み禁止（例: `paulsyamaha.com` ✗）
- 複数形・所有格の使用不可（"Yamahas"、"Yamaha's" ✗）
- 商標としての形容詞的使用のみ許可（"Yamaha® pianos" ✓）

---

## Do's と Don'ts

### Do's

- パープル (`#48217A`) をプライマリアクション（ボタン、アクティブリンク、フォーカスリング）に使う
- 白背景上にパープルテキスト/ボタンを置き、十分なコントラスト比を確保する
- 日本語テキストに行間 1.6–1.8 を設定し可読性を優先する
- 製品画像は正方形（1:1）またはワイド横長（3:1）に統一する
- 重要な安全情報にのみ赤 (`#E60012`) を使う

### Don'ts

- Yamaha Motor（二輪）の赤をコーポレートカラーとして使わない
- パープル背景にパープルテキストを重ねない
- ロゴを緑・青・オレンジなど非コーポレートカラーで使わない
- 装飾目的でアラートレッドを使わない
- ワードマーク書体を `Arial`・`Helvetica` で代替しない（視覚的乖離が大きい）
- 3カラムグリッドを崩してコンテンツ密度を過度に上げない

---

## エビデンス分類

| 情報 | 種別 |
|---|---|
| ヴァイオレットがコーポレートカラー | 公式資料（yamaha.com/en/about/history/logo/） |
| `#48217A` の hex 値 | 推論（複数の第三者データベースが一致） |
| ロゴファイル名 `yamaha_purple.svg` | 直接観察（HTML ソース） |
| 白ヘッダー・白フッター | 直接観察（レンダリング説明） |
| 赤アラートアイコンの存在 | 直接観察（`icon_30_red_*.gif` ファイル名） |
| ヒーロー 2000×800px / 製品 756×756px | 直接観察（`impolicy=resize` パラメータ） |
| 日本語フォントスタック | 推論（CSS 取得不可のため標準スタック適用） |
| ボタン・リンクの具体的スタイル | 推論（ブランドカラーとコーポレートサイト慣習から） |
| ロゴクリアスペース・最小サイズ | 公式資料（usa.yamaha.com/trademark_guidelines） |

{
  "$schema": "https://aistyles.dev/schema/tokens-v1.json",
  "version": "1.0",
  "brand": {
    "slug": "yamaha",
    "name": "Yamaha Japan (jp.yamaha.com)",
    "url": "https://jp.yamaha.com/",
    "description": "Yamaha Music Japan Co., Ltd. (ヤマハ株式会社の国内販売子会社) が運営する日本語コーポレートサイト。楽器・音響機器・音楽教室・サポートを軸とし、コーポレートカラーであるヴァイオレット (#48217A) を基点に、白ベースの清潔なレイアウト上でパープルのロゴとアクセントが機能する構成。",
    "category": "tech",
    "tags": [
      "corporate",
      "japanese",
      "music",
      "instruments",
      "violet",
      "premium",
      "education"
    ],
    "theme": "light",
    "language": "ja"
  },
  "sources": [
    "https://jp.yamaha.com/",
    "https://jp.yamaha.com/products/",
    "https://www.yamaha.com/en/about/history/logo/",
    "https://usa.yamaha.com/about_yamaha/trademark_guidelines/index.html",
    "https://www.designyourway.net/blog/yamaha-logo/",
    "https://www.brandcolorcode.com/yamaha"
  ],
  "extractedAt": "2026-05-17",
  "notes": [
    "直接観察: jp.yamaha.com の HTML 構造・画像ファイル名 (yamaha_purple.svg) からパープルロゴを確認。",
    "直接観察: ヘッダー白地・ナビゲーションテキスト黒・フッター白地を確認。",
    "公式資料: yamaha.com/en/about/history/logo/ によりヴァイオレットがコーポレートカラーと明記。",
    "推論: ウェブフォントスタックは CSS 直接取得不可のため標準的日本語サンセリフスタックを推定。",
    "推論: ボタン・リンクの具体的 hex 値は CSS 非公開のため観察された視覚的パターンから推定。",
    "重要: Yamaha Motor Co., Ltd. (二輪) は別会社でレッドを使用。本ガイドは Yamaha Corporation / Yamaha Music Japan のもの — 赤紫の混在は禁止。",
    "重要: ワードマークは Yamaha 専用カスタム書体 (M の中央縦棒が外側縦棒より短い非対称デザイン)。公開フォントでは再現不可。"
  ],
  "colors": {
    "groups": [
      {
        "label": "Brand Violet",
        "tokens": [
          {
            "name": "Primary (Yamaha Violet)",
            "value": "#48217A",
            "token": "--color-primary",
            "role": "コーポレートカラー。ロゴ・主要リンク・プライマリボタン・アクティブ状態"
          },
          {
            "name": "Primary Light",
            "value": "#6B3FA0",
            "token": "--color-primary-light",
            "role": "ホバー状態・グラデーション上端"
          },
          {
            "name": "Primary Dark",
            "value": "#2E1254",
            "token": "--color-primary-dark",
            "role": "深いコントラストが必要な場面・テキスト on パープル背景"
          },
          {
            "name": "On Primary",
            "value": "#FFFFFF",
            "token": "--color-on-primary",
            "role": "パープル背景上のテキスト・アイコン"
          }
        ]
      },
      {
        "label": "Alert",
        "tokens": [
          {
            "name": "Alert Red",
            "value": "#E60012",
            "token": "--color-alert-red",
            "role": "重要なお知らせバッジ・エラー・警告専用。装飾目的では使用しない (Yamaha Motor の赤と同色だが用途を限定)"
          }
        ]
      },
      {
        "label": "Text",
        "tokens": [
          {
            "name": "Text Primary",
            "value": "#1A1A1A",
            "token": "--color-text-primary",
            "role": "本文・見出し (ほぼ黒)"
          },
          {
            "name": "Text Secondary",
            "value": "#555555",
            "token": "--color-text-secondary",
            "role": "サブテキスト・説明文"
          },
          {
            "name": "Text Muted",
            "value": "#888888",
            "token": "--color-text-muted",
            "role": "プレースホルダー・補足テキスト・日付"
          }
        ]
      },
      {
        "label": "Surface",
        "tokens": [
          {
            "name": "Surface",
            "value": "#FFFFFF",
            "token": "--color-surface",
            "role": "カード背景・ヘッダー・フッター背景"
          },
          {
            "name": "Surface Alt",
            "value": "#F5F5F5",
            "token": "--color-surface-alt",
            "role": "セクション区切り・ホバー背景"
          }
        ]
      },
      {
        "label": "Border & Neutral",
        "tokens": [
          {
            "name": "Border",
            "value": "#E0E0E0",
            "token": "--color-border",
            "role": "カード枠線・ディバイダー"
          },
          {
            "name": "Neutral Gray",
            "value": "#B5B7B6",
            "token": "--color-neutral-gray",
            "role": "ディバイダー・非アクティブ UI 要素"
          },
          {
            "name": "Overlay Dark",
            "value": "rgba(0,0,0,0.5)",
            "token": "--color-overlay-dark",
            "role": "ヒーロー画像オーバーレイ・モーダル背景"
          }
        ]
      }
    ]
  },
  "typography": {
    "fonts": [
      {
        "family": "Yu Gothic",
        "stack": "'Yu Gothic', '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif",
        "weights": [
          400,
          700
        ],
        "role": "本文・見出し全般。日本語コーポレートサイトの標準スタック (推論)。Regular/Bold の 2 段階運用"
      },
      {
        "family": "Yamaha Wordmark (Proprietary)",
        "stack": "custom",
        "weights": [
          700
        ],
        "role": "ロゴ wordmark 専用。Yamaha 独自カスタム書体 (M の中央縦棒非対称)。代替として Bebas Neue / Barlow Condensed が視覚的に近い"
      }
    ],
    "scale": [
      {
        "role": "heading-l",
        "size": "32px",
        "weight": 700,
        "lineHeight": 1.3,
        "note": "ページタイトル・ヒーローテキスト (24-32px の上限)"
      },
      {
        "role": "heading-m",
        "size": "22px",
        "weight": 700,
        "lineHeight": 1.4,
        "note": "セクション見出し・カードタイトル (18-22px の上限)"
      },
      {
        "role": "heading-s",
        "size": "16px",
        "weight": 700,
        "lineHeight": 1.5,
        "note": "サブセクション・ラベル (14-16px の上限)"
      },
      {
        "role": "body",
        "size": "16px",
        "weight": 400,
        "lineHeight": 1.7,
        "note": "本文・説明文 (14-16px、日本語可読性のため 1.7)"
      },
      {
        "role": "label",
        "size": "13px",
        "weight": 400,
        "lineHeight": 1.5,
        "note": "日付・タグ・フッターリンク (12-13px)"
      }
    ],
    "japanese": {
      "fontStack": "'Yu Gothic', '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif",
      "lineHeight": 1.7,
      "letterSpacing": "0",
      "openType": {
        "palt": false,
        "kern": true
      },
      "kinsoku": {
        "wordBreak": "keep-all",
        "lineBreak": "strict"
      },
      "notes": [
        "標準的な日本語コーポレートスタック、外部 Web フォントは未使用と推定",
        "Regular (400) と Bold (700) の 2 段階運用",
        "本文 line-height: 1.7、見出し 1.3-1.4 で日本語の可読性を確保"
      ]
    }
  },
  "spacing": {
    "baseUnit": "8px",
    "tokens": [
      {
        "name": "base",
        "value": "8px",
        "role": "スペーシング単位"
      },
      {
        "name": "card-padding-min",
        "value": "16px",
        "role": "カード内側パディング (モバイル)"
      },
      {
        "name": "card-padding-max",
        "value": "24px",
        "role": "カード内側パディング (デスクトップ)"
      },
      {
        "name": "page-padding-mobile",
        "value": "16px",
        "role": "ページ左右余白 (モバイル)"
      },
      {
        "name": "page-padding-desktop",
        "value": "48px",
        "role": "ページ左右余白 (デスクトップ)"
      },
      {
        "name": "section-gap-min",
        "value": "48px",
        "role": "セクション間隔 (最小)"
      },
      {
        "name": "section-gap-max",
        "value": "80px",
        "role": "セクション間隔 (最大)"
      },
      {
        "name": "nav-height-min",
        "value": "60px",
        "role": "グローバルナビ高さ (モバイル)"
      },
      {
        "name": "nav-height-max",
        "value": "80px",
        "role": "グローバルナビ高さ (デスクトップ)"
      },
      {
        "name": "container-max",
        "value": "1280px",
        "role": "最大コンテンツ幅"
      }
    ]
  },
  "breakpoints": {
    "mobile": {
      "value": "0-767px",
      "role": "モバイル (左右余白 16-24px)"
    },
    "tablet": {
      "value": "768-1023px",
      "role": "タブレット"
    },
    "desktop": {
      "value": "1024px+",
      "role": "デスクトップ (3 カラムグリッド・最大幅 1280px)"
    }
  },
  "radius": {
    "s": "2px",
    "m": "4px",
    "l": "8px",
    "pill": "9999px"
  },
  "shadows": [
    {
      "name": "card",
      "value": "0 2px 8px rgba(0,0,0,0.08)",
      "role": "製品カード・ニュースカードの軽い浮遊感"
    }
  ],
  "components": [
    {
      "type": "button",
      "name": "Primary Button",
      "description": "ヴァイオレット背景の主要 CTA。製品ページの『購入』『詳細を見る』等",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#48217A",
            "color": "#FFFFFF",
            "borderRadius": "4px",
            "padding": "10px 24px",
            "fontWeight": "700",
            "fontSize": "14px",
            "border": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#6B3FA0",
            "color": "#FFFFFF",
            "borderRadius": "4px",
            "padding": "10px 24px",
            "fontWeight": "700",
            "fontSize": "14px",
            "border": "none"
          }
        }
      ]
    },
    {
      "type": "button",
      "name": "Secondary Button (Outline)",
      "description": "白背景 + ヴァイオレット枠線のアウトラインボタン。副次的アクション",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "transparent",
            "color": "#48217A",
            "border": "1px solid #48217A",
            "borderRadius": "4px",
            "padding": "10px 24px",
            "fontWeight": "700",
            "fontSize": "14px"
          }
        },
        {
          "label": "Hover",
          "props": {
            "background": "#48217A",
            "color": "#FFFFFF",
            "border": "1px solid #48217A",
            "borderRadius": "4px",
            "padding": "10px 24px",
            "fontWeight": "700",
            "fontSize": "14px"
          }
        }
      ]
    },
    {
      "type": "link",
      "name": "Text Link",
      "description": "本文中のリンク。ヴァイオレット色 + ホバーで下線",
      "variants": [
        {
          "label": "Default",
          "props": {
            "color": "#48217A",
            "textDecoration": "none"
          }
        },
        {
          "label": "Hover",
          "props": {
            "color": "#48217A",
            "textDecoration": "underline"
          }
        }
      ]
    },
    {
      "type": "card",
      "name": "Product Card",
      "description": "白背景の製品カード。正方形 (1:1) または横長 (3:1) 画像を主役に",
      "variants": [
        {
          "label": "Square (756×756px)",
          "props": {
            "background": "#FFFFFF",
            "color": "#1A1A1A",
            "border": "1px solid #E0E0E0",
            "borderRadius": "4px",
            "boxShadow": "0 2px 8px rgba(0,0,0,0.08)",
            "imageAspectRatio": "1/1"
          }
        },
        {
          "label": "Wide (735×245px)",
          "props": {
            "background": "#FFFFFF",
            "color": "#1A1A1A",
            "border": "1px solid #E0E0E0",
            "borderRadius": "4px",
            "boxShadow": "0 2px 8px rgba(0,0,0,0.08)",
            "imageAspectRatio": "3/1"
          }
        }
      ]
    },
    {
      "type": "nav",
      "name": "Global Navigation",
      "description": "白背景の固定ナビ。パープルロゴ左 + 8 カテゴリメニュー + メガドロップダウン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "height": "80px",
            "borderBottom": "1px solid #E0E0E0",
            "logoColor": "#48217A",
            "linkColor": "#1A1A1A",
            "activeLinkColor": "#48217A"
          }
        }
      ]
    },
    {
      "type": "badge",
      "name": "Alert Badge",
      "description": "赤いピル型のアラートバッジ。『製品に関する重要なお知らせ』専用。装飾使用禁止",
      "variants": [
        {
          "label": "Alert",
          "props": {
            "background": "#E60012",
            "color": "#FFFFFF",
            "borderRadius": "9999px",
            "fontSize": "11px",
            "fontWeight": "700",
            "padding": "2px 8px"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "Search Input",
      "description": "サイト内検索の水平テキスト入力 + 送信ボタン",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#1A1A1A",
            "border": "1px solid #E0E0E0",
            "borderRadius": "4px",
            "padding": "10px 16px",
            "placeholderColor": "#888888",
            "placeholderText": "サイト内を検索"
          }
        },
        {
          "label": "Focus",
          "props": {
            "background": "#FFFFFF",
            "color": "#1A1A1A",
            "border": "1px solid #48217A",
            "borderRadius": "4px",
            "padding": "10px 16px"
          }
        }
      ]
    },
    {
      "type": "footer",
      "name": "Footer",
      "description": "白背景の複数カラムフッター。リンク集とコピーライト最下部",
      "variants": [
        {
          "label": "Default",
          "props": {
            "background": "#FFFFFF",
            "color": "#555555",
            "linkColor": "#1A1A1A",
            "linkHoverColor": "#48217A",
            "dividerColor": "#E0E0E0"
          }
        }
      ]
    }
  ],
  "guidelines": {
    "do": [
      "パープル (#48217A) をプライマリアクション (ボタン・アクティブリンク・フォーカスリング) に使う",
      "白背景上にパープルテキスト/ボタンを置き、十分なコントラスト比を確保する",
      "日本語テキストに行間 1.6-1.8 を設定し可読性を優先する",
      "製品画像は正方形 (1:1) またはワイド横長 (3:1) に統一する",
      "重要な安全情報にのみ赤 (#E60012) を使う",
      "3 カラムグリッドを基本単位として製品カテゴリ・ニュースカードを配置する",
      "ヒーローバナーはフル幅 2000×800px (5:2) のプロフォトグラフィーで構成する",
      "ロゴ周囲のクリアスペースは Y の文字高さ分を全方向に確保する"
    ],
    "dont": [
      "Yamaha Motor (二輪) の赤をコーポレートカラーとして使わない",
      "パープル背景にパープルテキストを重ねない",
      "ロゴを緑・青・オレンジなど非コーポレートカラーで使わない",
      "装飾目的でアラートレッド (#E60012) を使わない (信頼性を維持)",
      "ワードマーク書体を Arial・Helvetica で代替しない (視覚的乖離が大きい)",
      "3 カラムグリッドを崩してコンテンツ密度を過度に上げない",
      "他社ロゴと同列サイズで並列配置しない (Yamaha ロゴは常に他社より大きく)",
      "ロゴの再デザイン・色変更・変形を行わない",
      "ドメイン名にロゴを組み込まない"
    ]
  }
}