Hakuhodo Brushes

実サイトの computed style 実測値 + CSS Custom Properties。すべて hex 表記。 白鳳堂は漆黒＋純白のモノトーンを基調に、バッジ青緑とアナウンス朱色の2色だけを有彩色として使う。

Brand

• Brand Black (#111111): 主要 CTA 背景色（--colorBtnPrimary）。ブランドの基調色（rgb(17, 17, 17)）
• Brand Black Light (#2b2b2b): ボタンホバー時の明度アップ（--colorBtnPrimaryLight）
• Brand Black Dim (#040404): ボタンプレス時の暗転（--colorBtnPrimaryDim）

Accent

• Badge Teal (#5ba390): 「おすすめ」バッジの背景色（rgb(91, 163, 144)）。唯一の有彩色アクセント — 職人が厳選した商品を示す
• Announcement Orange (#fa4616): アナウンスメントバー背景・カートドット・セール価格テキスト（--colorAnnouncement / --colorCartDot / --colorTextSavings）

Surface

• Page Background (#ffffff): ページ全体・ヘッダー・フッター・ナビ・ドロワーの純白（--colorBody / --colorNav / --colorFooter / --colorDrawers）
• Hero / Large Image (#0f0f0f): ヒーロースライドショーのダーク面（--colorLargeImageBg）
• Surface Dim (#f2f2f2): ドロワー・モーダルの薄いグレー背景（--colorBodyDim / --colorDrawersDim）
• Modal Background (#e6e6e6): モーダル背景（--colorModalBg）

Text / Foreground

• Text Body (#000000): 本文・リンク・ナビ・フッター・ドロワーのテキスト（--colorTextBody / --colorLink / --colorNavText / --colorFooterText）
• Text Price (#1c1d1d): 商品価格・セールタグ（--colorPrice / --colorSaleTag）。純黒よりわずかに柔らかい
• Text Inverse (#ffffff): ダーク面（ヒーロー・CTAボタン・アナウンスバー）上の白文字（--colorHeroText / --colorBtnPrimaryText / --colorAnnouncementText）

Border / Divider

• Border Default (#e8e8e1): 入力欄・CTA secondary・ドロワーの枠線（--colorBorder / --colorDrawerBorder）。微かにウォームなグレー
• Image Overlay (#000000 opacity 0.1): 画像オーバーレイ・グリッドオーバーレイ（--colorImageOverlay / --colorGridOverlay）

Semantic（補完）

• 実 UI に表面化したエラー・成功色は確認できない
• アラートを追加する場合はバッジ青緑 #5ba390（成功系）、アナウンス朱色 #fa4616（警告・エラー系）を流用するのが自然

3.1 和文フォント

白鳳堂は明朝体を全面的に使用する。ゴシック体は一切使わない。

• 採用: ＭＳ Ｐ明朝 ("ＭＳ Ｐ明朝", "MS PMincho")
• フォールバック: serif, serif（二重指定は Shopify テーマの仕様）
• 役割: 見出し・本文・CTA・ナビ・フッタすべてを統一。職人の手仕事にふさわしい伝統的な書体選択

Note: ＭＳ Ｐ明朝は Windows / macOS に標準搭載の明朝体。Web フォントは使用していない。preview.html では Google Fonts の Shippori Mincho を代替に使う。macOS 環境では ヒラギノ明朝 ProN が近い印象になる。

3.2 欧文フォント

• 欧文専用フォントは未使用。明朝ファミリーの欧文グリフ（MS PMincho 内包）で対応
• 例外: 言語切替 select が arial を使用（ブラウザデフォルト）

3.3 font-family 指定

実サイトの CSS Custom Properties:

/* 全要素共通（--typeBasePrimary + --typeBaseFallback） */
font-family: "ＭＳ Ｐ明朝", "MS PMincho", serif, serif;

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

• Windows: ＭＳ Ｐ明朝がそのまま適用
• macOS: MS PMincho が無い場合、serif フォールバックでヒラギノ明朝が適用される
• AI で再現する場合: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif に置換可

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

実測値（トップページ + 商品一覧ページ、2026-05-21 取得）

3.5 行間・字間

• 本文の行間 (line-height): 1.6（25.6 / 16。CSS変数 --typeBaseLineHeight: 1.6）
• 見出し・ヒーローの行間: 1.0（line-height = font-size。CSS変数 --typeHeaderLineHeight: 1）
• 本文の字間 (letter-spacing): 0.025em（0.4px / 16px。CSS変数 --typeBaseSpacing: 0.025em）
• CTA の字間: 0.3em（3.9px / 13px）— 白鳳堂の CTA を最も特徴づける値
• 見出しの字間: 0em / normal（CSS変数 --typeHeaderSpacing: 0.0em）

ガイドライン:

• 本文は letter-spacing: 0.025em で明朝の字間をわずかに開く — 職人の丁寧さを字間で表現
• CTA は letter-spacing: 0.3em で大きく開く — ラグジュアリーブランドに共通するワイドスペーシング手法
• 見出し（h1〜h2）は line-height: 1.0 のタイト設定 — 大きな文字サイズで迫力を出す

3.6 禁則処理・改行ルール

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

• 商品名（"S100シリーズ 朱軸"）は短めで改行しにくい
• 長文の説明テキストは標準的な禁則処理

3.7 OpenType 機能

font-feature-settings: normal;

• palt / kern を有効化していない — ＭＳ Ｐ明朝の素の字面メトリクスをそのまま使用
• 「Ｐ」は「プロポーショナル」の意で、元々欧文がプロポーショナル幅の明朝体

3.8 縦書き

• 該当なし。横書きのみ
• 書道筆のページでは writing-mode: vertical-rl が映えるが、現サイトは横書き統一

Buttons

白鳳堂の CTA は直角矩形 + ワイドレタースペーシングに統一。border-radius は一切使わない。

Primary CTA（"シリーズを見る" "詳細を見る" 等）

• Background: #111111（--colorBtnPrimary）/ ダーク面では #000000
• Text: #ffffff
• Border: 1px solid transparent / ダーク面では 0px none
• Padding: 11px 20px
• Border Radius: 0px（--buttonRadius）
• Font: 13px / weight 700 / line-height 1.42 / letter-spacing 0.3em
• Hover: background #2b2b2b（--colorBtnPrimaryLight）

Inverse CTA（ダーク面上 "詳細を見る" "シリーズを見る" 等）

• Background: transparent
• Text: #ffffff
• Border: 2px solid #ffffff
• Padding: 11px 20px
• Border Radius: 0px
• Font: 13px / weight 700 / line-height 1.42 / letter-spacing 0.3em

Secondary CTA（"すべてを見る" "イベント情報を見る" 等）

• Background: transparent
• Text: #000000
• Border: 1px solid #e8e8e1（--colorBorder）
• Padding: 8px 14px
• Border Radius: 0px
• Font: 12px / weight 400 / line-height 1.42 / letter-spacing 0.3em

Circle Button（スライドショー矢印）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #e8e8e1
• Border Radius: 50%
• Padding: 10px
• Font: 13px / weight 700

Inputs

検索入力（header）

• Background: transparent
• Border: 0px none（ボーダーレス）
• Padding: 8px 10px
• Font: 16px / 明朝 / weight 400
• Color: #000000

ニュースレター入力（footer）

• Background: #ffffff
• Border: なし（下線スタイル）
• Padding: 10px 45px 10px 0px（右に送信ボタン分の余白）
• Font: 13.6px / 明朝 / weight 400
• Color: #000000

標準入力

• Background: transparent
• Border: 1px solid #e8e8e1
• Border (focus): 1px solid #111111（推奨 — ブランドブラック）
• Border Radius: 0px
• Padding: 8px 10px
• Font: 16px / 明朝 / weight 400
• Color: #222222

Cards / Product Cards

商品一覧ページのコレクションカード:

• Background: #ffffff
• Border: なし
• Border Radius: 0px
• Shadow: なし（フラット）
• 構造:
• 商品画像（正方形に近い比率）
• コレクション名（18px / weight 400 / #000000）
• サブテキスト（14.4px / weight 400 / letter-spacing 0.2em）
• 価格（16px / #1c1d1d）
• 「おすすめ」バッジ（#5ba390 背景 / 白文字）

Header / Nav

• Background: #ffffff（--colorNav）
• Color: #000000（--colorNavText）
• Shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px 0px（極薄シャドウ）
• Padding: 20px 0px
• ナビアイコン: 13px / weight 400 / padding 7.5px 12px

Footer

• Background: #ffffff（--colorFooter）
• Color: #000000（--colorFooterText）
• Padding: 60px 0px
• メルマガ案内: 13.6px / 明朝 / weight 400
• コピーライト: 12px / 明朝 / padding 7.5px 0px
• ラベル: 10.2px / letter-spacing 0.3em

Badge

• 「おすすめ」バッジ:
• Background: #5ba390
• Text: #ffffff（推定）
• Border Radius: 0px
• Font: small / weight 400

Spacing Scale（推奨 8px グリッド）

Breakpoints

モバイル時の調整

• Hero Title: 55px → 32px 程度に縮小
• ナビは drawer（スライドメニュー）に切替。ドロワーリンクは 22.4px / padding 15px
• 商品グリッド: 4 → 2 → 1 カラム
• CTA サイズは変更しない（タッチターゲットは padding で確保済み）

タッチターゲット

• Primary CTA: padding 11px 20px + font 13px + line-height 18.46px = 高さ約 40.5px。横幅は letter-spacing 0.3em + padding で十分
• タッチ最小サイズ 44x44px に近いが、text の横幅で補う

ダークモード

• 対応なし。ライトモード固定
• ヒーローセクションの #0f0f0f ダーク面がダーク的役割を担う