# DESIGN.md — 茅乃舎（かやのや / 久原本家）

> 茅乃舎（https://www.kayanoya.com/）のデザイン仕様書。
> 福岡・久原本家グループの和風だし／無添加調味料ブランド。原点は山あいに佇む「御料理 茅乃舎」。
> 最大の特徴は **薄暮の茅葺き屋根を全画面に敷いた写真ヒーロー** に、**全面を貫く筑紫明朝（FOT-筑紫明朝 Pr6）** と **七十二候（菖蒲華・六月…）を縦組み風に添えた季節の設え**。白文字を濃褐（#1c130a）のヴェールに乗せ、見出しには 0.3〜0.5em の広い字間をあてて静けさと品位をつくる。角丸を持たない直線的な作り。
> 実サイトの computed style 実測（2026-06-30 取得）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **写真と明朝**で語る、静謐で端正な和の世界観。トップは薄暮の茅葺き古民家を全画面に敷き、白い明朝テキストを濃褐のヴェール越しに重ねる。商品ページに入ると一転、純白地に黒の明朝で落ち着いた読み物に切り替わる
- **茅乃舎について**: 久原本家（明治期創業の老舗醤油蔵）が営む和食だし・調味料ブランド。料理人の知恵を家庭に届けるという物語を、写真・余白・明朝・季節の言葉で表現する
- **密度**: 低密度。大きな写真と広い余白、ゆったりした行間（本文 lh 1.7〜1.8）。情報を詰め込まず、季節の言葉（七十二候）や日付の大きな欧文数字（Baskerville 160px）で「間」をつくる
- **キーワード**: 写真ヒーロー、薄暮、筑紫明朝、縦組み風の季節語、七十二候、濃褐 #1c130a、萱色 #5b5d22、白文字、広い字間（0.3〜0.5em）、角丸なし、palt なし
- **特徴**:
  - **本文も見出しもナビも筑紫明朝**（FOT-筑紫明朝 Pr6）。ゴシック（游ゴシック）は「だしシリーズをみる」等の機能ラベルや小さなメタ情報に限定
  - ヒーローは **写真の上に濃褐 #1c130a のヴェール**（実測 rgba(28,19,10,0.5)）を敷き、その上に白の明朝を乗せる。季節の言葉（菖蒲華＝あやめはなさく）を 0.3em の広い字間で配し、日付は大きな欧文数字（Baskerville）で打つ
  - ブランドの地色は **萱色＝深いオリーブ #5b5d22**（スプラッシュ／ローディング面）。アクセントに **金茶 #8f7e4b**（イベント区分）、**限定の朱 #9f0e14**
  - CTA は **濃褐の半透明地（#1c130a / 0.5）＋細い枠（#827e7a）の明朝ボタン**、または **黒地（#000）＋白文字の「もっと見る」**。いずれも **角丸なし（radius 0）**
  - `font-feature-settings: normal`（palt は使わない）。字間は letter-spacing で、見出しほど広く開ける

---

## 2. Color Palette & Roles

> 実サイトの computed style 実測値。すべて hex 表記。トップの濃褐ヴェールと萱色を軸に、商品ページは黒文字×白地で構成。

### Core（背景・面）

- **White** (`#ffffff`): 商品・記事ページの基本地。ヘッダー／グローバルナビの地
- **萱色 / Moss Olive** (`#5b5d22`): スプラッシュ（ローディング）面。ブランドを象徴する深いオリーブ＝「茅（かや）」の色。広い面に使われる唯一の有彩地
- **濃褐 / Deep Brown Veil** (`#1c130a`): ヒーロー写真に重ねる半透明ヴェール（実測 rgba(28,19,10,0.5)）。白文字の可読性を支える地。CTA の塗りにも使う

### Text

- **Ink (Black)** (`#000000`): 商品・記事ページの本文・見出し・ナビの基本テキスト
- **White** (`#ffffff`): ヒーロー写真上のテキスト（見出し・季節語・日付・CTA 文字）
- **Muted Gray** (`#bbbbbb`): 非アクティブなタブ・補助ラベル（商品ページのカテゴリ切替など）

