Yamaha（ヤマハ株式会社） DESIGN.md

ヤマハ株式会社コーポレートサイト（https://www.yamaha.com/ja/）のデザイン仕様書。 1887 年創業、楽器・音響機器・半導体まで手がける総合企業のコーポレート顔。 実サイトの computed style 実測（2026-05-06 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 創業 135 年超の老舗メーカーが「楽器ブランド」のロイヤリティを抑えめに、コーポレート格を保ちつつ品の良いプロダクトカタログ的トーンに着地させた構成。ヤマハパープル #4b1e78 を主役に据え、他はほぼ無彩色 + 淡いラベンダー帯で組む
• 密度: 本文 16px / line-height 1.75（28px）はコーポレートサイトとしては緩めで、長文の理念・ニュースリリース読み物に振った組版
• キーワード: ヤマハパープル、ピル CTA、ニュートラル、長文読み物、ヒラギノ角ゴ、混植系
• 特徴:
  • ブランドカラーは #4b1e78（ヤマハパープル／ロイヤルバイオレット）。CTA・ヘッダーリンクのみで使い、面に広げず点で効かせる
  • ヒーロー CTA は完全ピル（border-radius: 60px）。コーポレートサイトとしては珍しくモダンな当て方
  • 見出しは Bold（700）一択。Light / Medium ウェイトを混ぜず、太さで階層を切る潔さ
  • letter-spacing は normal。ヒラギノ角ゴ Pro の固有メトリクスをそのまま信用する設計
  • サブの淡色帯に rgba(214, 164, 234, 0.4) ≒ 薄ラベンダー を使い、楽器系の柔らかい温度感を保つ
  • パンくず・ニュース日付は #4b1e78 で着色して、無彩色ボディの中で道筋を強調
  • ダークモード非対応

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Yamaha Purple (#4b1e78): メインのブランドカラー。CTA・主要リンク・キャプション
• Pale Lavender (#d6a4ea / α 0.4 ≒ #f0e2f7): セクション内のラベル帯・ホバー領域

CTA / Buttons

• Primary Pill: 背景 #4b1e78 / 文字 #ffffff / radius 60px / padding 16px 45px 16px 20px / 16px / weight 700 — "ニュースリリースを見る"
• Outline Pill (on Hero): 背景 rgba(0, 0, 0, 0.5) / 文字 #ffffff / border 1px solid #ffffff / radius 60px / padding 15px 44px 15px 20px / 16px / weight 700 — "ブランドプロミスを見る"
• Header Tab: 背景 #4b1e78 / 文字 #ffffff / radius 0px / padding 0 20px 0 0 / 14px / weight 700 — "製品・サービスサイト"

Neutral

• Text Primary (#333333): 本文・見出し
• Text on Dark (#ffffff): ヒーロー帯のテキスト
• Border (#a3a3a3): スライドコントロール・薄い区切り線
• Background (#ffffff): ページ背景
• Surface 1 (#f6f6f6): メガメニュー・カードグループの面
• Surface 2 (#e8e8e8): 関連サイト導線セクション
• Surface 3 (#383838): フッター帯（推定）
• Slide Indicator (#bababa): 非選択スライドドット
• Overlay Dim (rgba(0, 0, 0, 0.5)): ヒーロー上の半透明オーバーレイ

Semantic（推奨補完）

実サイトに表面化した状態色は確認できないため、コーポレート向け補完値:

• Danger: #d83933（重要なお知らせ枠線想定）
• Warning: #f1a824
• Success: #1f7a4d

3. Typography Rules

3.1 和文フォント

• ゴシック体（メイン）: ヒラギノ角ゴ Pro（ProN ではなく Pro を採用 — Apple JP と同じ系統）
• Web フォント補強: Noto Sans JP（フォールバック 2 番手）
• Windows フォールバック: メイリオ / Meiryo

3.2 欧文フォント

• 専用欧文フォントは持たず、和文フォント内の欧文グリフをそのまま使用
• 最終手段として Droid Sans → sans-serif

3.3 font-family 指定

実サイトの実測値（全ページ統一）:

cssfont-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP",
  "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic ProN",
  メイリオ, Meiryo, "Droid Sans", sans-serif;

フォールバックの考え方:

• 和文（ヒラギノ）を最優先。コーポレート文書は和文の表情を最重要視する設計
• Apple は ProN ではなく Pro を採用（古めのフォント指定だが、字形差はわずか）
• Windows でも Noto Sans JP（Web フォント） → メイリオの順で読みやすさを担保

3.4 文字サイズ・ウェイト階層

実測値（トップページ・企業情報ページ、2026-05-06 取得）

3.5 行間・字間

• 本文の行間: 1.75（28px / 16px）— 日本語読み物に最適化された緩めの値
• 大見出し (h1, h3 数字): 1.4〜1.5
• letter-spacing: 全階層で normal（明示指定なし）— ヒラギノ角ゴ Pro の固有メトリクスを尊重

ガイドライン:

• 日本語本文は line-height: 1.75 を維持。ヤマハの長文ニュース／理念ページの読みやすさの肝
• 字間に手を加えない。トラッキングを乗せると老舗コーポレートの落ち着きが崩れる
• 見出しは すべて Bold（700） で揃え、ウェイト差ではなくサイズ差で階層を切る

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• ニュースタイトルや製品ロングテール名で意図的な改行は避け、自動禁則に任せる
• パンくず（"ホーム > 企業情報"）は white-space: nowrap で折り返さない

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上 palt も kern も明示有効化されていない
• ヒラギノ角ゴ Pro の標準字詰めをそのまま使用 — コーポレート文書としての読みやすさを優先
• 見出しを詰める場合のみ palt を補助的に追加するのは可

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（パープルピル） — メインの行動喚起

• Background: #4b1e78
• Text: #ffffff
• Padding: 16px 45px 16px 20px（右側に矢印アイコン分の余白）
• Border Radius: 60px（完全ピル）
• Font: Hiragino Kaku Gothic Pro, 16px, weight 700
• Border: none
• Box Shadow: なし（フラット）

Outline Pill on Hero — ヒーロー画像上の透過 CTA

• Background: rgba(0, 0, 0, 0.5)
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 15px 44px 15px 20px
• Border Radius: 60px
• Font: 16px / weight 700

Header Tab Link — グローバルナビの強調項目

• Background: #4b1e78
• Text: #ffffff
• Padding: 0 20px 0 0
• Border Radius: 0px（角直、ナビ内のタブ的扱い）
• Font: 14px / weight 700

Slide Control — カルーセル操作

• Background: #ffffff
• Border: 1px solid #a3a3a3
• Border Radius: 50%（円）
• Size: 約 32×32px

Inputs（推奨値、実測ではフォーム項目が表面化していないため補完）

• Background: #ffffff
• Border: 1px solid #a3a3a3
• Border (focus): 1px solid #4b1e78
• Border Radius: 4px
• Padding: 12px 16px
• Font: Hiragino Kaku Gothic Pro, 16px, weight 400
• Color: #333333
• Height: 48px

Cards

• Background: #ffffff または #f6f6f6
• Border: なし
• Border Radius: 0px〜8px（コーポレートではほぼ角直、製品系では 8px を推奨）
• Padding: 24px〜32px
• Shadow: 基本フラット、必要に応じて Level 1 を使う

Header / Nav

• Background: #ffffff
• Box Shadow: rgba(0, 0, 0, 0.2) 0 5px 10px -7px（薄い下方シャドウで境界を作る）
• Padding: 上下 0
• Height: 推奨 64〜72px

Footer

• Background: #383838（推定）または #f6f6f6 の帯
• Color: #333333 または #ffffff（暗背景時）
• Padding: 64px 32px 32px

Mega Menu Panel

• Background: #f6f6f6
• Hover Tag Background: rgba(214, 164, 234, 0.4) ≒ 薄ラベンダー
• 製品・楽器カテゴリの一覧表示。フォントは本文と同じ 16px

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px 程度（推奨）
• Padding (horizontal): mobile 16px / desktop 32〜48px

Border Radius Scale

Grid

• 12 カラムグリッドが推奨
• Gutter: 24px

6. Depth & Elevation

• ヤマハは 影をほぼ使わない設計。サーフェス階層（白 → #f6f6f6 → #e8e8e8）で奥行きを作る
• ヘッダーだけが薄い境界用シャドウ（実測値）を持つ

7. Do's and Don'ts

Do（推奨）

• ブランドカラーは #4b1e78（ヤマハパープル） を CTA・主要リンクに集中投下する
• 主要 CTA は 完全ピル（border-radius: 60px） にする
• 見出しは すべて Bold（700） で揃え、サイズ差で階層を切る
• 本文の line-height は 1.75 を維持（長文ニュース・理念ページの読みやすさが核）
• 和文フォントは ヒラギノ角ゴ Pro → Noto Sans JP → メイリオ の順でフォールバック
• letter-spacing は normal を基本とし、ヒラギノの固有メトリクスを信用する
• 補助情報（年度表記等）に #4b1e78 を点で使うとブランドのトーンが立つ

Don't（禁止）

• ブランドカラーを面に広げない（CTA・点アクセントのみ）
• 見出しに Light / Regular ウェイト を使わない（コーポレートのカチッと感が崩れる）
• 本文の line-height を 1.5 以下にしない（漢字が詰まりすぎる）
• ピル CTA を 角丸 8px や直角 に置き換えない（ヤマハのモダンさはピルが担う）
• letter-spacing をかけすぎない（古めの ProN/Pro フォントは詰めるとザラつく）
• 楽器ブランドだからといって 派手な彩度の紫 を使わない（#4b1e78 は深く落ち着いた紫）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Page Title (h1): 32px → 24〜26px
• Section H2: 28px → 22〜24px
• H3: 24px → 20px
• 本文: 16px は維持（読みやすさ優先）
• グローバルナビはハンバーガーへ切り替え

タッチターゲット

• 主要 CTA: padding 16px 20〜45px で 50〜52px の高さ（44px 以上を確保）
• スライドコントロール: 32×32px は推奨では不足、モバイルでは 44×44px に拡張する

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Yamaha Purple: #4b1e78
Pale Lavender: #d6a4ea (α 0.4)
Text Primary: #333333
Background: #ffffff
Surface 1: #f6f6f6
Surface 2: #e8e8e8
Border: #a3a3a3
Overlay: rgba(0, 0, 0, 0.5)

Font: "Hiragino Kaku Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "Droid Sans", sans-serif

Body: 16px / line-height 1.75 / weight 400 / letter-spacing normal
H1: 32px / line-height 1.5 / weight 700
Section H2: 28px / line-height 1.75 / weight 700
H3: 24px / line-height 1.75 / weight 700
Caption: 14px / line-height 1.75 / weight 400

Button (Pill): bg #4b1e78 / 白文字 / padding 16px 45px 16px 20px / radius 60px / 16px weight 700
Header Tab: bg #4b1e78 / 白文字 / padding 0 20px 0 0 / radius 0 / 14px weight 700

プロンプト例

ヤマハのコーポレートデザインに従って、ニュースリリース一覧ページを作成してください。
- フォント: "Hiragino Kaku Gothic Pro", "Noto Sans JP", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
- ページ見出し (h1): 32px / weight 700 / line-height 1.5 / color #333333
- セクション見出し (h2): 28px / weight 700 / line-height 1.75
- 本文: 16px / weight 400 / line-height 1.75 / color #333333 / letter-spacing normal
- 日付・年度表記: 12px / color #4b1e78（ブランド色を点で）
- 主要 CTA "詳細を見る": 背景 #4b1e78 / 白文字 / radius 60px / padding 16px 45px 16px 20px / weight 700
- カード背景: #ffffff、メガメニュー帯は #f6f6f6
- ホバー強調: rgba(214, 164, 234, 0.4) の薄ラベンダー帯
- 影は基本使わず、サーフェス階層（白 → #f6f6f6 → #e8e8e8）で奥行きを作る
- ボタンは完全ピル、本文は line-height 1.75 を維持
- letter-spacing は normal、ヒラギノ角ゴ Pro の固有メトリクスを尊重