SAKE HUNDRED DESIGN.md

SAKE HUNDRED（https://sake100.com/）のデザイン仕様書。 実サイトの CSS computed style に基づく。ラグジュアリー日本酒ブランドの EC サイト。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体とゴシック体の二軸構成で、ラグジュアリーかつ和の品格を表現。オフホワイト背景にダークテキストの上品なコントラスト。Optima を欧文見出しに採用し、和洋が融合した格式ある佇まい
• 密度: ゆったりとした大きな余白。プロダクトを主役にした贅沢なレイアウト
• キーワード: ラグジュアリー、和の品格、明朝体、プレミアム、静寂
• 特徴: CSS Custom Properties で全デザイントークンを管理する Shopify テーマ。見出しに游明朝 + Optima、本文に游ゴシック Medium という二軸フォント構成。全体に palt を適用した緻密な字詰め

2. Color Palette & Roles

Primary（ブランドカラー）

• Dark (#1c1b1b): ボタン背景、ナビゲーション背景、CTA。ブランドの主要色
• Navy (#111c4d): アクセント背景（フッター近辺のセクション等）

Neutral（ニュートラル）

• Text Primary (#1c1b1b): 見出し・本文テキスト（--heading-color, --text-color）
• Text Secondary (#6a6a6a): 補足テキスト、リンク、フッターテキスト（--text-color-light）
• Background (#f9f8f6): ページ背景（温かみのあるオフホワイト）
• Background Light (#ffffff): セクション背景（--light-background）
• Border (#cfcfcf): 区切り線（--border-color）
• Header Border (#dddddd): ヘッダー区切り（--header-border-color）
• Footer Border (#e9e9e9): フッター区切り（--footer-border-color）

Semantic（意味的な色）

• Sale (#f94c43): セール価格（--product-sale-price-color）
• Star Rating (#f6a429): 評価の星（--product-star-rating）

3. Typography Rules

3.1 和文フォント

ゴシック体（本文）:

• 游ゴシック Medium / Yu Gothic Medium（--text-font-family）

明朝体（見出し）:

• 游明朝 / YuMincho / ヒラギノ明朝 ProN W3（--heading-font-family）

3.2 欧文フォント

• セリフ（見出し）: Optima（見出しの欧文表記に使用。游明朝の前に指定）
• サンセリフ: sans-serif（フォールバック）
• セリフフォールバック: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman

3.3 font-family 指定

css/* 見出し（--heading-font-family） */
font-family: 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
             "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

/* 見出し欧文（Optima 優先） */
font-family: optima, 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3",
             "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

/* 本文（--text-font-family） */
font-family: "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic,
             "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;

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

• 見出しは明朝体。和の品格を表現。欧文は Optima を先に指定し、洗練された印象を加える
• 本文はゴシック体。游ゴシック Medium を指定して適度なウェイトを確保
• Windows 環境では游ゴシック Medium の指定が重要（通常の游ゴシックは細く見える問題を回避）

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

以下は computed style による実測値

3.5 行間・字間

行間 (line-height) — 実測値:

• 本文: 21px (14px x 1.5)
• 明朝見出し: 45px (30px x 1.5)
• Optima 見出し: 36px (30px x 1.2)
• サブ見出し: 33px (21px x 1.57)

字間 (letter-spacing) — 実測値:

• 全要素: 0.455px（14px 基準で 0.033em 相当）— サイト全体で統一的に適用

ガイドライン:

• 全体的に 0.455px の字間が適用されている。品格のある字詰めを実現
• 明朝体見出しは line-height: 1.5 で余裕のある行間
• Optima 見出しは line-height: 1.2 でタイトな行間

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

css/* サイト全体で palt を適用 */
font-feature-settings: "palt";

• palt: body レベルで適用。全テキストにプロポーショナル字詰め
• 明朝体見出しにも palt が適用される。品格のある字詰めを実現

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（アウトラインスタイル）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Padding: 18.375px 0px（横幅は親要素に依存）
• Border Radius: 0px（角丸なし、シャープな矩形）
• Font Size: 14px
• Font Weight: 400

Navigation Button（ダーク背景）

• Background: #1c1b1b（--button-background）
• Text: #ffffff（--button-text-color）
• Border Radius: 0px

Inputs

• 詳細は未確認（EC ページのニュースレター登録フォーム等で使用）

Cards

• 背景: #ffffff or #f9f8f6
• Border: なし
• Border Radius: なし（角丸なし、シャープなデザイン）
• Padding: 大きめの余白

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 40px（推定）

Grid

• Columns: 4（プロダクトグリッド）
• Gutter: 60px（--horizontal-spacing-four-products-per-row）
• 2カラム時 Gutter: 60px

6. Depth & Elevation

• サイト全体がフラットで、シャドウは極力使わない
• 色面（ダーク背景セクション）の切り替えで奥行きを表現
• ヘッダー高さ: 80px（--header-base-height）、スティッキー対応

7. Do's and Don'ts

Do（推奨）

• 見出しには必ず明朝体（游明朝）を使う。欧文見出しには Optima を先に指定
• 本文には游ゴシック Medium を使う。Windows での太さ問題を回避するため「Medium」を明示
• ボタンは角丸なし（radius: 0px）のシャープなスタイル。アウトラインボタンが基本
• 全テキストに font-feature-settings: "palt" を適用して品格のある字詰めを実現
• ページ背景は #f9f8f6 の温かみのあるオフホワイト
• letter-spacing は 0.455px（0.033em 相当）を全体に適用
• CTA 背景は #1c1b1b のほぼ黒。白テキストとのコントラストで高級感を出す
• ダークセクションの背景は #1c1b1b or #111c4d

Don't（禁止）

• 見出しにゴシック体を使わない（明朝体が必須）
• ボタンに角丸を付けない（シャープな矩形がブランドの特徴）
• palt を無効にしない（全体的に適用されている）
• 鮮やかな色を使わない（ダークトーンとオフホワイトの落ち着いた配色を維持）
• 純白 #ffffff をページ背景に使わない（#f9f8f6 の温かみを保つ）
• 派手なシャドウや装飾を使わない（フラットでミニマルな美学を守る）
• 游ゴシックを「Medium」なしで指定しない（Windows で細く見える問題を避ける）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは見出し 21px に縮小（デスクトップ 30px の 70%）
• 本文 14px は維持
• プロダクトグリッドは 2カラムに変更

9. Agent Prompt Guide

クイックリファレンス

Dark (CTA/Nav): #1c1b1b
Navy Accent: #111c4d
Sale Price: #f94c43
Star Rating: #f6a429

Text Primary: #1c1b1b
Text Secondary: #6a6a6a
Background: #f9f8f6（温かみのあるオフホワイト）
Surface: #ffffff
Border: #cfcfcf

Heading Font: 游明朝, YuMincho, "Hiragino Mincho ProN W3", serif
Heading EN Font: optima, 游明朝, ..., serif
Body Font: "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, sans-serif

Heading Size: 30px / 500 / line-height: 1.5
Body Size: 14px / 400 / line-height: 1.5
Letter Spacing: 0.455px (全体)
palt: あり（全体適用）

Button: outline / border 1px solid #000 / radius 0px
CTA Button: bg #1c1b1b / white / radius 0px

プロンプト例

SAKE HUNDRED のデザインに従って、プロダクト一覧ページを作成してください。
- 見出しフォント: 游明朝, YuMincho, serif（欧文には Optima を先に指定）
- 本文フォント: "游ゴシック Medium", "Yu Gothic Medium", sans-serif
- テキスト色: #1c1b1b
- 補足テキスト: #6a6a6a
- ページ背景: #f9f8f6（温かみのあるオフホワイト）
- ボタン: アウトライン、border 1px solid #000、角丸なし
- CTA: bg #1c1b1b, 白テキスト、角丸なし
- 全体に font-feature-settings: "palt" を適用
- letter-spacing: 0.455px
- 本文: 14px, line-height: 1.5
- 見出し: 30px, 500, 游明朝