福光屋（FUKUMITSUYA） DESIGN.md

株式会社福光屋（https://www.fukumitsuya.co.jp/）のデザイン仕様書。 1625 年（寛永 2 年）創業、金沢に本社を置く石川県で最も古い酒蔵。全量純米蔵として日本酒「加賀鳶」「黒帯」「福正宗」を醸し、酒粕由来の化粧品・発酵食品まで手がける。 最大の特徴は、和文にモリサワの Web フォントを 2 系統使い、明朝（リュウミン）とゴシック（こぶりなゴシック）で役割を厳密に分けること。見出し・情緒は「リュウミン L-KL」、UI・本文は「こぶりなゴシック W1」。そして太さは font-weight ではなく W1 → W3 のファミリー切り替えで作り、font-weight は全要素 400 のままという実装。 色は白地に深紅 #b71a35 と焦茶 #211c1c。角丸ゼロの矩形バッジと、letter-spacing を 0.05em〜0.23em まで段階的に開く組版が、老舗の落ち着きを作っている。 実サイトの computed style 実測（2026-08-09 取得。トップ＋「福光屋の酒造り」ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地に明朝を置き、字間で「間」を作る。面色も影もほとんど使わず、細い罫線と余白で構造を作る。彩度を持つのは深紅 #b71a35 のみで、バッジと通販導線にだけ現れる
• 福光屋について: 400 年続く金沢の酒蔵。「純米蔵」「発酵」「金沢」が軸で、サイトも商品写真と読み物が半々。伝統を語るが、UI 自体は現代的でフラット
• 密度: 中密度。トップは商品カテゴリ → お知らせ一覧 → 特集の積層。情報は詰まっているが、行間と字間で息を作る
• キーワード: 白地、リュウミン L-KL の見出し、こぶりなゴシック W1/W3、深紅 #b71a35、焦茶 #211c1c、radius 0 の矩形バッジ、和文＋英字の 2 段見出し
• 特徴:
  • 和文はモリサワ Web フォント 2 系統。リュウミン（Ryumin Light KL / Ryumin Regular KL）が明朝の見出し・情緒担当、こぶりなゴシック（Koburina Gothic W1 JIS2004 / W3 JIS2004）が UI・本文担当
  • font-weight は全要素 400（ナビの一部 700 を除く）。太さは W1 → W3 のファミリー名切り替えで作る。.c-gothic-bold というクラスが Koburina Gothic W3 に差し替える実装
  • .c-serif クラスがリュウミンへの切替スイッチ。見出しに付けると明朝になる
  • セクション見出しは「和文明朝（33px リュウミン）＋ 英字ゴシック（12px / ls 0.2em / #898989）」の 2 段組。日本語で意味を、英字で調子を与える定型
  • letter-spacing を段階的に開く。本文 0.05em → 見出し 0.085em → 英字ラベル 0.2em → セクションタイトル 0.2em。字間の広さが階層そのもの
  • 角丸は 0。NEWS / PRESS RELEASE バッジも矩形。円（50%）はページトップボタンなどのアイコンにのみ使う
  • 影は 2 種類のみ（0 0 50px 5px rgba(0,0,0,.1) / 0 25px 50px 5px rgba(0,0,0,.1)）で、広く薄いぼかし。落ち影ではない
  • フォールバックの 2 番目が 游ゴシック体。ヒラギノは Pro（ProN ではない）を指定する

2. Color Palette & Roles

実測値。地は純白 #ffffff、テキストは焦茶 #211c1c。彩度を持つのは深紅 #b71a35 のみで、それ以外は無彩色〜低彩度のグレー階調。

Brand（ブランド）

