八海山（八海醸造 / HAKKAISAN） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-01 / 対象: https://www.hakkaisan.co.jp/, /sake/

1. Visual Theme & Atmosphere

新潟・南魚沼の酒蔵。サイトは白地・黒文字・角丸ゼロという極端に禁欲的な構成で、 表現のほぼすべてを書体の選択と字間に預けている。見出しは筑紫Aオールド明朝、 本文とナビは秀英角ゴシック金 L。日本語の商業サイトとしては珍しく、 装飾要素（影・角丸・グラデーション・面色のセクション）をほぼ一切使わない。

• デザイン方針: 引き算。線を引かず、面を塗らず、余白と書体だけで格をつくる
• 密度: 低い。1画面あたりの情報量を絞り、商品写真を大きく白場に置く
• キーワード: 明朝、白場、角丸ゼロ、0.2em の字間、淡麗

この酒蔵UIの特徴的な癖（他サイトと違う点）

1. 見出しが明朝、本文がゴシックという和文2書体の使い分け。多くの日本語サイトは1書体で通す
2. セクション見出しの字間が 0.2em。「製品情報」が「製 品 情 報」に見えるほど空ける
3. border-radius が実質 0。角丸は円形（50%）の「札」だけで、中間の角丸を持たない
4. ボタンが枠線1本。塗りボタンが存在しない
5. ページ地色の指定が無い（html/body ともに透明。UA既定のキャンバス＝白）

2. Color Palette & Roles

Base（基調）

