玉乃光酒造（Tamanohikari Sake Brewing） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-15 / 対象: https://tamanohikari.co.jp/, /article/596.html

1. Visual Theme & Atmosphere

• デザイン方針: 濃紺（#001328）の地に写真を全面で敷き、A1明朝 StdN の縦組みを右端に立てる。1673年創業の京都の酒蔵を、黒地・白文字・明朝・縦組みの4点だけで表現する
• 密度: 低い。角丸も影もほぼ無く（border-radius 2 種・box-shadow 0 種）、余白と縦組みのリズムで構成する
• キーワード: A1明朝、縦組み、字空け0.2em、Morisawa Fonts Web、濃紺

このサイトの核心は4つある。

1. 既定の和文書体が明朝である。 body のスタック先頭が MFW-PA1MinchoStdN-Regular（A1明朝 StdN）で、body / p / h1 / h2 / a / li がすべてこれを継承する（実測 60 要素＋37 要素）。ゴシックが要る箇所だけ MFW-YuGoPr6N-*（游ゴシック Pr6N）のスタックに差し替える（実測 46＋25＋22 要素）。多くの企業サイトと逆で、ゴシックが例外側
2. 和文と欧文を別のベンダーから配信している。 和文は Morisawa Fonts Web（morisawafonts.net）、欧文は FontPlus（webfont.fontplus.jp / HelveticaNeueLTPro-Md / -Lt）。フォント要求は 2 ホスト合わせて 69 件、@font-face 宣言は 498 件（サブセット分割）
3. 縦組みは本物で、字送りは常に 0.2em。 writing-mode: vertical-rl が実測 80 要素（トップ）/ 50 要素（記事）。ヒーローの「いい酒で、いい時間を、造る。」は画像ではなく h2.copy のテキスト（50px・letter-spacing: 10px ＝ 0.2em・line-height: 85px ＝ 1.7）
4. OpenType 機能が横組みと縦組みで取り違えられている。 "palt" は horizontal-tb に 47 要素（正しい）だが、"halt" は vertical-rl に 39 要素、"vkrn","vpal" は horizontal-tb に 4 要素。halt は横組み専用、vpal/vkrn は縦組み専用なので、後者2つはどちらも効いていない（→ 3.7 節）

CSS Custom Properties は 47 個すべて WordPress / Gutenberg 由来（own: 0）。自社の設計トークンは存在しない。 色もサイズも実値で書かれている。

2. Color Palette & Roles

Primary（ブランドカラー）

赤・金といった「酒」の記号色を一切使わない。 差し色は無く、白文字と写真だけで彩度を作る。

Neutral（ニュートラル）

