中村藤吉本店（NAKAMURA TOKICHI） DESIGN.md

中村藤吉本店（https://www.tokichi.jp/）のデザイン仕様書。 1854 年（安政元年）創業、京都・宇治の茶商。初代中村藤吉が茶問屋を開いてから 170 年、本店は国の重要文化的景観の選定地に建つ。「生茶ゼリイ」で知られ、店舗の茶房と通販の両方を持つ。ロゴは「まると」の商標。 サイトは Shopify（Dawn ベース）を明朝体で組み替えた構成。EC のテンプレートを、老舗茶商の字面に寄せて徹底的に和文向けにチューニングしている。 最大の特徴は letter-spacing の使い方。本文は 0.6px（≒ 0.04em）と控えめだが、セクション見出しは 0.5em、小見出しは 1.0em まで開く。「季 節 を 味 わ う」「中 村 銘 茶」のように、文字を離して置くことで格を出す——日本の老舗が看板や包装で使う手法をそのまま Web に持ち込んでいる。 もうひとつは ウェイトが 300（Light）を既定にしていること。自己ホストしている Noto Serif JP は Light(300) と Medium(500) の 2 ウェイトだけで、本文・見出し・ナビのほぼ全部が 300。細い明朝で薄く組む。 面色は #333333 の墨と #fffef8 の生成りだけ。差し色はランキングバッジの金茶 #c7b385 のみ。 実サイトの computed style 実測（2026-07-30 取得。トップ＋商品一覧）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体・生成りの地・角丸ゼロ・影ゼロ。字を離して置く。 商品写真を大きく置き、UI は細い明朝の文字だけ。線は 1px の #dddddd、面は白と生成り。EC に必要な要素（カート・検索・絞り込み）を極限まで目立たなくする
• 中村藤吉本店について: 茶商なので商品カテゴリが「お茶」「ギフト・定期購買」「お店のこと」「読みもの」「中村銘茶」と、物販と読み物が同格に並ぶ。「中村銘茶のご紹介」という売らないためのコンテンツがグローバルナビの一等地にある
• 密度: 低密度。--spacing-sections-desktop: 0px でセクション間の隙間をゼロにし、写真ブロックを隙間なく積む（余白は各ブロックの内側で取る）
• キーワード: Noto Serif JP Light(300)、生成り #fffef8、letter-spacing: 0.5em の見出し、radius 0、影ゼロ、1rem = 10px
• 特徴:
  • 見出しの字間が極端に広い。「季節を味わう」は 28px に letter-spacing: 14px（= 0.5em）、「中村銘茶」は 18px に 18px（= 1.0em、字幅と同じだけ開く）。Instagram の見出しは I n s t a g r a m と文字列自体にスペースを入れている箇所もある
  • 既定ウェイトが 300。自己ホストの @font-face は Light(300) と Medium(500) の 2 つだけ。CSS 上は --font-body-weight: 400 / --font-heading-weight: 700 が Shopify のテーマ設定に残っているが、実際に描画されるのはほぼ 300。700 を指定した箇所（ナビの親項目 お茶 13.5px / 700）は合成太字か Medium への丸めになる
  • 和文の serif ファミリが 2 つ混在する。自己ホストの "Noto Serif JP"（サイト独自の Light / Medium）と、Shopify のテーマ設定が配信する "Noto Serif Japanese"（--font-body-family）。検索入力・言語セレクタ・フォームラベルの一部だけが後者になる。字形はほぼ同じだがウェイトの持ち方が違う（後者は 400 / 700）
  • 1rem = 10px。html { font-size: calc(var(--font-body-scale) * 62.5%) }。ページ幅 --page-width: 130rem = 1300px
  • 角丸と影を Shopify のテーマ変数レベルでゼロにしている。--buttons-radius: 0px / --inputs-radius: 0px / --media-radius: 0px / --product-card-corner-radius: 0.0rem、影は --*-shadow-opacity: 0.0 が全系統。Dawn の既定を「和の平面」に作り替えている
  • 例外は 3 つだけ: 検索フィールドの 100px（ピル）、ランキングバッジの 50%（円）、バリアントピルの 40px
  • トップページの地は #ffffff、商品一覧・商品詳細の地は #fffef8（生成り）。Shopify の color-scheme-3 に割り当てられている

