DASSAI（獺祭・旭酒造株式会社） DESIGN.md

旭酒造株式会社 獺祭 公式サイト（https://www.asahishuzo.ne.jp/）のデザイン仕様書。 山口県岩国市の蔵元が醸すプレミアム日本酒ブランド。山田錦と精米歩合にこだわる「磨き」の哲学を、深いインディゴと明朝セリフで表現する。 実サイトの computed style 実測に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白背景に深インディゴ #27174b をブランドカラーに据え、Noto Serif JP を主書体とする明朝セリフ基調の上品なデザイン。酒蔵の伝統と現代的な洗練を融合
• 密度: 余白を広く取り、商品写真とエディトリアルな本文を大きく配置する低密度・高余白のレイアウト
• キーワード: 純白背景、深インディゴ、明朝セリフ基調、極広行間、広字間、角型CTA
• 特徴:
  • 本文・見出しともに明朝（Serif）が主: Noto Serif JP を h1, h2, body に使用。ブランドの格式と日本酒の伝統を書体で体現
  • UI・ナビゲーションのみゴシック: Noto Sans JP は h3, nav, footer, ボタンラベル等の機能的テキストに限定
  • 極めて広い行間: 本文の line-height が 2.4 — 日本語サイトとしても際立って広い。余韻を持たせる酒蔵の美意識
  • 広い字間: セクション見出し 0.2em、本文 0.1em。文字のひとつひとつに空間を与え、凛とした佇まい
  • CTA は角型（radius 0px）: 丸みを排除した直線的なボタン。伝統工芸的な端正さ
  • font-feature-settings: normal（palt なし）— 等幅の和文組版を維持
  • ライトモード前提（ダーク切替なし）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。 DASSAI は深インディゴ + 純白の二色構成を基調とする、極めて抑制されたパレット。

Brand

