# DESIGN.md — KASHIYAMA（カシヤマ） > KASHIYAMA（https://kashiyama1927.jp/）のデザイン仕様書。 > 2026-05-09 取得の computed style に基づく。 --- ## 1. Visual Theme & Atmosphere - **デザイン方針**: 1927年創業のカスタムオーダースーツブランドにふさわしい、洗練と抑制のミニマルデザイン。大判フォトグラフィーと余白で上質さを演出し、テキストは最小限に絞る - **密度**: 余白を大きく取ったエディトリアル型。ヒーローは全画面写真、セクション間の余白も広い。¥33,000〜のオーダースーツをカジュアルに感じさせる親しみやすさと、100年の歴史に裏打ちされた品格を両立 - **キーワード**: プレミアムミニマル、ダークチャコール、ミュートカラー、大判フォト、テーラリング - **特徴**: - **2フォントシステム**: 英字見出し・ナビ・価格に **TT Commons Pro**（ジオメトリックサンセリフ）、和文に **Source Han Sans Japanese（源ノ角ゴシック）** を使い分ける - 両フォントとも **Adobe Fonts**（ドメインライセンス）。ローカルプレビューには Google Fonts 代替が必要 - `font-feature-settings: "palt"` が **body にグローバル適用**。すべてのテキストがプロポーショナル字詰め - **CSS Custom Properties 不使用**。色・スペーシングはすべてハードコード - カラーパレットは **ダークチャコール `#222222`** を軸に、**ミュートブルー `#618aba`** と **ローズ `#d67984`** をアクセントに添える抑制的な配色 - ダークモード非対応（実測時点） --- ## 2. Color Palette & Roles > 実サイトの computed style 実測値。すべて hex 表記。 ### Brand Accent - **Accent Blue** (`#618aba`): もっとも多く使われる背景色（97件出現）。プロモーションセクション、シーズン訴求に使用。テーラリングブランドらしい落ち着いたブルー - **Accent Rose** (`#d67984`): 2番目に多い背景色（72件出現）。キャンペーンセクション、ウィメンズ訴求に使用 - **Gold / Beige** (`#997e5d`): プレミアムラインのアクセント。上質感・伝統を示す ### CTA / Dark - **Dark Primary** (`#222222`): 主要テキスト色、ナビゲーション、CTA ボタン背景。ブランドの基調色 - **Dark Deep** (`#111111`): 最も深いダークサーフェス。フッター等 ### Neutral | Token | hex | RGB | 役割 | |-------|-----|-----|------| | Dark Primary | `#222222` | (34, 34, 34) | テキスト・ナビ・CTA 背景 | | Dark Deep | `#111111` | (17, 17, 17) | 最深ダークサーフェス | | Text Secondary | `#999999` | (153, 153, 153) | フッターナビ・パンくず・補助テキスト | | Light Gray | `#f0f0f0` | (240, 240, 240) | セクション背景 | | Medium Gray | `#efefef` | (239, 239, 239) | セクション背景（バリエーション） | | Border | `#dddddd` | (221, 221, 221) | 区切り線・入力欄ボーダー | | White | `#ffffff` | (255, 255, 255) | ページ背景 | ### Semantic（実測未確認・推奨値） 実サイトにはエラー／成功色の表出なし。フォーム等で必要な場合の推奨値: - **Danger**: `#c53030` 程度の落ち着いたレッド（ブランドのミュートトーンに合わせる） - **Success**: `#2f855a` 程度のグリーン - **Warning**: `#c05621` 程度のオレンジ --- ## 3. Typography Rules ### 3.1 和文フォント - **ゴシック体**: **Source Han Sans Japanese（源ノ角ゴシック）** を最優先。Adobe Fonts のフォント（Adobe 版 Noto Sans CJK） - **フォールバック**: `sans-serif`（サイト実装のフォールバック指定は最小限） - **明朝体**: 使用しない（サイト全体ゴシック統一） - **フォーム入力**: `NotoSans-JP-Regular` が個別指定されている箇所あり ### 3.2 欧文フォント - **サンセリフ**: **TT Commons Pro**（TypeType 社のジオメトリックサンセリフ、Adobe Fonts 提供）。英字ナビ "MEN" / "WOMEN" / "PREMIUM" / "SHOP"、セクションラベル "CAMPAIGN" / "ABOUT"、価格表記に使用 - **特徴**: ジオメトリックでありながら温かみがある字形。Futura よりソフト、Inter より個性的。テーラリングブランドの品格に合う - **フォールバック**: `sans-serif` ### 3.3 font-family 指定 ```css /* 和文（本文・見出し・CTA） */ font-family: "source-han-sans-japanese", sans-serif; /* 欧文（ナビ・セクションラベル・価格） */ font-family: "tt-commons-pro", sans-serif; /* フォーム入力 */ font-family: "NotoSans-JP-Regular", sans-serif; ``` **フォールバックの考え方**: - 和文と欧文で明確に font-family を使い分ける 2 フォントシステム - Source Han Sans Japanese は Adobe 版 Noto Sans CJK。Google Fonts 代替は **Noto Sans JP**（同一グリフ源） - TT Commons Pro のジオメトリックサンセリフ感は **Inter**（Google Fonts）で近似可能 - フォールバックは最小限（`sans-serif` のみ）。Adobe Fonts が読み込めない環境ではシステムフォントに依存 **Adobe Fonts 代替（ローカルプレビュー用）**: - TT Commons Pro → **Inter**（ジオメトリックサンセリフ。字幅・ウェイト展開が近い） - Source Han Sans Japanese → **Noto Sans JP**（同一グリフ源。Adobe 版と Google 版の違いはライセンスのみ） ### 3.4 文字サイズ・ウェイト階層 > 以下は Headless Chrome (Puppeteer) の computed style による実測値（2026-05-09 取得） **英字テキスト（TT Commons Pro）** | Role | Size | Weight | Line Height | Letter Spacing | 備考 | |------|------|--------|-------------|----------------|------| | Section Label (h2 EN) | 30px | 500 | 1.0–1.3 | 0.03em | "CAMPAIGN", "ABOUT" | | Nav Label | 14px | 500 | 1.0 | 0.04em | "MEN", "WOMEN", "PREMIUM" | | Price / Spec | 12px | 500 | 1.0 | 0.08em | "¥33,000〜", スペック値 | **和文テキスト（Source Han Sans Japanese）** | Role | Size | Weight | Line Height | Letter Spacing | 備考 | |------|------|--------|-------------|----------------|------| | Section Heading (h2 JA) | 18–26px | 700 | 1.25–1.3 | 0.03–0.04em | "MENメンズ", "安心保証" | | Feature Heading (h3) | 16–26px | 700 | 1.3 | 0.04–0.05em | 機能見出し | | Body Text | 15px | 400 | 1.53 | 0.04em | 説明文 | | Body Small | 12px | 400 | 1.6 | 0.02em | ショップ情報 | | Caption | 11px | 400 | 1.45 | 0.05em | Cookie 通知、注意書き | | CTA Text | 13px | 700 | 1.46 | 0.054em | "オンラインオーダー", "来店予約はこちら" | | Footer Nav | 12px | 400 | 1.0 | 0.08em | "クラシック" 等 | | Base Body | 12px | 400 | 1.0 | normal | body 要素のデフォルト | ### 3.5 行間・字間 **行間 (line-height)** — 実測値: - body グローバル: `12px` (12px × 1.0) — 実質的には各要素で個別指定 - 本文 (15px): `23px` (×**1.53**) — 日本語としては標準的な行間 - 見出し (h2 JA): `1.25–1.3` — タイトにまとめる - 英字セクションラベル (30px): `1.0–1.3` — 英字見出しはさらにタイト - キャプション (11px): `16px` (×1.45) - CTA (13px): `19px` (×1.46) **字間 (letter-spacing)** — 実測値: - **ほぼすべてのテキストに明示的な letter-spacing が設定されている**。これは `palt` グローバル適用と合わせて、全体的に字詰めを意識したタイポグラフィ - 本文 (15px): `0.6px` (= 0.04em) - 見出し (h2 JA): `0.03–0.04em` - 英字セクションラベル: `0.03em` - CTA: `0.7px` (= 0.054em) — やや広め - 価格・フッターナビ: `0.08em` — もっとも広い - キャプション: `0.05em` **ガイドライン**: - note のように「見出し専用」ではなく、**全テキストに letter-spacing を適用する**のが KASHIYAMA のスタイル - 値は `0.02em`（最小）〜 `0.08em`（最大）の範囲で、要素の役割に応じて調整 - 英字の価格・スペックは広め (0.08em) でゆったりと見せ、本文は 0.04em で読みやすさを確保 ### 3.6 禁則処理・改行ルール ```css /* 推奨設定（実サイトの明示的な宣言は最小限） */ word-break: break-all; overflow-wrap: break-word; ``` - サイトの実装はシンプルで、特別な禁則処理の宣言は確認されなかった - カスタムオーダーの仕様説明等、長い和文テキストは少なく、主にキャッチコピーと短い説明文で構成 ### 3.7 OpenType 機能 ```css /* body にグローバル適用 — 全テキストに影響 */ font-feature-settings: "palt"; ``` - **palt**: 和文のプロポーショナル字詰め。**body 要素に直接指定されており、全テキストに適用** - note（見出し専用）や STORES（見出し専用）とは異なり、KASHIYAMA は本文含めグローバルに palt を適用している - これは全体的に letter-spacing を細かく設定するスタイルと一貫しており、テーラリングブランドらしい「きちんと詰めた」印象を与える ### 3.8 縦書き - 該当なし。KASHIYAMA は横書きのみ --- ## 4. Component Stylings ### Buttons **Primary CTA（来店予約はこちら）** - Background: `#222222` - Text: `#ffffff` - Font: source-han-sans-japanese, 13px, weight 700 - Letter Spacing: 0.054em - Line Height: 1.46 - Border Radius: 小さい角丸（pill ではない） - 用途: ヘッダー固定の「来店予約」、フッター固定バー **Secondary CTA（オンラインオーダー）** - Background: `transparent` - Text: `#222222` - Border: 1px solid `#222222` - Font: source-han-sans-japanese, 13px, weight 700 - Letter Spacing: 0.054em - Line Height: 1.46 - Border Radius: 小さい角丸 - 用途: フッター固定バーの左側ボタン **注意**: サイトの CTA は `