# DESIGN.md — GOOD NATURE STATION（グッドネイチャーステーション）

> GOOD NATURE STATION（https://goodnaturestation.com/）のデザイン仕様書。
> 京阪ホールディングスの BIOSTYLE 事業が 2019 年に京都・河原町で開業した、**マーケット／レストラン／コスメ／ホテルを 1 棟に収めた複合施設**。壁面緑化のファサードで知られる。
> **角丸を 1 つも使わない**。CTA・チップ・カード・バナー、抽出した `interactive` の全件が `border-radius: 0`。この直角が施設の建築（コンクリートとグリッドの外観）と揃えられている。
> **欧文と和文で字間の設計が違う**。Lato の見出し・ナビは **0.16em** と極端に開き、和文は **0.04〜0.12em**。「GOOD NATURE」というロゴタイプの間延びした佇まいを、Web のテキストでもそのまま再現している。
> **和文フォントが游ゴシック単独**（ヒラギノを含まない）。しかも `font-weight: 500` を既定にして **游ゴシック Medium を確実に当てる**。Windows の游ゴシック Regular が細く出る問題を、`font-weight` 側から解いている珍しい実装。
> **彩度を持つ色はブランドグリーン `#009b4c` の 1 色だけ**。それ以外は `#221715`（赤みのある黒）と白とグレーで構成される。
> 実サイトの computed style 実測（2026-08-28 取得。トップ ＋ 営業時間・フロアガイド `/facilities/`）＋ 読み込まれる CSS 335KB の直接集計に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **写真のグリッドと直角**。ファーストビューは 4 分割の写真タイル、以降もカードが 4 列で整然と並ぶ。角丸・影・グラデーションをほぼ使わず、矩形の連続で構成する
- **GOOD NATURE STATION について**: 「人も地球も元気にする」を掲げた施設で、オーガニック食材のマーケット（MARKET）、レストラン、コスメ（NEMOHAMO / RAU）、ホテル（GOOD NATURE HOTEL KYOTO）が同居する。**扱う対象が食・美容・宿泊とバラバラなので、UI 側は徹底して中立に作られている**
- **密度**: **中〜高**。1440px 幅で 4 列のカードグリッド。ただしカード間のガターは広く取り、行間は 1.5〜1.8 で息を抜く
- **キーワード**: 直角（radius 0）、Lato の 0.16em トラッキング、游ゴシック Medium、単色グリーン、4 列グリッド
- **特徴**:
  - **`border-radius: 0` が設計の核**。抽出した CTA・チップ・バナー **全件**が角丸なし。角を丸めた瞬間にこのサイトの印象は崩れる
  - **CTA の枠が `2px solid` で面と同色**。`background: #009b4c` ＋ `border: 2px solid #009b4c` という書き方を取るので、ホバーで面だけ透明にすればアウトラインボタンに変わる。**塗り／枠の 2 状態を 1 つの実装で持つ**
  - **カテゴリチップが半透明のグレー**（`rgba(226, 226, 226, 0.5)`）。写真の上でも白地の上でも同じチップが使えるようにアルファで作られている
  - **見出しの英字は必ず Lato、和文は游ゴシック**。`TOPICS` `INFO` のようなセクション見出しは Lato 48px / 700 / **0.16em**、日本語の大見出しは游ゴシック 42px / 700 / **0.12em**
  - **`font-feature-settings` の宣言が 1 つも無い**（＝ `palt` を使わない）。字間はすべて `letter-spacing` で作る
  - **ヘッダーは 2 層**。最上部に薄いグレー（`#f2f2f2`）のユーティリティバー（「こちらをお探しですか？」＋オンラインショップ／ホテル導線）、右上に `#221715` の正方形ハンバーガー
  - **⚠️ `#40b87c`（CSS 出現 23 回で緑の中で最多）は画面上のどこにも描画されない**。WordPress プラグインの既定値。実際に使われるのは `#009b4c`（13 回）と、その暗い対 `#009249`（12 回）
  - **⚠️ 左下の「Language」ピル（`#dee5ec`）と `?wovn=` の言語切替は WOVN のウィジェット**。施設のデザインではないので色を拾わない

