ZOZO（ゾゾ） DESIGN.md

ZOZO（https://corp.zozo.com/）のデザイン仕様書。 日本最大級のファッション EC「ZOZOTOWN」を運営するテクノロジー企業。 実サイトの computed style 実測（2026-05-15 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調に、Morisawa Gothic MB101 のウェイト使い分け（Light / Medium / DemiBold）で情報の階層を表現。英文見出しには自社書体 zozogothic bold を使い、ファッション企業としてのブランド資産を前面に出す
• 密度: 本文 20px・line-height 1.25 とやや詰めた組み。コーポレートサイトとして余白を大きく取り、セクションごとにフルブリード画像で区切るエディトリアル構成
• キーワード: ファッション、クリーン、エディトリアル、Gothic MB101、zozogothic、白基調
• 特徴:
  • 和文フォントに Gothic MB101（Morisawa Adobe Fonts）のウェイトファミリーを採用。Light（本文）/ Medium（ナビ・小見出し）/ DemiBold（日付ラベル・CTA）を使い分ける
  • 英文見出し "NEWS", "RECRUIT" 等には自社ブランド書体 zozogothic bold を 50px で使用
  • ブランドカラーは レッド #c7161d（プレスリリースバッジ）と ネイビー #0f367a（社会貢献セクション背景）の2色アクセント
  • サーフェスにベージュ #efece5（ウォーム）を使い、白 #ffffff との階層をつくる
  • ボタンは pill（radius 50px） で白ボーダー or ネイビー背景。ゴースト寄りの控えめな CTA
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Red (#c7161d): プレスリリースのカテゴリバッジ背景、NEW ラベルの文字色。ZOZO のコーポレートレッド
• Brand Navy (#0f367a): 社会貢献活動セクションの pill ラベル背景（「社会貢献活動」テキスト）

CTA / Buttons

• Pill Ghost (White): 背景 transparent / 文字 #ffffff / border 1px solid #ffffff / radius 50px / 13px / weight 700（zozogothic bold）
• Pill Filled (Navy): 背景 #0f367a / 文字 #efece5 / radius 20px / padding 10px 62px / 21px / weight 600（Gothic MB101 DemiBold）
• Language Selector: 背景 transparent / 文字 #1e1e1e / radius 15px / 11px / weight 500

Neutral

Semantic（実測未確認・推奨値）

• Danger: #c7161d（Brand Red を流用）
• Success: #16a34a
• Warning: #d97706

3. Typography Rules

3.1 和文フォント

• ゴシック体: Gothic MB101（Morisawa Adobe Fonts）をウェイト違いで使い分け
  • Light (weight 400): 本文・フッター
  • Medium (weight 500): ナビゲーション・小見出し・ニュースタイトル
  • DemiBold (weight 600): 日付ラベル・カテゴリバッジ・セクション見出し
• フォールバック: ヒラギノ角ゴ ProN W3 → Hiragino Kaku Gothic ProN → メイリオ → Meiryo → Verdana → sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• zozogothic bold: 自社ブランド書体。セクション英文見出し（"NEWS", "RECRUIT", "ZOZO MEASUREMENT TECHNOLOGY" 等）に使用。weight 700、50px、line-height 1.0
• 欧文本文は Gothic MB101 の欧文グリフを使用（専用欧文書体なし）

3.3 font-family 指定

css/* 本文（Light） */
font-family: "Gothic MB101 Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Verdana, sans-serif;

/* ナビ・小見出し（Medium） */
font-family: "Gothic MB101 Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Verdana, sans-serif;

/* ラベル・バッジ（DemiBold） */
font-family: "Gothic MB101 DemiBold", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Verdana, sans-serif;

/* 英文見出し */
font-family: "zozogothic bold";

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

• Gothic MB101 は Adobe Fonts のため環境依存。フォールバックにヒラギノ角ゴ → メイリオ → Verdana の順
• ウェイトごとに font-family を切り替えるのが ZOZO の特徴（CSS font-weight ではなく font-family でウェイトを制御）

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

3.5 行間・字間

• 本文の行間 (line-height): 1.25（トップページ）〜 1.8（About ページ）。ページの性格に応じて使い分け
• 見出しの行間: 1.0（英文 Display）〜 1.24（和文見出し）
• 本文の字間 (letter-spacing): 0〜0.02em 程度。ZOZO は字間を控えめに設定
• 見出しの字間: 0.02em〜0.075em。section heading は 1.575px / 21px = 0.075em のゆったりとしたトラッキング

3.6 禁則処理・改行ルール

cssword-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern は使用していない（実測値）。Gothic MB101 のデフォルトメトリクスで組む方針

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（Pill Ghost White）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 1px 6px
• Border Radius: 50px
• Font: zozogothic bold / 13px / weight 700

Secondary（Pill Filled Navy）

• Background: #0f367a
• Text: #efece5
• Padding: 10px 62px 9px
• Border Radius: 20px
• Font: Gothic MB101 DemiBold / 21px / weight 600
• Letter Spacing: 0.075em

Badge（Category Label）

• Background: #c7161d
• Text: #ffffff
• Padding: 小
• Border Radius: なし
• Font: Gothic MB101 DemiBold / 12px / weight 600

Cards

• Background: #ffffff
• Border: なし
• Shadow: なし（フラットデザイン）
• ニュースカードはボーダーレスのリスト形式

Navigation

• Background: #ffffff（メイン）/ #f5f5f5（ドロワー）
• Logo: 画像ベース
• Menu button: テキスト「メニューを開く」/ Gothic MB101 Light / 20px
• Nav items: Gothic MB101 Medium / 14px / #1e1e1e

5. Layout Principles

Spacing Scale

Container

• Max Width: 1440px（推定・フルブリードセクション基準）
• Content Width: 記事エリアは中央寄せ

Grid

• セクションごとにフルブリード画像 + テキストオーバーレイの構成
• ニュースリストは単カラム

6. Depth & Elevation

• ZOZO コーポレートサイトはシャドウをほぼ使用しない。セクション間の区切りは背景色の切り替えと余白で表現

7. Do's and Don'ts

Do（推奨）

• Gothic MB101 のウェイト使い分け（Light / Medium / DemiBold）で階層を表現する
• 英文見出しは zozogothic bold を使い、ブランドらしさを出す
• 背景色のウォーム（ベージュ）とクール（ライトグレー）を使い分けてセクションの性格を表現する
• ボタンは pill 形状で控えめに。ゴースト（ボーダーのみ）を基本とする
• フォントサイズは 20px 基準で、情報の重要度に応じて上下させる

Don't（禁止）

• font-weight で太さを制御しない。ZOZO は font-family でウェイトを切り替える設計
• 彩度の高いアクセントカラーを多用しない。アクセントは Red #c7161d と Navy #0f367a の2色のみ
• シャドウを使わない。セクション区切りは背景色で表現する
• 英文見出しに Gothic MB101 を使わない。英文は zozogothic bold で統一
• 本文の line-height を 1.6 以上に広げない（ZOZO は詰めた組みが基本）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（推奨）

フォントサイズの調整

• モバイルでは本文 16px 程度に縮小。見出しはデスクトップの 70% 程度に

9. Agent Prompt Guide

クイックリファレンス

Primary Color (Red): #c7161d
Secondary Color (Navy): #0f367a
Text Color: #1e1e1e
Background: #ffffff
Surface Warm: #efece5
Font (Body): "Gothic MB101 Light", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Verdana, sans-serif
Font (Heading JP): "Gothic MB101 Medium" (or DemiBold)
Font (Heading EN): "zozogothic bold"
Body Size: 20px
Line Height: 1.25

プロンプト例

ZOZOのデザインシステムに従って、ニュース一覧ページを作成してください。
- 英文セクション見出しは "zozogothic bold" 50px で
- ニュースタイトルは Gothic MB101 Medium 14px
- 日付は Gothic MB101 DemiBold 12px / #808080
- カテゴリバッジは背景 #c7161d / 白文字
- ボタンは pill 形状（border-radius: 50px）でゴースト or ネイビー塗り