• Primary Indigo (#27174b): 獺祭のブランドカラー（rgb(39, 23, 75)）。CTA ボタン背景、ナビゲーション強調、ストアリンクに使用。藍染を思わせる深い紫紺
• Slider Lavender (#a5afd3): カルーセル矢印ボタンの背景色（rgb(165, 175, 211)）。ブランドインディゴの淡いトーン

Surface（背景）

• Page Background (#ffffff): ページ全体の純白。余白の白が主役
• Age Gate Overlay (rgba(0,0,0,0.4)): 年齢確認モーダルの半透明オーバーレイ

Text / Foreground

• Text Primary (#000000): 本文テキスト（Noto Serif JP の明朝本文）
• Text Secondary (#222222): 見出し（h3）等の補助テキスト（rgb(34, 34, 34)）
• Text Inverse (#ffffff): インディゴ背景の CTA ボタン上の白文字

Border / Divider

• サイト全体で border によるセクション区切りは控えめ。余白とタイポグラフィの階層で構造を示す

Semantic（補完）

• 実 UI にエラー・成功・警告色は確認できない（酒蔵のブランドサイトではアラートが必要となる場面が少ない）
• フォーム等でアラートを追加する場合は深みのあるトーン — 赤 #8b3a3a, 緑 #3a6b4f, 黄 #8b7a3a — を推奨。ブランドの抑制されたパレットとの調和を保つ

3. Typography Rules

3.1 和文フォント

DASSAI は 明朝セリフを主書体とする、日本語サイトでは珍しい構成:

• 明朝体（主書体）: Noto Serif JP — h1, h2, 本文（p）に使用。ブランドの格式と伝統を担う
• ゴシック体（UI書体）: Noto Sans JP — h3, ナビゲーション, フッタ, ボタンラベルに使用。機能的テキスト専用

3.2 欧文フォント

• 和文フォントに内包される欧文グリフをそのまま使用
• Noto Serif JP / Noto Sans JP はいずれも Google Fonts から配信

3.3 font-family 指定

css/* 本文・見出し（明朝セリフ） */
font-family: "Noto Serif JP", serif;

/* UI・ナビゲーション（ゴシック） */
font-family: "Noto Sans JP", sans-serif;

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

• Google Fonts からの Web フォント配信のため、フォールバックは generic family のみ
• 明朝系は serif、ゴシック系は sans-serif で終端

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

3.5 行間・字間

• 本文の行間 (line-height): 2.4 — 日本語サイトとしては極めて広い。文字と文字の間に余韻を持たせる、酒蔵らしい美意識の表れ。Noto Serif JP の明朝と組み合わさり、和書の版面に近い空気感を生む
• 見出しの行間: 1.0（セクション h2）〜 1.8（ラインナップ h2）。用途により大きく変わる
• 本文の字間 (letter-spacing): 0.1em — 1文字ずつ空間を確保し、ゆったりと読ませる
• 見出しの字間: セクション h2 で 0.2em（極めて広い）。文字を離すことで格式を示す

ガイドライン:

• 本文は必ず line-height: 2.4 を維持する。2.0 未満に詰めるとブランドの空気感が失われる
• セクション見出しの letter-spacing: 0.2em はブランドアイデンティティの核心。省略しない
• 本文の letter-spacing: 0.1em も必須。0 にするとブランドの凛とした印象が崩れる

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》」】、。，．・：；？！
• 行末禁止: （「『【〔〈《「【

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt は使用しない: 等幅組みを維持する。プロポーショナル字詰めをすると、広い letter-spacing で意図した均等な字間が崩れる
• kern も明示的には有効化しない: Noto Serif JP / Noto Sans JP のデフォルト挙動に委ねる

3.8 縦書き

該当なし。横書きのみ。

4. Component Stylings

Buttons

Primary CTA（獺祭 Store リンク等）

• Background: #27174b
• Text: #ffffff
• Padding: 10px 13px 10px 41px（左に余白を大きく取り、矢印アイコンの領域を確保）
• Border Radius: 0px（角型。丸みなし）
• Font: Noto Sans JP, 15px, 400
• Letter Spacing: 0.1em (1.5px)
• テキスト例: 「獺祭Store WEB店 ▸」

Secondary CTA（セクションリンク）

• Background: #27174b
• Text: #ffffff
• Padding: 12.8px 40px
• Border Radius: 0px（角型）
• Font: Noto Sans JP, 17.6px, 400
• Letter Spacing: 0.27em (4.8px) — 極めて広い字間。ボタン内テキストにも獺祭の美意識を貫く
• テキスト例: 「一覧を見る」「もっと見る」

Slider Arrow（カルーセル制御）

• Background: #a5afd3
• Border Radius: 50%（円形）
• 矢印アイコン: 白

Inputs

• 実サイトで確認できた入力フィールドは年齢確認モーダルのみ
• フォームを追加する場合の推奨値:
  • Background: #ffffff
  • Border: 1px solid #cccccc
  • Border (focus): 1px solid #27174b
  • Border Radius: 0px（ブランドの角型ルールに準拠）
  • Font: Noto Sans JP, 15px
  • Padding: 10px 16px

Cards

• 商品カード・ニュースカードはいずれもボーダーレス。影も枠線もなし
• Background: #ffffff（透明、またはページ背景と同色）
• 写真で視覚的に区切り、テキスト階層で構造を示す
• カード間の余白が主たるセパレーター

5. Layout Principles

Spacing Scale

Container

• Max Width: 1100px（コンテンツエリア）
• Padding (horizontal): 20px（モバイル時）

Grid

• 商品ラインナップ: 3〜4 カラムのカードグリッド
• ニュース: 1 カラムのリスト形式
• エディトリアル本文: 1 カラムのセンター配置。テキスト幅は読みやすさを優先して狭め

6. Depth & Elevation

DASSAI のデザインは影をほぼ使わない。深度は余白・タイポグラフィの階層・色の濃淡で表現する。白い背景に対してインディゴの CTA が「浮く」のは色のコントラストによるもので、box-shadow ではない。

7. Do's and Don'ts

Do（推奨）

• Noto Serif JP を本文・見出しに使う — これは明朝セリフ基調のブランド。ゴシックは UI テキストのみ
• セクション見出しの letter-spacing は 0.2em — ブランドの格式を示す核心的な値
• 本文の line-height は 2.4 を維持する — 極めて広い行間がブランドの空気感をつくる
• 本文の letter-spacing は 0.1em — 文字ひとつひとつに余白を与える
• CTA ボタンは角型（radius: 0px） — 端正な直線で伝統工芸的な品格を保つ
• カラーパレットは #27174b + #ffffff の二色基調 — 抑制が美意識
• 余白を惜しまない — 情報を詰め込まず、呼吸を持たせる

Don't（禁止）

• 角丸ボタンを使わない — pill 形状（border-radius: 9999px）も通常の角丸（8px）も不可。すべて 0px
• palt を有効化しない — font-feature-settings: "palt" 1 を指定しない。広い letter-spacing との併用で字間が不均一になる
• ゴシック体を本文に使わない — 本文は Noto Serif JP（明朝）。Noto Sans JP は UI・ナビ・ボタンラベル限定
• 彩度の高いアクセントカラーを追加しない — 蛍光色、ビビッドな赤・青・緑は世界観を壊す
• 本文の line-height を 2.0 未満にしない — ブランドの余韻が失われる
• セクション見出しの letter-spacing を省略しない — 0.2em の空きが端正さの根幹
• box-shadow で深度を表現しない — 影は使わず、余白と色で階層をつくる

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• CTA ボタンは十分な padding で確保

フォントサイズの調整

• モバイルでは本文 14〜15px、見出しはデスクトップの 75〜85% 程度に縮小
• line-height: 2.4 と letter-spacing: 0.1em は画面幅に関わらず維持する（ブランドの核心値）
• セクション見出しの letter-spacing: 0.2em もモバイルで維持

9. Agent Prompt Guide

クイックリファレンス

Brand Name: DASSAI（獺祭）
Primary Color: #27174b
Text Color (Body): #000000
Text Color (Heading): #222222
Background: #ffffff
Font (Body/Heading): "Noto Serif JP", serif
Font (UI/Nav): "Noto Sans JP", sans-serif
Body Size: 15.75px
Body Line Height: 2.4
Body Letter Spacing: 0.1em
Section Heading Letter Spacing: 0.2em
Button Radius: 0px
palt: off

プロンプト例

獺祭（DASSAI）のデザインシステムに従って、商品一覧ページを作成してください。

- ブランドカラー: #27174b（深インディゴ）
- 背景: #ffffff（純白）
- 本文フォント: "Noto Serif JP", serif — 明朝セリフが主書体
- UI フォント: "Noto Sans JP", sans-serif — ナビ・ボタンのみ
- 本文: 15.75px, line-height: 2.4, letter-spacing: 0.1em
- セクション見出し: 27px, weight 400, letter-spacing: 0.2em
- CTA ボタン: bg #27174b, 白文字, radius 0px（角型）, letter-spacing: 0.1em
- カードに影やボーダーは使わない。余白で区切る
- palt は使わない（font-feature-settings: normal）