---

## 2. Color Palette & Roles

> 地は `#ffffff`（`pageBackground.resolved` = `rgb(255,255,255)` / 根拠 `body`）。トップ・下層とも同じ。

### Brand（ブランド）

- **GOOD NATURE Green** (`#009b4c`, rgb 0,155,76): **主色にして唯一の彩度**。主 CTA の面（「ポイントアプリのご案内」「GOOD NATURE ブランドサイト」「もっと見る」）、ユーティリティバーの丸アイコン、アウトラインボタンの枠。CSS 出現 **13 回**
- **Green Dark** (`#009249`, rgb 0,146,73): ホバー／プレス時の暗い対。CSS 出現 **12 回**
- **Ink** (`#221715`, rgb 34,23,21): **本文とすべての文字の既定色**。純黒ではなく**赤みを持つ黒**で、木や食材の写真に馴染む。パンくずバー・ハンバーガー・情報ボックスの面色でもある
- **Ink 90%** (`rgba(34, 23, 21, 0.9)`): 言語切替パネルなど、写真の上に重ねる暗幕

### Neutral / Surface

| 役割 | 色 | 用途 |
|------|-----|------|
| ページ地 | `#ffffff` | 全ページ共通 |
| ユーティリティバー | `#f2f2f2` | 最上部の「こちらをお探しですか？」帯 |
| テーブルの地 | `#efefef` | フロアガイドの行見出し |
| チップの面 | `rgba(226, 226, 226, 0.5)` | `#MARKET` `#RAU` `#ERUTAN` などのカテゴリタグ |
| 罫線・枠 | `#969696` | セレクトボックス・アウトラインの枠 |
| 区切り線 | `#c3c3c3` | セクションの境目 |
| ナビ非活性 | `#9a9a9a` | Lato のナビゲーションの非選択項目 |

### Text

| 役割 | 色 | 用途 |
|------|-----|------|
| 本文・見出し | **`#221715`** | `body` の既定色。**すべての黒はこれ** |
| 写真の上 | `#ffffff` | ヒーロー・カードのオーバーレイ |
| 非活性 | `#9a9a9a` | ナビの非選択、補助テキスト |

### ⚠️ ブランド色として拾ってはいけない色

| 色 | 出現 | 正体 |
|----|------|------|
| `#40b87c` | **CSS 23 回**（緑で最多） | プラグインの既定値。**描画箇所が 0** |
| `#dee5ec` | `uniqueBackgrounds` 1 件 | **WOVN 言語切替ウィジェット**の面 |
| `#d22d3b` | `/facilities/` に 2 件 | **ミシュランのロゴ**（外部ブランド） |
| `#27313b` / `#bf2318` / `#c46710` / `#0970af` / `#232bb1` / `#571ca5` | CSS 12〜15 回 | WordPress ブロックエディタの既定パレット。**未使用** |

---

## 3. Typography Rules

### 3.1 和文フォント

Web フォントは読み込まず、**游ゴシック 1 本に絞る**。ヒラギノは**入っていない**。

- **ゴシック体**: **游ゴシック体 → YuGothic → 游ゴシック Medium → Yu Gothic Medium → 游ゴシック → Yu Gothic**
- **明朝体**: 使用しない

**5 つの表記ゆれを全部並べているのが要点**。macOS の `游ゴシック体` / `YuGothic`、Windows の `Yu Gothic Medium` / `Yu Gothic`、日本語ロケールの `游ゴシック Medium` を全部書くことで、**どの OS でも游ゴシックに当てる**。

### 3.2 欧文フォント

- **サンセリフ**: **Lato**（Google Fonts）。**欧文の見出し・ナビ・日付・メタ情報専用**
- **等幅**: 指定なし

**Lato と游ゴシックは同じスタックに混ぜない**。「英字だけの要素」に `font-family: Lato, sans-serif` を当て、それ以外は游ゴシックのスタックを使う、という**要素単位の切り分け**をしている。