### Accent

- **金茶 / Khaki Gold** (`#8f7e4b`): イベント・お知らせの区分ラベル（小ゴシック）。落ち着いた金茶
- **朱 / Vermilion** (`#9f0e14`): 「店舗限定」「地域限定」等の限定バッジ・強調ラベル
- **Border Gray** (`#827e7a`): ヒーロー CTA の細い枠線

### Semantic

- 専用のセマンティックカラー（Danger / Success 等）は定義されていない。強調が必要なら朱 `#9f0e14` を最小限あてる。リンク既定色（`#0000ee`）はリセットされていない箇所が一部あるが、ブランドの意図色ではないため踏襲しない

---

## 3. Typography Rules

> 実サイトは本文・見出し・ナビすべてに **筑紫明朝（FOT-筑紫明朝 Pr6）** を使い、機能ラベルのみ **游ゴシック** を併用する。大きな日付数字だけ **Baskerville**（欧文セリフ）。
> 筑紫明朝は Fontworks の Web フォント（ドメインライセンス）のため preview.html では表示できない。代替は後述。

### 3.1 和文フォント

- **明朝体（基本書体）**: FOT-筑紫明朝 Pr6 → TsukuMinPr6 → serif。**本文・見出し・ナビすべてこの筑紫明朝チェーン**。ウェイトは R（本文）/ M（見出し・ナビ）/ D（極小ラベル）を使い分ける
  - 本文: `"FOT-筑紫明朝 Pr6 R", TsukuMinPr6-R, serif`
  - 見出し・ナビ: `"FOT-筑紫明朝 Pr6 M", TsukuMinPr6-M, serif`
  - 細かな補助ラベル: `"FOT-筑紫明朝 Pr6 D", TsukuMinPr6-D, serif`
- **ゴシック体（機能ラベル用途）**: `游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif`。「だしシリーズをみる」等のボタン内ラベルやカテゴリ区分（金茶・朱）に限定

### 3.2 欧文フォント

- **日付の大数字**: `Baskerville`（serif）。ヒーローの「30」を 160px で打つ象徴的な使い方
- **小さな英字トグル（English）**: `"Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif`
- 本文中の英数は筑紫明朝の欧文グリフがそのまま受け持つ

### 3.3 font-family 指定

```css
/* 基本（本文 — 筑紫明朝 R） */
font-family: "FOT-筑紫明朝 Pr6 R", TsukuMinPr6-R, serif;

/* 見出し・ナビ（筑紫明朝 M） */
font-family: "FOT-筑紫明朝 Pr6 M", TsukuMinPr6-M, serif;

/* 機能ラベル（游ゴシック） */
font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

/* 日付の大数字（欧文セリフ） */
font-family: Baskerville, serif;
```

- **フォールバックの考え方**: 和文は筑紫明朝 Web フォント → TsukuMin → generic `serif` で閉じる。和文専用 1 書体だけで止めず必ず serif で締める

**preview.html での代替フォント**:
- FOT-筑紫明朝 Pr6（低コントラストで穏やか、ふところがやや締まった現代的明朝）→ **Shippori Mincho**（しっぽり明朝。筑紫系に近い静かな明朝。weight 400/500/600）。やや古典的な落ち着きを足すなら **Zen Old Mincho** を併用してもよい
- Baskerville（日付の大数字）→ **Libre Baskerville**（Google Fonts。オールドスタイル・セリフ）
- 游ゴシック → **Zen Kaku Gothic New**（游ゴシックに近い穏やかなゴシック。weight 400/500）

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

