金子眼鏡（KANEKO OPTICAL） DESIGN.md

金子眼鏡株式会社（https://www.kaneko-optical.co.jp/）のデザイン仕様書。 1958 年創業、福井県鯖江市。自社工房で職人が手作業でつくるアイウェアブランドで、「金子眼鏡店」「職人シリーズ」「SPIVVY」などのラインを持つ。 最大の特徴は、欧文セリフ（Adobe Garamond Pro）と和文明朝（FOT-筑紫Aオールド明朝 Pr6 R）でナビゲーションと大見出しを組み、本文だけを Lato ＋ A-OTF 中ゴシック BBB Pr6N のサンセリフ／ゴシックに落とすという二層構成。さらに letter-spacing が全域に効き、本文で 0.06em、見出しで 0.18em、ナビで 0.09em と、要素ごとに段階的に開く。地はトップが純黒 #000000、下層は #151515 / #d7dcde / #f0f0f0 と切り替わる。 実サイトの computed style 実測（2026-07-28 取得。トップ＋ STORY ＋ CULTURE 記事）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 黒地に一点、眼鏡だけを置く。トップは全画面の純黒で、中央に製品写真とセリフのロゴタイプ「KANEKO OPTICAL / ESTABLISHED 1958」だけ。装飾も面色も持たず、余白と字間の広さで「手仕事の道具」としての静けさを出す
• 金子眼鏡について: 鯖江の眼鏡産地で職人を社内に抱え、企画から製造・販売まで一貫して行う。ブランドサイトは EC ではなくブランドの語り（STORY / FACTORY / CULTURE）が中心で、記事コンテンツの比重が高い
• 密度: 低密度。トップは 1 画面 1 メッセージ。下層の記事ページのみ、行間 1.8〜2.0 の読み物として密度が上がる
• キーワード: 純黒の地、Adobe Garamond Pro、筑紫Aオールド明朝、中ゴシック BBB、広い字間（0.06〜0.18em）、大文字＋レタースペースの欧文、角丸ほぼ 0
• 特徴:
  • ナビゲーションと見出しはセリフ／明朝（adobe-garamond-pro ＋ FOT-筑紫Aオールド明朝 Pr6 R）、本文はサンセリフ／ゴシック（Lato ＋ a-otf-gothic-bbb-pr6n）。書体の系統そのものが役割の境界になっている
  • letter-spacing を段階的に開く。本文 0.84px（14px に対し 0.06em）／ナビ 1.26px（14px に対し 0.09em）／大見出し 5.4px（30px に対し 0.18em）／セカンダリボタン 1.4px（14px に対し 0.1em）。日本語サイトとしてはかなり広い
  • 見出しは英語の大文字（STORY / PHILOSOPHY / BRAND / NEWS / SHARE）。和文の大見出しはほとんど使わず、日本語は本文とキャプションに回す
  • ページ地色がセクションで切り替わる。トップ＝純黒 #000000、STORY＝#151515、CULTURE 記事＝ペールグレー #d7dcde、記事本体＝白。黒から明るいグレーへ降りていく構成
  • CTA は面を持たない。1px の細い罫線で囲んだアウトラインボタン（VIEW MORE / BACK TO LIST / 店舗一覧へ）のみで、ベタ塗りのボタンは Cookie 同意バーの #eaeaea だけ
  • 角丸は原則 0。例外は記事のタグチップ（4px）と Cookie 同意ボタン（3px）、SHOP バッジ（2px）というごく小さな値のみ
  • font-feature-settings は normal。palt を使わず、letter-spacing を開く方向だけで字面を整える

2. Color Palette & Roles

実測値。彩度を持つ色はリンクのティール #1890ad だけ。それ以外はすべて黒・グレーの無彩色で、写真の色（べっ甲・金無垢・セルロイド）を引き立てる設計。

Base（地）

