開化堂（かいかどう / Kaikado） DESIGN.md

開化堂（https://www.kaikado.jp/japanese/）のデザイン仕様書。 明治8年（1875年）創業、京都の手作り茶筒司。130種以上の工程を手仕事で継ぐ「最高級茶筒司」の公式サイト（WordPress ベース）。 最大の特徴は 明朝体（ヒラギノ明朝 Pro W3）＋極細ウェイト 200、行間 1.9〜2.2 の非常に広い余白、そして色数を 銅の色 #9d805f ただ一色に絞った設計。ボタンは面を持たず「1px の銅線で囲った角ゼロの矩形」だけ。写真は銅の茶筒を主役に、地は温かみのあるオフホワイト〜白。 実サイトの computed style 実測（2026-07-22 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 静けさと余白。装飾・影・彩色をほぼ排し、銅の質感と手仕事の写真だけに語らせる。工芸品のショーケースというより「間（ま）」を見せる設計
• 開化堂について: 京都・河原町の茶筒司。銅・真鍮・ブリキの筒を手作業で仕上げ、経年で色が深まる道具を作る。その「時間をかけて育てる」思想を、余白の多い明朝組版で表現している
• 密度: きわめて低密度。1 画面＝1 ビジュアル＋数行の明朝テキスト。スクロールごとに大判の製品写真がゆっくり切り替わる
• キーワード: ヒラギノ明朝、極細ウェイト200、銅色 #9d805f、行間2.0、余白、角ゼロ、線ボタン、単色、工芸
• 特徴:
  • 書体は ヒラギノ明朝 Pro W3 の一系統。ゴシックは UI の極一部（キャプション等）を除きほぼ使わない
  • ウェイトは 200（極細）が本文とリンクの既定。見出しでも 400（Regular）止まりで、太字（700）はほぼ登場しない
  • 有彩色は 銅色 #9d805f のみ。それ以外は白・オフホワイト・グレー（#333 のテキスト、#ccc の補助）
  • letter-spacing: 0.8px（≒ 0.05em）がほぼ全要素に効く。明朝を広めに送って静謐さを出す
  • 本文の line-height は 2.0 前後（p は 2.2）。日本語明朝を読みやすく、かつ余白を稼ぐ
  • ボタンは 面色なし・radius 0・1px solid 銅線の一種類のみ（「さらに詳しく」「商品一覧へ」）
  • ロゴは黒の毛筆＋朱の落款印。有彩色として朱赤も限定的に登場する

2. Color Palette & Roles

実測値。CSS Custom Properties は WordPress のプリセット（--wp--preset--color--*）が並ぶが、ブランド専用の色変数は定義されていない。有彩色は事実上 #9d805f（銅）ただ一色で、各要素に直接指定されている。

Brand