2. Color Palette & Roles

実測値。Shopify Dawn の色スキームとして定義される（--color-foreground 等は RGB の三つ組で持つ）。

Brand（ブランド）

• Sumi / 墨 (#333333, --color-foreground: 51,51,51): 文字・ボタン面・罫のすべて。ロゴ「まると」も墨。中村藤吉本店のブランドカラーは実質この墨色
• Kinari / 生成り (#fffef8): 商品ページの地色。ほんのり黄を含んだ白で、和紙に近い
• Paper (#ffffff): トップページ・ヘッダーの地色

Color Schemes（Shopify のスキーム）

• スキームが 3 つしかない。しかも 1 と 3 の違いは地色だけ（#ffffff ↔ #fffef8）

Accent（差し色）

• Kincha / 金茶 (#c7b385): ランキングバッジ（1 2 3 4）。border-radius: 50% の円に白文字。サイト唯一の差し色

Surface（面）

• Background (#ffffff / #fffef8): ページ地色
• Panel (#f8f8f8): お知らせブロックの面
• Overlay Light (rgba(0, 0, 0, 0.04)): 商品一覧の絞り込み UI の面。商品一覧で最も出現回数が多い（41 回）
• Scrim (rgba(0, 0, 0, 0.4)): 写真上のスクリム。白文字を読ませる
• Scrim Light (rgba(255, 255, 255, 0.5)): 写真上の淡い覆い

Neutral（文字・罫）

• Text Primary (#333333): 見出し・本文
• Text Secondary (rgba(51, 51, 51, 0.75)): 補助テキスト・ナビの下層項目・フォームラベル
• Text Muted (#4d4d4d / #505050): お知らせの日付・キャプション
• Text Nav Parent (#666666): グローバルナビの親項目
• Text Inverse (#ffffff): 写真上・反転ブロックの文字
• Border (#dddddd): 一般の罫。区切り線・入力欄
• Border Light (rgba(51, 51, 51, 0.1) / rgba(51, 51, 51, 0.05)): カード・メディアの罫（--product-card-border-opacity: 0.1 / --media-border-opacity: 0.05）
• Border Input (rgba(51, 51, 51, 0.55)): 入力欄・バリアントピル（--inputs-border-opacity: 0.55）
• Border Strong (#aaaaaa / #cccccc): 強い罫

Semantic（意味的な色）

重要 — 第三者アプリの色を流用しないこと。実測に以下の色が現れるが、いずれも Shopify アプリが持ち込んだ既定色で、中村藤吉本店のデザインシステムではない。

色	出どころ	見え方
#0f571e（深緑）	カート追加ポップアップのアプリ	トップページの「カートに追加」
#72a95a（黄緑）	Swym（お気に入り）アプリ	「お気に入りリスト」バー
#222222	Boost（検索・絞り込み）アプリ	商品一覧の「カートに追加」「結果を表示」
#0000ee	ブラウザ既定のリンク色	スタイル未適用のリンク
rgba(33, 43, 54, 0.4)	Boost アプリのモーダル	「絞り込み」オーバーレイ

茶商だから緑がブランド色と推測するのは誤り。テーマのボタン色は #333333 の墨で、緑は一切テーマに存在しない。

3. Typography Rules

3.1 和文フォント

• 明朝体（既定）: Noto Serif JP。自己ホスト。Light(300) と Medium(500) の 2 ウェイトのみ
• 明朝体（Shopify テーマ配信）: Noto Serif Japanese。--font-body-family / --font-heading-family の値。検索入力・言語セレクタ・一部フォームラベルのみ
• ゴシック体: 使用しない（アイコンフォントの Arial を除く）

css/* 自己ホストの @font-face（原典） */
@font-face {
  font-family: "Noto Serif JP";
  src: url("/cdn/shop/files/NotoSerifJP-Light.woff?v=1702877271") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif JP";
  src: url("/cdn/shop/files/NotoSerifJP-Medium.woff?v=1702877284") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

• 400 と 700 は載っていない。font-weight: 700 を指定した箇所はブラウザの合成太字か Medium への丸めになる。実装では 300 / 500 の 2 段で設計すること

3.2 欧文フォント

• 専用の欧文フォントを持たない。NAKAMURA TOKICHI Instagram などの欧文は Noto Serif JP 内蔵の欧文グリフで組む
• アイコン: Arial（13.3333px。カート・検索などの記号）
• 等幅: 定義なし

3.3 font-family 指定

css/* ルート: 1rem = 10px */
html { font-size: calc(var(--font-body-scale) * 62.5%); }   /* --font-body-scale: 1.0 */

/* 既定（自己ホストの明朝） */
body {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;            /* 27px / 15px */
  letter-spacing: 0.6px;       /* ≒ 0.04em */
  color: #333333;
}

/* Shopify テーマ設定側（フォーム要素の一部に残る） */
--font-body-family: "Noto Serif Japanese", serif;
--font-heading-family: "Noto Serif Japanese", serif;

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

• 和文単独指定 + serif。游明朝・ヒラギノ明朝への段階的フォールバックは持たない
• 2 つの serif ファミリの混在は原典の実装事情（Shopify のテーマ設定 vs 独自 CSS）。移植時は "Noto Serif JP" に一本化するのが望ましい
• フォールバックを足すなら "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif

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

Shopify Dawn の calc(var(--font-heading-scale) * N rem) 方式（--font-heading-scale: 1.0、1rem = 10px）。h1 のみ clamp() で流体。

css/* 原典の見出しサイズ（rem = 10px 基準） */
h1 { font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw,
                      calc(var(--font-heading-scale) * 7.2rem)); }   /* 56px 〜 72px */
/* 以下は段切り: 6.2 / 5.2 / 5 / 4 / 3 / 2.4 / 2 / 1.8 / 1.7 / 1.5 rem */

実測の階層:

ウェイトは実質 300 / 500 の 2 段:

• 見出しを太らせない。28px の大見出しも 300。太さではなく「大きさ ＋ 字間」で階層を作る

3.5 行間・字間

• 本文の行間: 1.8（27px / 15px）。日本語本文としてゆったりめ
• 見出しの行間: 1.3（36.4px / 28px、23.4px / 18px）。字間が広いぶん行間は締める
• 本文の字間: 0.6px（15px に対して ≒ 0.04em）
• 見出しの字間: 0.5em（大見出し）〜 1.0em（小見出し）

字間の一覧（この設計の核心）:

• letter-spacing を px で持っているので、サイズが変わると相対量も変わる。移植時は上の em 換算を使うと再現しやすい
• 0.5em 以上の字間は最後の 1 文字の後ろにもアキが付く。原典は text-indent や margin-right: -0.5em で補正していないので、見出しは左揃えのまま中央に見えるようずらして配置されている。中央揃えにする場合は margin-right: -0.5em の補正を入れること

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 商品名の ［抹茶・ほうじ茶］ のような全角の角括弧を多用する。行頭に来ないよう line-break: strict を守る
• 字間 0.5em の見出しは折り返させない（1 行に収まる短い語だけに使う）

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全域 */

• palt を一切使っていない。明朝を等幅で流し、詰めるのではなく letter-spacing で開ける方向に振っている。palt を足すと 0.5em の字間設計と喧嘩する

3.8 縦書き

該当なし（横組みのみ）。ただし店舗写真・パッケージには縦組みが多用される。

4. Component Stylings

Buttons

Primary（テーマ既定）

• Background: #333333（--color-button）
• Text: #ffffff（--color-button-text）
• Border: 1px solid（--buttons-border-width: 1px / opacity 1.0）
• Border Radius: 0（--buttons-radius: 0px）
• Shadow: なし（--buttons-shadow-opacity: 0.0）
• Font: Noto Serif JP 15px / 300
• Padding: 12px 24px 前後

Secondary（すべてを表示する）

• Background: #333333
• Text: #ffffff
• Border Radius: 2px
• Font: Noto Serif JP 15px / 300
• Padding: 2px 40px

Inverse（写真上）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Border Radius: 0

Badges

• ランキングバッジは font-size: 15px / font-weight: 600 の白文字

Inputs

• Background: #ffffff
• Border: 1px solid rgba(51, 51, 51, 0.55)（--inputs-border-width: 1px / --inputs-border-opacity: 0.55）
• Border Radius: 0（--inputs-radius: 0px）
• Shadow: なし（--inputs-shadow-opacity: 0.0）
• Padding: 15px
• Font: 16px / 400（iOS の自動ズーム回避）／ ラベルは 16px / 300 / rgba(51,51,51,0.75)
• Error: Border を #e83737

検索フィールド（例外）

• Border Radius: 100px（サイトで唯一のピル）
• Padding: 15px 98px 15px 15px（右に検索ボタン分の余白）
• Font: Noto Serif Japanese 13px / 400 / ls 0.4px

Product Cards

• Background: 継承（#ffffff / #fffef8）
• Border Width: 0（--product-card-border-width: 0.0rem）
• Border Radius: 0（--product-card-corner-radius: 0.0rem）
• Shadow: なし（--product-card-shadow-opacity: 0.0）
• Image Padding: 0
• Text Alignment: left（--product-card-text-alignment: left）
• Title: Noto Serif JP 15px / 300 / lh 1.3

Media

• Border: 1px solid rgba(51, 51, 51, 0.05)（--media-border-opacity: 0.05）。ほとんど見えない極薄の罫
• Border Radius: 0 / Shadow: なし

Drawer / Popup

• Border: 1px solid rgba(51, 51, 51, 0.1)
• Border Radius: 0（--popup-corner-radius: 0px）
• Shadow: なし（--popup-shadow-opacity: 0.0）

5. Layout Principles

Spacing Scale

• セクション間の隙間が 0。ブロックを隙間なく積み、余白は各ブロックの内側（padding）で取る。写真が画面いっぱいに連なる構成になる
• グリッドのガターが 8px（デスクトップ）と非常に狭い。商品カードを密に並べる

Container

• Max Width: 130rem = 1300px（--page-width）
• --page-width-margin: 0rem
• 実測の max-width: 1410px（フルブリード寄りのブロック）／ 1300px（既定）／ 800px（読み物）／ 600px / 360px（フォーム）
• ヘッダーの padding: 4px 10px
• フッターの padding: 120px 72px 20px

Grid

• 商品一覧はデスクトップ 4 カラム / タブレット 3 / モバイル 2
• Gutter: 8px（デスクトップ）/ 4px（モバイル）

6. Depth & Elevation

テーマ変数レベルで影を全部切っている。

奥行きは以下で作る。

注: 実測では rgba(0,0,0,0.2) 0 0 25px、rgba(54,54,54,0.15) 0 2px 10px 等の影が観測されるが、すべて第三者アプリ（Swym / Boost 等）が持ち込んだもの。テーマの設計は影ゼロ。

Motion

7. Do's and Don'ts

Do（推奨）

• 本文・見出しは明朝（Noto Serif JP）Light(300) で組む。太らせない
• 階層は太さではなく「大きさ ＋ 字間」で作る。大見出し 0.5em、小見出し 1.0em、本文 0.04em
• 本文の行間は 1.8、見出しの行間は 1.3。字間が広い見出しは行間を締める
• 角丸は 0。例外は検索フィールド（100px）・ランキングバッジ（50%）・バリアントピル（40px）だけ
• 影を使わない。階層は極薄の罫（rgba(51,51,51,0.05)〜0.1）と地色の差で作る
• 商品ページの地色は #fffef8（生成り）、トップは #ffffff
• ボタンは #333333 の墨 ＋ 白文字 ＋ radius 0
• 1rem = 10px（font-size: 62.5%）を基準にする
• セクション間の隙間は 0 にし、余白は内側で取る
• 差し色を足すなら金茶 #c7b385 だけ

Don't（禁止）

• font-feature-settings: "palt" を追加しない。原典は全域 normal。0.5em の字間設計と喧嘩する
• 文字色に純黒 #000000 を使わない。#333333
• 緑を「茶商のブランド色」として使わない。#0f571e / #72a95a は Shopify アプリの既定色で、テーマには緑が存在しない
• #222222（Boost アプリ）をボタン色に使わない。テーマのボタンは #333333
• 見出しに font-weight: 700 を使わない。自己ホストのフォントは 300 / 500 のみで、700 は合成太字になる
• 角丸を足さない（--*-radius はすべて 0）
• 影を足さない（--*-shadow-opacity はすべて 0.0）
• 0.5em 以上の字間の見出しを折り返させない。短い語だけに使う
• 字間 0.5em の見出しを中央揃えにするとき、margin-right: -0.5em の補正を忘れない（最後の 1 文字の後ろのアキで左に寄って見える）
• "Noto Serif Japanese" と "Noto Serif JP" を混在させない（原典は実装事情で混在しているが、移植時は後者に一本化する）

8. Responsive Behavior

Breakpoints

Shopify Dawn の 750px / 990px を軸に、独自の段が多数追加されている。

• Dawn 由来（750 / 990）と独自追加（768 / 960 / 600 / 480 / 400）が併存する。移植時は 750 / 990 に寄せるのが素直

フォントサイズの調整

• h1 のみ clamp(56px, 14vw, 72px) の流体。他は段切り
• 本文 15px はブレークポイントで変えない
• 字間はモバイルでも維持する（0.5em の見出しは折り返さない短い語なので成立する）

タッチターゲット

• 検索フィールドは 15px × 2 ＋ 19.5px で高さ約 50px
• ボタンは padding: 12px 24px ＋ 15px × 1.8 で高さ約 51px
• ナビの子項目は padding: 6px 0 ＋ 16.9px で高さ約 29px と小さい。新規実装では 44px 以上に広げること

9. Agent Prompt Guide

クイックリファレンス

Brand (墨):        #333333   （文字 / ボタン面 / 罫）
Accent (金茶):     #c7b385   （ランキングバッジのみ）
Text:              #333333
Text Secondary:    rgba(51, 51, 51, 0.75)
Text Muted:        #4d4d4d
Nav Parent:        #666666
Background:        #ffffff（トップ） / #fffef8（商品ページ・生成り）
Panel:             #f8f8f8
Border:            #dddddd / rgba(51,51,51,0.1) / rgba(51,51,51,0.05)
Border (input):    rgba(51, 51, 51, 0.55)
Error:             #e83737
Font:              "Noto Serif JP", serif   ← Light(300) / Medium(500) のみ
Root:              1rem = 10px（font-size: 62.5%）
Body Size:         15px
Body Weight:       300
Line Height:       1.8（本文） / 1.3（見出し）
Letter Spacing:    0.04em（本文） / 0.5em（大見出し） / 1.0em（小見出し）
Font Feature:      normal（palt は使わない）
Radius:            0（全域）。例外 100px（検索） / 50%（ランキング） / 40px（バリアント）
Shadow:            none（全域）
Container:         1300px（130rem）
Grid Gutter:       8px（デスクトップ） / 4px（モバイル）
Section Gap:       0px

プロンプト例

中村藤吉本店のデザインシステムに従って、商品一覧ページを作成してください。
- 地色 #fffef8（生成り）、文字 #333333
- フォントは "Noto Serif JP", serif。ウェイトは 300 と 500 のみ使う（700 は使わない）
- ルートは font-size: 62.5%（1rem = 10px）
- 本文: 15px / 300 / line-height 1.8 / letter-spacing 0.6px
- セクション見出し「季節を味わう」: 28px / 300 / line-height 1.3 / letter-spacing 0.5em
  中央揃えにする場合は margin-right: -0.5em で最後のアキを補正する
- 小見出し「中村銘茶」: 18px / 300 / letter-spacing 1.0em
- font-feature-settings は normal（palt を付けない）
- 商品カード: 罫なし / radius 0 / 影なし / テキストは左揃え / タイトル 15px / 300 / lh 1.3
- グリッドはデスクトップ 4 カラム、ガター 8px。コンテナ幅 1300px
- 「カートに追加」ボタン: 背景 #333333 / 文字 #ffffff / radius 0 / 影なし / 15px / 300
- ランキングバッジのみ 金茶 #c7b385 の円（radius 50%）に白文字
- 区切り線は 1px solid #dddddd。box-shadow は一切使わない