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

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

Text

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

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 が当たり、極端に細くなる。

3.5 行間・字間

行間

字間 — 書体で使い分ける

• 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。角を丸めない。

① プライマリ（塗り）

cssbackground: #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。

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

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

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

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

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

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

Chips / Tags

cssbackground: 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

cssbackground: #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

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

Header

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

Radius Scale

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

6. Depth & Elevation

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

• カードにもボタンにも影を付けない（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

タッチターゲット

• プライマリ 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・グレーで構成する