> デスクトップ（1440px）での実測 px。ヒーロー（写真上・白文字）と商品ページ（白地・黒文字）で性格が分かれる。

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| Hero Date (大数字) | Baskerville | 160px | 400 | 1.0 | normal | ヒーローの日付「30」。白 #fff |
| Hero 季節語（候） | 明朝 R | 24px | 400 | 1.0 | 7.2px (0.3em) | 「菖蒲華」等。白 #fff、広い字間 |
| Hero 月（縦） | 明朝 R | 20px | 400 | 1.0 | 10px (0.5em) | 「六　月」。最も広い字間 |
| Hero ふりがな | 明朝 R | 12px | 400 | 1.0 | 1.2px (0.1em) | 「あやめはなさく」白 #fff |
| Hero 本文 | 明朝 R | 18px | 400 | 1.7 (30.6px) | 1.8px (0.1em) | 白 #fff |
| H1 | 明朝 R | 32px | 400 | 1.7 (54.4px) | 0.32px (0.02em) | 「茅乃舎」黒 #000 |
| H1（商品サブ） | 明朝 M | 23px | 400 | 1.7 (39.1px) | 2.3px (0.1em) | 「商品のご紹介」白 #fff |
| H2 | 明朝 M | 24px | 400 | 1.5 (36px) | normal | 「お知らせ」「定番のだし」黒 #000 |
| H3 | 明朝 M | 21.98px | 400 | 2.4 (52.75px) | 1.1px (0.05em) | 商品グループ見出し。行間広め |
| Nav | 明朝 M | 18px | 400 | 1.7 (30.6px) | 0.32px (0.02em) | グローバルナビ（トップページ／オンラインショップ…） |
| Body | 明朝 R | 16px | 400 | 1.7 (27.2px) | 0.32px (0.02em) | 基本本文。黒 #000 |
| Body（商品説明） | 明朝 R | 14px | 400 | 1.8 (25.2px) | 0.32px (0.02em) | 商品詳細の説明文 |
| Label（区分・ゴシック） | 游ゴシック | 12px | 400 | 2.0 (24px) | normal | イベント #8f7e4b ／ 限定 #9f0e14 |

- **ウェイトは 400 が基本**。明朝の R / M の差と、サイズ・字間・余白で階層をつくる。太字を多用しない
- ヒーローは白 #fff、商品・記事ページは黒 #000 が文字色の基本

### 3.5 行間・字間

- **本文の行間 (line-height)**: 1.7〜1.8（本文 27.2px/16px=1.7、商品説明 25.2px/14px=1.8）。明朝をゆったり組む
- **見出しの行間**: H1 で 1.7、H2 で 1.5、商品 H3 は 2.4 とかなり広い
- **本文の字間 (letter-spacing)**: 0.02em（0.32px / 16px）。ベタ組みよりわずかに開ける程度
- **ヒーロー・見出しの字間**: 0.1〜0.5em と大きく開ける。季節語 0.3em、月名 0.5em、ふりがな 0.1em、商品サブ見出し 0.1em。**「飾り」としての広い字間が茅乃舎の核**

**ガイドライン**:
- 本文は明朝 R / lh 1.7・字間 0.02em で端正に
- 季節の言葉・縦組み風の語・ヒーロー見出しは、サイズを抑えて **字間を 0.1〜0.5em に広げる**ことで「間」と格を出す

### 3.6 禁則処理・改行ルール

```css
overflow-wrap: break-word;
line-break: strict;
```

- 行頭禁止: `）」』】、。・：；？！`
- 行末禁止: `（「『【`
- 季節語・候名などは改行を避け、`white-space: nowrap` でひとまとまりに見せる

### 3.7 OpenType 機能

```css
font-feature-settings: normal;  /* palt は使わない */
```

- **重要**: 実測では全要素 `font-feature-settings: normal`。**palt（プロポーショナルメトリクス）は使わない**。筑紫明朝のベタ組みメトリクスをそのまま活かし、詰めではなく **letter-spacing で開く** 方向に調整する
- 縦組み風の季節語も、約物の詰めではなく広い字間で間を取る

### 3.8 縦書き

- ヒーローの季節語（月・候・ふりがな）は **縦組み風のレイアウト**（実装は横要素の縦配置／`writing-mode: vertical-rl` 相当の見た目）。日本の暦・歳時記の情緒を出す象徴的表現
- 本文・商品説明は横書き

---

## 4. Component Stylings

### Buttons

> 角丸を持たない（radius 0）。ヒーローは濃褐の半透明地＋細枠の明朝ボタン、コンテンツ面は黒地＋白文字の「もっと見る」。

