玉川堂（GYOKUSENDO） DESIGN.md

玉川堂（https://www.gyokusendo.com/）のデザイン仕様書。 1816 年（文化 13 年）創業、新潟県燕市。一枚の銅板を鎚で叩き縮めて器に成形する「鎚起銅器」を 200 年以上つくり続ける工房で、国の無形文化財に指定されている。 最大の特徴は、サイト全体を Morisawa の明朝系ディスプレイ書体「りょう Display PlusN」（ryo-display-plusn）一本で組み、font-feature-settings: "palt" と letter-spacing: 0.06em と line-height: 2.0 をすべてグローバルに効かせること。さらに 見出しを weight 300（Light）、本文を weight 500（Medium） と、通常とは逆のウェイト関係で階層をつくる。地は白 #ffffff、メニュータイルとフッターは黒 #000000、KV は工房写真に rgba(0,0,0,0.3) の暗幕。 実サイトの computed style 実測（2026-07-28 取得。トップページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝一本で、静かに、細く。ゴシックを一切使わず、サイト全体を明朝系ディスプレイ書体で組む。見出しほど細く（weight 300）、行間は隅々まで 2.0。銅器の「打つ」という行為の静けさを、字面の余白で表す
• 玉川堂について: 200 年続く鎚起銅器の工房。EC よりも「工房を訪ねる」「使い込んで育てる」体験の紹介が中心で、サイトのコピーも「打つ。時を打つ。」のような短い詩的な一行が軸になる
• 密度: 低密度。KV は工房の全画面写真。以下は黒タイルのメニュー、お知らせ、フッターと縦に積むだけで、1 画面あたりの要素数を絞る
• キーワード: 明朝一本（りょう Display PlusN）、weight 300 の見出し、行間 2.0 グローバル、palt グローバル、ls 0.06em、白と黒の二値、角丸 0
• 特徴:
  • 和文も欧文も ryo-display-plusn 一書体。ナビ・見出し・本文・フォーム・フッターまですべてこれ。欧文フォントを別に指定していないため、English 1816 などのラテン文字も明朝のラテングリフで組まれる
  • font-feature-settings: "palt" がグローバル。見出しだけでなく本文にも掛かる。明朝の字面の空きを全面的に詰めたうえで、letter-spacing: 0.06em で均一に開き直すという二段構え
  • line-height: 2.0 がグローバル。16px→32px、14px→28px、28px→56px、12px→24px と、本文系はすべて ×2.0。見出しだけが 1.1 に締まる
  • ウェイトの関係が逆転している。見出し（48px / 24px / 18px）は 300（Light）、本文・ナビ・リストは 500（Medium）。サイズと太さが逆方向に動くことで、大きな見出しが軽く、静かに見える
  • 色は白と黒の二値。彩度を持つ色を UI に持ち込まず、色は銅器の写真（赤銅・紫金・黒味銅・栗色）が担当する
  • メニューは黒ベタのタイル。写真の上に #000000 の面を置き、白の明朝で「玉川堂について」「玉川堂の歴史」「玉川堂の技術」と並べる
  • 角丸は全域 0。アウトラインボタンも 1px の直線の矩形

2. Color Palette & Roles

実測値。UI に使われる色は白・黒とグレー 4 段だけ。ブランドカラーと呼べる有彩色を持たず、銅の色は写真が受け持つ。

Base（地）

