鶴屋吉信（つるやよしのぶ） DESIGN.md

享和3年（1803年）創業、京都・西陣の京菓匠 鶴屋吉信の公式サイト（https://www.tsuruyayoshinobu.jp/）のデザイン仕様書。 「『ヨキモノ』を創る」を掲げ、代表銘菓「柚餅」「京観世」「つばらつばら」を軸に、直営店・茶寮・オンラインショップを案内する。 最大の特徴は 見出しに DNP 秀英明朝 Pr6N、本文にシステムフォントという明朝＋システムゴシックの二層構造。和文 Web フォントを本文に使わず、見出しだけを明朝で立てる。 そして letter-spacing がほぼ全テキストで 0.09375em（= 3/32）に固定されている。サイズが変わっても字間比率が変わらない、極めて統率された組版。 色は 黒と白の 2 色のみ。有彩色は「ページの先頭へ戻る」の #666666 すら含めて事実上ゼロで、面は写真が担い、UI は 1px の黒罫だけで区切る。 影は em 基準で書かれており、文字サイズに追従して大きさが変わる（PC 実測で 9px〜40.5px のバリエーション）。 実サイトの computed style 実測（2026-08-18 取得。トップページ + 店舗を探すページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 菓子の写真を主役に置き、文字は明朝で静かに添える。UI 部品を持たず、罫線と余白だけで構造を作る
• 鶴屋吉信について: 220 年余りの京菓子屋。淡い水色・生成りの背景で撮られた菓子写真がサイトの色そのもので、CSS 側は色を持たない
• 密度: 低密度・カタログ型。1 セクション 1 テーマで、左右 70px の内側パディングを取って窮屈にしない
• キーワード: DNP 秀英明朝 Pr6N、システムフォント本文、ls 0.09375em、黒白 2 色、1px の黒罫、em 基準の影、radius 0
• 特徴:
  • 見出しは明朝、本文はゴシック。見出し・ナビ・ボタンラベルは dnp-shuei-mincho-pr6n（Adobe Fonts）、本文・キャプション・ニュースは -apple-system, "system-ui", Arial, sans-serif。和文の Web フォントは明朝 1 書体だけ
  • letter-spacing が全サイズで 0.09375em。36px → 3.375px、24px → 2.25px、20px → 1.875px、17px → 1.59375px、15px → 1.40625px、14px → 1.3125px。すべて同じ比率。日本語サイトでこの精度で字間を統一している例は珍しい
  • 秀英明朝を weight 400 / 500 / 600 の 3 段階で使う。見出しは 400、店名・リンクは 500。700 を使わないため、明朝の細さが保たれる
  • 色を持たない。CSS 変数は無く、実測で現れる色は #000000 #ffffff #666666（TOP へ戻るボタン）rgba(0,0,0,.07)（入力欄の面）rgba(0,0,0,.25)（淡い罫）だけ
  • border-radius は事実上 0。実測で radius を持つのは 2px が 2 箇所のみ。ボタン・カード・画像すべて角のまま
  • バッジが「面」ではなく「下線」。ニュースのカテゴリ（トピックス／イベント／店舗／重要）は 10.5px のテキストに border-bottom: 1px solid #000 を引くだけ。塗りチップを使わない
  • 影が em 基準。0 0 1em rgba(0,0,0,.05), .27em .27em .33em rgba(0,0,0,.075) 相当の 2 枚重ねで、要素の font-size に比例して影のサイズが変わる
  • ブレークポイントが 1024px と 1280px の 2 つだけ（モバイルファースト）。コンテナ最大幅は 1600px と広い
  • 文中リンクは text-decoration: underline。ニュース見出しはすべて素の下線で示す

2. Color Palette & Roles

CSS Custom Properties は定義されていない。すべて直値。実装側で変数化する場合は以下の名前を使う。

Base（サイトの色はこれだけ）

