Soup Stock Tokyo（スープストックトーキョー） DESIGN.md

Soup Stock Tokyo 公式サイト（https://www.soup-stock-tokyo.com/）のデザイン仕様書。 1999年創業の食べるスープ専門店。「世の中の体温をあげる」をコンセプトに掲げ、温かみのあるミニマルなデザインで知られる。 実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体を主役にした上品で静謐なミニマリズム。装飾を排し、文字の美しさと余白で温かみを表現する
• 密度: 情報密度は低め。大きな余白とゆったりとした行間で「間」を大切にするギャラリー型レイアウト
• キーワード: 明朝体、静謐、温かみ、広い字間、ミニマル
• 特徴: Ryumin（リュウミン）明朝体がサイト全体を支配する。見出しからナビゲーション、本文まで明朝体で統一し、ゴシック体は補助的な役割にとどまる。letter-spacing: 0.15em という広めの字間がブランドの特徴的なリズムを生む。カラーパレットは #333333 テキストと #ffffff 背景の二極構造で、色彩は極限まで抑えられている。CTA ボタンはほぼ存在せず、テキストリンク＋矢印（ReadMore）が主要なインタラクション。日付表記には Times New Roman を使用し、欧文セリフと和文明朝の調和を意識している

2. Color Palette & Roles

Primary（ブランドカラー）

Soup Stock Tokyo は特定のブランドカラーを持たず、テキストのダークチャコール #333333 と白 #ffffff のモノトーン二極構造がブランドのビジュアルアイデンティティ。

Neutral（ニュートラル）