• Background (#ffffff): ページ地色。純白
• Ink (#000000): 本文・見出しの基本テキスト色。メニュータイルとフッターの面色でもある
• KV Overlay (rgba(0,0,0,0.3)): KV の工房写真に重ねる暗幕。白のロゴと「English / 簡体中文 / 繁體中文 / オンラインショップ」を読ませるための 30% の黒

Neutral（文字・罫）

• Text on Dark (#ffffff): 黒タイル・フッター上の文字
• Sub Text (#333333, rgb 51,51,51): サブメニューのリンク（「玉川堂について」等の下層項目）
• Caption (#666666, rgb 102,102,102): 著作権表記・注釈。フォーム入力欄の文字色
• Muted (#999999, rgb 153,153,153): アウトラインボタン（「一覧を見る」）の文字色。押せることを示しつつ主張しない灰
• Border (#cccccc, rgb 204,204,204): アウトラインボタンの罫・区切り線
• Gray (#aaaaaa, rgb 170,170,170): スライダーの非活性インジケータ

Brand（ブランド）

• 玉川堂は UI 上のブランドカラーを持たない。ロゴマーク（鎚目の円）とロゴタイプ「Gyokusendo 1816」は白または黒の単色で使う
• ブランドの色は銅の経年色そのもの。赤銅（#7b3f2e 目安）・紫金（#4a2a2a 目安）・黒味銅（#2b2320 目安）・栗色（#5c3a25 目安）は写真と商品説明の中で示すものであり、UI の面色や罫に使わない

Semantic（意味的な色）

• 意味色を持たない。状態は文言と罫線の有無で示す
• Danger／Error: フォームで必要な場合のみ暖色の赤（#a83a2e 目安。銅の赤に近い落ち着いた赤を選ぶ）
• Info: #333333 の文字＋ 1px の罫線で代用する

3. Typography Rules

明朝系ディスプレイ書体「りょう Display PlusN」一本でサイト全体を組む。palt / letter-spacing: 0.06em / line-height: 2.0 がすべてグローバルに効き、見出しは weight 300、本文は weight 500 と太さの関係が逆転する。

3.1 和文フォント

• 明朝体: りょう Display PlusN（ryo-display-plusn／Morisawa、Adobe Fonts 経由で配信）。大きなサイズでの表示を想定した明朝系ディスプレイ書体で、線のコントラストが強く、横画が細い
• ゴシック体: 使わない。ナビも本文もフォームもすべて明朝
• ウェイト: 300（Light）／400／500（Medium）／700 の 4 段を使う。主役は 300（見出し）と 500（本文）

3.2 欧文フォント

• 欧文専用のスタックを持たない。ryo-display-plusn, serif のみで、ラテン文字は明朝書体に内蔵されたラテングリフで組まれる
• そのため English / GYOKUSENDO / 1816 といった欧文も和文と同じ字面のトーンで並ぶ
• 例外はフォームの input[type=email] で、"Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif に落ちる。これは実装上の取り残しであり、再現時は ryo-display-plusn に揃えること
• preview.html での注記: ryo-display-plusn は Morisawa の Adobe Fonts 配信書体で、ローカルの preview.html では表示できない。プレビューでは Google Fonts の "Noto Serif JP"（weight 300 / 500） を代替に用いる。weight 300 が使えることが代替選定の決め手で、玉川堂の設計の核である「見出しを Light で組む」を再現できる書体は Google Fonts の日本語明朝では限られる（Shippori Mincho / Zen Old Mincho は 400 以上のみ）。実装時は必ず ryo-display-plusn を読み込むこと

3.3 font-family 指定

css/* サイト全体（唯一の指定） */
font-family: ryo-display-plusn, serif;

/* グローバル */
font-feature-settings: "palt";
letter-spacing: 0.06em;    /* 16px に対し 0.96px */
line-height: 2.0;          /* 16px に対し 32px */
font-weight: 500;          /* 本文の既定 */

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

• 1 書体 ＋ serif のみという最小構成。和欧を分けず、多言語（簡体中文・繁體中文）ページも同じ指定で通す
• ウェイトは font-weight で切る（300 / 400 / 500 / 700）。ファミリー名の切り替えは行わない
• フォールバックが serif だけなので、書体が読み込めなかったときは OS の明朝（游明朝 / ヒラギノ明朝）に落ちる。ゴシックに落ちない設計になっている

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

• letter-spacing は px 固定の 0.96px。基準サイズが変わっても px 値が変わらないため、小さい文字ほど em 換算で字間が広くなる（16px→0.06em、12px→0.08em、48px→0.02em）。これがサイト全体の「小さい文字ほど開いて見える」印象をつくっている
• 見出しは 300、本文は 500。サイズが大きいほど細く、小さいほど太い

3.5 行間・字間

• 行間 (line-height): 本文系はすべて 2.0（16px→32px / 14px→28px / 12px→24px / 28px→56px）。見出しだけが 1.1（48px→52.8px / 24px→26.4px / 18px→19.8px）。中間の値をほとんど使わない二極構造
• 字間 (letter-spacing): グローバルに 0.96px 固定。em 換算では 0.02em（48px）〜 0.08em（12px）に分布する。ロゴリンクのみ 1.6px（0.1em）と別扱い
• font-feature-settings: "palt" がグローバル。本文にも掛かる

ガイドライン:

• 行間 2.0 と weight 300 の見出しがセット。片方だけ真似すると印象が変わる（行間だけ 2.0 にして見出しを 700 にすると、ただの重い明朝サイトになる）
• 見出しの行間 1.1 は攻めた値。48px の明朝を 1.1 で組めるのは、見出しが 1〜2 行の短いコピーに限られているから
• 明朝で 14px の本文を成立させているのは 行間 2.0 ＋ palt ＋ 0.96px の字間の 3 点セット。どれか 1 つでも外すと小さい明朝が読みづらくなる

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 「打つ。時を打つ。」のような句点で切るコピーは、句点の直後で改行させない。palt が効いているため句点の後ろの空きが詰まり、行頭に来ると特に目立つ

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* グローバル。本文にも掛ける */
letter-spacing: 0.96px;          /* palt で詰めた分を px 固定で開き直す */

• palt をサイト全体（本文含む）に掛けるのは、日本語サイトとしては強い選択。明朝は仮名の字面が小さく、そのままでは約物まわりの空きが目立つため、いったん全面的に詰める
• 詰めたうえで letter-spacing: 0.96px を均一に足す。「palt で不均一な空きをならし、letter-spacing で一定量だけ開き直す」という二段構えが玉川堂の字面の作り方
• lnum などの数字指定は行っていない。「1816」「200 年」といった数字も書体既定のまま

3.8 縦書き

• 該当なし。UI・記事とも横組み
• 商品名（「鎚起銅器 湯沸 鎚目 木蓋」等）や工房紹介で縦組みを使う場合は writing-mode: vertical-rl; text-orientation: mixed;。明朝一本の設計とは相性がよい

4. Component Stylings

Buttons

Outline（主要 CTA）

• Background: transparent
• Text: #999999
• Border: 1px solid #cccccc
• Padding: 15px
• Border Radius: 0px
• Font: りょう Display PlusN / 16px / weight 700 / ls 0.06em
• 例: 「一覧を見る」
• 玉川堂の CTA は主張しない。文字色まで灰に落とし、罫線も薄い #cccccc。押せることだけを示す

Form Submit

• Background: #000000
• Text: #ffffff
• Padding: 0 24px（行高 32px で高さを確保）
• Border Radius: 0px
• Font: 13px / weight 500 / ls 0.03em (0.39px)

Menu Tiles（黒ベタのタイル）

• Background: #000000（写真の上に重ねる）
• Text: #ffffff
• Border Radius: 0px
• 構成: 見出し（28px / weight 500 / 行間 2.0）＋ 説明文（14px / weight 500 / 行間 1.5）
• 例: 「玉川堂について」「玉川堂の歴史」「玉川堂の技術」「商品一覧」「お手入れ」「人間国宝　玉川宣夫」
• サイトのナビゲーションの主役。ヘッダーのメニューではなく、この黒タイルの一覧が導線になる

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #000000
• Border Radius: 0px
• Padding: 12px 14px
• Font: りょう Display PlusN / 14〜15px / weight 500 / ls 0.06em
• Text Color: #343434 / Placeholder: #999999
• 実サイトの input[type=email] は Open Sans に落ちているが、これは実装漏れ。明朝に揃えること

Cards（お知らせ・商品）

• Background: #ffffff
• Border: なし、または 1px solid #cccccc
• Border Radius: 0px
• 構成: 写真 → 日付（14px / #666666）→ タイトル（16px / weight 500 / 行間 2.0）
• Shadow: なし

Header / Footer

• Header: KV の上に透過で重なる。ロゴ（左、白 16px / weight 300 / ls 0.1em）＋ 言語切替とオンラインショップ（右、白 16px / weight 500）
• Footer: 面色 #000000、文字 #ffffff。中にメールマガジン申込（h4 18px / weight 300）と著作権表記（12px / #666666 / 行間 2.0）

5. Layout Principles

Spacing Scale

• 実測のパディングは 15px（ボタン）を中心に、セクション間は 80〜120px の大きな余白を取る
• 行間 2.0 が空間の基本単位。16px 本文なら 1 行 = 32px で、余白もこの倍数に寄せると縦のリズムが揃う

Container

• Max Width: KV は全幅ブリード（1440px のビューポート全域）
• コンテンツセクションは概ね 1100〜1200px
• 読み物カラムは 720px 前後
• Padding (horizontal): 24〜40px

Grid

• Columns: 黒タイルのメニューは 3 カラム、お知らせは 1 カラムのリスト、商品一覧は 3〜4 カラム
• Gutter: 24px
• 「全画面の工房写真 → 黒タイルのメニュー → 白地のお知らせ → 黒フッター」という白黒の交互構成

6. Depth & Elevation

実測ではすべての要素が box-shadow: none。玉川堂は影を使わない。

• 奥行きは「白 #ffffff × 黒 #000000」の二値でつくる。中間のグレー面を持たない
• 鎚起銅器の写真そのものが強い陰影を持つため、UI 側で影を足すと画面が濁る

7. Do's and Don'ts

Do（推奨）

• サイト全体を明朝系ディスプレイ書体（りょう Display PlusN）一本で組む。ナビもフォームもゴシックに逃がさない
• font-feature-settings: "palt" と letter-spacing: 0.96px（0.06em 相当）をグローバルに掛ける。palt で詰めてから均一に開き直す
• 本文系の行間は 2.0、見出しは 1.1 の二極で組む
• 見出しは weight 300、本文は weight 500。サイズが大きいほど細く組む
• 色は白と黒の二値に絞り、グレーは #333333 / #666666 / #999999 / #cccccc の 4 段だけ使う
• CTA は 1px solid #cccccc のアウトライン・文字色 #999999。主張させない
• ナビゲーションの主役は黒ベタのタイル（写真＋ #000000 の面＋白の明朝）にする
• 角丸は全域 0。影は使わず、罫線と面の二値で階層を作る
• 銅の色（赤銅・紫金・黒味銅・栗色）は写真と商品説明でのみ示し、UI の面色や罫に使わない

Don't（禁止）

• ゴシック体を混ぜない。ナビ・ボタン・フォームまで明朝で通すことがこのブランドの前提
• 本文の行間を 1.7 以下にしない。明朝の 14px を成立させているのは行間 2.0 ＋ palt ＋ 字間の 3 点セットで、行間だけ詰めると一気に読みづらくなる
• 見出しを太くしない。48px を weight 700 で組むと、静けさが失われて別のブランドになる
• palt を外さない（明朝の約物まわりの空きが目立つ）。逆に letter-spacing を 0 に戻すのも不可（palt で詰めた分だけ窮屈になる）
• 角丸・影・グラデーションを足さない
• 有彩色を UI に持ち込まない。CTA を目立たせたくなっても、色ではなく余白と位置で解決する
• 中間グレーの面（#f5f5f5 のようなカード面）を作らない。白と黒の二値を崩さない
• フォームだけ Open Sans にしない（実サイトの取り残しを再現しない）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• アウトラインボタンは padding: 15px ＋ 行間 2.0 で高さ 46px 前後が確保される

フォントサイズの調整

• 本文 16px は据え置き。段落 14px もモバイルで下げない（明朝は小さくすると急に読みづらくなる）
• Display 48px → モバイルでは 28〜32px。ただし weight 300 と行間 1.1 は維持する
• Menu Title 28px → 20〜22px
• 行間 2.0 と字間 0.96px はモバイルでも変えない。この 2 つがブランドの字面の芯

9. Agent Prompt Guide

クイックリファレンス

Background:     #ffffff   （純白）
Ink:            #000000   （文字・黒タイル・フッターの面）
KV Overlay:     rgba(0,0,0,0.3)
Sub Text:       #333333   （サブメニュー）
Caption:        #666666   （著作権・日付）
Muted:          #999999   （アウトラインボタンの文字）
Border:         #cccccc   （罫・ボタンの枠）
Font:           ryo-display-plusn, serif    ← 和文・欧文ともこれ 1 書体のみ
Weight:         300（見出し） / 400（サブメニュー） / 500（本文・ナビ） / 700（アウトラインボタン）
Body Size:      16px（既定） / 14px（段落）
Line Height:    2.0（本文系すべて） / 1.1（見出しのみ）
Letter Spacing: 0.96px 固定（16px で 0.06em、12px で 0.08em、48px で 0.02em）
Feature:        font-feature-settings: "palt"（グローバル。本文にも掛ける）
Radius:         0px（全域）
Shadow:         none（1px solid #cccccc の罫線で代替）
CTA:            transparent + 1px solid #cccccc + color #999999 + padding 15px + weight 700

プロンプト例

玉川堂（GYOKUSENDO）のデザインシステムに従って、商品紹介のページを作成してください。
- 和文も欧文も ryo-display-plusn（無ければ serif）の 1 書体だけで組む。ゴシックは一切使わない
- font-feature-settings: "palt" と letter-spacing: 0.96px をサイト全体に掛ける
  （palt で詰めてから均一に開き直す二段構え）
- line-height は本文系すべて 2.0、見出しだけ 1.1 の二極にする
- 見出しは font-weight 300（Light）、本文とナビは 500（Medium）。大きい見出しほど細く組む
- 地は白 #ffffff、文字は #000000。中間グレーの面は作らない
- グレーは #333333（サブメニュー） / #666666（日付・著作権） / #999999（ボタン文字） /
  #cccccc（罫）の 4 段だけ使う
- ナビゲーションは写真の上に #000000 のベタタイルを置き、白の明朝で見出し 28px（行間 2.0）＋
  説明 14px（行間 1.5）を組む
- CTA は transparent + 1px solid #cccccc + 文字色 #999999 + padding 15px + weight 700。目立たせない
- KV は工房写真に rgba(0,0,0,0.3) の暗幕を重ね、白のロゴと言語切替を載せる
- 角丸は全域 0px。影は使わず、1px の罫線と白黒の二値で階層を作る
- 銅の色（赤銅・紫金・黒味銅）は写真と商品説明でのみ示し、UI の面色や罫には使わない