• Background (#ffffff): ページ地色。CSSで指定されておらず UA 既定のキャンバスに依存
• Text Primary (#000000): 本文・見出し。純黒
• Text Secondary (#7f7f7f): フッター、注記、コピーライト

Accent（差し色は3色だけ）

• Mizu Blue-Gray (#9cb7be): 酒類カテゴリの札（普通酒・大吟醸酒 等）、 カルーセルの選択中インジケータ。このサイトで最も使用頻度の高い差し色
• Fuji Purple (#7c82a3 / #7e85a6): 「製品情報」のニュース種別、「季節限定」の札。 ページによって1段階だけ明度が違う2値が併存する
• Kin Gold (#e4ba61): 「イベント」のニュース種別、「数量限定」の札

Neutral（ニュートラル）

• Border (#000000): ボタンの枠。本文色と同じ純黒の1px
• Border Light (#979797): カルーセルの非選択インジケータの枠
• Text on Accent (#ffffff): すべての札の文字色は白で固定

注意: 面色を持つ要素は「札（ラベル／カテゴリ）」だけ。 セクションの背景を塗らない。区切りは余白と罫でつくる。

3. Typography Rules

3.1 和文フォント

このサイトの核心。2書体を役割で厳密に分けている。

• 明朝体（見出し・リード・ボタン文字）: 筑紫Aオールド明朝 Pr6N（Fontworks）
  • TsukuAOldMinPr6N-R … 大見出し（Regular）
  • TsukuAOldMinPr6N-M … セクション見出し・ナビ・ボタン（Medium）
• ゴシック体（本文・注記・カテゴリ札）: 秀英角ゴシック金（DNP / 大日本印刷）
  • DNPShueiGoKinStd-L … 本文（Light）
  • DNPShueiGoKinStd-B … 札・SNSラベル（Bold）

役割分担のルール:

• 読ませる文（見出し・リード・ボタンのラベル）は明朝
• 情報として引く文（本文の細部・注記・カテゴリ・著作権表示）はゴシック Light
• ナビゲーションは明朝。これが全体の第一印象を決めている

3.2 欧文フォント

• 専用の欧文書体を持たない。和文書体の欧文グリフをそのまま使う
• ロゴ「Hakkaisan」は画像（SVG）

3.3 font-family 指定

css/* 本文・注記（ゴシック Light） */
font-family: DNPShueiGoKinStd-L, ShueiGo-L, sans-serif;

/* 札・強調（ゴシック Bold） */
font-family: DNPShueiGoKinStd-B, ShueiGo-B, sans-serif;

/* 見出し・リード・ナビ・ボタン（明朝 Medium） */
font-family: TsukuAOldMinPr6N-M, TsukuMin-M, serif;

/* 大見出し（明朝 Regular） */
font-family: TsukuAOldMinPr6N-R, TsukuMin-R, serif;

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

• DNPShueiGoKinStd-L → ShueiGo-L → sans-serif の2段構え。 プラットフォームフォント（游ゴシック・ヒラギノ）をチェーンに入れていない
• ウェイトを font-weight ではなくフォントファミリ名で切り替える（-L / -B / -M / -R）。 Adobe Fonts / Fontworks のスタティックフォント運用に多いパターン。 font-weight: 700 を当ててもフォント側は変わらず、合成ボールドになる点に注意

ライセンス注記: 筑紫Aオールド明朝（Fontworks）と秀英角ゴシック金（DNP）はいずれも 商用ライセンスのWebフォントで、preview.html では再現できない。代替は 3.9 を参照。

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

3.5 行間・字間

• letter-spacing は原則 normal（0）。日本語サイトとしては珍しく、本文に字間を入れない。 明朝の字面の広さがそのまま出る
• 字間を空けるのは2種類だけ、そして空けるときは一気に 0.2em:
  • セクション見出し（30px）… 0.2em
  • 「MORE」（10px）… 0.2em
  • 丸札の「数量限定」（10px）… 0.1em
• line-height は 1.6 が基準（本文・リード・ボタン）
• 見出しは 1.26 と詰める。大見出しは行が近いほうが明朝の縦の流れが出る
• セクション見出しとナビは line-height: 1.0。字間 0.2em で横に伸びるぶん、 行の高さを詰めて塊に見せる
• 下層のリード文だけ 1.94 と大きく空ける（読ませる文の合図）

css/* 本文 */
body {
  font-family: DNPShueiGoKinStd-L, ShueiGo-L, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: normal;
  color: #000;
}

/* セクション見出し — 字間を大きく空け、行は詰める */
.section-label {
  font-family: TsukuAOldMinPr6N-M, TsukuMin-M, serif;
  font-size: 30px;
  line-height: 1.0;
  letter-spacing: 0.2em;
}

/* 大見出し */
.page-heading {
  font-family: TsukuAOldMinPr6N-R, TsukuMin-R, serif;
  font-size: 42px;
  line-height: 1.26;
  letter-spacing: normal;
}

0.2em の字間で必ず起きること: CSSの letter-spacing は最後の1文字の右にも空きを足す。 センタリングした見出しが半文字ぶん左にずれて見えるので、 margin-right: -0.2em（または text-indent: 0.2em）で必ず相殺する。

3.6 禁則処理・改行ルール

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

• 商品名に「純米大吟醸 八海山」のような全角スペース区切りが多い。 この位置で折り返す前提でカード幅を設計する
• 「八海山」「魚沼」など固有名詞は途中で折らない（word-break: break-all を使わない）

3.7 OpenType 機能

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

• palt は全要素で無効（実測 normal）
• 見出しの字詰めは palt ではなく letter-spacing で「空ける」方向に統一。 明朝のベタ組みを崩さないための選択

3.8 縦書き

該当なし。全ページ横組み。ただし商品ラベル（画像）は縦組みで、 その視覚的リズムを本文側は letter-spacing: 0.2em の見出しで受けている。

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

Fontworks は Google Fonts に Kaisei 系（解星）の明朝も提供しているが、 表示向けの性格が強く本文組みには向かないため、実用性を取って Shippori Mincho を採用した。

4. Component Stylings

Buttons

Primary — 塗りボタンは存在しない。ボタンは枠線1本だけ

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 0px
• Font: 筑紫Aオールド明朝 M / 16px / line-height 1.6
• Padding: 上下 16–20px / 左右 40–60px（横に長く取る）

css.btn {
  display: inline-block;
  background: transparent;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  font-family: TsukuAOldMinPr6N-M, TsukuMin-M, serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 16px 56px;
}

More（テキストリンク）

• 筑紫Aオールド明朝 M / 10px / letter-spacing: 0.2em / 大文字の欧文「MORE」
• 下線は引かず、短い罫を横に添える

Tags / Labels

Category Chip（酒類カテゴリ — 角丸ゼロの矩形）

• Background: #9cb7be / Text: #ffffff
• Border Radius: 0px
• Padding: 0 10px
• Font: 秀英角ゴシック金 B / 14px

News Category（ニュース種別 — 角丸ゼロの矩形）

• Padding: 4px 8px / Font: 秀英角ゴシック金 B / 12px / Text #ffffff
• 製品情報 #7c82a3 / 八海山情報 #9cb7be / イベント #e4ba61

Round Label（限定表示 — 唯一の円形）

• Border Radius: 50%（正円）
• Background: 数量限定 #e4ba61 / 季節限定 #7e85a6
• Text: #ffffff / 筑紫Aオールド明朝 M / 10px / letter-spacing: 0.1em
• 商品写真の左上に重ねる「シール」の見立て

Cards（商品カード）

• Background: transparent（白場にそのまま置く）
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 構成: 商品写真 → カテゴリ札 → 商品名（明朝） → 説明文（ゴシック 14px/1.6）

Carousel Indicator

• 正円 border-radius: 50% / 直径 10px 前後
• 選択中: Background #9cb7be / Border 1px solid #9cb7be
• 非選択: Background #ffffff / Border 1px solid #979797

5. Layout Principles

Container

• Max Width: 1280px
• Padding (horizontal): 40px（デスクトップ）/ 20px（モバイル）

Spacing Scale

セクション間は 80–120px と大きく取る。これが「引き算のデザイン」を成立させている。

Grid

• 商品一覧: 4カラム / Gutter 40px
• お知らせ: 1カラムのリスト（日付＋種別札＋見出し）

6. Depth & Elevation

影は原則として使わない。奥行きは影ではなく白場の広さで表現する。

7. Do's and Don'ts

Do（推奨）

• 見出し・リード・ボタン・ナビは明朝、本文・注記・札はゴシック Light にする
• セクション見出しは letter-spacing: 0.2em ＋ line-height: 1.0
• 字間を空けた見出しは margin-right で末尾の余白を相殺する
• ボタンは枠線1本（1px solid #000、border-radius: 0）
• 差し色は #9cb7be / #7c82a3 / #e4ba61 の3色に限る
• 本文の line-height は 1.6
• セクション間の余白を 80px 以上取る

Don't（禁止）

• 角丸を付けない（border-radius は 0。円形の札だけが例外）
• 塗りボタンを作らない。CTAも枠線1本で通す
• セクションの背景を塗らない（面色は札だけの役割）
• 影・グラデーションを足さない
• font-weight: 700 でボールドを作らない。ファミリ名（-B / -M）で切り替える
• 本文に letter-spacing を入れない（見出し以外はベタ組み）
• 見出しにゴシックを使わない。明朝であることがブランドの第一印象

8. Responsive Behavior

Breakpoints

モバイルでの変化

• グローバルナビ → ハンバーガー（c-hamburger）
• 大見出し 42px → 28px 前後
• セクション見出しは 30px → 20px 前後。letter-spacing: 0.2em は維持する
• 商品一覧 4カラム → 2カラム

タッチターゲット

• 最小 44px × 44px。枠線ボタンは上下パディングを 16px 以上取って高さを確保する

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff
Text Color:      #000000
Text Secondary:  #7f7f7f
Accent 1:        #9cb7be（カテゴリ札）
Accent 2:        #7c82a3（種別・季節限定）
Accent 3:        #e4ba61（イベント・数量限定）
Heading Font:    TsukuAOldMinPr6N-M, TsukuMin-M, serif（筑紫Aオールド明朝）
Body Font:       DNPShueiGoKinStd-L, ShueiGo-L, sans-serif（秀英角ゴシック金 L）
Body Size:       14px
Line Height:     1.6（本文）/ 1.26（大見出し）/ 1.0（セクション見出し・ナビ）
Letter Spacing:  0（本文）/ 0.2em（セクション見出し・MORE）
Border Radius:   0px（円形の札のみ 50%）
Button:          transparent + 1px solid #000
palt:            off

プロンプト例

八海山のデザインシステムに従って、日本酒の商品一覧ページを作成してください。
- 背景 #ffffff、本文 #000000、注記 #7f7f7f
- 見出し・リード・ボタン・ナビは明朝:
  font-family: TsukuAOldMinPr6N-M, TsukuMin-M, serif
- 本文・注記・カテゴリ札はゴシック Light:
  font-family: DNPShueiGoKinStd-L, ShueiGo-L, sans-serif
- ページ見出し 42px / line-height 1.26 / letter-spacing 0
- セクション見出し 30px / line-height 1.0 / letter-spacing 0.2em
  （字間を空けた末尾は margin-right: -0.2em で相殺する）
- 本文 14px / line-height 1.6 / letter-spacing なし
- border-radius はすべて 0。角丸を付けない
- ボタンは塗らず、1px solid #000 の枠線だけ。文字は明朝 16px
- 酒類カテゴリの札: 背景 #9cb7be / 文字 #ffffff / radius 0 / padding 0 10px
- 「数量限定」は正円（border-radius: 50%）の札で 背景 #e4ba61 / 文字 #ffffff /
  明朝 10px / letter-spacing 0.1em
- 影・グラデーション・セクション背景色は使わない
- セクション間の余白は 80px 以上
- コンテナ幅 1280px、商品は4カラム