• Text Primary (#333333): 本文・見出しの基本色。純黒 #000000 は使わない
• Text Secondary (#999999): 補足テキスト、カテゴリー名、日付の区切り線代わり
• Pagination Active (#666666): ページネーションのアクティブ状態、中間色テキスト
• Background (#ffffff): ページ背景
• Surface Light (#f8f8f8): セクション背景のライトグレー面。採用情報やソーシャルセクション等に使用
• Border (#cccccc): ボタンやフォームの枠線
• Footer Background (#333333): フッター背景。ダークチャコールで本体と対比
• Footer Text (#ffffff): フッター上のテキスト。白で反転表示

Overlay

• Muted Line (#e0e0e0): コンテンツ間の区切り線
• Card Border (#eeeeee): カード間の微細な境界

Note: Soup Stock Tokyo のカラーパレットは極限までモノクロームに抑えられている。#333333（ダーク）と #ffffff（ライト）の対比が根幹で、#f8f8f8 の微かなグレー面でセクションを分ける。原色・アクセントカラーは一切使わない。食の温かみは色ではなく、明朝体の書体と広い字間で表現する。

3. Typography Rules

3.1 和文フォント

• 明朝体（主要書体）: a-otf-ryumin-pr6n（Adobe Fonts のリュウミン）。見出し、ナビゲーション、本文、フッターまで全体を通して使用するブランドの基幹書体
  • Adobe Fonts のドメインライセンスのため、preview.html では Shippori Mincho（Google Fonts）で代替。Morisawa 系列で字形の印象が近い

3.2 欧文フォント

• セリフ（日付・数字専用）: "Times New Roman", Times, serif — 日付表記（2024.01.15 等）に限定使用
• サンセリフ（補助）: generic sans-serif — カテゴリーラベル等の UI 要素

3.3 font-family 指定

css/* 見出し・ナビ・本文（Ryumin） */
font-family: a-otf-ryumin-pr6n, "Yu Mincho", YuMincho, serif;

/* 日付・数字 */
font-family: "Times New Roman", Times, serif;

/* UI 補助（カテゴリ・ラベル等） */
font-family: sans-serif;

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

• a-otf-ryumin-pr6n は Adobe Fonts のカスタム Web フォント。ローカル環境では游明朝（Yu Mincho）にフォールバック
• 日付の Times New Roman は OS 標準搭載のため追加読み込み不要
• ローカル再現には Shippori Mincho（Google Fonts）が Morisawa 系で最も印象が近い代替

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

3.5 行間・字間

• 本文の行間 (line-height): Ryumin 本文は 1.8。ゴシック体は 1.5。リード文は 2.5 と極めて広い
• 見出しの行間: 1.5（Display / Heading 2 共通）
• ニュース見出しの行間: 1.8（本文と同じくゆったり）
• letter-spacing: 0.15em がブランドの基準字間。見出し・本文・ナビゲーションで広く適用。カードタイトルやニュース見出しは 0.05em と控えめ
• 字間の設計思想: 0.15em という広い字間は、明朝体の横線と余白が織りなす「呼吸するようなリズム」を生み出す。ゴシック体・欧文には適用しない

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

テキスト量を最小限に抑える方針のため、長文の禁則処理が問題になるケースは少ない。

3.7 OpenType 機能

css/* 見出し（Ryumin）に適用 */
font-feature-settings: "palt" 1;

• palt: Ryumin の見出し（h1, h2）とナビゲーションに適用。プロポーショナル字詰めで文字間を自然に詰める
• 本文には palt を適用しない（letter-spacing: 0.15em と palt の併用は可読性を損なうため）
• kern は不使用

3.8 縦書き

該当なし。

4. Component Stylings

Buttons — ボタンは極力使わない設計

Soup Stock Tokyo は明示的な CTA ボタンをほぼ持たない。インタラクションはテキストリンク＋矢印（→）で誘導する。存在するボタンは UI 補助的なもの。

Accessibility Button（文字サイズ切替等）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #cccccc
• Border Radius: 4px
• Padding: 8px 16px
• Font Size: 14px
• Font Weight: 400

Footer Outline Button

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Border Radius: 4px
• Padding: 8px 16px
• Font Size: 14px

ReadMore（テキストリンク）

• Font Family: Ryumin
• Font Size: 14px
• Color: #333333
• Text Decoration: none
• 矢印（→）を末尾に添えるパターン

Don't: 大きな pill ボタンや派手な CTA は Soup Stock Tokyo の世界観にそぐわない。テキストリンクと微かな矢印で十分な誘導力を持たせる。

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border Radius: 4px
• Padding: 8px 12px
• Font Family: sans-serif
• Font Size: 14px

Cards（メニュー・ニュースカード）

• Background: #ffffff
• Border: なし（または 1px solid #eeeeee）
• Border Radius: 0px
• Shadow: なし
• 画像＋テキストのシンプルな縦積み構成
• タイトル: Ryumin 18px / #333333
• カテゴリ: sans-serif 12px / #999999

5. Layout Principles

Spacing Scale

Container

• Max Width: 約 1000px
• Padding (horizontal): 20-32px
• フルブリードのセクション（#f8f8f8 背景）あり

Grid

• ヒーロー: 1 カラム（フルブリード画像 + テキスト）
• メニューカード: 3-4 カラムグリッド（デスクトップ）
• ニュース一覧: 1 カラムリスト
• フッター: 複数カラム（ナビリンクグループ）

6. Depth & Elevation

特徴: Soup Stock Tokyo はドロップシャドウを使わない。深度の表現は白 #ffffff とライトグレー #f8f8f8 の面色切り替えと、#e0e0e0 の細い区切り線でセクションを分ける。フッターは #333333 のダーク面で対比させる。

7. Do's and Don'ts

Do（推奨）

• テキストは**明朝体（Ryumin / Shippori Mincho）**を基本書体として使う。ゴシック体は補助的な UI 要素のみ
• letter-spacing は 0.15em を標準とする。広い字間がブランドのリズム
• 本文の line-height は 1.8 以上を確保する。明朝体の横線が呼吸するような余裕を持たせる
• テキスト色は #333333 を基本とし、純黒 #000000 は使わない
• 日付は Times New Roman で表記し、和文明朝体と欧文セリフの調和を保つ
• CTA は**テキストリンク＋矢印（→）**パターンで。ボタンは最小限に
• フッターでは #333333 背景 + #ffffff テキストの反転パターンを使う
• palt は見出しにのみ適用する。本文には適用しない
• weight は 400（Regular）のみ使う。bold は使わない

Don't（禁止）

• ゴシック体を主要書体として使わない（明朝体がブランドの根幹）
• 純黒 #000000 をテキストに使わない（#333333 を使う）
• 派手な CTA ボタンや pill ボタンを作らない（テキストリンクで誘導）
• 原色・ブランドカラー・アクセントカラーを使わない（モノクロームが基本）
• letter-spacing を normal（0）にしない（0.15em の字間がブランド）
• bold (700) や semi-bold (600) を使わない（400 のみ。明朝体の繊細さを壊さない）
• ドロップシャドウを使わない（フラットな面色切り替えで深度を出す）
• line-height を 1.5 未満にしない（明朝体の日本語には広い行間が必要）
• 装飾的な角丸を多用しない（4px のわずかな角丸が最大）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px

フォントサイズの調整

• モバイルでは Display 40px → 24-28px 程度に縮小
• Heading 2 の 24px → 20px 程度に縮小
• 本文 16px は据え置き（line-height も維持）
• letter-spacing 0.15em は維持（モバイルでも広い字間がブランドの特徴）

9. Agent Prompt Guide

クイックリファレンス

Text Primary:       #333333
Text Secondary:     #999999
Background:         #ffffff
Surface Light:      #f8f8f8
Footer BG:          #333333
Footer Text:        #ffffff
Border:             #cccccc

Primary Font:       a-otf-ryumin-pr6n, "Yu Mincho", YuMincho, serif
  (Google Fonts 代替: "Shippori Mincho", serif)
Date Font:          "Times New Roman", Times, serif
UI Font:            sans-serif

Body Size:          16px
Line Height:        1.8 (Ryumin本文) / 1.5 (ゴシック) / 2.5 (リード文)
Letter Spacing:     0.15em (ブランド標準)
Font Weight:        400 のみ (bold 不使用)
OpenType:           palt — 見出しのみ
CTA Style:          テキストリンク + 矢印(→), ボタン最小限

プロンプト例

Soup Stock Tokyo のデザインシステムに従って、メニュー一覧ページを作成してください。

- 背景: #ffffff
- 本文: "Shippori Mincho", serif / 16px / line-height 1.8 / letter-spacing 0.15em / color #333333
- 見出し: "Shippori Mincho", serif / 24px / weight 400 / letter-spacing 0.15em / font-feature-settings "palt"
- カードタイトル: "Shippori Mincho", serif / 18px / letter-spacing 0.05em / color #333333
- カテゴリ: sans-serif / 12px / letter-spacing 0.15em / color #999999
- 日付: "Times New Roman", serif / 14px / color #333333
- セクション背景: #f8f8f8（ライトグレー面で区切り）
- フッター: bg #333333 / text #ffffff
- CTA: テキストリンク + 矢印(→) / 14px / color #333333
- bold は使わない（weight 400 のみ）
- ドロップシャドウ・pill ボタン・アクセントカラーは使わない