### 3.3 font-family 指定

```css
/* 和文（サイトの既定）— 5 つの表記ゆれを全部並べる */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック, "Yu Gothic", sans-serif;

/* 欧文（セクション見出し・ナビ・日付・メタ）*/
font-family: Lato, sans-serif;
```

**フォールバックの考え方**:
- **和文優先**。欧文フォントをスタックの先頭に置かず、和文の中の欧文グリフを使う
- **英字だけの要素は Lato に切り替える**。混在させるのではなく、要素ごとに書体を選ぶ
- **`font-weight: 500` を既定にする**（後述）。これで游ゴシックの Medium が確実に当たる

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

**本文のウェイトが 500 なのがこのサイトの肝**。400 に落とすと Windows で游ゴシック Regular が当たり、極端に細くなる。

| 役割 | サイズ | ウェイト | line-height | letter-spacing | 書体 | 色 |
|------|-------|---------|------------|----------------|------|-----|
| **セクション見出し（英字）** | 48px | 700 | 63.84px (1.33) | **7.68px (0.16em)** | **Lato** | `#221715` |
| ページ見出し（和文・写真上） | 42px | 700 | 63px (1.5) | **5.04px (0.12em)** | 游ゴシック | `#ffffff` |
| 日付（大きく見せる） | 26px | 700 | 47.125px (1.81) | 1.3px (0.05em) | **Lato** | `#221715` |
| ヒーローのリード | 22px | 500 | 33px (1.5) | **2.2px (0.1em)** | 游ゴシック | `#ffffff` |
| カードタイトル | 18px | **700** | 30〜32px (**1.67〜1.78**) | normal | 游ゴシック | `#221715` |
| **本文** | **16px** | **500** | **24px (1.5)** | normal | 游ゴシック | `#221715` |
| テーブルのセル | 16px | 500 | 29px (**1.81**) | normal | 游ゴシック | `#221715` |
| 補足文 | 15px | 500 | 27px (1.8) | normal | 游ゴシック | `#221715` |
| ナビゲーション（英字） | 13px | 700 / 400 | 30.94px (2.38) | **2.08px (0.16em)** | **Lato** | `#ffffff` / `#9a9a9a` |
| チップ・タグ | 13px | **700** | — | normal | 游ゴシック | `#221715` |
| 小さい本文 | 13px | 500 | 21.97px (1.69) | normal | 游ゴシック | `#221715` |
| CTA ラベル | 14px | **700** | 19.99px (1.43) | **0.56px (0.04em)** | 游ゴシック | `#ffffff` |
| メタ情報（英字） | 12px | 400 | 12.96px (1.08) | 0.72px (0.06em) | **Lato** | `#221715` |
| キャプション（英字） | 10px | 400 | 10px (1.0) | 0.5px (0.05em) | **Lato** | `#221715` |

### 3.5 行間・字間

**行間**

| 用途 | 比率 |
|------|------|
| 本文・ヒーローのリード | **1.5** |
| カードタイトル | **1.67〜1.78** |
| テーブル・補足文 | **1.8〜1.81** |
| 英字の大見出し | 1.33 |
| 英字ナビ | 2.38（行高でクリック領域を作る） |

**字間 — 書体で使い分ける**

| 対象 | 値 | 実測 |
|------|-----|------|
| **Lato の見出し・ナビ** | **0.16em** | 48px→7.68px / 13px→2.08px |
| 和文の大見出し | **0.12em** | 42px→5.04px |
| 和文のヒーローリード | **0.1em** | 22px→2.2px |
| 英字メタ | 0.05〜0.06em | 12px→0.72px / 10px→0.5px |
| CTA ラベル | **0.04em** | 14px→0.56px / 16px→0.64px |
| **本文・カードタイトル** | **`normal`** | — |

