Yonex (ヨネックス) DESIGN.md

Yonex（https://www.yonex.co.jp/）のデザイン仕様書。 実サイトの CSS computed style および CSS Custom Properties に基づく。 デュアルフォントシステム（Oswald + BIZ UDGothic）と黒基調のヒーロー、角形 CTA で「アスリートブランド」の力強さと精密さを表現している。

1. Visual Theme & Atmosphere

• デザイン方針: アスレチック・プレシジョン。スポーツギアメーカーとしての力強さと、用具の精密さを両立したデザイン
• 密度: ゆったりとした余白と大きなビジュアル。バドミントン・テニス・ゴルフの製品写真を際立たせるヒーロー型レイアウト
• キーワード: 力強い、黒基調、デュアルフォント、フラット、バイリンガル
• 特徴:
  • デュアルフォントシステム: 英語見出しに Oswald（コンデンスド・サンセリフ）、日本語に line-only + BIZ UDGothic のバイリンガル書体設計。和欧の対比がブランドの国際性を演出
  • "line-only" カスタム Web フォント: Yonex 独自のブランドフォントと推定される。BIZ UDGothic（UD = ユニバーサルデザイン）をフォールバックに指定し、可読性を担保
  • Oswald で英語セクションタイトル: letter-spacing: 0.1em の劇的なトラッキングで、スポーツブランドらしい迫力を表現
  • 角形 CTA（radius 0px）とピル型検索（radius 30px）の二重構造: 主要 CTA はシャープな角形、検索系はソフトなピル型と、用途で形状を使い分け
  • CTA ラベルは英語: 日本語サイトでありながら CTA テキストは "All News", "Learn More", "All Products" 等すべて英語。グローバルブランドの姿勢を反映
  • font-feature-settings: "normal"（palt なし） — プロポーショナル字詰めを使わない。BIZ UDGothic の均等な字面を活かしたデザイン
  • 73 色の CSS Custom Properties を持つ充実したデザイントークンシステム

2. Color Palette & Roles

Primary（ブランドカラー）

