White Mountaineering DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

対象サイト: https://whitemountaineering.com/ White Mountaineering はデザイナー相澤陽介による日本のファッションブランド。 テクニカルとトラディショナルを融合したアウトドア・ファッションを展開する。実測は公式 EC（Shopify）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: モノクロームで硬質なファッション EC。黒・白・グレーだけで構成し、商品写真と山線のロゴを引き立てる
• 密度: 中〜低密度。ヒーローは全画面ビジュアル、ナビ・商品グリッドは整然と等間隔
• キーワード: モノクローム / 硬質 / グリッド / ミニマル / モード
• 形状言語: 角丸を一切使わない（border-radius: 0）。ボタン・入力・カードすべて直角。細い罫線で領域を仕切る
• 書体の性格: Helvetica を主役に据え、ナビ・ボタン・ラベルの英字は 大文字（uppercase）＋広めのトラッキングで組む。和文はヒラギノ角ゴ ProN で欧文に馴染ませる

2. Color Palette & Roles

Base（下地）

• Background (#ffffff): ページ全体の下地（--background）。純白
• Header (hero) Background (#000000): トップのヒーロー／ヘッダー領域は黒地。ナビ文字は白で乗る
• Border (#eaeaea): 区切り線・グリッドの罫（--border-color）
• Footer Border (#d9d9d9): フッターの罫（--footer-border-color）

Text（文字色）

• Text Primary / Heading (#000000): 見出し・本文（--text-color / --heading-color）。純黒
• Text Light (#9a9a9a): 補足テキスト・非活性ラベル（--text-color-light）
• Link (#6a6a6a): テキストリンクのグレー（--link-color）
• Text on Dark (#ffffff): 黒地のヒーロー・ヘッダー・ボタン上の文字

Button（ボタン）

• Button Background (#000000): 塗りボタンの下地（--button-background）
• Button Text (#ffffff): 塗りボタンの文字（--button-text-color）

色に関する設計思想

• 色は黒・白・グレー階調のみ。ブランドカラーとしての彩度色を一切持たない
• 商品ページに現れる色（ネイビー・キャメル等）はプロダクトのカラースウォッチであり、UI の色ではない
• 純黒 #000000・純白 #ffffff をためらいなく使うのがモード系 EC らしい潔さ

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴシック ProN（"Hiragino Kaku Gothic ProN"）→ メイリオ（Meiryo）。和文専用フォントは指定せず、欧文フォントの後ろでシステムフォントに委ねる
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ（主役）: Helvetica → Helvetica Neue。ニュートラルなグロテスクを先頭に置き、英字表記の品質を最優先する
• セリフ / 等幅: 使用しない

代替フォントの注記: Helvetica はライセンス上 Web フォント配信されず、環境依存でシステムの Helvetica / Arial にフォールバックする。

• Helvetica → Helvetica Neue（Mac ネイティブ）／ Web では Arial もしくは Inter（ニュートラルなグロテスク）で代替
• ヒラギノ角ゴ ProN → 環境に無ければ Noto Sans JP

3.3 font-family 指定

css/* 見出し・本文とも共通（--heading-font-family / --text-font-family） */
font-family: Helvetica, "Helvetica Neue",
             "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

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

• 欧文優先の並び。Helvetica を先頭に置き、英字の見た目を最優先する
• 和文グリフは後段のヒラギノ角ゴ ProN → メイリオが拾う
• 見出しと本文で同じ font-family を使い、ウェイトとサイズだけで階層を作る（--heading-font-weight: 400）

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

3.5 行間・字間

• 本文の行間 (line-height): 1.65（14px 本文で 23.1px）。欧文主体のため和文サイトよりやや締まっている
• 見出しの行間: 1.0（20px セクション見出し）
• 本文の字間 (letter-spacing): 基本 0。ただしナビ・ラベル・フッター等の小さい uppercase テキストは 0.1〜0.14em と広く取る
• 見出しの字間: 0

ガイドライン:

• 英字のナビ・ボタン・ラベルは text-transform: uppercase で組み、トラッキングを広げる
• 見出しウェイトは 400（--heading-font-weight）が基本。セクション見出しのみ 600 で強める

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使用しない */

• 欧文主体のため和文の palt は使わない（font-feature-settings: normal）
• 字間は letter-spacing で明示的にコントロールする

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

Buttons

角丸ゼロ。塗り（黒）とアウトライン（黒罫）の 2 種を使い分ける。

Primary（塗り）

• Background: #000000（--button-background）
• Text: #ffffff（--button-text-color）
• Border: なし
• Padding: 17px 28px
• Border Radius: 0
• Font: 12px / weight 400 / letter-spacing: 0.1em / text-transform: uppercase

Secondary（アウトライン）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Padding: 17px 28px
• Border Radius: 0
• Font: 12px / weight 400 / letter-spacing: 0.1em / text-transform: uppercase
• 例: 「View all products」

Inputs

• Background: #ffffff
• Border: 1px solid #eaeaea
• Border (focus): 1px solid #000000
• Border Radius: 0
• Padding: 12px 14px
• Font Size: 13px

Cards

• Background: #ffffff
• Border: なし（罫 1px solid #eaeaea で区切る場合あり）
• Border Radius: 0
• Shadow: なし（フラット）
• 商品カードは画像＋英字商品名（uppercase）＋価格の最小構成

5. Layout Principles

Spacing Philosophy

整然としたグリッド。要素は等間隔に並べ、罫線で領域を仕切る。

Spacing Scale（推定）

Container

• Max Width: 1440px（ヒーロー・商品ビジュアルはフルブリード）
• Padding (horizontal): 24–40px

Grid

• Columns: 12（商品一覧は 3〜4 カラム）
• Gutter: 16–24px
• ヒーローは全画面、商品はグリッドで等間隔配置

6. Depth & Elevation

• 影は極力使わない。領域の区切りは罫線（#eaeaea）で行う

7. Do's and Don'ts

Do（推奨）

• 色は黒・白・グレー階調のみに絞る（純黒・純白を使ってよい）
• 英字のナビ・ボタン・ラベルは text-transform: uppercase ＋広めの letter-spacing（0.1em〜）で組む
• ボタン・入力・カードは border-radius: 0 の直角にする
• 見出しウェイトは 400 基準、セクション見出しのみ 600
• 和文はヒラギノ角ゴ ProN（代替: Noto Sans JP）で欧文に馴染ませる

Don't（禁止）

• 彩度の高いブランドカラーを UI に持ち込まない（色はプロダクトのみ）
• border-radius を付けない（角丸はモードの世界観に反する）
• ナビ・ラベルを小文字のまま置かない（英字は uppercase が基本）
• 和文の palt を効かせない（font-feature-settings: normal）
• 和文フォント1つだけを指定しない（必ずフォールバックチェーンを書く）

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• モバイルではセクション見出し（20px）を 16–18px に、本文は 14px を維持
• uppercase ナビの字間はモバイルでも広めを保つ

9. Agent Prompt Guide

クイックリファレンス

Background:    #ffffff
Hero/Header:   #000000（文字は #ffffff）
Text Primary:  #000000
Text Light:    #9a9a9a
Link:          #6a6a6a
Border:        #eaeaea
Button:        #000000 bg / #ffffff text / radius 0 / uppercase / ls 0.1em
Font:          Helvetica, "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
Body Size:     14px
Line Height:   1.65

プロンプト例

White Mountaineering のデザインシステムに従って、商品一覧グリッドを作成してください。
- 下地: #ffffff、文字: #000000、補足: #9a9a9a、罫線: #eaeaea
- フォント: Helvetica, "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
- ナビ・ボタン・ラベルの英字は uppercase ＋ letter-spacing: 0.1em
- ボタンは黒塗り（#000 / 文字 #fff）または黒罫アウトライン、border-radius: 0
- 本文 line-height: 1.65、色はモノクロームのみ（彩度色を使わない）
- 影は使わず罫線で区切る

環境依存フォントの代替指針

• 欧文 Helvetica → Helvetica Neue（Mac）／ Arial / Inter（Web）
• 和文 ヒラギノ角ゴ ProN → Noto Sans JP
• どの代替でも「モノクローム・uppercase・角丸ゼロ・広めのトラッキング」を守れば世界観は再現できる