Mizuno（ミズノ） DESIGN.md

Mizuno（https://www.mizuno.jp/）のデザイン仕様書。 ランニング・野球・ゴルフ等のスポーツ用品を扱う EC サイト。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: クリーンなライトテーマ基調（#ffffff / #f5f5f5 背景 + ダークテキスト）で、スポーツ用品 EC としての機能性と信頼感を重視。ブランドカラーの Mizuno Blue（#001489） をアクセントに使い、プロダクトイメージを前面に出したビジュアル主導のレイアウト
• 密度: トップページはヒーローバナー＋カテゴリグリッドで高密度。商品一覧は規則的なカードグリッド。フッターはダーク（#111111）でライトテキスト（#f5f5f5）
• キーワード: スポーツ、機能的、ライト＆クリーン、ダークCTA、グリッドEC
• 特徴:
  • フォントに Roboto（欧文）+ Hiragino Kaku Gothic ProN / メイリオ（和文）を使用。欧文優先のフォールバック構成
  • font-feature-settings（palt）は使用なし。字詰め指定なしのナチュラルスペーシング
  • Bootstrap ベース の CSS フレームワーク。--primary: #007bff 等の Bootstrap カスタムプロパティが残存するが、実サイトの実測色とは乖離がある
  • CTA ボタンは #111111 背景に白テキスト または #ffffff 背景に黒テキスト のバイナリ構成。radius は 3px のわずかな角丸
  • プロモバーはダーク背景（#111111）+ #f5f5f5 テキストの帯状通知

2. Color Palette & Roles

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

Brand