- **`0.16em` を欧文の見出しとナビにだけ効かせる**。これがブランドの声になっている
- **本文には字間を入れない**。開けるのは見出しと CTA だけ
- CSS 中の `letter-spacing` 宣言は 33 個で、`.05em` `.16em` `.1em` `.2em` `.04em` `.06em` が並ぶ

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

- **ヒーローのコピーは意味のまとまりで手動改行**（「信じられるものだけを、美味しく、楽しく。」／「人も地球も元気にする」／「"GOOD NATURE"なモノ・コトが集まる場所」の 3 行）
- カードタイトルは **2 行まで**を想定（18px / 行間 1.67 で 2 行 ＝ 約 60px）。それを超える見出しは折り返しに任せる
- カード幅は 1288px の 4 列で **約 288px**。16px の本文で **1 行あたり約 18 字**になるので、短いラベルは改行させない
- `word-break` / `overflow-wrap` の指定は無く、**ブラウザ既定の日本語禁則に任せる**

### 3.7 OpenType 機能

```css
/* 指定なし。CSS 全文に font-feature-settings の宣言が 0 個 */
```

- **`palt` を使わない**。「」（）、。 のアキを詰めず、字間は `letter-spacing` だけで作る
- 数字も指定なし。日付（`2026.06.18`）は Lato のプロポーショナル既定字形で出る。**日付は必ずピリオド区切り**（`/` ではない）

### 3.8 縦書き

- **使用しない**。`writing-mode` の指定なし

---

## 4. Component Stylings

### Buttons

**すべて `border-radius: 0`。角を丸めない。**

**① プライマリ（塗り）**

```css
background: #009b4c;
color: #ffffff;
border: 2px solid #009b4c;   /* 面と同色の枠を持たせる */
border-radius: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;      /* 0.56px */
padding: 16px 16px 15px;     /* 下が 1px 小さい */
```

小さいバリエーション: `padding: 11px 16px`。
大きいバリエーション: `font-size: 16px` / `letter-spacing: 0.04em`（0.64px）/ `padding: 22px 10px`。

**② アウトライン（写真・暗い面の上）**

```css
background: transparent;
color: #ffffff;
border: 2px solid #009b4c;   /* 枠だけグリーン、文字は白 */
border-radius: 0;
font-size: 13px;
font-weight: 700;
```

**面と同じ 2px の枠**なので、①からホバーで `background` を透明にするだけで②になる。

**③ ダークバー（情報ボックス／パンくず）**

```css
background: #221715;
color: #ffffff;
border-radius: 0;
font-size: 14px;
font-weight: 500;
padding: 23px 36.73px 20px;
```

写真の上に置く「営業時間・定休日は店舗により異なります」のようなお知らせ枠。

### Chips / Tags

```css
background: rgba(226, 226, 226, 0.5);   /* 半透明のグレー */
color: #221715;
border: none;
border-radius: 0;
font-size: 13px;
font-weight: 700;
padding: 2px 12px;
```

`#MARKET` `#RAU` `#ERUTAN` のようにハッシュタグ表記で使う。カード下部の `shop` `event` `experience` も同じ形。**半透明なので写真の上でも白地でも同じ実装で成立する**。

### Inputs

```css
/* セレクトボックス */
background: transparent;
color: #221715;
border: 1px solid #969696;
border-radius: 0;
font-size: 24px;
font-weight: 400;
padding: 17px 10px;
```

- **フォーカスリングの独自指定は無い**。ブラウザ既定に任せている
- 検索欄は写真の上に置かれ、`background: transparent` / `color: #ffffff` / 枠なしで、下線もない

### Cards

```css
background: #ffffff;
border: none;
border-radius: 0;
box-shadow: none;
```

構成は上から **画像（角丸なし）→ 日付（Lato 12px）→ タイトル（游ゴシック 18px / 700 / 行間 1.67）→ カテゴリチップ**。
**枠も影も付けない**。カード同士はガターの余白だけで分かれる。

### Tables（フロアガイド）

```css
/* 行見出し */
background: #efefef;
/* セル */
font-size: 16px;
font-weight: 500;
line-height: 29px;   /* 1.81 */
color: #221715;
```