**Hero Ghost（写真上・濃褐ヴェール＋細枠）** — ヒーローの主要 CTA
- Background: `rgba(28,19,10,0.5)`（濃褐 #1c130a の半透明）
- Text: `#ffffff`（明朝 M / 16px / lh 1.4 / ls 0.32px）
- Border: 1px solid `#827e7a`
- Border Radius: `0px`
- Padding: `30px 10px 15px`（上に余裕を持たせた縦長の佇まい）

**Content（黒地・白文字「もっと見る」）** — 一覧の続きを開く
- Background: `#000000`
- Text: `#ffffff`（游ゴシック / 16px / lh 48px の帯）
- Border: なし
- Border Radius: `0px`

**Link（テキストリンク・明朝）**
- Text: `#000000`（明朝）。ナビ・記事内リンク
- ホバーは色の濃淡や下線で控えめに反応

### Inputs

> 実サイトでフォームの抽出データは限定的。下記は基調からの推定値。

- Background: `#ffffff`
- Border: 1px solid `#827e7a`（または淡いグレー）
- Border (focus): 1px solid `#1c130a`（濃褐）＋ごく薄いリング
- Border Radius: `0px`（角丸なし）
- Padding: 約 12px 14px
- Font: 明朝 R / 16px / ls 0.02em
- Label: 明朝 M / 16px

### Cards

- Background: `#ffffff`、または写真をそのまま敷く
- Border: なし、または淡いグレーの細線
- Border Radius: `0px`
- 商品・読み物カードは **写真を大きく置き**、その下に明朝の品名（H3）＋区分ラベル（ゴシック・金茶/朱）を添える
- 影は基本持たず、写真と余白・直線で面を分ける

---

## 5. Layout Principles

### Spacing

- 大きな写真（多くは全画面 / フルブリード）と広い余白で構成。セクション間は十分な縦余白（おおむね 80〜120px）を取る
- 縦組み風の季節語・日付はヒーロー四隅〜中央に余白を効かせて配置し、写真の「間」を活かす

### Container

- ヒーローはフルブリード（左右余白なし）
- 商品・記事コンテンツは中央寄せのカラム。左右に十分な余白を取り、本文幅を読みやすく抑える

### Grid

- 商品一覧はカードグリッド（おおむね 2〜4 カラム、ビューポートで可変）
- Gutter: 24〜32px 程度。写真の縦横比を揃え、明朝の品名を等間隔に並べる

---

## 6. Depth & Elevation

> 茅乃舎は影をほぼ使わない。写真・濃褐ヴェール・余白・直線で階層をつくるフラット設計。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | none | 全コンポーネントの基本。写真と余白で面を分ける |
| 1 | `0 1px 3px rgba(28,19,10,0.10)` | ドロップダウン・ドロワー等、必要箇所のみ最小限 |
| 2 | `0 8px 24px rgba(28,19,10,0.16)` | モーダル等（実サイトでは稀） |

- ヒーローの可読性は box-shadow ではなく **濃褐 #1c130a の半透明ヴェール**で確保する
- 影を使う場合も、黒ではなく濃褐（#1c130a）ベースの墨色にして世界観に馴染ませる

---

## 7. Do's and Don'ts

### Do（推奨）

- 本文も見出しもナビも筑紫明朝（FOT-筑紫明朝 Pr6 → TsukuMin → serif、代替 Shippori Mincho）で組む
- ヒーローは写真＋濃褐ヴェール（rgba(28,19,10,0.5)）＋白文字。可読性はヴェールで確保する
- 季節語・候名・月名は、サイズを抑えて字間を 0.3〜0.5em に広げ「間」をつくる
- 本文 line-height は 1.7〜1.8 とゆったり、字間は 0.02em のごく控えめに
- 日付など象徴的な数字は Baskerville（代替 Libre Baskerville）で大きく打つ
- ボタン・入力・カードは角丸なし（radius 0）で直線的にまとめる
- 区分ラベルは金茶 #8f7e4b、限定強調は朱 #9f0e14、地は萱色 #5b5d22 を基調に

### Don't（禁止）