• Yonex Blue (#0061b1): メインのブランドカラー。検索ボタン、アクセント要素に使用。CSS Custom Property --color-main
• Yonex Blue 10〜90: --color-main-10: #f1f4f9 〜 --color-main-90: #000012 の 10 段階トーンスケール

Sub Accent（サブアクセント）

• Green 50 (#036a03): サブアクセントのグリーン。--color-sub-50
• Green 10〜40: --color-sub-10: #ecfff1 から段階的に濃くなるグリーン系トーンスケール

Neutral（ニュートラル）

• Text Primary (#000000): 本文テキスト。--color-type / --color-black
• Dark Charcoal (#1f2427): CTA 背景、英語ナビアクティブ、h2 テキスト。実質的な「ブランドダーク」として多用
• Breadcrumb BG (#444444): パンくずリストの背景
• Nav Inactive (#b5b5b5): 非アクティブなナビゲーションリンク、フッターアコーディオン
• White (#ffffff): ライト背景上のテキスト反転、検索ピルの背景

Surface & Background

• Hero Black (#000000): ヒーローセクションの背景。ページ上部を支配する色
• Page Background (transparent / #ffffff): html/body は transparent。コンテンツ領域は白
• Section Gray (#f6f6f6): セクション交互の背景色（バドミントンページで 7 回出現）

Border

• Tag Badge Border (#e8e8e8): タグバッジの枠線
• Search Input Border (#b5b5b5): 検索入力欄のボーダー
• CTA Border (#1f2427): 角形 CTA の 2px ボーダー

3. Typography Rules

3.1 和文フォント

カスタム Web フォント — line-only:

• Yonex 独自のブランドフォントと推定される。サイト上で和文本文に使用
• ドメインライセンスのため公式サイト以外では表示されない

フォールバック — BIZ UDGothic:

• BIZ UD ゴシック。ユニバーサルデザイン（UD）書体で、視認性・可読性に優れたゴシック体
• Google Fonts で無料配信されているため、プレビューやプロトタイプでもそのまま使える
• Yonex がフォールバックに UD 書体を選んでいるのは、スポーツ用品メーカーとしてのアクセシビリティ意識の表れ

3.2 欧文フォント

Oswald（Google Fonts）:

• コンデンスド・サンセリフ。セクション見出し、ナビゲーションラベル、フッターアコーディオンに使用
• Weight 400（見出し）/ 500（フッター）/ 700（ナビ）の 3 ウェイトを使い分け
• 縦長の字形がスポーツブランドの力強さを演出

3.3 font-family 指定

css/* 和文本文 */
font-family: line-only, "BIZ UDGothic", sans-serif;

/* 英語見出し・ナビゲーション */
font-family: Oswald, sans-serif;

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

• 和文は line-only（カスタム）→ BIZ UDGothic（Google Fonts）→ sans-serif の 3 段構え
• 英語見出しは Oswald 単独指定。Google Fonts 経由のため読み込み失敗時は sans-serif にフォールバック
• 和欧で完全にフォントファミリーを分けるデュアルフォント設計。CSSの font-family を要素ごとに切り替えて実現

プレビュー用代替: line-only が利用できない環境では BIZ UDGothic をそのまま使用する。Oswald は Google Fonts から直接読み込めるため代替不要。

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

以下は DevTools の computed style による実測値

3.5 行間・字間

行間 (line-height) — 実測値:

• 本文 (body): 25.6px (16px x 1.6) — 日本語サイトとして標準的。BIZ UDGothic の広い字面と相性が良い
• 英語セクション見出し (h2): 84px (56px x 1.5) — Oswald のコンデンスド字形に対して余裕のある行間
• ナビゲーション: 22.4px (16px x 1.4)
• タグバッジ: 19.2px (12px x 1.6)

字間 (letter-spacing) — 実測値:

• 英語セクション見出し (h2 Oswald): 5.6px (0.1em) — 極めて広いトラッキング。Oswald のコンデンスド字形を劇的に広げてスポーツブランドの迫力を演出
• 本文テキスト: normal
• ナビゲーション: normal

ガイドライン:

• Oswald の letter-spacing: 0.1em は英語セクションタイトル専用。日本語テキストや本文には適用しない
• body の line-height: 1.6 は BIZ UDGothic の字面を考慮した値。これより詰めると可読性が低下する
• 日本語本文の letter-spacing は normal（ベタ組み）。palt を使わない設計と一貫

3.6 禁則処理・改行ルール

css/* Yonex サイトのデフォルト設定 */
word-break: normal;
overflow-wrap: break-word;

• ブラウザデフォルトの禁則処理に委ねている
• 長い URL や英単語の折り返しは overflow-wrap: break-word で対応

3.7 OpenType 機能

css/* Yonex の設定 */
font-feature-settings: normal;

• palt 未使用 — プロポーショナル字詰めを適用していない
• BIZ UDGothic のデフォルトの等幅字面をそのまま活用する設計
• UD（ユニバーサルデザイン）書体の特性として、等幅配置の方が可読性が高いという判断と推定

3.8 縦書き

• 該当なし。Yonex は横書きのみ

4. Component Stylings

Buttons

Primary CTA（角形 — メインのアクション） — 実測値:

• Background: #1f2427
• Text: #ffffff
• Border: 2px solid #1f2427
• Border Radius: 0px（完全角形）
• Padding: 16px
• Font Size: 14px
• Font Weight: 700
• 用途: "All News", "Learn More", "All Products", "View All" 等。ラベルはすべて英語

Search Pill（ピル型 — 検索送信）

• Background: #0061b1（Yonex Blue）
• Text: #ffffff
• Border Radius: 30px（ピル型）
• Font Size: 16px
• Font Weight: 400

Search Input Pill（ピル型 — 検索入力欄）

• Background: #ffffff
• Border: 1px solid #b5b5b5
• Border Radius: 30px（ピル型）
• Font Size: 16px
• Font Weight: 500
• Padding: 0 38px

Hamburger Menu

• Background: #000000
• Text: #ffffff
• Font Size: 11px
• Font Weight: 700

Page Top（トップへ戻る）

• Background: #ffffff
• Border Radius: 50%（円形）

重要: Yonex は CTA とユーティリティで形状を明確に使い分ける。主要アクション CTA は角形（radius 0px）、検索系はピル型（radius 30px）、ページトップは円形（radius 50%）。この三段階の使い分けがデザインの特徴。

Cards

Tag Badge（タグラベル）

• Background: #ffffff
• Border: 1px solid #e8e8e8
• Padding: 0 8px
• Font Size: 12px
• Color: #1f2427

Navigation

• Desktop Header: 白背景。英語ラベル（Oswald, 700）と日本語子要素（line-only / BIZ UDGothic, 700）の二層構造
• Nav Inactive: テキスト色 #b5b5b5（非アクティブ時）→ #1f2427（アクティブ時）
• Hamburger: 黒背景 #000000、11px / 700 のコンパクトなラベル

Inputs

• Background: #ffffff
• Border: 1px solid #b5b5b5
• Border Radius: 30px（ピル型 — 検索フォーム）
• Font Size: 16px
• Font Weight: 500
• Padding: 0 38px

5. Layout Principles

Spacing Scale

Yonex はコンテンツに応じた余白設計を採用。スポーツ製品の大型ビジュアルに十分な呼吸を与えるヒーロー型レイアウト。

Container

• Max Width: 全幅レイアウト（コンテンツ部分は約 1200px 内に収まる）
• Padding (horizontal): 16px〜40px

Grid

• 製品一覧: 2〜4 カラムのグリッド
• ニュース・記事: 1〜3 カラム
• ヒーロー: フル幅の画像・動画

6. Depth & Elevation

Yonex のデザインはフラットを基調とし、box-shadow の使用は検出されていない。

Yonex は影ではなく、背景色の切り替え（黒 → 白 → グレー → 黒）でセクション間の奥行きを表現する。フラットデザインの徹底。

7. Do's and Don'ts

Do（推奨）

• 英語見出しには Oswald を使い、letter-spacing: 0.1em で広いトラッキングを適用する
• 日本語本文には line-only / BIZ UDGothic を使い、letter-spacing: normal のベタ組みにする
• CTA ボタンのラベルは英語にする（"Learn More", "All Products" 等）
• 主要 CTA は border-radius: 0px の角形、背景色 #1f2427 にする
• 検索系 UI は border-radius: 30px のピル型にする
• ヒーローセクションは黒背景 #000000 で製品ビジュアルを際立たせる
• Yonex Blue #0061b1 はアクセント（検索ボタン等）に限定して使う
• ダーク背景上のテキストは #ffffff を使用する
• セクション交互色には #f6f6f6 を使う

Don't（禁止）

• 主要 CTA に角丸を付けない — border-radius: 4px や 8px は Yonex の CTA デザインに反する
• 日本語テキストに Oswald を適用しない — Oswald は英語専用
• 英語見出しに BIZ UDGothic を使わない — 欧文は Oswald で統一
• font-feature-settings: "palt" を適用しない — Yonex は palt を使わない設計
• Yonex Blue #0061b1 を大面積の背景色に使わない — アクセント用途に限定
• CTA ラベルを日本語にしない — Yonex の CTA は英語表記で統一されている
• 装飾的な影やグラデーションを多用しない — Yonex はフラットデザインを徹底している
• #1f2427 と #000000 を混同しない — CTA・テキスト要素は #1f2427、ヒーロー背景は #000000 と使い分ける

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• CTA ボタンは padding: 16px で十分なタッチ領域を確保
• ハンバーガーメニューはモバイル時の主要ナビゲーション手段

フォントサイズの調整

• モバイルでは本文 14-16px
• Oswald の英語見出しは 56px → 24-32px 程度に縮小
• デュアルフォントシステム（Oswald + BIZ UDGothic）はモバイルでも維持

9. Agent Prompt Guide

クイックリファレンス

Brand Color (Accent): #0061b1 (Yonex Blue — 検索ボタン等のアクセント)
CTA Dark: #1f2427 (主要 CTA 背景・テキスト)
Text Primary: #000000
Nav Inactive: #b5b5b5
Hero Background: #000000
Page Background: #ffffff
Section Alt Background: #f6f6f6
Tag Badge Border: #e8e8e8
CTA Border: #1f2427 (2px solid)

Font (JP Body): line-only, "BIZ UDGothic", sans-serif
Font (EN Heading): Oswald, sans-serif

Body: 16px / line-height: 1.6 / letter-spacing: normal
EN Heading: Oswald, 56px / line-height: 1.5 / letter-spacing: 0.1em
CTA: 14px / weight: 700 / radius: 0px
Search Pill: radius: 30px / bg: #0061b1
OpenType: font-feature-settings: normal (palt なし)

プロンプト例

Yonex のデザインに従って、製品一覧ページを作成してください。
- 和文フォント: "BIZ UDGothic", sans-serif
  (line-only が使えない環境では BIZ UDGothic をプライマリに)
- 英語見出しフォント: Oswald, sans-serif (Google Fonts)
- 本文色: #000000、CTA テキスト・背景: #1f2427
- ヒーロー背景: #000000、セクション交互色: #f6f6f6
- Yonex Blue #0061b1 は検索ボタン等のアクセントに限定
- CTA: border-radius: 0px の角形、border: 2px solid #1f2427
  padding: 16px、14px weight 700、ラベルは英語
- 検索: border-radius: 30px のピル型
- 英語見出し: Oswald, letter-spacing: 0.1em
- 本文: 16px, line-height: 1.6, letter-spacing: normal
- font-feature-settings: normal (palt を使わない)