• Ink (#000000): 本文・見出し・罫線のすべて。鶴屋吉信は純黒を使う（グレーに逃がさない）
• Paper (#ffffff): ページ地色・カードの面・ヘッダーの面

Neutral（数少ない中間色）

• Gray Button (#666666): 「ページの先頭へ戻る」の面だけに使う。サイトで唯一の「塗られた UI」
• Field (rgba(0, 0, 0, .07)): 検索入力欄の面。枠線ではなく薄い面で入力欄を示す
• Hairline Soft (rgba(0, 0, 0, .25)): 淡い区切り罫（8 箇所）
• Hairline (#000000 / 1px): 主役の罫線（72 箇所）。セクションの区切り・バッジの下線・カードの境界すべてがこれ

Photo（色は写真が持つ）

• サイトの印象色（淡い水色 #d9ebee 付近、生成り #f6f1e4 付近）はすべて商品写真の背景であって、CSS の値ではない
• 実装で「ブランドカラー」を CSS に起こさないこと。面を塗りたくなったら、まず写真を敷けないか考える

Semantic（意味的な色）

• 意味色は定義されていない。「重要」というニュースカテゴリすら黒＋下線で表す
• 実装でエラー表示等が必要な場合も、赤を足すより「太らせる／罫で囲む」を優先する。どうしても必要なら #b00 程度の低彩度に留める

3. Typography Rules

見出し＝秀英明朝（Web フォント）／本文＝システムフォントの二層構造。字間は全サイズ 0.09375em で固定。palt は使わない。

3.1 和文フォント

• 明朝体: DNP 秀英明朝 Pr6N（dnp-shuei-mincho-pr6n / Adobe Fonts）
  • 見出し（h2 / h3）、ナビゲーション、店名、リンクラベルに使う
  • weight は 400 / 500 / 600 の 3 つを読み込む。実測で使われているのは 400（大見出し）と 500（小見出し・リンク・店名）
• ゴシック体: 和文の Web フォントを持たない。-apple-system, "system-ui", Arial, sans-serif で OS の既定和文（macOS: ヒラギノ角ゴ / Windows: 游ゴシック等）にそのまま落とす
• 明朝を「読ませる本文」には使わない。秀英明朝は見出し・固有名詞・リンクラベルに限定し、説明文はゴシックで組む

3.2 欧文フォント

• セリフ: 秀英明朝スタックの 2 番目に Georgia を置く。「IRODORI」「TOKYO MISE」「tubara cafe」等の欧文店名は Georgia で組まれる
• サンセリフ: -apple-system → system-ui → Arial。本文中の英数字はここに落ちる
• 等幅フォントの指定はない

3.3 font-family 指定

css/* 見出し・ナビ・店名・リンクラベル（明朝） */
font-family: dnp-shuei-mincho-pr6n, Georgia, "Yu Mincho",
             "Hiragino Mincho ProN", YuMincho, serif;

/* 本文・キャプション・ニュース（システムフォント） */
font-family: -apple-system, "system-ui", Arial, sans-serif;

/* グローバル */
letter-spacing: .09375em;        /* ★ サイズを問わずこの比率 */
font-feature-settings: normal;   /* palt は使わない */

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

• 明朝は「欧文 → 和文」の順。dnp-shuei-mincho-pr6n（和欧両方を持つ）→ Georgia（欧文セリフ）→ Yu Mincho / Hiragino Mincho ProN / YuMincho → serif
  • Georgia を 2 番目に置くことで、Adobe Fonts が落ちても欧文だけは端正なセリフを維持する
  • ヒラギノは ProN（Pro ではない）
• ゴシックは OS 任せ。游ゴシックやヒラギノを名指しせず、-apple-system / system-ui に委ねる軽量志向。写真の読み込みを優先する判断
• Adobe Fonts が使えない環境では、秀英明朝の代替に Shippori Mincho / Zen Old Mincho を置くと印象が近い（Noto Serif JP は字面が大きく、やや現代的になる）

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

• 明朝側は 400 と 500 だけ。600 は読み込まれているが実測では現れない
• ゴシック側は 400 と 600。700 を使うのは prefecture 見出し（14.4px / 700 / 黒地に白）1 箇所だけ
• 行間は 1.5（明朝の見出し）と 1.71（ゴシックの本文）の 2 系統。書体で行間を切り替えている

3.5 行間・字間

• 字間は 0.09375em（= 3/32）が全体の基準。36px の見出しから 10.5px のタグまで、同じ比率で組む
  • 例外 1: 写真に重ねる店名は 0.136em（3px / 22px） — さらに開く
  • 例外 2: カテゴリタグ・小ラベルは 0.125em — 小さい文字はやや強めに開く
  • 例外 3: body と汎用リンクは normal — スタイルが当たっていない素の状態
• 明朝の見出しは行間 1.5、ゴシックの本文は 1.71
• 写真に重ねる店名だけ行間 1.2 に詰める（2 行組を想定）
• palt は使わない

ガイドライン:

• 字間を「px で覚えない」。0.09375em という比率で持ち、サイズが変わっても自動追従させる
• 明朝に太いウェイトを当てない。500 までに留めることで、220 年の店の落ち着きが保たれる
• 本文を明朝にしない。読ませる文はシステムゴシック、見出しは明朝、という役割分担を守る

3.6 禁則処理・改行ルール

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

禁則対象:

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

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

• 「【募集終了】」「『ヨキモノ』」のような隅付き括弧・二重かぎ括弧が頻出する。word-break: break-all は使わない

• 「京観世・観世井」「創立/創業/周年記念」のように中黒とスラッシュで並記する見出しが多い。スラッシュの前後で折り返させない

• 「IRODORI 京都駅八条口」「tubara cafe」など欧文店名 ＋ 和文地名の組み合わせを割らない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全ページ共通 */

• palt を掛けない。秀英明朝の字面をそのまま使い、開く方向（0.09375em）にだけ調整する
• 明朝で palt を有効にすると句読点が詰まりすぎ、老舗の落ち着いた印象が失われる

3.8 縦書き

縦組みは使わない。 writing-mode の指定は全ページで 0 件（ロゴの「鶴屋吉信」は画像）。

4. Component Stylings

塗りボタンがほぼ存在しない。ボタンは「テキスト ＋ 罫線」でできている。

Buttons

Text Button（サイトの標準）

• Background: #ffffff（＝地色。実質塗らない）
• Text: #000000
• Border: なし（親ブロックの 1px 罫で囲む）
• Border Radius: 0
• Padding: 14px 17.5px（「すべての特集」「すべての最新情報」）
• Font: ゴシック 14px / 600 / ls 0.09375em

Chip Button（絞り込み）

• Background: #ffffff / Text: #000000 / Border Radius: 0
• Padding: 9.75px 6.5px（トップ） / 15px 30px（店舗ページ）
• Font: ゴシック 13〜15px / 600 / ls 0.09375em
• 例: 「関西」「関東」「都道府県で探す」「個人のお客様」「法人・団体のお客様」

Prefecture Header（サイト唯一の黒ベタ）

• Background: #000000 / Text: #ffffff
• Border Radius: 0 / Padding: 10.8px
• Font: ゴシック 14.4px / 700（サイトで唯一の 700）
• 例: 店舗検索結果の「関東」「関西」の帯

Back to Top（サイト唯一のグレー塗り）

• Background: #666666 / Text: #ffffff
• Border Radius: 0 / Padding: 9px 18px
• Font: ゴシック 12px / 600

Mincho Link（明朝のリンク導線）

• Background: transparent / Text: #000000
• Font: 明朝 18px / 500 / lh 1.3 / ls 0.09375em
• Padding: 13.5px 0（上下だけ空けて、下に罫を敷く）
• 例: 「公式オンラインショップでお買い物」（ヒーロー右上）

Badges / Tags（面ではなく下線）

Category Tag

• Background: なし
• Text: #000000
• Border Bottom: 1px solid #000000
• Padding: 0 5.25px
• Font: ゴシック 10.5px / 400 / lh 1.7 / ls 0.125em
• 例: 「トピックス」「イベント」「店舗」「重要」「つばらつばら30周年」「お知らせ」
• 塗りチップを使わないのが鶴屋吉信のバッジ。下線 1 本で分類を示す

Cards（商品・店舗）

• Background: #ffffff
• Border Radius: 0（画像も角丸なし）
• Border: 1px solid #000000（囲む場合） / 使わない場合は罫で区切るだけ
• 構成: 写真 → 商品名（明朝 20px / 500）→ 説明（ゴシック 14px / 400 / lh 1.71）
• Padding: 0 0 24px（画像直下に文字を置き、下だけ空ける）
• Shadow: 下記 Depth 参照（em 基準）

Inputs

• Background: rgba(0, 0, 0, .07)（枠線ではなく薄い面で示す）
• Border: なし
• Border Radius: 0（実測 2px が 2 箇所）
• Font: 15.2〜16px / 400 / ls -0.38px（-0.025em。入力欄だけマイナス字間）
• Text: #000000
• 例: サイト内検索・オンラインショップ検索
• 入力欄だけ字間がマイナスになる（入力文字を詰めて表示領域を稼ぐ）

Section Heading（見出しの置き方）

• 明朝 36px / 400 / lh 1.5 / ls 0.09375em
• Padding: 0 70px（左右に大きく内側余白を取ってから見出しを置く）
• 見出しの下に罫を引かず、余白だけで本文と分ける

5. Layout Principles

Spacing Scale

実測値から起こしたスケール。

• 70px の左右余白が鶴屋吉信の余裕を作っている。狭めない

Container

• Max Width: 1600px（一般的な 1200px より広い。写真を大きく見せるため）
• Padding (horizontal): 70px（見出しブロック） / 40.5px（SP）
• 中央寄せ: margin-inline: auto

Grid

• 商品・店舗は 2〜4 カラム（画面幅に応じて増減）
• 罫線は 1px solid #000 で区切る（72 箇所）
• gap ではなく罫で区切る箇所が多い。カード同士を離しすぎない

6. Depth & Elevation

影は em 基準の 2 枚重ね。要素の font-size に比例して大きさが変わる。

cssbox-shadow:
  0 0 1em rgba(0, 0, 0, .05),               /* 全方向の淡い滲み */
  .267em .267em .333em rgba(0, 0, 0, .075); /* 右下へのわずかなずれ */

• 影の色は 2 種類固定：rgba(0,0,0,.05)（滲み）と rgba(0,0,0,.075)（ずれ）。どちらも極めて薄い
• 右下に 0.267em ずらすのが特徴。真下ではなく斜めに落とす
• px で書き直さないこと。em のまま持てば、SP でフォントを縮めたときに影も自動で小さくなる

7. Do's and Don'ts

Do（推奨）

• 見出しは明朝（秀英明朝）、本文はシステムゴシックの二層を守る
• letter-spacing は 0.09375em を既定にする（px ではなく em で持つ）
• 明朝のウェイトは 400 / 500 まで。太らせない
• バッジは塗らず、border-bottom: 1px solid #000 で示す
• border-radius: 0 を全要素に適用する
• 影は em 基準の 2 枚重ねで書く（0 0 1em rgba(0,0,0,.05), .267em .267em .333em rgba(0,0,0,.075)）
• 入力欄は枠線ではなく rgba(0,0,0,.07) の面で示す
• 見出しブロックの左右に 70px の余白を取る
• 色を足したくなったら、まず写真を敷けないか考える

Don't（禁止）

• 本文に明朝を使わない（読み疲れる。明朝は見出し・固有名詞・リンクラベル限定）
• ブランドカラーを CSS に起こさない。サイトの色味は写真が持っている
• palt を掛けない。字間は開く方向にだけ調整する
• 角を丸めない。ボタン・カード・画像すべて radius 0
• 塗りチップのバッジを作らない（下線 1 本で示す）
• 明朝に font-weight: 700 を当てない（合成太字になり字面が潰れる）
• 字間を px でハードコードしない。サイズ違いで比率が崩れる

8. Responsive Behavior

Breakpoints

• ブレークポイントは実質 2 つ。中間の細かい分岐を持たない

レイアウトの切り替え

• 見出しの左右パディング: 70px → 40.5px
• 商品グリッド: 3〜4 カラム → 2 カラム → 1 カラム
• ナビ: 横並び → 全画面メニュー（「メニュー」「閉じる」は白文字）
• 影は em 基準なので、フォントを縮めれば自動で小さくなる（別途の指定不要）

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• チップボタンの実測は 9.75px 6.5px パディング＋13px。SP では上下 14px 以上に増やして 44px を確保する

フォントサイズの調整

• 見出し: 42px → 28px、36px → 24px 程度
• 本文 14px / lh 1.71 は下げない
• 字間 0.09375em は SP でも維持する（em 指定なのでそのまま追従する）

9. Agent Prompt Guide

クイックリファレンス

Text Color:   #000000   （純黒を使う）
Background:   #ffffff
Hairline:     #000000 1px  ／ 淡い罫は rgba(0,0,0,.25)
Field:        rgba(0, 0, 0, .07)
Gray Button:  #666666   （TOP へ戻るのみ）

Font (見出し): dnp-shuei-mincho-pr6n, Georgia, "Yu Mincho", "Hiragino Mincho ProN", YuMincho, serif
Font (本文):   -apple-system, "system-ui", Arial, sans-serif

Letter Spacing: .09375em   ★全サイズ共通
Line Height:   1.5（明朝の見出し） / 1.71（ゴシックの本文）
palt:          使わない
Border Radius: 0
Shadow:        0 0 1em rgba(0,0,0,.05), .267em .267em .333em rgba(0,0,0,.075)
Container:     1600px / 左右パディング 70px
Breakpoint:    1024px, 1280px

プロンプト例

鶴屋吉信のデザインシステムに従って、商品一覧セクションを作成してください。

- 見出しは明朝: dnp-shuei-mincho-pr6n, Georgia, "Yu Mincho", "Hiragino Mincho ProN", YuMincho, serif
  36px / font-weight: 400 / line-height: 1.5 / letter-spacing: .09375em / padding: 0 70px
- 本文はシステムフォント: -apple-system, "system-ui", Arial, sans-serif
  14px / 400 / line-height: 1.71 / letter-spacing: .09375em
- 商品名は明朝 20px / font-weight: 500（700 は使わない）
- カテゴリタグは面を塗らず、10.5px のテキストに border-bottom: 1px solid #000 / padding: 0 5.25px / letter-spacing: .125em
- border-radius はすべて 0。色は #000 と #fff のみ（ブランドカラーを追加しない）
- カードの影は em 基準: box-shadow: 0 0 1em rgba(0,0,0,.05), .267em .267em .333em rgba(0,0,0,.075)
- 検索入力欄は枠線を使わず background: rgba(0,0,0,.07) / letter-spacing: -0.025em
- コンテナは max-width 1600px。1024px 未満で 1 カラム、見出しの左右余白を 40.5px に落とす
- font-feature-settings は normal（palt を掛けない）