Toraya（とらや・株式会社虎屋） DESIGN.md

株式会社 虎屋 公式サイト（https://www.toraya-group.co.jp/）のデザイン仕様書。 室町時代後期から続く老舗和菓子店。羊羹で知られ、皇室御用達の格式と現代的な和の美意識を併せ持つ。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白背景に深紺 #27455c をブランド色に据え、見出しにモリサワ「本明朝シンキング」、本文に游ゴシックを使う和の伝統と現代タイポグラフィの融合
• 密度: 余白を広く取り、写真・和菓子イメージを大きく配置するメディア寄りのレイアウト。情報密度は低め、視覚密度が中程度
• キーワード: 純白背景、深紺アクセント、明朝見出し、游ゴシック本文、季節パステル、ピル CTA、角丸ゼロ
• 特徴:
  • 見出しは明朝（Mincho）serif: モリサワの MFW-RoHMinSinkPro-Md（本明朝シンキング Pro Medium）を h2 Lv1/Lv2 に適用 — 老舗感と現代的なシャープさを両立
  • 本文は游ゴシック: 游ゴシック体, YuGothic, "游ゴシック Medium" を最優先するモダンな日本語本文構成
  • letter-spacing は normal（詰めも開きも適用しない）
  • font-feature-settings: normal（palt を有効化していない）— 詰めない素朴な組
  • CTA は白塗り＋ pill 形状（border-radius 23px）。2px solid #cccccc のグレー枠 + 黒文字 14px / weight 700
  • 季節パステル色: 桜ピンク #eee0e9 / 抹茶緑 #d6e2db / 桃 #e6d4de / 若葉 #c8d7cd 等を商品カード背景に使用 — 和菓子の季節感を色で表現
  • 深紺 #27455c はフッタの企業情報・グループ会社案内の面色として登場（プライマリ・サーフェス）
  • body line-height は 1.6（25.6 / 16）— 和文標準の中庸値
  • 角丸はすべて 0px（CTA ピルのみ大きな 23px）
  • ライトモード前提（ダーク切替なし）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。 Toraya は深紺ベース + 季節パステルの二層構造で構成される。

Brand

