# DESIGN.md — Yohji Yamamoto（ヨウジヤマモト） > Yohji Yamamoto 公式サイト（https://www.yohjiyamamoto.co.jp/）のデザイン仕様書。 > 山本耀司が率いる、黒の詩学と脱構築で知られる世界的メゾン。Yohji Yamamoto、Y's、Y's for men、discord、S'YTE、WILDSIDE、Ground Y 等を展開。 > 実サイトの computed style 実測（2026-05-21 取得）に基づく。 --- ## 1. Visual Theme & Atmosphere - **デザイン方針**: 黒 `#101010` の深淵を基調に **Optima（ヒューマニストサンセリフ）と游ゴシック体** の混植で組む、**反商業的なギャラリーUI**。CTAボタンは存在せず、テキストリンクと余白だけで構成する禁欲的な設計 - **密度**: トップページはフルスクリーン映像+最小限のテキスト。コレクションページに切り替わると `#fafafa` の白背景に写真グリッドが並ぶ **ダークモード / ライトモードの二面性**。いずれも情報密度は極めて低く、余白が支配する - **キーワード**: 黒の詩学、Optima、游ゴシック体、letter-spacing 0.08em、角丸ゼロ、テキストリンクCTA、palt なし、ダーク/ライト二面、反商業 - **特徴**: - **二面的な背景設計**: トップページ `#101010`（漆黒）/ コレクションページ `#fafafa`（オフホワイト） - **欧文には Optima を使用** — セリフとサンセリフの中間に位置するヒューマニストフォントで、川久保玲やヨウジの世界観と親和性が高い。macOS / iOS にプリインストール - **和文は游ゴシック体（Yu Gothic）** — body に指定。ヒラギノ角ゴ Pro W3 がフォールバック。メイリオ、Verdana、Osaka、MS PGothic と手厚いフォールバックチェーン - **日付表示には Poppins** — Google Fonts の幾何学的サンセリフ。日付スタンプ専用 - **font-feature-settings: normal（全要素）** — palt / kern は一切使わない - **letter-spacing 1.2px（body グローバル）** — 15px 本文に対して 0.08em 相当。ナビは 1.5px（0.15em at 10px）まで広げる - **ボタン要素は一切存在しない** — `interactive` 配列が空。サイト全体がテキストリンクのみで構成されるという、ファッションサイト随一の禁欲さ - **全要素角丸 0px**。写真もカードもリンクもすべて直角 - **CSS Custom Properties はサードパーティのみ**（Swiper、vue-carousel 系の --vc-* 変数）。ブランド独自のデザイントークンは未定義 - **font-weight 400 が全要素の基本**。500 は通知バーの小テキストに稀に出現する程度 --- ## 2. Color Palette & Roles > 実サイトの computed style 実測値。すべて hex 表記。 > Yohji Yamamoto の UI は装飾色を持たない。**黒・白・灰の無彩色のみ**で構築される。 ### Surface（背景） - **Dark Background** (`#101010`): トップページの body 背景（rgb(16, 16, 16)）。ブランド体験の基盤 - **Light Background** (`#fafafa`): コレクションページの body 背景（rgb(250, 250, 250)）。商品閲覧モード - **Pure Black** (`#000000`): フッター背景、モーダルオーバーレイ内面 - **Notice Bar** (`#272727`): 偽サイト注意喚起バーの背景（rgb(39, 39, 39)） - **Highlights Section** (`#212121`): ハイライトセクション背景（rgb(33, 33, 33)） - **Divider Gray** (`#ebebeb`): ナビゲーション区切り線・フッター罫線（rgb(235, 235, 235)、8 回出現） - **Menu Surface** (`#ffffff`): サイドメニュー・ブランド選択パネルの背景 ### Text - **Text on Dark** (`#ffffff`): ダークモード上のテキスト（rgb(255, 255, 255)） - **Text on Light** (`#000000`): ライトモード上のテキスト（rgb(0, 0, 0)） - **Date Muted** (`#a3a3a3`): 日付スタンプのミュートテキスト（rgb(163, 163, 163)） ### Overlay - **Modal Overlay** (`rgba(0, 0, 0, 0.4)`): ライブビューモーダルのベール - **Semi Overlay** (`rgba(0, 0, 0, 0.5)`): コレクション写真ホバー時のオーバーレイ ### Semantic（補完） - 実 UI にエラー・成功・警告色は存在しない。追加する場合は **赤（`#8b0000`）/ 緑（`#2e7d32`）/ 黄（`#c89a3c`）** をミュートに --- ## 3. Typography Rules ### 3.1 和文フォント - **メイン**: **游ゴシック体（Yu Gothic / YuGothic）** — Windows / macOS 両対応のシステムフォント - **フォールバック**: ヒラギノ角ゴ Pro W3（macOS）→ メイリオ（Windows）→ Verdana → Osaka → MS PGothic > **Note**: ヒラギノは **Pro W3**（ProN ではない）。Apple JP サイトと同じ指定。 ### 3.2 欧文フォント - **ブランド・見出し**: **Optima** — Hermann Zapf 設計のヒューマニストサンセリフ。macOS / iOS にプリインストール - **日付表示**: **Poppins** — Google Fonts。幾何学的サンセリフ。日付スタンプ専用 - **フォールバック**: sans-serif ### 3.3 font-family 指定 実サイトの実測値（body に指定されたグローバルスタック）: ```css /* body（和文本文） */ font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* 見出し・ナビ・ブランドテキスト（Optima） */ font-family: Optima, sans-serif; /* 日付スタンプ（Poppins） */ font-family: Poppins, sans-serif; ``` **フォールバックの考え方**: - **body は和文先頭スタック** — 游ゴシック体 → ヒラギノ → メイリオ → 欧文フォールバック。日本語の表示品質を優先 - **見出し・ナビには Optima を単独指定** — macOS / iOS ではプリインストール。Windows 環境へのフォールバックは sans-serif のみという潔い設計 - **日付は Poppins** — Google Fonts 依存。数字の美しさを優先した選択 - **AI で再現する場合**: Optima は macOS 専用のため、Google Fonts では **EB Garamond**（ヒューマニスト感）や **Cormorant Garamond** が雰囲気に近い。ただし Optima はセリフレスのため完全な代替は困難 — macOS 環境では Optima をそのまま使うのが最善 ### 3.4 文字サイズ・ウェイト階層 > 実測値（トップページ・コレクションページ、2026-05-21 取得） | Role | Font | Size | Weight | Line Height | Letter Spacing | Color | 備考 | |------|------|------|--------|-------------|----------------|-------|------| | Section Heading | Optima | 20px | 400 | 20px (x1.0) | 1.2px (0.06em) | `#ffffff` / `#000000` | "BRANDS / COLLECTION" 等 | | Article Title | Optima | 20px | 400 | 30px (x1.5) | normal | `#ffffff` | 記事カードのタイトル | | Collection Brand | Optima | 16px | 400 | 24px (x1.5) | 1.2px (0.075em) | `#ffffff` | コレクションページ内ブランド名 | | Sub Brand | Optima | 14px | 400 | 21px (x1.5) | 1.2px (0.086em) | `#ffffff` | "S'YTE" 等サブブランド名 | | Article Title SM | Optima | 14px | 400 | 21px (x1.5) | normal | `#ffffff` | 小カード内タイトル | | Body | 游ゴシック体 | 15px | 400 | 18.75px (x1.25) | 1.2px (0.08em) | `#ffffff` / `#000000` | 本文テキスト | | Nav Top Link | Optima | 12px | 400 | 12px (x1.0) | 1.2px (0.1em) | `#000000` | "TOP" メニュー内 | | Newsletter Link | Optima | 11px | 400 | 11px (x1.0) | 0.88px (0.08em) | `#ffffff` | "NEWSLETTER" ヘッダー内 | | Nav Brand | Optima | 10px | 400 | 15px (x1.5) | 1.2px (0.12em) | `#000000` | メニュー内ブランド名リスト | | Footer Nav | Optima | 10px | 400 | 10px (x1.0) | 1.5px (0.15em) | `#ffffff` | フッターナビ・最小テキスト | | Date Stamp | Poppins | 12px | 400 | 12px (x1.0) | normal | `#a3a3a3` | "May 21, 2026" | | Notice Bar | 游ゴシック体 | 10px | 500 | 15px (x1.5) | 1.2px (0.12em) | `#ffffff` | 偽サイト注意喚起 | | Menu Label | Optima | 10px | 400 | 12px (x1.2) | 1.2px (0.12em) | `#ffffff` / `#000000` | "MENU" / "BRANDS / COLLECTION" | | Breadcrumb | Optima | 10px | 400 | 10px (x1.0) | 1.2px (0.12em) | `#000000` | "HOME" コレクション内 | | Corp Name | Optima | 10px | 400 | 12.5px (x1.25) | normal | `#000000` | "YOHJI YAMAMOTO Inc." | ### 3.5 行間・字間 - **本文の行間**: **1.25**（18.75px / 15px）— 日本語サイトとしてはかなりタイト。ファッション業界のストイックな組版 - **見出し（h2）の行間**: **1.0**（20px / 20px）— ベタ組。余白はマージンで確保 - **記事タイトルの行間**: **1.5**（30px / 20px）— 複数行タイトルのみ通常の行間 - **本文の字間**: **1.2px（0.08em at 15px）** — body にグローバル指定。すべての子要素が継承 - **見出しの字間**: **1.2px**（body 継承）または **normal**（記事タイトル） - **ナビの字間**: **1.2px〜1.5px** — 小テキスト（10px）に対して最大 0.15em。かなり広い **ガイドライン**: - Yohji Yamamoto の和文は **1.25 倍行間**が基本。ISSEY MIYAKE の 1.5 よりさらにタイト - **letter-spacing 1.2px はグローバル定数**。body に一括指定し、例外的に normal（記事タイトル・日付）か 1.5px（小テキスト）に上書き - **全角文字に 0.08em の字間**は標準的な日本語組版よりやや広め — 欧文的なエアリーさを日本語にも適用する意図 ### 3.6 禁則処理・改行ルール ```css word-break: normal; overflow-wrap: break-word; line-break: strict; ``` - ブラウザ既定の禁則処理に依存 - ブランド名（Yohji Yamamoto / WILDSIDE / discord 等）は欧文のため自然に折り返される ### 3.7 OpenType 機能 ```css font-feature-settings: normal; ``` - **palt / kern を有効化していない** — 全要素で `normal` - Optima はプロポーショナルメトリクスが優秀なため、追加のカーニング指定は不要 - 游ゴシック体の和文にも詰めを適用しない — letter-spacing 1.2px が既に字間を制御している ### 3.8 縦書き - 該当なし。横書きのみ --- ## 4. Component Stylings ### Buttons Yohji Yamamoto のサイトには **従来型のCTAボタンが一切存在しない**。`interactive` 配列が空であり、`