• Crimson (#b71a35, rgb 183,26,53): ブランドの中核。ヘッダーの「通信販売」CTA、NEWS / PRESS RELEASE バッジ、「オンラインショップ」「直営店」ラベル。サイトで最も出現する彩度で、日本酒の深紅を思わせる沈んだ赤
• Sumi (#211c1c, rgb 33,28,28): 基本テキスト色にして「お問い合わせ」CTA の面色。純黒ではなくわずかに赤みを含んだ焦茶。半透明 rgba(33,28,28,0.6) で画像上のスクリムとしても使う

Neutral（面・罫・文字）

• Background (#ffffff): ページ地色。純白
• Dark Brown (#39302d, rgb 57,48,45): 商品カテゴリ（酒／食品／化粧品）のヘッダー面。#211c1c より一段明るい茶
• Button Dark (#3e3a39, rgb 62,58,57): 「もっと詳しく」「店舗一覧」等のソリッドボタン面
• Gray CTA (#5e5d5c, rgb 94,93,92): 「酒蔵見学のご案内」「GLOBAL SITE」の面色。深紅より弱い導線に使う
• Sub Text (#727171, rgb 114,113,113): 補足文・アウトラインボタンの枠線
• Muted (#898989, rgb 137,137,137): 英字ラベル専用の色。2 段見出しの下段（"FUKUMITSUYA'S SAKE" 等）
• Border / Rule (#c9caca, rgb 201,202,202): 区切り罫。ニュース一覧の行間の細線
• Surface (#efefef, rgb 239,239,239): SNS リンク帯などの薄い面

External Brand（外部サービス色）

通販導線でのみ使う。福光屋のパレットには含めない。

• Rakuten (#bf0000) / Yahoo! (#e26615) / Amazon (#211c1c に白文字)

Semantic（意味的な色）

• 酒蔵サイトのため意味色は前面に希薄
• Danger／Error: 深紅 #b71a35 をそのまま使わず、より明度を上げた赤（#c8253c 目安）にして CTA と区別する
• Warning: 「お酒は 20 歳になってから」の注意文は #211c1c の 11px で、色を変えずサイズで示す。同じ考え方でよい
• Success: 低彩度の緑（#4a6b4f 目安）。彩度を上げると和のトーンが崩れる

3. Typography Rules

モリサワの明朝（リュウミン）とゴシック（こぶりなゴシック）を役割で厳密に分ける。太さは font-weight ではなく W1 → W3 のファミリー切り替えで作り、font-weight は 400 のまま。letter-spacing を 0.05em〜0.2em まで段階的に開くのが組版の要。

3.1 和文フォント

• 明朝体（見出し・情緒）: リュウミン。Ryumin Light KL（L-KL）を見出しに、Ryumin Regular KL（R-KL）をナビの日本語ラベルに使う。モリサワの基幹明朝で、KL は「かな Light」系のファミリー
• ゴシック体（UI・本文）: こぶりなゴシック JIS2004。Koburina Gothic W1 JIS2004（細）と Koburina Gothic W3 JIS2004（中太）の 2 ウェイト。小さめの字面でも読みやすい、ふところの狭いモダンゴシック
• フォールバック: 游ゴシック体 → Yu Gothic → YuGothic → ヒラギノ角ゴシック Pro → Hiragino Kaku Gothic Pro → メイリオ → Meiryo → Osaka → ＭＳ Ｐゴシック → MS PGothic → sans-serif
• ヒラギノは Pro を指定（ProN ではない）。JIS90 字形側を選んでいる点に注意
• 明朝側のフォールバックは serif のみ（"Ryumin Light KL", serif）。游明朝等を経由しない

3.2 欧文フォント

• 欧文専用のスタックは持たない。こぶりなゴシック / リュウミンに含まれる欧文グリフをそのまま使う
• そのため "FUKUMITSUYA'S SAKE" "GLOBAL SITE" "INFORMATION" などの英字ラベルも和文と同じ書体で組まれ、和欧のトーンが揃う
• 等幅フォントは使わない
• preview.html での注記: Ryumin Light KL / Koburina Gothic W1・W3 JIS2004 はモリサワのライセンス Web フォントのため、ローカルの preview.html では表示できない。プレビューでは Google Fonts の Shippori Mincho（400/500）を明朝の代替、Zen Kaku Gothic New（300/400/500）をゴシックの代替に用いる。Zen Kaku Gothic New はモリサワ提供の書体で、こぶりなゴシックと同じ提供元・近い字面設計のため印象が最も近い。実装時は必ずモリサワ Web フォントを読み込むこと

3.3 font-family 指定

css/* 本文・UI（こぶりなゴシック W1） */
font-family: "Koburina Gothic W1 JIS2004", 游ゴシック体, "Yu Gothic", YuGothic,
             "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",
             メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 強調・小見出し（こぶりなゴシック W3） — .c-gothic-bold */
font-family: "Koburina Gothic W3 JIS2004", 游ゴシック体, "Yu Gothic", YuGothic,
             "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",
             メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 見出し・情緒（リュウミン L-KL） — .c-serif */
font-family: "Ryumin Light KL", serif;

/* ナビの日本語ラベル（リュウミン R-KL） */
font-family: "Ryumin Regular KL", serif;

/* body の既定 */
font-size: 14px;
font-weight: 400;          /* 全要素 400。太さはファミリー名で切り替える */
line-height: 1.6;          /* 22.4px */
letter-spacing: 0.05em;    /* 0.7px */
font-feature-settings: normal;   /* palt は使わない */

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

• 和文フォントを先頭に置く（和文の表示品質を優先）
• 2 番目が 游ゴシック体（Windows / macOS 共通の受け皿）、3 番目が ヒラギノ角ゴシック Pro
• 明朝側は serif で締めるだけの短いチェーン。明朝は Web フォントが当たることを前提にしている
• font-weight で太さを作らない。必ず W1 → W3 にファミリー名を切り替える（合成ボールドはこぶりなゴシックの繊細な字面を潰す）

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

• font-weight は全要素 400。太く見せたい箇所は .c-gothic-bold（= Koburina Gothic W3）を付ける
• 例外はナビの一部（font-weight: 700 が乗る）のみ
• line-height: 1.6 が全体の基準。読み物本文だけ 2.0 に開く

3.5 行間・字間

• 本文の行間 (line-height): 1.6（14px → 22.4px）。読み物本文は 2.0（14px → 28px）
• 見出しの行間: 明朝の大見出しは 1.2〜1.6。33px → 52.8px（1.6）と、明朝としては広めに取る
• 字間 (letter-spacing): 段階的に開くのがこのサイトの組版の核心
  • 本文・UI: 0.05em（14px に対し 0.7px）
  • 見出し（写真上）: 0.085〜0.1em
  • 英字ラベル・セクション見出し・写真上のラベル: 0.2em
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• 字間の広さで階層を作る。サイズを上げるより先に letter-spacing を開くのが福光屋の作法
• 英字は必ず 0.2em まで開く。和文と同じ字間で英字を組まない
• 本文 1.6、読み物 2.0。この 2 段だけで通す
• 明朝の見出しは行間を締めすぎない（1.6 が基準）。詰めると窮屈になり、老舗の余裕が消える

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 商品名の『黒帯』『加賀鳶』などは二重かぎ括弧で括られることが多い。括弧の前後で改行させない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt は使わない。こぶりなゴシック・リュウミンの等幅の字面をそのまま使う
• 字間の調整は letter-spacing で開く方向のみ。詰める方向には動かさない
• 和欧が同一書体（和文書体の欧文グリフ）のため、kern に頼らずとも混植が破綻しない

3.8 縦書き

• 現行サイトは全面横組み（writing-mode: horizontal-tb）
• 商品ラベルや蔵の紹介など、縦組みを見せる場合は以下

csswriting-mode: vertical-rl;
text-orientation: mixed;
font-family: "Ryumin Light KL", serif;   /* 縦組みは明朝で */

4. Component Stylings

Buttons

Primary（深紅・矩形） — 通販・購入の導線

• Background: #b71a35
• Text: #ffffff
• Padding: 14px 24px（ヘッダー CTA は高さ 80px の帯として置かれる）
• Border Radius: 0px
• Font: こぶりな W1 / 14px / weight 400 / ls 0.05em
• 例: 「通信販売」「公式通販」

Dark（焦茶・矩形） — 一般的な遷移

• Background: #3e3a39（フッター CTA は #211c1c）
• Text: #ffffff
• Padding: 20px 40px
• Border Radius: 0px
• Font: こぶりな W1 / 14〜16px / ls 0.05em
• 例: 「もっと詳しく」「店舗一覧」「お問い合わせ」

Gray（弱い導線）

• Background: #5e5d5c
• Text: #ffffff
• Padding: 15px
• Border Radius: 0px
• Font: こぶりな W3 / 14px
• 例: 「酒蔵見学のご案内」「GLOBAL SITE」

Outline（白地・矩形）

• Background: transparent
• Text: #211c1c
• Border: 1px solid #727171
• Padding: 10px 0（幅は 380px 程度のブロックとして置く）
• Border Radius: 0px
• Font: こぶりな W3 / 15px / ls 0.1em
• 左端に › のシェブロンを置く
• 例: 「一覧をみる」「もっと詳しく」「直営店 一覧」

Badge（深紅・矩形）

• Background: #b71a35
• Text: #ffffff
• Padding: 6px 0（幅 130px 程度の固定ブロック）
• Border Radius: 0px
• Font: こぶりな W1 / 11px / ls 0.064em
• 例: 「NEWS」「PRESS RELEASE」「オンラインショップ」「直営店」

Scroll Top（円）

• Border Radius: 50%。サイトで円が許される唯一の要素

Inputs

• Background: #ffffff
• Border: 1px solid #c9caca
• Border (focus): 1px solid #b71a35
• Border Radius: 0px
• Padding: 12px 14px
• Font: こぶりな W1 / 14px / weight 400 / ls 0.05em
• Text Color: #211c1c / Placeholder: #898989

Cards

• Background: #ffffff
• Border: なし。細い罫 1px solid #c9caca で行を区切る（ニュース一覧）
• Border Radius: 0px（画像も角丸にしない）
• Padding: 0（画像の下にテキストを直接置く）
• 構成: 画像 → タイトル（こぶりな W1 14px）→ 説明（12px #727171）
• 画像の上に情報を載せるときは rgba(33,28,28,0.6) のスクリムを掛け、中央に「もっと詳しく」を置く

Section Heading（和文明朝＋英字の 2 段組）

サイトを通じて使われる定型。この 2 段組が福光屋の見出しの型。

html<p class="ja c-serif">福光屋の酒</p>
<p class="en c-gothic-thin">FUKUMITSUYA’S SAKE</p>

• 上段: リュウミン L-KL / 33px / lh 1.6 / ls 0.021〜0.085em / #211c1c（写真上では #ffffff）
• 下段: こぶりな W1 / 12px / lh 1.6 / ls 0.2em / #898989（写真上では #ffffff）

Section Head（英字単独）

• こぶりな W1 / 20px / ls 0.2em / #211c1c
• 直下に 1px solid #c9caca の罫を全幅で引く
• 例: 「INFORMATION」「TOPICS」

5. Layout Principles

Spacing Scale

Container

• Max Width: 1000px（サイト全体の標準コンテナ）
• 読み物カラム: 680px
• Padding (horizontal): 20〜40px
• ヘッダーの「通信販売」CTA はコンテナを飛び出して右端に接地する（高さ 80px の帯）

Grid

• Columns: 商品・特集カードは 4 カラム、ニュースは 1 カラムのリスト
• Gutter: 20px
• KV は全幅ブリード、以下は 1000px のコンテナに収める

6. Depth & Elevation

実測の box-shadow は 2 種類のみ。いずれも広く薄いぼかしで、落ち影ではない。

• 奥行きは主に 白 #ffffff × 焦茶 #211c1c / #39302d の面と細い罫 #c9caca のコントラストで表現する
• 濃い落ち影を作らない。ぼかし半径 50px の薄い影が最大

7. Do's and Don'ts

Do（推奨）

• 和文はリュウミン（見出し・情緒）とこぶりなゴシック（UI・本文）の 2 系統で組み、役割を混ぜない
• 太さは Koburina Gothic W1 → W3 のファミリー切り替えで作る。font-weight は 400 のまま
• 字間の広さで階層を作る。本文 0.05em → 見出し 0.085〜0.1em → 英字ラベルは 0.2em
• セクション見出しは**「和文明朝 33px ＋ 英字ゴシック 12px / ls 0.2em / #898989」の 2 段組**にする
• 本文の行間は 1.6、読み物本文は 2.0
• 彩度は深紅 #b71a35 に絞る。弱い導線は #5e5d5c、一般の遷移は #3e3a39 のグレースケールで
• テキストは焦茶 #211c1c（純黒ではない）
• ボタン・バッジ・カード・画像はすべて radius 0
• 影は「広く薄いぼかし」（0 0 50px 5px rgba(0,0,0,.1)）に留める
• 区切りは面ではなく細い罫 1px solid #c9caca で引く

Don't（禁止）

• font-weight: bold で太さを作らない（合成ボールドはこぶりなゴシックの繊細な字面を潰す。必ず W1 → W3 を切り替える）
• 明朝を本文・UI に使わない（リュウミンは見出しとナビの日本語ラベルまで）
• ゴシックでセクション見出しの和文を組まない（和文の見出しは必ずリュウミン）
• 英字を和文と同じ字間で組まない（英字ラベルは必ず 0.2em まで開く）
• 角丸を使わない（radius が許されるのはページトップの円 50% のみ）
• palt を掛けない、字間を詰める方向に動かさない
• 純黒 #000000 を使わない（テキストは焦茶 #211c1c）
• 深紅 #b71a35 を広い面に使わない（バッジと通販 CTA に限定する点の色）
• 本文の行間を 1.5 以下にしない
• 濃い落ち影を作らない（ぼかし 50px の薄い影が上限）
• ヒラギノを ProN で指定しない（このサイトは Pro）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。深紅バッジ（11px / padding 6px）は装飾なので対象外、リンクは行全体をタップ領域にする
• アウトラインボタンは幅 380px / 高さ 44px 前後で十分

フォントサイズの調整

• 本文 14px は据え置く（13px を下回らない）
• 明朝の Section Title 33px → モバイルでは 22〜24px、Page Title 35px → 24〜26px
• 英字ラベル 12px は縮めない。letter-spacing: 0.2em も維持する（縮めると 2 段見出しの調子が崩れる）
• 行間 1.6（読み物 2.0）と本文字間 0.05em はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:     #ffffff   （純白）
Text:           #211c1c   （焦茶。純黒は使わない）
Crimson:        #b71a35   （唯一の彩度。バッジ・通販 CTA）
Dark Brown:     #39302d   （商品カテゴリ面）
Button Dark:    #3e3a39   （ソリッドボタン面）
Gray CTA:       #5e5d5c   （弱い導線）
Sub Text:       #727171   （補足文・アウトライン枠）
Muted:          #898989   （英字ラベル専用）
Border:         #c9caca   （区切り罫）
Surface:        #efefef   （SNS 帯などの薄い面）
JP Serif:       "Ryumin Light KL", serif           ← 見出し・情緒（.c-serif）
JP Gothic:      "Koburina Gothic W1 JIS2004", 游ゴシック体, "ヒラギノ角ゴシック Pro", sans-serif
JP Gothic Bold: "Koburina Gothic W3 JIS2004", …    ← .c-gothic-bold（font-weight は 400 のまま）
Body:           14px / weight 400 / lh 1.6 / ls 0.05em
Body (Article): 14px / weight 400 / lh 2.0 / ls 0.05em
Section Title:  リュウミン 33px / lh 1.6 / ls 0.021〜0.085em
Section Label:  こぶりな W1 12px / ls 0.2em / #898989
Section Head:   こぶりな W1 20px / ls 0.2em ＋ 下に 1px solid #c9caca
Letter Spacing: 本文 0.05em → 見出し 0.085〜0.1em → 英字 0.2em（段階的に開く）
Feature:        font-feature-settings: normal（palt を使わない）
Radius:         0（円 50% はページトップボタンのみ）
Shadow:         0 0 50px 5px rgba(0,0,0,.1) / 0 25px 50px 5px rgba(0,0,0,.1)
Container:      1000px（読み物 680px）

プロンプト例

福光屋のデザインシステムに従って、日本酒の商品紹介ページを作成してください。
- 和文の見出しは "Ryumin Light KL"（無ければ Shippori Mincho → serif）、
  本文・UI は "Koburina Gothic W1 JIS2004"（無ければ 游ゴシック体 → ヒラギノ角ゴシック Pro → sans-serif）
- 太さは font-weight ではなく W1 → W3 のファミリー名切り替えで作る。font-weight は 400 のまま
- セクション見出しは 2 段組にする：
  上段＝リュウミン 33px / line-height 1.6 / letter-spacing 0.085em
  下段＝こぶりな W1 12px / letter-spacing 0.2em / #898989 の英字
- 「INFORMATION」のような英字単独の見出しは こぶりな W1 20px / letter-spacing 0.2em、
  直下に 1px solid #c9caca の罫を全幅で引く
- 本文は 14px / line-height 1.6 / letter-spacing 0.05em、読み物本文は line-height 2.0
- 地は純白 #ffffff、テキストは焦茶 #211c1c（純黒は使わない）
- 彩度は深紅 #b71a35 のみ。NEWS バッジと通販 CTA に使い、広い面には塗らない
- 一般の遷移ボタンは #3e3a39、弱い導線は #5e5d5c、アウトラインは 1px solid #727171
- border-radius はすべて 0（ページトップの円ボタンのみ 50%）
- 区切りは面ではなく 1px solid #c9caca の細い罫で引く
- 影は 0 0 50px 5px rgba(0,0,0,.1) までの広く薄いぼかしに留める
- コンテナ幅は最大 1000px、読み物カラムは 680px
- font-feature-settings は normal（palt は掛けない）