• Kaikado Copper (#9d805f): 唯一のブランドカラー。銅の茶筒そのものの色（くすんだ黄銅／ブロンズ）。リンク文字、線ボタンの枠と文字、区切りのアクセントに使う。純度の高い金ではなく、経年で沈んだ銅の色である点が重要
• Seal Red (#a4331f 目安): ロゴの落款印に使う朱赤。UI では使わず、ブランドマーク内のみに限定

Neutral（背景・面）

• White (#ffffff): 基本のページ背景（html。--wp--preset--color--white）
• Warm Off-White (#f2efe9 目安): 製品写真の背景に広がる温かみのある地。UI 面ではなく撮影ライティングによるが、サイト全体の空気感を決める
• Text Charcoal (#333333): 本文・見出しの標準テキスト色。純黒 #000000 は避け、やわらかい炭色を使う
• Caption Grey (#cccccc): 補助ラベル・英字キャプションなど最小テキスト

Semantic

• 実サイトに独立したエラー／警告色は存在しない（フォーム UI が最小限のため）
• 実装が必要な場合は無彩色基調を崩さない範囲で #a4331f（落款の朱）をエラーに転用し、成功・強調は #9d805f を流用する

3. Typography Rules

全要素が同一の明朝スタックを継承する単一書体設計。極細ウェイト 200・行間 2.0 前後・letter-spacing 0.05em の三点が開化堂の静けさを作っている。

3.1 和文フォント

• 明朝体（主役）: ヒラギノ明朝 Pro W3 → Hiragino Mincho Pro → serif
• ゴシック体（補助）: 一部の英字キャプション・システム UI で Arial 系に落ちる程度で、和文ゴシックは積極採用しない

3.2 欧文フォント

• セリフ: ヒラギノ明朝内蔵の欧文グリフ（明朝と調和させる）
• サンセリフ: Arial（ごく一部の数字・英字キャプション）
• 欧文専用の Web フォントは読み込んでいない

3.3 font-family 指定

css/* 本文・見出し共通（明朝の単一スタック） */
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;

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

• 和文明朝を先頭に置き、Windows 環境では serif（＝多くは MS 明朝／游明朝）に素直に落とす
• 明朝が出ない環境で本文がゴシックにならないよう、必ず末尾を serif にする
• 游明朝を明示的に挟みたい場合は "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, serif に拡張する

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

• 見出し（h2/h3）は weight 400、本文・リンク・リストは weight 200 が既定。ウェイトの落差は小さく、サイズと余白で階層を作る

3.5 行間・字間

• 本文の行間 (line-height): 1.9〜2.2（<p> の読み物は 2.2、ナビ・リストは 1.9〜2.0）。日本語明朝を非常に広く組む
• 見出しの行間: 1.0〜1.3（26px/30.4px ≒ 1.17）と締める
• 字間 (letter-spacing): 0.8px 固定（16px 基準で 0.05em）。サイズによらず 0.8px の実値が効くため、小さい文字ほど相対的な字間は広くなる

ガイドライン:

• 明朝本文は 1.9 以上を推奨。開化堂の「間」を再現するには 2.0 前後が最適
• letter-spacing は 0.05em 相当を全体に。締めすぎると静けさが失われる
• 太字を使わず、サイズと余白で強弱を作る（weight 200↔400 の範囲に留める）

3.6 禁則処理・改行ルール

css/* 推奨設定（明朝の読み物向け） */
overflow-wrap: break-word;
line-break: strict;      /* 厳格な禁則 */
word-break: normal;

禁則対象:

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

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 実サイトは palt を明示適用していない */

• 実測では font-feature-settings: normal（palt オフ）。明朝のベタ組みをそのまま活かし、字詰めは letter-spacing の均等送りで統一している
• 見出しで詰めたい場合のみ "palt" 1 を局所適用してよいが、本文はベタ組みを保つ

3.8 縦書き

• ロゴ・一部の見出しで縦組みの意匠を用いる（京都・工芸の文脈）。本文 UI は横組み
• 縦組みを再現する場合:

csswriting-mode: vertical-rl;
text-orientation: mixed;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;

4. Component Stylings

Buttons

開化堂のボタンは 面を持たない線ボタン一種類のみ。CTA は「さらに詳しく」「商品一覧へ」といった控えめな文言で、銅線で囲う。

Primary（＝唯一のボタン：線ボタン）

• Background: transparent
• Text: #9d805f（銅）
• Border: 1px solid #9d805f
• Border Radius: 0（角を立てる）
• Padding: 12px 0（横 padding は文脈で可変。左右いっぱいに引く場合が多い）
• Font: ヒラギノ明朝, 16px, weight 200
• Letter Spacing: 0.05em

Hover の考え方

• 反転（bg #9d805f ／ text #ffffff）を静かに行う程度。強い影やスケールは付けない

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc（下線のみのミニマル実装でも可）
• Border (focus): 1px solid #9d805f
• Border Radius: 0
• Padding: 10px 12px
• Font: ヒラギノ明朝, 16px, weight 200
• Text Color: #333333

Cards

• Background: #ffffff（または写真そのもの）
• Border: なし（罫線を使う場合は 1px solid #eeeeee）
• Border Radius: 0
• Padding: 24px
• Shadow: なし（フラット。Depth セクション参照）
• 画像を主役にし、テキストは写真の下に明朝で小さく添える

5. Layout Principles

Spacing Scale

余白は広めに取り、セクション間は XL〜XXL を使って「間」を作る。

Container

• Max Width: 1200px 目安（写真は全幅ブリードも多用）
• Padding (horizontal): 24〜40px

Grid

• Columns: 12（実運用は 1〜3 カラムの素朴な構成）
• Gutter: 24〜40px
• 製品一覧は写真中心のシンプルなグリッド。カード装飾を足さない

6. Depth & Elevation

• 開化堂は基本 影を使わない。奥行きは余白と写真の陰影で表現する

7. Do's and Don'ts

Do（推奨）

• 明朝スタックの末尾を必ず serif にする
• 本文の line-height は 1.9〜2.2 に取り、余白をたっぷり与える
• 有彩色は銅 #9d805f に絞り、他は無彩色でまとめる
• ボタンは面色なし・角ゼロ・銅線で統一する
• テキスト色は #333333。純黒を避ける

Don't（禁止）

• 明朝の代わりにゴシックを本文に使わない（世界観が崩れる）
• 太字（weight 700）で強調しない。サイズと余白で階層を作る
• 銅以外の彩色（青・緑等）をアクセントに足さない
• 角丸（radius）や影を付けてボタンを「今風」にしない
• line-height を 1.5 以下に詰めない（静けさが失われる）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px。線ボタンは padding を縦に確保してタップ領域を担保

フォントサイズの調整

• モバイルでも本文 16px を維持（明朝は小さくしすぎると細さで可読性が落ちる）
• 見出しは 26px → 20〜22px 程度に縮小。line-height は据え置きで余白を保つ

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #9d805f   （銅 / 唯一のアクセント）
Text Color:    #333333
Background:    #ffffff（写真背景は温かいオフホワイト #f2efe9）
Font:          "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif
Body Size:     16px
Body Weight:   200
Line Height:   1.9〜2.2
Letter Spacing:0.05em
Button:        面なし / 1px solid #9d805f / radius 0

プロンプト例

開化堂のデザインシステムに従って、製品紹介ページを作成してください。
- フォント: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif（本文 weight 200）
- 本文サイズ 16px / line-height 2.0 / letter-spacing 0.05em / 色 #333333
- 背景は白、写真を主役に全幅で配置し余白を広く取る
- アクセントは銅色 #9d805f のみ。リンクと線ボタンに使う
- ボタンは面色なし・角ゼロ・1px solid #9d805f、文言は「さらに詳しく」
- 影・角丸・太字は使わず、サイズと余白だけで階層を作る