- 見出し・本文をゴシックで組まない（明朝が基本。游ゴシックは機能ラベルの限定用途のみ）
- `palt` を有効にしない（実サイトは全要素 normal。調整は letter-spacing で開く方向に）
- 角丸（border-radius）を付けない（直線的なフォルムが個性）
- ヒーローの白文字を写真に直置きしない（必ず濃褐ヴェールを噛ませる）
- 季節語・見出しの字間を詰めない（広げて「間」を出す）
- 原色・蛍光色を足さない（萱色・濃褐・金茶・朱の落ち着いた和の色域に収める）
- 本文の行間を詰めすぎない（1.7〜1.8 を保つ）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム、ナビはドロワー。ヒーローは縦長写真＋季節語を中央に集約 |
| Tablet | 768–1023px | 2 カラムの商品グリッド |
| Desktop | ≥ 1024px | フルブリードのヒーロー＋2〜4 カラムのグリッド |

- ヒーローの大数字（Baskerville 160px）はモバイルで比例縮小するが、字間の広い季節語は維持して情緒を残す
- 横余白はモバイルで詰めつつ、本文幅は読みやすさを優先して確保する

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG基準）。縦長の明朝ボタンは高さに余裕があるため自然に満たす

### フォントサイズの調整

- 本文は 16px（モバイルでも 15〜16px を確保）、商品説明 14px
- ヒーロー見出し・季節語はビューポートに応じて縮小するが、字間 0.3〜0.5em の設計は崩さない

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
Background: #ffffff（コンテンツ）/ 写真＋濃褐ヴェール rgba(28,19,10,0.5)（ヒーロー）
Brand 地色: #5b5d22（萱色・オリーブ）/ ヴェール・塗り #1c130a（濃褐）
Text: #000000（黒・コンテンツ）/ #ffffff（白・ヒーロー）/ Muted #bbbbbb
Accent: #8f7e4b（金茶・区分）/ #9f0e14（朱・限定）/ Border #827e7a
基本 Font（本文・見出し・ナビ）: "FOT-筑紫明朝 Pr6 R/M", TsukuMinPr6, serif  /* 代替: "Shippori Mincho" */
機能ラベル Font: 游ゴシック, YuGothic, sans-serif  /* 代替: "Zen Kaku Gothic New" */
日付大数字 Font: Baskerville, serif  /* 代替: "Libre Baskerville" */
Body: 16px / lh 1.7 / 和文 ls 0.02em
見出し・季節語 ls: 0.1〜0.5em（広く開ける）
OpenType: font-feature-settings: normal（palt は使わない）
Button: 角丸なし（radius 0）。ヒーロー＝濃褐ヴェール地＋細枠 #827e7a の明朝／コンテンツ＝黒地 #000＋白文字
Radius: 0px（直線的）
```

### プロンプト例

```
茅乃舎（久原本家）のデザインシステムに従って、商品ブランドのトップ＋商品紹介ページを作成してください。
- トップは薄暮の和の写真を全画面ヒーローに敷き、濃褐ヴェール rgba(28,19,10,0.5) を重ねた上に白の明朝テキストを置く
- 本文も見出しもナビも筑紫明朝: "FOT-筑紫明朝 Pr6 R/M", TsukuMinPr6, serif（代替 Shippori Mincho）。機能ラベルのみ游ゴシック
- ヒーローに七十二候（例: 菖蒲華）と月・日付を縦組み風に配置。季節語は字間 0.3em、月名は 0.5em と広く開ける。日付は Baskerville（代替 Libre Baskerville）で 大きく打つ
- 商品ページは純白地＋黒文字 #000。本文は明朝 16px / line-height 1.7・letter-spacing 0.02em
- font-feature-settings は normal（palt を使わない）
- CTA は角丸なし: ヒーローは濃褐ヴェール地＋1px solid #827e7a の明朝ボタン、一覧は黒地 #000＋白文字の「もっと見る」
- 色は萱色 #5b5d22・濃褐 #1c130a を基調に、区分は金茶 #8f7e4b、限定強調は朱 #9f0e14
- 写真と広い余白で「間」をつくり、原色や角丸は使わない
```