茅乃舎（かやのや / 久原本家） DESIGN.md

茅乃舎（https://www.kayanoya.com/）のデザイン仕様書。 福岡・久原本家グループの和風だし／無添加調味料ブランド。原点は山あいに佇む「御料理 茅乃舎」。 最大の特徴は 薄暮の茅葺き屋根を全画面に敷いた写真ヒーロー に、全面を貫く筑紫明朝（FOT-筑紫明朝 Pr6） と 七十二候（菖蒲華・六月…）を縦組み風に添えた季節の設え。白文字を濃褐（#1c130a）のヴェールに乗せ、見出しには 0.3〜0.5em の広い字間をあてて静けさと品位をつくる。角丸を持たない直線的な作り。 実サイトの computed style 実測（2026-06-30 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 写真と明朝で語る、静謐で端正な和の世界観。トップは薄暮の茅葺き古民家を全画面に敷き、白い明朝テキストを濃褐のヴェール越しに重ねる。商品ページに入ると一転、純白地に黒の明朝で落ち着いた読み物に切り替わる
• 茅乃舎について: 久原本家（明治期創業の老舗醤油蔵）が営む和食だし・調味料ブランド。料理人の知恵を家庭に届けるという物語を、写真・余白・明朝・季節の言葉で表現する
• 密度: 低密度。大きな写真と広い余白、ゆったりした行間（本文 lh 1.7〜1.8）。情報を詰め込まず、季節の言葉（七十二候）や日付の大きな欧文数字（Baskerville 160px）で「間」をつくる
• キーワード: 写真ヒーロー、薄暮、筑紫明朝、縦組み風の季節語、七十二候、濃褐 #1c130a、萱色 #5b5d22、白文字、広い字間（0.3〜0.5em）、角丸なし、palt なし
• 特徴:
  • 本文も見出しもナビも筑紫明朝（FOT-筑紫明朝 Pr6）。ゴシック（游ゴシック）は「だしシリーズをみる」等の機能ラベルや小さなメタ情報に限定
  • ヒーローは 写真の上に濃褐 #1c130a のヴェール（実測 rgba(28,19,10,0.5)）を敷き、その上に白の明朝を乗せる。季節の言葉（菖蒲華＝あやめはなさく）を 0.3em の広い字間で配し、日付は大きな欧文数字（Baskerville）で打つ
  • ブランドの地色は 萱色＝深いオリーブ #5b5d22（スプラッシュ／ローディング面）。アクセントに 金茶 #8f7e4b（イベント区分）、限定の朱 #9f0e14
  • CTA は 濃褐の半透明地（#1c130a / 0.5）＋細い枠（#827e7a）の明朝ボタン、または 黒地（#000）＋白文字の「もっと見る」。いずれも 角丸なし（radius 0）
  • font-feature-settings: normal（palt は使わない）。字間は letter-spacing で、見出しほど広く開ける

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。トップの濃褐ヴェールと萱色を軸に、商品ページは黒文字×白地で構成。

Core（背景・面）