• Primary Navy (#27455c): 虎屋の伝統的なブランドカラー（rgb(39, 69, 92)）。フッタ・グループ会社案内の面色、最頻出のブランド色
• Brand Black (#111111): ロゴ・主要見出し・本文の基調色（rgb(17, 17, 17)）

Surface（背景）

• Page Background (#ffffff): ページ全体の純白
• Light Gray Surface (#f2f1f1): 補助セクション背景
• Footer Surface (#27445c): フッタ深紺背景（白文字とともに）

季節パステル（Seasonal Accents）

季節商品のカード背景に登場する淡いトーン。和菓子の意匠と連動:

• Sakura Pink (#eee0e9): 桜・春の和菓子（rgb(238, 224, 233)）
• Peach Pink (#e6d4de): 桃の節句・春（rgb(230, 212, 222)）
• Matcha Green (#d6e2db): 抹茶・初夏（rgb(214, 226, 219)）
• Wakaba Green (#c8d7cd): 若葉・初夏（rgb(200, 215, 205)）

これらはすべて低彩度・高明度の和の中間色で、落ち着いた季節感を演出する。

Text / Foreground

• Text Primary (#111111): 見出し・本文・ナビ
• Text Muted (#777777): 日付・キャプション（rgb(119, 119, 119)）
• Text Inverse (#ffffff): フッタ深紺背景上の白文字

Border / Divider

• CTA Border (#cccccc): ピル CTA の 2px 枠
• Subtle Divider (#e5e7eb): デフォルトの薄い境界線（Tailwind 由来の標準値）

Semantic（補完）

• 実 UI に表面化したエラー・成功色は確認できない（菓子小売の一覧 UI ではアラートが必要となる場面が少ない）
• アラートを追加する場合は赤 #b53939 / 緑 #3a7c4f / 黄 #c89f3a を深みのある和の彩度で

3. Typography Rules

3.1 和文フォント

Toraya は 2 系統のフォントを明確に使い分ける:

見出し（h2 Lv1 / Lv2）— 明朝 serif

• 採用: MFW-RoHMinSinkPro-Md（モリサワ「本明朝 シンキング Pro Medium」）
• フォールバック: serif
• 役割: 老舗の格式と現代的なシャープさを表現する、和の Mincho

Note: MFW-RoHMinSinkPro-Md はモリサワ Web フォントサービス（TypeSquare 等）由来のドメインライセンス。preview.html では Google Fonts の代替（Shippori Mincho や Noto Serif JP Medium）を使う。

本文・ナビ・CTA — 游ゴシック sans

• 第1候補: 游ゴシック体 / YuGothic / "游ゴシック Medium" / "Yu Gothic Medium"
• 第2候補: 游ゴシック / "Yu Gothic"
• 第3候補: "Hiragino Kaku Gothic ProN" / "Hiragino Sans"
• 第4候補: Meiryo
• 最終フォールバック: sans-serif

3.2 欧文フォント

• 欧文専用フォントは未使用。和文チェーンの欧文グリフ（YuGothic / Hiragino）で対応
• 等幅・特殊書体: 該当なし

3.3 font-family 指定

実サイトの実測値:

css/* 本文・ナビ・CTA・p */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
  游ゴシック, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

/* 見出し h2 Lv1 / Lv2（明朝） */
font-family: MFW-RoHMinSinkPro-Md, serif;

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

• 本文は游ゴシックを最優先 — モダンで上品な日本語本文の標準構成
• 見出しは明朝で老舗感を担保 — 本明朝シンキング Pro Medium という、Morisawa の現代的な明朝体を採用
• AI で再現する場合:
  • 本文: "Yu Gothic Medium", "Hiragino Sans", sans-serif に簡略化
  • 見出し: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif に置換可

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

実測値（トップページ、2026-05-07 取得）

3.5 行間・字間

• 本文の行間: 1.6（25.6 / 16）— 日本語本文の標準
• 見出し Lv1（明朝）の行間: 1.5（48 / 32）
• 見出し Lv2（明朝）の行間: 1.58（37.92 / 24）
• letter-spacing: normal（0） — 本文・見出し問わず詰めも開きも適用しない

ガイドライン:

• Toraya の本文は中〜長文（商品説明・お知らせ）が中心。行間 1.6 を厳守して読みやすさを担保
• 明朝見出しは line-height 1.5 で、和の縦長字面を活かす
• letter-spacing は normal を貫く — 明朝の字面メトリクスをそのまま信頼

3.6 禁則処理・改行ルール

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

• 商品名・お知らせタイトルは適度な長さで改行を意識
• 句読点は約物半角ではなく標準のまま使用（palt 無効）

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern を有効化していない — 詰めず素朴な組が Toraya の選択
• 明朝見出しの「、」「。」「（）」は約物全角のまま広めに配置 — 老舗の格式と読みやすさを優先

3.8 縦書き

• 該当なし。横書きのみ
• 商品個別ページや読み物（虎屋文庫）では writing-mode: vertical-rl を使う場面もあり得るが、トップ UI は横書き統一

4. Component Stylings

Buttons

Toraya の CTA は白塗り pill + グレー枠に統一されている。

Primary CTA（"すべてのお知らせを読む" "とらやオンラインショップを見る" 等）

• Background: #ffffff
• Text: #111111
• Border: 2px solid #cccccc
• Padding: 0px 16px（line-height 22.4px が高さを決める）
• Border Radius: 23px（pill 形状）
• Font: 14px / weight 700 / line-height 1.6 / letter-spacing normal
• Hover: border #111111 / background #f2f1f1（推奨）

Secondary CTA（黒 pill）

• Background: #000000
• Text: #ffffff
• Border: 1px solid #000000
• Border Radius: 2px〜23px（場面による）
• Font: 13px / weight 600

Inputs

実 UI に検索欄等は表面化していないが、Toraya トーンに合わせる場合:

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #27455c（ブランド深紺）
• Border Radius: 4px または 0px
• Padding: 12px 16px
• Font: 16px / 游ゴシック / weight 400
• Color: #111111

Cards / Article Cards

トップページの「お知らせ」「季節のおすすめ」カード:

• Background: #ffffff または季節パステル（#eee0e9 #d6e2db 等）
• Border: なし（影もなし、面色だけで区切る）
• Border Radius: 0px
• Padding: 16〜24px（推奨）
• Shadow: なし（フラット）
• 構造:
  • 商品/記事画像（正方形に近い 1:1 〜 4:5）
  • 日付（16px / #777777）
  • タイトル（16px〜20px / weight 400 / #111111）
  • 本文抜粋（必要に応じ 14〜16px / #111111）

Header / Nav

• Background: #ffffff
• Color: #111111
• Logo "とらや" 中央 or 左寄せ
• ナビ項目: 16px / 游ゴシック / weight 400
• Padding: 16px 32px

Footer

• Background: #27455c（深紺）または #000000
• Color: #ffffff
• "虎屋グループのご案内" は明朝 16px で組む
• リンク列・コピーライトは游ゴシック 14px

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 32px

Grid

• 商品/記事カード: 2 カラム（mobile）→ 3 カラム（tablet）→ 4 カラム（desktop）
• Gutter: 16〜24px
• 季節パステル背景のカードはギャップを狭めて 2 列並列もあり

Border Radius Scale

• 原則 0px。CTA だけ大きな pill (23px) で柔らかさを出す

6. Depth & Elevation

• Toraya は影を使わない。立体表現はゼロで、季節パステルの面色と明朝見出しが視覚階層を作る
• カード・モーダルすべてフラット
• ホバー演出は border-color / opacity の変化のみ

7. Do's and Don'ts

Do（推奨）

• 背景は純白 #ffffff、文字は #111111（純黒に近いがわずかに浮かせる）
• 見出しは明朝 serif（MFW-RoHMinSinkPro-Md または代替の Shippori Mincho / Noto Serif JP）/ weight 400
• 本文は游ゴシック（"Yu Gothic Medium", "Hiragino Sans", sans-serif）/ weight 400
• 見出し Lv1: 32px / line-height 1.5 / 明朝 / weight 400
• 見出し Lv2: 24px / line-height 1.58 / 明朝 / weight 400
• 本文: 16px / line-height 1.6 / weight 400 / letter-spacing normal
• CTA は白塗り + 2px solid #cccccc + border-radius 23px (pill), 14px / weight 700 / 黒文字
• 季節商品カード背景には和のパステル（桜ピンク #eee0e9 / 抹茶緑 #d6e2db 等）を使う
• フッタは深紺 #27455c 面 + 白文字でブランドを締める
• letter-spacing は normal を貫く — 詰めも開きも適用しない
• 日付・キャプションは #777777（mid-gray）に統一

Don't（禁止）

• 純黒 #000000 を本文に使わない（#111111 のわずかに柔らかい黒を使う）
• 本文に明朝を使わない（明朝は h2 見出しのみ — 本文は游ゴシック）
• 見出しを weight 700 で組まない（明朝は weight 400 でも十分なコントラストが出る）
• letter-spacing を +0.04em 等で詰めない（normal が Toraya の組）
• font-feature-settings: "palt" を適用しない（normal が Toraya の選択）
• ボタンを直角矩形にしない（CTA は pill 23px）
• 鮮やかな原色（蛍光ピンク・電子青等）を使わない（季節パステルは低彩度）
• 影・elevation を使わない（フラット原則）

8. Responsive Behavior

Breakpoints

モバイル時の調整

• Heading Lv1: 32px → 24px（明朝のメトリクスを崩さず縮小）
• Heading Lv2: 24px → 20px
• Body: 16px 維持（縮小しない）
• ナビは drawer ハンバーガーへ切り替え
• カードグリッド 4 → 2 → 1 カラム

タッチターゲット

• 最小 44×44px。CTA pill は line-height 22.4px + padding 上下を含めて 44px 以上を確保

ダークモード

• 対応なし。ライトモード固定
• フッタの深紺面が「ダーク的役割」を担う

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff（純白）
Text Primary: #111111（やや柔らかい黒）
Text Muted: #777777（日付・キャプション）
Brand Navy: #27455c（フッタ・グループ会社案内）
Surface Gray: #f2f1f1
Border: #cccccc（CTA pill 2px）

Seasonal Pastels:
  Sakura Pink: #eee0e9
  Peach Pink: #e6d4de
  Matcha Green: #d6e2db
  Wakaba Green: #c8d7cd

Heading Font (明朝): MFW-RoHMinSinkPro-Md, serif
Heading Web Fallback: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif

Body Font (游ゴシック): 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
Body Web Fallback (簡略): "Yu Gothic Medium", "Hiragino Sans", "Yu Gothic", sans-serif

Heading Lv1: 32px / 明朝 / weight 400 / line-height 1.5 / letter-spacing normal
Heading Lv2: 24px / 明朝 / weight 400 / line-height 1.58 / letter-spacing normal
Body: 16px / 游ゴシック / weight 400 / line-height 1.6 / letter-spacing normal
Date / Caption: 16px / 游ゴシック / weight 400 / color #777777
CTA Text: 14px / 游ゴシック / weight 700 / line-height 1.6

CTA Pill: white bg / 2px solid #cccccc / border-radius 23px / padding 0 16px / black text 14px / weight 700
font-feature-settings: normal（palt 適用なし）
Border Radius: 0px（CTA pill のみ 23px）
Shadow: none（フラット）

プロンプト例

Toraya のデザインに従って、季節商品の一覧ページを作成してください。
- 背景: #ffffff（純白）
- 見出しフォント: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif
- 本文フォント: "Yu Gothic Medium", "Hiragino Sans", "Yu Gothic", sans-serif
- font-feature-settings: normal（palt は適用しない）
- letter-spacing: normal（詰めない）
- ページタイトル "季節のおすすめ": 32px / 明朝 / weight 400 / line-height 1.5 / color #111111
- セクション小見出し: 24px / 明朝 / weight 400 / line-height 1.58 / color #111111
- 商品カード（春の和菓子）: 背景 #eee0e9（桜ピンク）/ border-radius 0 / padding 16-24px / 影なし
- 商品カード（夏の和菓子）: 背景 #d6e2db（抹茶緑）
- カード内日付: 游ゴシック 16px / color #777777 / "2026.04.16" 形式
- カード内タイトル: 游ゴシック 20px / weight 400 / color #111111
- 本文・説明: 游ゴシック 16px / weight 400 / line-height 1.6 / color #111111
- "もっと見る" CTA: 白塗り pill / border-radius 23px / 2px solid #cccccc / 黒文字 14px weight 700
- フッタ: 背景 #27455c（深紺）+ 白文字 / "虎屋グループのご案内" は明朝 16px
- 影・グラデーションは一切使わない
- 角丸はすべて 0px（CTA pill のみ 23px）
- 鮮やかな原色は使わず、季節パステルで色を入れる