• Ink Black (#000000): トップページの地色。上部 viewport 全域を占める純黒。ヘッダー・フッターも同じ黒
• Off Black (#151515, rgb 21,21,21): STORY など下層ページの地色。純黒よりわずかに軟らかい黒
• Charcoal (#1f2529, rgb 31,37,41): 「PHILOSOPHY」ブロックの面色。青みを含む濃灰
• Deep Slate (#242b2f, rgb 36,43,47): 「NEWS」ブロックの面色
• Slate (#545e64, rgb 84,94,100): ブランドカード（「金子眼鏡」「SPIVVY」「職人シリーズ」）の面色。サイトで最も出現回数の多い面色
• Gray Slate (#74787a, rgb 116,120,122): 「BRAND」セクションの面色
• Mid Gray (#8a8a8a, rgb 138,138,138): 記事下部「関連記事」ブロックの面色

Light Surface（明るい面）

• Pale Blue Gray (#d7dcde, rgb 215,220,222): CULTURE 記事ページの地色。黒基調のサイトの中で読み物だけを明るい面に置く
• Surface Gray (#f0f0f0, rgb 240,240,240): 記事のタグチップ面（# 金子眼鏡と 仕事と 人と 等）
• Consent Gray (#eaeaea, rgb 234,234,234): Cookie 同意ボタンの面色
• Gray 500 (#525252, rgb 82,82,82): 「SHOP」バッジの面色

Text（文字）

• Text on Dark (#ffffff): 黒地上の見出し・本文
• Text on Light (#000000): 明るい面上の見出し・本文
• Muted (#c2c7cb, rgb 194,199,203): 「SCROLL」「SHOP」など補助テキスト。冷たいグレー

Accent（アクセント）

• Link Teal (#1890ad, rgb 24,144,173): 本文中リンクの文字色。サイト唯一の有彩色。青緑で、黒地・グレー地のどちらでも沈まない

Semantic（意味的な色）

• ブランドサイトのため意味色をほぼ持たない
• Info／Link: #1890ad を流用
• Danger／Error: 必要な場合のみ暖色の赤（#b03a3a 目安）。無彩色基調を壊さないよう文字と 1px 罫に留める
• 状態表現は色ではなく罫線の有無と文言で行う

3. Typography Rules

セリフ／明朝（ナビ・見出し）とサンセリフ／ゴシック（本文）の二層構成。letter-spacing を要素ごとに 0.06em → 0.09em → 0.1em → 0.18em と段階的に開き、palt は使わない。

3.1 和文フォント

• 明朝体（ナビ・ブランド表記）: FOT-筑紫Aオールド明朝 Pr6 R（Fontworks）。筑紫オールド明朝系の中でも古典的な骨格を持つ書体で、ナビゲーションの「金子眼鏡」やロゴ周りの和文に使う
• ゴシック体（本文・記事）: A-OTF 中ゴシック BBB Pr6N（a-otf-gothic-bbb-pr6n／Morisawa）。写植由来の定番ゴシックで、本文・キャプション・記事のすべてを担当する
• 記事の一部に ＭＳ ゴシック 指定が残る（CMS の入力に由来する 22px の氏名表記など）。これは設計意図ではなく実装上のノイズであり、再現時は a-otf-gothic-bbb-pr6n に揃えること

3.2 欧文フォント

• セリフ: Adobe Garamond Pro（adobe-garamond-pro／Adobe Fonts）。ナビゲーション・大見出し（STORY / PHILOSOPHY / BRAND）・著作権表記に使う
• サンセリフ: Lato（Google Fonts。サイトが fonts.googleapis.com から Lato:wght@400;700 を読み込んでいる）。本文・キャプションの先頭に置かれる
• 欧文が和文より先頭。Lato, a-otf-gothic-bbb-pr6n, sans-serif / adobe-garamond-pro, "FOT-筑紫Aオールド明朝 Pr6 R", serif のいずれも欧文が先で、和欧の役割を font-family の順序で分ける
• preview.html での注記: adobe-garamond-pro は Adobe Fonts、FOT-筑紫Aオールド明朝 Pr6 R は Fontworks、a-otf-gothic-bbb-pr6n は Morisawa のライセンスフォントで、いずれもローカルの preview.html では表示できない。プレビューでは欧文セリフに EB Garamond（Garamond 系の Google Fonts。Adobe Garamond と同系統の骨格）、和文明朝に Shippori Mincho（オールド明朝寄りの字形で筑紫オールド明朝に近い）、和文ゴシックに Noto Sans JP を代替として用いる。欧文サンセリフの Lato は Google Fonts のため原典どおり使用できる。実装時は必ず原典の書体を読み込むこと

3.3 font-family 指定

css/* 本文・キャプション・記事（サンセリフ＋ゴシック） */
font-family: Lato, a-otf-gothic-bbb-pr6n, sans-serif;
letter-spacing: 0.06em;          /* 14px に対し 0.84px */
font-feature-settings: normal;

/* ナビゲーション・ブランド表記（セリフ＋明朝） */
font-family: adobe-garamond-pro, "FOT-筑紫Aオールド明朝 Pr6 R", serif;
letter-spacing: 0.09em;          /* 14px に対し 1.26px */

/* 大見出し（欧文セリフのみ。和文は使わない） */
font-family: adobe-garamond-pro, serif;
letter-spacing: 0.18em;          /* 30px に対し 5.4px */

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

• 欧文を先頭、和文をその次、generic family を最後の 3 段構成で統一する
• 役割の切り分けは font-family の系統で行う。ナビ＝セリフ／明朝、本文＝サンセリフ／ゴシック。同じ階層でも領域が違えば書体系統が変わる
• 大見出しは英語のみのため和文フォントを指定していない。日本語見出しが必要な場合は adobe-garamond-pro, "FOT-筑紫Aオールド明朝 Pr6 R", serif を使う

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

• font-weight は 400 / 600 / 700 の 3 段。600 はナビと英語小見出し、700 は和文記事の見出しに限定される
• サイズが小さいほど字間を広げない、という原則が逆転している。10px の著作権表記でも 0.09em を維持しており、小さい文字ほど「開いた」印象を保つのがこのサイトの流儀

3.5 行間・字間

• 行間 (line-height): UI・ナビは normal（ブラウザ既定）で詰める。記事本文は 2.0（14px→28px）、記事見出しは 1.8（24px→43.2px / 18px→32.4px）。注意書きは 1.5（14px→21px）
• 字間 (letter-spacing): 段階的に 4 段
  • 本文・キャプション: 0.06em（14px→0.84px）
  • ナビ・英語小見出し・著作権: 0.09em（14px→1.26px / 18px→1.62px / 10px→0.9px）
  • セカンダリボタン・SCROLL: 0.1em（14px→1.4px / 12px→1.2px）
  • 大見出し: 0.18em（30px→5.4px）
• font-feature-settings: normal。palt は使わない

ガイドライン:

• 字間を 0 に戻すと金子眼鏡らしさが完全に失われる。0.06em はサイトの最低ラインで、ここより詰めない
• 英語の大見出しは 0.18em まで開き、単語というより「文字の列」として見せる（K A N E K O O P T I C A L）
• 和文記事は行間 2.0 を守る。字間 0.06em ＋ 行間 2.0 の組み合わせが読み物の基調

3.6 禁則処理・改行ルール

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

禁則対象:

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

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

• 職人名・型番（KV-48 など）は分割されると意味を失う。white-space: nowrap で保護する

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */
letter-spacing: 0.06em;          /* 詰めるのではなく開く */

• palt を使わない。プロポーショナル詰めは和文を「詰める」方向の処理だが、金子眼鏡の設計思想は逆で、letter-spacing で開く方向に統一している
• セリフ／明朝を使う領域でも palt は掛けない。オールド明朝の骨格が持つ字面をそのまま見せる
• 欧文の kern はフォント既定に任せる

3.8 縦書き

• 該当なし。UI・記事とも横組み
• ロゴマークの「鯖江 ○○ 手造」という極小の和文は画像として扱う

4. Component Stylings

Buttons

Secondary（アウトライン。実質これが主要 CTA）

• Background: transparent
• Text: #ffffff（黒地上）/ #000000（明るい面上）
• Border: 1px solid #ffffff / 1px solid #000000
• Padding: 0（幅・高さはコンテナ側で確保。左に矢印がつく場合 0 0 0 12px）
• Border Radius: 0px
• Font: Lato + 中ゴシック / 14px / weight 400 / ls 0.1em (1.4px)
• 例: VIEW MORE / TOP PAGE / BACK TO LIST / 前の記事 / 店舗一覧へ / 店舗体験の勧め
• 金子眼鏡には塗りつぶしの主要 CTA が存在しない。細い罫線と広い字間だけでボタンを成立させる

Utility（Cookie 同意など。唯一のベタ塗り）

• Background: #eaeaea
• Text: #000000
• Padding: 7px 21px
• Border Radius: 3px
• Font: 14px / weight 400 / ls normal

Badges / Chips

Shop Badge

• Background: #525252
• Text: #c2c7cb
• Padding: 1px 0 0
• Border Radius: 2px
• Font: Adobe Garamond Pro / 10px / weight 600 / ls 0.09em
• 例: SHOP

Article Tag

• Background: #f0f0f0
• Text: #000000
• Padding: 0 9px
• Border Radius: 4px
• Font: Lato + 中ゴシック / 14px / weight 400 / ls 0.06em
• 例: # 金子眼鏡と 仕事と 人と / # 店舗 / # 販売スタッフ
• タグ名の先頭に # を付けるのがこのサイトの記法

Cards（ブランド・セクション）

• Background: #545e64（ブランドカード）/ #1f2529（PHILOSOPHY）/ #242b2f（NEWS）/ #74787a（BRAND）
• Border: なし
• Border Radius: 0px
• 構成: 写真 → 英語の見出し（Adobe Garamond Pro）→ 和文の説明（中ゴシック 13〜14px）
• Shadow: なし
• カード面はすべて濃灰系のグラデーション的な階段（#1f2529 → #242b2f → #545e64 → #74787a）で、明度差だけでセクションを区切る

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #1890ad
• Border Radius: 0px
• Padding: 11px 10px
• Font: Lato + 中ゴシック / 14px / ls 0.06em
• Text Color: #383838 / Placeholder: #8a8a8a

Links（本文中）

• Color: #1890ad
• Text Decoration: underline（本文中）／ナビは下線なし
• 有彩色はここだけ。リンクであることを色で示す唯一の場所

5. Layout Principles

Spacing Scale

• 実測のパディングは 7px 21px / 0 9px / 11px 10px に集中し、セクション間は 80〜120px の大きな余白を取る

Container

• Max Width: 全幅ブリード（トップの KV は 1440px のビューポート全域）
• コンテンツセクションは概ね 1000〜1200px
• 記事本文カラムは 680px 前後
• Padding (horizontal): 40〜80px

Grid

• Columns: ブランドカードは 3 カラム、CULTURE の記事一覧は 3 カラム、関連記事は 3 カラム
• Gutter: 40px
• 「全画面の黒 → 濃灰のカード階段 → 明るい記事面」という縦方向のトーン設計がレイアウトの骨格

6. Depth & Elevation

実測ではすべての要素が box-shadow: none。金子眼鏡は影を一切使わない。

• 奥行きは「純黒 #000000 → #151515 → #1f2529 → #545e64 → #74787a → #d7dcde → #f0f0f0 → #ffffff」という 8 段の明度階段で表現する
• 落ち影・ぼかしは使わない。眼鏡の製品写真が持つ実際の陰影と競合させないため

7. Do's and Don'ts

Do（推奨）

• ナビ・大見出しはセリフ／明朝（Adobe Garamond Pro ＋ 筑紫Aオールド明朝）、本文はサンセリフ／ゴシック（Lato ＋ 中ゴシック BBB） と書体系統で役割を分ける
• letter-spacing を段階的に開く。本文 0.06em → ナビ 0.09em → ボタン 0.1em → 大見出し 0.18em
• 記事本文は 行間 2.0、記事見出しは 1.8 を守る
• 見出しは英語の大文字（STORY / PHILOSOPHY / BRAND）、日本語は本文とキャプションに回す
• 角丸は 0 を基本とし、タグ 4px / Cookie ボタン 3px / バッジ 2px という極小値だけを例外にする
• CTA は面を持たない 1px アウトラインで作る
• 有彩色はリンクのティール #1890ad に限定する
• 地色をセクションごとに切り替える（黒 → 濃灰 → ペールグレー → 白）。明度の階段そのものがナビゲーションになる
• 影を使わず、面の明度差と 1px の罫線で階層を作る

Don't（禁止）

• letter-spacing: normal に戻さない。字間の広さがこのブランドの字面の前提であり、0 に戻すと別のブランドになる
• palt を掛けない。金子眼鏡は「詰める」のではなく「開く」方向で字面を整えている
• 塗りつぶしの派手な CTA ボタンを追加しない（原典に存在するベタ塗りは Cookie 同意の #eaeaea のみ）
• 角丸を大きくしない。8px 以上の radius はこのサイトに存在しない
• 影・グラデーションを足さない
• ティール #1890ad 以外の有彩色を UI に持ち込まない。色は製品写真（べっ甲・金無垢・セルロイド）が担当する
• 記事本文の行間を 1.6 以下にしない（0.06em の字間と組み合わさると詰まって見える）
• ＭＳ ゴシック を再現しない。実サイトの記事に残っているが CMS 由来のノイズであり、設計意図ではない

8. Responsive Behavior

Breakpoints

• PC とモバイルでナビの書体系統が変わるのはこのサイト固有の設計。小さい画面では明朝の可読性が落ちるため、ゴシックに落としている

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• アウトラインボタンは padding が 0 のため、コンテナ側で高さ 48px 以上を確保すること

フォントサイズの調整

• 本文 14px は据え置き。記事本文はモバイルでも 14px / 行間 2.0 を維持する
• Page Title 30px → モバイルでは 22〜24px。ただし letter-spacing: 0.18em は縮めない
• ナビは 14px → 13px に落とし、字間は 0.06em に緩める

9. Agent Prompt Guide

クイックリファレンス

Background:     #000000（トップ） / #151515（下層） / #d7dcde（記事） / #ffffff（記事本文）
Card Surfaces:  #1f2529 / #242b2f / #545e64 / #74787a / #8a8a8a
Light Surfaces: #f0f0f0（タグ） / #eaeaea（Cookie） / #525252（SHOPバッジ）
Text on Dark:   #ffffff / Muted #c2c7cb
Text on Light:  #000000
Link:           #1890ad   （サイト唯一の有彩色）
JP Mincho:      "FOT-筑紫Aオールド明朝 Pr6 R", serif       ← ナビ・ブランド表記
JP Gothic:      a-otf-gothic-bbb-pr6n, sans-serif         ← 本文・記事
Latin Serif:    adobe-garamond-pro, serif                 ← 大見出し・ナビ（和文より先頭）
Latin Sans:     Lato                                      ← 本文（和文より先頭）
Body Size:      14px / weight 400 / lh 2.0（記事） / lh 1.5（UI）
Weight:         400（本文） / 600（ナビ・英語小見出し） / 700（和文記事見出し）
Letter Spacing: 0.06em（本文） / 0.09em（ナビ） / 0.1em（ボタン） / 0.18em（大見出し）
Feature:        font-feature-settings: normal（palt は使わない）
Radius:         0px（基本） / 4px（タグ） / 3px（Cookie） / 2px（バッジ）
Shadow:         none（1px の罫線で代替）

プロンプト例

金子眼鏡（KANEKO OPTICAL）のデザインシステムに従って、ブランドストーリーのページを作成してください。
- ナビゲーションと大見出しは Adobe Garamond Pro ＋ FOT-筑紫Aオールド明朝 Pr6 R（無ければ serif）、
  本文と記事は Lato ＋ A-OTF 中ゴシック BBB Pr6N（無ければ sans-serif）で組む
- font-family は必ず欧文を先頭、和文をその次、generic family を最後に置く
- letter-spacing は段階的に開く：本文 0.06em / ナビ 0.09em / ボタン 0.1em / 大見出し 0.18em
- font-feature-settings は normal。palt は掛けない（詰めるのではなく開く）
- 大見出しは英語の大文字（STORY / PHILOSOPHY / BRAND）、日本語は本文とキャプションに回す
- 記事本文は 14px・行間 2.0、記事見出しは行間 1.8
- 地色はセクションで切り替える：KV は純黒 #000000、下層は #151515、記事ページは #d7dcde
- カード面は濃灰の階段 #1f2529 / #242b2f / #545e64 / #74787a を使う
- CTA は塗りつぶさない。1px solid のアウトラインボタン（角丸 0px、ls 0.1em）だけで作る
- 記事のタグは #f0f0f0 の面・角丸 4px・先頭に # を付ける
- 本文中のリンクだけティール #1890ad にする。それ以外の有彩色は使わない
- 影は一切使わない。階層は面の明度差と 1px の罫線で作る