---

## 5. Layout Principles

### Container

| 用途 | 幅 |
|------|-----|
| **外枠（全幅）** | **1440px**（`max-width`。実測 18 要素） |
| **コンテンツ内枠** | **1288px**（左右 76px のパディング） |
| 2 カラム分割 | **720px**（1440 の 50%） |
| 3 カラム | 約 1152px 内の分割 |

- **ヒーローは 2×2 の写真タイル**（各 720px 幅）
- **カードは 4 列**。1288px ÷ 4 ＝ 約 288px（ガター込み）

### Header

- **上部ユーティリティバー**: 高さ 56px / `background: #f2f2f2` / 「こちらをお探しですか？」＋グリーンの丸アイコン付きリンク 2 本。閉じられる（右端に × ）
- **ハンバーガー**: 右上固定の **76×76px の `#221715` 正方形**。角丸なし
- ロゴは画面中央に大きく配置され、ヘッダーには入らない

### Radius Scale

| 値 | 用途 |
|----|------|
| **`0`** | **ボタン・チップ・カード・入力欄・バナー — 全部** |
| `50%` | 丸アイコン（ユーティリティバーのグリーンの丸）のみ |

**それ以外の角丸は使わない。**

---

## 6. Depth & Elevation

**影はほとんど使わない。** 階層はグリッドと余白で作る。

| 用途 | 値 | CSS 出現 |
|------|-----|---------|
| ドロップダウン・浮くパネル | `0 2px 4px 0 rgba(0, 0, 0, 0.2)` | **8 回** |
| 目次ウィジェット（プラグイン） | `0 0 2px 0 rgba(0,0,0,.08), 0 1px 2px 0 rgba(0,0,0,.1)` | — |

- **カードにもボタンにも影を付けない**（`box-shadow: none`）
- ページ全体でランタイムに描画されている影は **2 種類だけ**

---

## 7. Do's and Don'ts

### Do（推奨）

- **`border-radius: 0` を貫く**。CTA・チップ・カード・入力欄すべて直角
- **和文は游ゴシックのスタックを 5 表記ぶん並べる**（`游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic"`）
- **`font-weight: 500` を本文の既定にする**。游ゴシック Medium を確実に当てるための実装
- **英字の見出し・ナビだけ Lato にして `letter-spacing: 0.16em`** を効かせる
- **和文の大見出しは 0.12em、ヒーローのリードは 0.1em、CTA は 0.04em**。本文は `normal`
- **彩度は `#009b4c` の 1 色に絞る**。ホバーは `#009249`
- **黒は `#221715`**（赤みのある黒）を使う。`#000000` にしない
- **CTA は面と同色の `2px solid` 枠**を持たせ、ホバーで面を透明にしてアウトラインへ切り替える
- **チップは半透明グレー**（`rgba(226,226,226,.5)`）。写真の上でもそのまま使える
- **日付はピリオド区切り**（`2026.06.18`）で Lato

### Don't（禁止）

- **角を丸めない**。1 箇所でも `border-radius` を入れると施設の直角の印象が崩れる
- **`#40b87c` を使わない**。CSS 上は緑で最多（23 回）だが、実際には 1 箇所も描画されていないプラグイン既定値
- **`#dee5ec` / `#d22d3b` を拾わない**。それぞれ WOVN 言語切替ウィジェットとミシュランのロゴ
- **和文スタックにヒラギノを足さない**。このサイトは游ゴシック 1 本で設計されている
- **本文の `font-weight` を 400 に落とさない**。Windows で極端に細くなる
- **和文と Lato を同じスタックに混ぜない**。要素単位で書体を切り替える
- **本文に `letter-spacing` を入れない**。開けるのは見出しと CTA だけ
- **`palt` / `font-feature-settings` を足さない**
- **カードに枠・影を足さない**。余白だけで分ける
- **`#000000` を使わない**。黒は `#221715`

---

## 8. Responsive Behavior

### Breakpoints