• White (#ffffff): 商品・記事ページの基本地。ヘッダー／グローバルナビの地
• 萱色 / Moss Olive (#5b5d22): スプラッシュ（ローディング）面。ブランドを象徴する深いオリーブ＝「茅（かや）」の色。広い面に使われる唯一の有彩地
• 濃褐 / Deep Brown Veil (#1c130a): ヒーロー写真に重ねる半透明ヴェール（実測 rgba(28,19,10,0.5)）。白文字の可読性を支える地。CTA の塗りにも使う

Text

• Ink (Black) (#000000): 商品・記事ページの本文・見出し・ナビの基本テキスト
• White (#ffffff): ヒーロー写真上のテキスト（見出し・季節語・日付・CTA 文字）
• Muted Gray (#bbbbbb): 非アクティブなタブ・補助ラベル（商品ページのカテゴリ切替など）

Accent

• 金茶 / Khaki Gold (#8f7e4b): イベント・お知らせの区分ラベル（小ゴシック）。落ち着いた金茶
• 朱 / Vermilion (#9f0e14): 「店舗限定」「地域限定」等の限定バッジ・強調ラベル
• Border Gray (#827e7a): ヒーロー CTA の細い枠線

Semantic

• 専用のセマンティックカラー（Danger / Success 等）は定義されていない。強調が必要なら朱 #9f0e14 を最小限あてる。リンク既定色（#0000ee）はリセットされていない箇所が一部あるが、ブランドの意図色ではないため踏襲しない

3. Typography Rules

実サイトは本文・見出し・ナビすべてに 筑紫明朝（FOT-筑紫明朝 Pr6） を使い、機能ラベルのみ 游ゴシック を併用する。大きな日付数字だけ Baskerville（欧文セリフ）。 筑紫明朝は Fontworks の Web フォント（ドメインライセンス）のため preview.html では表示できない。代替は後述。

3.1 和文フォント

• 明朝体（基本書体）: FOT-筑紫明朝 Pr6 → TsukuMinPr6 → serif。本文・見出し・ナビすべてこの筑紫明朝チェーン。ウェイトは R（本文）/ M（見出し・ナビ）/ D（極小ラベル）を使い分ける
  • 本文: "FOT-筑紫明朝 Pr6 R", TsukuMinPr6-R, serif
  • 見出し・ナビ: "FOT-筑紫明朝 Pr6 M", TsukuMinPr6-M, serif
  • 細かな補助ラベル: "FOT-筑紫明朝 Pr6 D", TsukuMinPr6-D, serif
• ゴシック体（機能ラベル用途）: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif。「だしシリーズをみる」等のボタン内ラベルやカテゴリ区分（金茶・朱）に限定

3.2 欧文フォント

• 日付の大数字: Baskerville（serif）。ヒーローの「30」を 160px で打つ象徴的な使い方
• 小さな英字トグル（English）: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
• 本文中の英数は筑紫明朝の欧文グリフがそのまま受け持つ

3.3 font-family 指定

css/* 基本（本文 — 筑紫明朝 R） */
font-family: "FOT-筑紫明朝 Pr6 R", TsukuMinPr6-R, serif;

/* 見出し・ナビ（筑紫明朝 M） */
font-family: "FOT-筑紫明朝 Pr6 M", TsukuMinPr6-M, serif;

/* 機能ラベル（游ゴシック） */
font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

/* 日付の大数字（欧文セリフ） */
font-family: Baskerville, serif;

• フォールバックの考え方: 和文は筑紫明朝 Web フォント → TsukuMin → generic serif で閉じる。和文専用 1 書体だけで止めず必ず serif で締める

preview.html での代替フォント:

• FOT-筑紫明朝 Pr6（低コントラストで穏やか、ふところがやや締まった現代的明朝）→ Shippori Mincho（しっぽり明朝。筑紫系に近い静かな明朝。weight 400/500/600）。やや古典的な落ち着きを足すなら Zen Old Mincho を併用してもよい
• Baskerville（日付の大数字）→ Libre Baskerville（Google Fonts。オールドスタイル・セリフ）
• 游ゴシック → Zen Kaku Gothic New（游ゴシックに近い穏やかなゴシック。weight 400/500）

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

デスクトップ（1440px）での実測 px。ヒーロー（写真上・白文字）と商品ページ（白地・黒文字）で性格が分かれる。

• ウェイトは 400 が基本。明朝の R / M の差と、サイズ・字間・余白で階層をつくる。太字を多用しない
• ヒーローは白 #fff、商品・記事ページは黒 #000 が文字色の基本

3.5 行間・字間

• 本文の行間 (line-height): 1.7〜1.8（本文 27.2px/16px=1.7、商品説明 25.2px/14px=1.8）。明朝をゆったり組む
• 見出しの行間: H1 で 1.7、H2 で 1.5、商品 H3 は 2.4 とかなり広い
• 本文の字間 (letter-spacing): 0.02em（0.32px / 16px）。ベタ組みよりわずかに開ける程度
• ヒーロー・見出しの字間: 0.1〜0.5em と大きく開ける。季節語 0.3em、月名 0.5em、ふりがな 0.1em、商品サブ見出し 0.1em。「飾り」としての広い字間が茅乃舎の核

ガイドライン:

• 本文は明朝 R / lh 1.7・字間 0.02em で端正に
• 季節の言葉・縦組み風の語・ヒーロー見出しは、サイズを抑えて 字間を 0.1〜0.5em に広げることで「間」と格を出す

3.6 禁則処理・改行ルール

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

• 行頭禁止: ）」』】、。・：；？！
• 行末禁止: （「『【
• 季節語・候名などは改行を避け、white-space: nowrap でひとまとまりに見せる

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使わない */

• 重要: 実測では全要素 font-feature-settings: normal。palt（プロポーショナルメトリクス）は使わない。筑紫明朝のベタ組みメトリクスをそのまま活かし、詰めではなく letter-spacing で開く 方向に調整する
• 縦組み風の季節語も、約物の詰めではなく広い字間で間を取る

3.8 縦書き

• ヒーローの季節語（月・候・ふりがな）は 縦組み風のレイアウト（実装は横要素の縦配置／writing-mode: vertical-rl 相当の見た目）。日本の暦・歳時記の情緒を出す象徴的表現
• 本文・商品説明は横書き

4. Component Stylings

Buttons

角丸を持たない（radius 0）。ヒーローは濃褐の半透明地＋細枠の明朝ボタン、コンテンツ面は黒地＋白文字の「もっと見る」。

Hero Ghost（写真上・濃褐ヴェール＋細枠） — ヒーローの主要 CTA

• Background: rgba(28,19,10,0.5)（濃褐 #1c130a の半透明）
• Text: #ffffff（明朝 M / 16px / lh 1.4 / ls 0.32px）
• Border: 1px solid #827e7a
• Border Radius: 0px
• Padding: 30px 10px 15px（上に余裕を持たせた縦長の佇まい）

Content（黒地・白文字「もっと見る」） — 一覧の続きを開く

• Background: #000000
• Text: #ffffff（游ゴシック / 16px / lh 48px の帯）
• Border: なし
• Border Radius: 0px

Link（テキストリンク・明朝）

• Text: #000000（明朝）。ナビ・記事内リンク
• ホバーは色の濃淡や下線で控えめに反応

Inputs

実サイトでフォームの抽出データは限定的。下記は基調からの推定値。

• Background: #ffffff
• Border: 1px solid #827e7a（または淡いグレー）
• Border (focus): 1px solid #1c130a（濃褐）＋ごく薄いリング
• Border Radius: 0px（角丸なし）
• Padding: 約 12px 14px
• Font: 明朝 R / 16px / ls 0.02em
• Label: 明朝 M / 16px

Cards

• Background: #ffffff、または写真をそのまま敷く
• Border: なし、または淡いグレーの細線
• Border Radius: 0px
• 商品・読み物カードは 写真を大きく置き、その下に明朝の品名（H3）＋区分ラベル（ゴシック・金茶/朱）を添える
• 影は基本持たず、写真と余白・直線で面を分ける

5. Layout Principles

Spacing

• 大きな写真（多くは全画面 / フルブリード）と広い余白で構成。セクション間は十分な縦余白（おおむね 80〜120px）を取る
• 縦組み風の季節語・日付はヒーロー四隅〜中央に余白を効かせて配置し、写真の「間」を活かす

Container

• ヒーローはフルブリード（左右余白なし）
• 商品・記事コンテンツは中央寄せのカラム。左右に十分な余白を取り、本文幅を読みやすく抑える

Grid

• 商品一覧はカードグリッド（おおむね 2〜4 カラム、ビューポートで可変）
• Gutter: 24〜32px 程度。写真の縦横比を揃え、明朝の品名を等間隔に並べる

6. Depth & Elevation

茅乃舎は影をほぼ使わない。写真・濃褐ヴェール・余白・直線で階層をつくるフラット設計。

• ヒーローの可読性は box-shadow ではなく 濃褐 #1c130a の半透明ヴェールで確保する
• 影を使う場合も、黒ではなく濃褐（#1c130a）ベースの墨色にして世界観に馴染ませる

7. Do's and Don'ts

Do（推奨）

• 本文も見出しもナビも筑紫明朝（FOT-筑紫明朝 Pr6 → TsukuMin → serif、代替 Shippori Mincho）で組む
• ヒーローは写真＋濃褐ヴェール（rgba(28,19,10,0.5)）＋白文字。可読性はヴェールで確保する
• 季節語・候名・月名は、サイズを抑えて字間を 0.3〜0.5em に広げ「間」をつくる
• 本文 line-height は 1.7〜1.8 とゆったり、字間は 0.02em のごく控えめに
• 日付など象徴的な数字は Baskerville（代替 Libre Baskerville）で大きく打つ
• ボタン・入力・カードは角丸なし（radius 0）で直線的にまとめる
• 区分ラベルは金茶 #8f7e4b、限定強調は朱 #9f0e14、地は萱色 #5b5d22 を基調に

Don't（禁止）

• 見出し・本文をゴシックで組まない（明朝が基本。游ゴシックは機能ラベルの限定用途のみ）
• palt を有効にしない（実サイトは全要素 normal。調整は letter-spacing で開く方向に）
• 角丸（border-radius）を付けない（直線的なフォルムが個性）
• ヒーローの白文字を写真に直置きしない（必ず濃褐ヴェールを噛ませる）
• 季節語・見出しの字間を詰めない（広げて「間」を出す）
• 原色・蛍光色を足さない（萱色・濃褐・金茶・朱の落ち着いた和の色域に収める）
• 本文の行間を詰めすぎない（1.7〜1.8 を保つ）

8. Responsive Behavior

Breakpoints

• ヒーローの大数字（Baskerville 160px）はモバイルで比例縮小するが、字間の広い季節語は維持して情緒を残す
• 横余白はモバイルで詰めつつ、本文幅は読みやすさを優先して確保する

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。縦長の明朝ボタンは高さに余裕があるため自然に満たす

フォントサイズの調整

• 本文は 16px（モバイルでも 15〜16px を確保）、商品説明 14px
• ヒーロー見出し・季節語はビューポートに応じて縮小するが、字間 0.3〜0.5em の設計は崩さない

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff（コンテンツ）/ 写真＋濃褐ヴェール rgba(28,19,10,0.5)（ヒーロー）
Brand 地色: #5b5d22（萱色・オリーブ）/ ヴェール・塗り #1c130a（濃褐）
Text: #000000（黒・コンテンツ）/ #ffffff（白・ヒーロー）/ Muted #bbbbbb
Accent: #8f7e4b（金茶・区分）/ #9f0e14（朱・限定）/ Border #827e7a
基本 Font（本文・見出し・ナビ）: "FOT-筑紫明朝 Pr6 R/M", TsukuMinPr6, serif  /* 代替: "Shippori Mincho" */
機能ラベル Font: 游ゴシック, YuGothic, sans-serif  /* 代替: "Zen Kaku Gothic New" */
日付大数字 Font: Baskerville, serif  /* 代替: "Libre Baskerville" */
Body: 16px / lh 1.7 / 和文 ls 0.02em
見出し・季節語 ls: 0.1〜0.5em（広く開ける）
OpenType: font-feature-settings: normal（palt は使わない）
Button: 角丸なし（radius 0）。ヒーロー＝濃褐ヴェール地＋細枠 #827e7a の明朝／コンテンツ＝黒地 #000＋白文字
Radius: 0px（直線的）

プロンプト例

茅乃舎（久原本家）のデザインシステムに従って、商品ブランドのトップ＋商品紹介ページを作成してください。
- トップは薄暮の和の写真を全画面ヒーローに敷き、濃褐ヴェール rgba(28,19,10,0.5) を重ねた上に白の明朝テキストを置く
- 本文も見出しもナビも筑紫明朝: "FOT-筑紫明朝 Pr6 R/M", TsukuMinPr6, serif（代替 Shippori Mincho）。機能ラベルのみ游ゴシック
- ヒーローに七十二候（例: 菖蒲華）と月・日付を縦組み風に配置。季節語は字間 0.3em、月名は 0.5em と広く開ける。日付は Baskerville（代替 Libre Baskerville）で 大きく打つ
- 商品ページは純白地＋黒文字 #000。本文は明朝 16px / line-height 1.7・letter-spacing 0.02em
- font-feature-settings は normal（palt を使わない）
- CTA は角丸なし: ヒーローは濃褐ヴェール地＋1px solid #827e7a の明朝ボタン、一覧は黒地 #000＋白文字の「もっと見る」
- 色は萱色 #5b5d22・濃褐 #1c130a を基調に、区分は金茶 #8f7e4b、限定強調は朱 #9f0e14
- 写真と広い余白で「間」をつくり、原色や角丸は使わない