• Page Background（トップ） (#001328): pageBackground.resolved = rgb(0,19,40) / 根拠 body
  • 注意: トップは heroCovered: true（figure.figure_1 が 1496×935 の background-image で覆う）。ヒーロー写真の茶色はページの地色ではない
• Page Background（記事） (#ebebed): 記事ページは地色が変わる。pageBackground.resolved = rgb(235,235,237) / 根拠 body。トップの濃紺を下層にも適用しない
• Surface（記事内） (#f5f5f5): 記事一覧カードの面（可視 2 要素）
• Text on Dark (#ffffff): 本文・見出しの既定（可視 156 要素）
• Text Muted on Dark (#dddddd / rgba(255,255,255,0.85)): 補足テキスト（22 要素 / 14 要素）
• Text on Light（記事） (#001328): 記事本文（可視 38 要素）。黒ではなくブランドの濃紺で組む
• Overlay: linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0)) — 記事ページの写真キャプション下敷き（31 要素）

3. Typography Rules

3.1 和文フォント

• 既定（見出し・ナビ・本文）: A1明朝 StdN Regular（MFW-PA1MinchoStdN-Regular）。Morisawa Fonts Web 配信・loaded 済
• ゴシックに落とす箇所: 游ゴシック Pr6N Medium（MFW-YuGoPr6N-Medium）/ Demi（MFW-YuGoPr6N-Demi）。どちらも loaded 済。お知らせ一覧・小見出し・キャプションに使う
• 宣言はあるが使われていない: mfw-pa1gothicstd-light / -regular / -medium（A1ゴシック）、mfw-pa1minchostdn-medium は 4 つとも unloaded。A1ゴシックは1要素も描画されない
• フォールバック: 游ゴシック → ヒラギノ角ゴ Pro → メイリオ の順。スタック途中に generic family は無く、末尾の sans-serif だけ

3.2 欧文フォント

• Helvetica Neue LT Pro Medium（HelveticaNeueLTPro-Md）: 見出し・ラベル。FontPlus 配信。実測 46＋25 要素
• Helvetica Neue LT Pro Light（HelveticaNeueLTPro-Lt）: 日付・キャプションなどの小さい欧文。実測 22 要素
• Roboto: body スタックの3番目に書かれているが、A1明朝 StdN が ASCII を持つため到達しない（実測 0 要素）

3.3 font-family 指定

css/* 既定（明朝）: body / p / h1 / h2 / a / li が継承 */
font-family:
  MFW-PA1MinchoStdN-Regular,       /* A1明朝 StdN R（Morisawa Fonts Web） */
  MFW-YuGoPr6N-Medium,             /* 明朝に無い字の受け皿 */
  Roboto,                          /* 実際には到達しない */
  "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体,
  "Noto Sans Japanese", "Source Sans Pro",
  "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
  メイリオ, Meiryo, sans-serif;

/* ゴシックに差し替えるとき（欧文 Medium ＋ 和文 Demi） */
font-family:
  HelveticaNeueLTPro-Md,           /* 欧文（FontPlus） */
  MFW-YuGoPr6N-Demi,               /* 和文（Morisawa Fonts Web） */
  "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体,
  "Source Sans Pro",
  "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
  メイリオ, Meiryo, sans-serif;

太さはファミリー名で切り替える。 Morisawa Fonts Web の @font-face はすべて font-weight: 1 1000 で宣言されているため、font-weight を 400→700 に上げても同じファイルが返る。実サイトが font-weight: 500 / 600 を書いている箇所があるが、太さを作っているのは -Medium / -Demi というファミリー名の方。font-weight を上げて太らせようとしないこと。

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

ルートは html: 14px / body: 14px で 6 幅（1440 / 1200 / 834 / 768 / 767 / 375px）すべて固定。流体ではない。 大きい見出しだけが個別に vw と clamp() を持つ（CSS 全文で font-size: *vw が 132 箇所、clamp() が 23 箇所）。

• ウェイトは 400 / 500 / 600 の3段（実測 400×175・600×11・500×8）。700 以上は1要素も無い

3.5 行間・字間

• line-height は無単位の比率。body は 25.2px / 14px = 1.8。各要素が自分のサイズで再計算する（実測比 1.70×60・1.80×48・1.00×38・2.40×26・1.50×20）
• letter-spacing は各要素が em で持つ（body 継承ではない）。サイズに比例して px が変わるのが根拠:

縦組みは例外なく 0.2em。 幅を 1440 → 375px まで変えても letter-spacing / font-size は 0.2 のまま。横組みは 0.1〜0.12em。 行間はヒーローだけモバイルで変わる（1.7 → 1.5 at 375px）。他は 1.7 のまま。

3.6 禁則処理・改行ルール

• word-break の宣言は無い。ブラウザ既定（日本語の禁則はブラウザ任せ）
• 縦組みの見出しは <br> ではなく改行位置を文として与える（「いい酒で、いい時間を、造る。」は1要素1行で、列の折り返しは height で決まる）

3.7 OpenType 機能

実サイトは横組み用と縦組み用の機能を取り違えている。正しくはこう書く。

• halt が効かない代わりに、句読点を <span class="short"> で包んで letter-spacing: -0.4em を当てて詰めている（実測 span.short が 38.88px で -15.552px、41.76px で -16.704px、いずれも 、 。 」。 の1〜2文字）。これは vhal を1行書けば不要になる手当て
• 再現するときは "vpal" または "vhal" を縦組み要素に、"palt" を横組み要素に書く。負の letter-spacing による約物詰めは真似しない

3.8 縦書き

• writing-mode: vertical-rl。実測 80 要素（トップ）/ 50 要素（記事）
• ナビは「横に並べる」構成。同じ top（377px）で left が 991px / 953px と右から左へ並ぶ（DOM 順＝ 酒造りの礎 → 伝統と技）。再現するときは flex-direction: row-reverse を使う（素の display: flex だと読む向きが逆になる）
• 縦組みの line-height は列の間隔になる。ナビは line-height: 17.28px（＝1.0・列を詰める）、ヒーローは 85px（＝1.7・列を空ける）
• 縦組みの letter-spacing は字と字の間（縦方向）に効く。常に 0.2em

4. Component Stylings

Buttons

面色のボタンは2種類しかない。角丸・影ともに使わない。

css.btn-solid {
  background: #001328;
  color: #ffffff;
  border: 0;
  border-radius: 0;        /* 角丸を付けない */
  padding: 40px 20px;      /* 縦に大きく取る */
  font-size: 14px;
  font-weight: 400;
}
.btn-ghost {
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  padding: 20px;
}

実サイトの誤り: カルーセルの Previous / Next ボタンがブラウザ既定のまま（font-family: Arial・background: #efefef・border: 2px outset #000000）で残っている。実測 4 要素。再現しない。 必ず自前のスタイルを当てる。

Cards

• 記事カードは写真の上に文字を直接置く。カード面は持たない
• 記事ページのみ border-radius: 10px が 2 要素。トップは 100%（丸）が 1 要素のみ（ロゴ枠）

5. Layout Principles

• box-shadow は 0 種（両ページ）。奥行きは影ではなく写真の上のグラデーションで作る
• border-radius は原則 0。例外はロゴの円（100%）と記事カードの 10px だけ
• ヒーローは background-image で全画面（1496×935）。縦組みの見出しを右上に、補足情報を左下・右下の縦組みに置く三点構成

6. Depth & Elevation

影は使わない。

7. Do's and Don'ts

Do（推奨）

• 和文の既定を明朝にする（MFW-PA1MinchoStdN-Regular 相当）。ゴシックは差し替えとして扱う
• 縦組みの字送りは 0.2em、行送り（＝列間）は見出し 1.7・ナビ 1.0
• 縦組みを横に並べるときは flex-direction: row-reverse
• border-radius: 0 / box-shadow: none を既定にする
• 下層ページは地色を #ebebed に替える（濃紺はトップとヘッダだけ）
• 本文の文字色は黒ではなく #001328

Don't（禁止）

• font-weight で太らせない。 Morisawa Fonts Web の書体は font-weight: 1 1000 宣言で、太さはファミリー名（-Medium / -Demi）で切り替える
• 縦組みに "halt" を書かない（効かない）。"vhal" / "vpal" を使う
• 横組みに "vkrn","vpal" を書かない（効かない）
• 約物を <span> で包んで負の letter-spacing で詰めない。 OpenType 機能で解決する
• A1ゴシック（mfw-pa1gothicstd-*）を足さない。 宣言はあるが4つとも unloaded で、1要素も描画されていない
• Roboto を欧文として当てにしない（スタック上到達しない）
• カルーセルの矢印をブラウザ既定のまま出さない
• ルートを流体にしない（html: 14px 固定）。流体にするのは見出しの font-size だけ

8. Responsive Behavior

Breakpoints

ルートは全幅で 14px 固定。見出しだけがブレークポイントで式を変える。

フォントサイズの調整

• letter-spacing は全幅で 0.2em のまま（px 値だけがサイズに追従する）
• ヒーローの line-height だけ 375px で 1.7 → 1.5 に落ちる

9. Agent Prompt Guide

クイックリファレンス

地色: #001328（トップ）/ #ebebed（下層）
段差: #040c16
文字: #ffffff（濃紺地）/ #001328（明地）/ #dddddd（補足）
和文: A1明朝 StdN Regular（既定）→ 代替 Shippori Mincho / Zen Old Mincho
      游ゴシック Pr6N Medium・Demi（差し替え）→ 代替 Zen Kaku Gothic New
欧文: Helvetica Neue LT Pro Md / Lt → 代替 Inter / Roboto
ルート: html 14px 固定（流体にしない）
行間: 1.8（body）/ 1.7（縦組み見出し）/ 1.0（縦組みナビ）
字間: 縦組み 0.2em / 横見出し 0.1〜0.12em
ウェイト: 400・500・600 の3段（700 以上を使わない）
角丸: 0 / 影: なし
OpenType: 横組み "palt" / 縦組み "vpal"（"halt" は縦組みでは効かない）

プロンプト例

玉乃光酒造のトーンで酒蔵のトップページを作って。地色は #001328、文字は白。和文の既定は明朝（Shippori Mincho で代替）で、ゴシックは小見出しと日付だけに使う。ヒーローは写真を全画面に敷いて、右上に writing-mode: vertical-rl の縦組み見出しを 50px・letter-spacing: 0.2em・line-height: 1.7 で置く。縦組みのナビを横に並べるときは flex-direction: row-reverse にして、読む向きを右から左にする。角丸と影は使わない。font-weight は 400〜600 の3段まで。縦組みの約物詰めは font-feature-settings: "vpal" で行い、"halt" や負の letter-spacing は使わない。