| 幅 | レイアウト |
|----|-----------|
| `> 1440px` | 外枠 1440px 固定・中央寄せ。内枠 1288px |
| `1024〜1440px` | 内枠は左右 76px パディングの流動幅。カードは 4 列 |
| `768〜1024px` | カード 2 列。ヒーローは 2×2 タイルのまま |
| `< 768px` | 1 カラム。ハンバーガーのみのナビゲーション |

### タッチターゲット

- プライマリ CTA は `padding: 16px 16px 15px` ＋ 14px の文字で高さ **約 51px**
- ハンバーガーは **76×76px** で余裕がある
- チップ（`padding: 2px 12px` / 13px）は高さ約 22px と小さいので、**モバイルでは上下パディングを 6px に広げる**

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

- **本文 16px / 行間 1.5 はモバイルでも下げない**
- 英字セクション見出し 48px → 28〜32px（`letter-spacing: 0.16em` は維持）
- 和文ページ見出し 42px → 24〜28px（`letter-spacing` は 0.08em 程度に緩める）
- ヒーローのリード 22px → 16〜18px

---

## 9. Agent Prompt Guide

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

```
ページ背景: #ffffff
本文:      16px / 500 / line-height 1.5 / #221715
           游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
           游ゴシック, "Yu Gothic", sans-serif
英字見出し: Lato / 48px / 700 / line-height 1.33 / letter-spacing 0.16em / #221715
和文見出し: 42px / 700 / line-height 1.5 / letter-spacing 0.12em / #ffffff（写真の上）
カードタイトル: 18px / 700 / line-height 1.67 / #221715 / letter-spacing normal
ブランド色:  #009b4c（ホバー #009249）— 彩度を持つ唯一の色
黒:        #221715（#000000 は使わない）
CTA:       #009b4c / 白文字 / 2px solid #009b4c / border-radius 0 /
           14px 700 / letter-spacing 0.04em / padding 16px 16px 15px
チップ:     rgba(226,226,226,.5) / #221715 / radius 0 / 13px 700 / padding 2px 12px
角丸:       0（全コンポーネント）
影:        原則なし（浮くパネルのみ 0 2px 4px 0 rgba(0,0,0,.2)）
レイアウト:  外枠 1440px / 内枠 1288px（左右 76px）/ カード 4 列
palt:      使わない
日付:       Lato・ピリオド区切り（2026.06.18）
```

### プロンプト例

```
GOOD NATURE STATION（https://goodnaturestation.com/）のデザインで、
複合施設のショップ一覧ページを作ってください。

- ページ背景は #ffffff、文字色は #221715（#000000 は使わない）
- 和文は 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
  游ゴシック, "Yu Gothic", sans-serif の 16px / font-weight 500 / line-height 1.5
  （400 に落とさない。Windows で細くなるため）
- 英字のセクション見出しだけ Lato の 48px / 700 / line-height 1.33 /
  letter-spacing 0.16em。和文の大見出しは 42px / 700 / letter-spacing 0.12em
- 本文とカードタイトルの letter-spacing は normal
- border-radius はすべて 0。ボタン・チップ・カード・入力欄すべて直角にする
- 主 CTA は「background #009b4c / 白文字 / border: 2px solid #009b4c /
  border-radius 0 / 14px 700 / letter-spacing 0.04em / padding 16px 16px 15px」。
  ホバーで background を transparent にしてアウトラインへ切り替える
- カテゴリチップは rgba(226,226,226,.5) の面 / #221715 / 13px 700 / padding 2px 12px
- カードは「画像 → 日付（Lato 12px / letter-spacing 0.06em / ピリオド区切り）→
  タイトル（18px 700 / line-height 1.67）→ チップ」の順。枠も影も付けない
- 外枠 1440px・内枠 1288px（左右 76px パディング）、カードは 4 列グリッド
- 影は使わない。font-feature-settings（palt）は指定しない
- 彩度を持つ色は #009b4c だけ。ほかは白・#221715・グレーで構成する
```