• Mizuno Blue (#001489): ブランドアクセントカラー。ロゴ、一部アクセント要素に使用（4件の実測）
• Text Dark (#111111): セクション見出し、プライマリ CTA 背景、フッター背景
• Text Primary (#303030): 本文テキスト、ナビゲーション、汎用ラベル

Accent

• Pink (#ffb7c5): メンバーシップ・サービスバッジ背景
• Yellow (#ffff00): ハイライト、セール表示
• Light Blue (#89b8ee): セカンダリアクセント

Neutral

Semantic（Bootstrap 残存変数）

Bootstrap 由来の CSS カスタムプロパティが残存するが、実サイトの主要 UI では直接使用されていない。参照のみ。

• --primary: #007bff / --secondary: #6c757d / --success: #28a745
• --info: #17a2b8 / --warning: #ffc107 / --danger: #dc3545

3. Typography Rules

3.1 和文フォント

• ゴシック体: Hiragino Kaku Gothic ProN を最優先。ない場合 メイリオ（Meiryo） にフォールバック
• 明朝体: 使用なし（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Roboto（Google Fonts）を最優先。欧文優先のフォールバック構成
• フォールバック: sans-serif

3.3 font-family 指定

css/* サイト全体（本文・見出し共通） */
font-family: Roboto, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;

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

• 欧文優先構成。Roboto（欧文）が先頭に来るため、欧文グリフは Roboto が描画する
• 日本語は Hiragino Kaku Gothic ProN（macOS / iOS）→ メイリオ（Windows）の順
• 見出し・本文・ナビゲーションで font-family の切り替えはなく、全体で同一チェーンを使用

代替フォント注記: Roboto は Google Fonts から無償で利用可能。和文の代替として Noto Sans JP を組み合わせると字形の印象が近い（Noto は Roboto と同じ Google デザインチームが監修）。

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

実測値（トップ／商品一覧ページ、2026-05-09 取得）

3.5 行間・字間

• 本文の行間 (line-height): 1.67（23.33px / 14px）— 日本語 EC サイトとしては標準的な行間
• 見出しの行間: 1.2（H2 / H3 大型見出し）/ 1.5（H3 小型）
• ナビゲーションの行間: 1.67（カテゴリ）〜 2.95（メガメニュー大項目）
• 本文の字間 (letter-spacing): normal（0）— palt 未使用、字詰めなし
• 見出しの字間: normal（0）— 全階層で字間指定なし

ガイドライン:

• font-feature-settings: "palt" は使用しない。Roboto は欧文フォントであり、palt は和文専用 OpenType 機能
• letter-spacing を追加する場合は欧文の可読性への影響を考慮する
• ナビゲーション大項目の line-height: 2.95 は高さ確保のためのパディング代わり

3.6 禁則処理・改行ルール

css/* 実サイト観測値に基づく推奨設定 */
word-break: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

css/* Mizuno サイト: font-feature-settings 指定なし（palt 未使用） */

• palt: 使用しない。Roboto 欧文フォントが先頭に来る構成のため、palt の効果は期待できない
• kern: 暗黙的に有効（ブラウザデフォルト）

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（"詳しく見る" 等）

• Background: #111111
• Text: #ffffff
• Padding: 5px
• Border Radius: 3px
• Font Size: 14px
• Font Weight: 400
• Font Family: Roboto

Secondary CTA（"ピックアップをすべて見る" 等）

• Background: #ffffff
• Text: #111111
• Border: 1px solid #111111（推定）
• Padding: 18px
• Border Radius: 3px
• Font Size: 14px
• Font Weight: 400

Tag Pill（検索タグ）

• Background: #f5f5f5
• Text: #111111
• Border Radius: 30px（pill 型）
• Padding: 3px 7px
• Font Size: 12px
• Font Weight: 400

Service Badge（メンバーシップ）

• Background: #ffb7c5
• Text: #ffffff
• Border Radius: 5px
• Padding: 5px
• Font Size: 12px
• Font Weight: 700

Inputs

• Background: #ffffff / #f5f5f5（フィールドによる）
• Border: 1px solid #ededed
• Border Radius: 3px
• Font Size: 14px

Cards

• Background: #ffffff
• Border: なし（またはセパレータで区切る）
• Border Radius: 0〜3px
• Shadow: なし（フラットデザイン）
• テキスト色: #303030

Navigation

• Background: #ffffff（メインナビ）/ #111111（プロモバー）
• カテゴリ項目: 16px, weight 700, color #303030
• メガメニュー大項目: 22px, weight 400, line-height 65px
• メガメニュー小項目: 12px, weight 400, line-height 28.8px, color #111111

5. Layout Principles

Spacing Scale

Container

• Max Width: Bootstrap グリッド準拠（1200px 相当と推定）
• Padding (horizontal): 15px（Bootstrap デフォルト）

Grid

• Bootstrap 12 カラムグリッドをベースに使用
• 商品カード: 2〜4 カラム（デスクトップ）/ 1〜2 カラム（モバイル）
• カテゴリグリッド: 4〜6 カラム

6. Depth & Elevation

実サイトはフラット寄りのデザイン。shadow よりも #ededed ボーダーや背景色の差で面の階層を表現している。

7. Do's and Don'ts

Do（推奨）

• テキスト色は #303030（本文）/ #111111（見出し）を使い分ける
• プライマリ CTA は #111111 背景 + #ffffff テキストの高コントラスト構成にする
• タグ・ピルには border-radius: 30px（pill 型）+ #f5f5f5 背景を使う
• フッターは #111111 背景 + #f5f5f5 テキストのダークフッターを維持する
• Mizuno Blue (#001489) はロゴ・ブランド強調にのみ使い、CTA には使わない
• font-family は Roboto, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif のフルチェーンを指定する

Don't（禁止）

• font-feature-settings: "palt" を使わない（Roboto 欧文ファーストの構成では効果がなく、意図しない挙動になる）
• ボタンの border-radius を大きくしない（3px の微角丸スタイルを維持する）
• Mizuno Blue (#001489) を CTA や大面積の背景に使わない（ブランドアクセント限定）
• Bootstrap の --primary: #007bff を実 UI の主要色として使わない（実サイトでは #111111 / #303030 が主要テキスト色）
• 本文 line-height を 1.5 未満にしない（日本語可読性が著しく低下する）
• フッターを白背景にしない（#111111 ダークフッターがサイト全体のコントラストを締める）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）
• ナビゲーションメニュー項目の line-height（65px 等）はタッチターゲット確保を兼ねている

フォントサイズの調整

• モバイルでは H2（32px）を 20〜24px 程度に縮小
• 本文 14px はモバイルでも維持（視認性の観点から小さくしない）
• ナビゲーションはハンバーガーメニュー化

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff / #f5f5f5 (section)
Text Primary: #303030
Text Dark: #111111 (headings, CTA bg)
Brand Accent: #001489 (Mizuno Blue)
Footer: bg #111111 / text #f5f5f5
Button Primary: bg #111111 / text #ffffff / radius 3px
Button Secondary: bg #ffffff / text #111111 / radius 3px
Tag Pill: bg #f5f5f5 / text #111111 / radius 30px
Font: Roboto, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
Body Size: 14px / Weight 400 / Line Height 1.67
palt: 未使用

プロンプト例

Mizuno のデザインシステムに従って、商品カードグリッドを作成してください。
- ページ背景: #ffffff、セクション面: #f5f5f5
- テキスト（本文）: #303030、見出し: #111111
- フォント: Roboto, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
- 本文: 14px / weight 400 / line-height 1.67
- CTA ボタン: bg #111111 / text #ffffff / radius 3px / 14px
- タグ: bg #f5f5f5 / text #111111 / radius 30px / 12px
- カードはシャドウなしのフラットデザイン、border-radius 0〜3px
- Mizuno Blue (#001489) はロゴ・ブランド要素のみに限定