THE（ザ） DESIGN.md

THE / THE SHOP ONLINE（https://the-web.co.jp/）のデザイン仕様書。 中川政七商店グループが運営する「THE」のデザインプロダクト EC。 実サイトの computed style 実測（2026-06-23 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地（#ffffff）を基調にしたモノクローム・エディトリアル。中央寄せのセリフ（明朝体）ワードマーク、たっぷりの余白、プロダクトを主役にした静謐なレイアウト。ギャラリー／雑誌のような佇まい
• 密度: 本文の line-height は 1.8 と広め。見出しはウェイトに頼らずサイズ差で階層を作る（全要素 weight 400 ＝レギュラー基調）
• キーワード: ミニマル、モノクローム、明朝体エディトリアル、静謐、プロダクト主役
• 特徴:
  • 和文に Web フォント Noto Serif JP（明朝体） を採用。見出し・本文ともに明朝で組み、上品で端正な印象を作る
  • 約物（半角カナ・約物）は YakuHanJP が担当し、句読点・括弧のアキを詰めて緊張感のある組版にする
  • ラテン文字・数字は Roboto（サンセリフ）。和文＝明朝 × 欧文／数字＝サンセリフのエディトリアルなコントラストが識別点
  • フォント指定の OS フォールバックはゴシック（ヒラギノ角ゴ、游ゴシック、メイリオ）だが、Noto Serif JP がロード済み Web フォントのため、和文は実際には明朝でレンダリングされる
  • ボタン・枠線はすべて直角（radius 0px）のハードエッジ + ヘアライン。ピル／角丸を使わないのが identity
  • 配色はモノクロームを基本とし、唯一の暖色アクセント＝ゴールド／ブラウン #a26b25（カート／ドロワーのアクションボタン）と、アラート用の朱赤 #ff4f33（通知ドット）のみを差し色に使う
  • ページ最下部に黒のアナウンスバーを固定表示
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand / Accent

• Accent Gold / Brown (#a26b25): 唯一の暖色アクセント。カート（ドロワー）アクションボタンに使用
• Accent Alert Vermilion (#ff4f33): カート通知の小さなドット（アラート）専用

CTA / Buttons

• Primary Button: 背景 #1c1d1d / 文字 #ffffff / radius 0px（直角）/ border none
• Checkout / Secondary Button: 背景 #333333 / 文字 #ffffff / radius 0px / padding 17px
• Cart / Drawer Action: 背景 #a26b25（ゴールド）/ 文字 #ffffff / radius 0px
• Outline / Ghost: 背景 transparent / 文字 #1c1d1d / border 1px solid #1c1d1d / radius 0px

Neutral

Semantic（推奨値）

実サイトには明確な成功色の表面化は確認されなかった。EC として推奨する補完値:

• Danger / Alert: #ff4f33（実サイトのアラート朱赤を流用）
• Success: #2e7d32（一般的なグリーン。モノクロームに馴染む沈んだ色味）

Header / Overlay

• Header BG: #ffffff（不透明白）
• Position: fixed / top: 0（中央寄せワードマーク）
• Announcement Bar: #000000 背景 / 白文字 / fixed / bottom: 0

3. Typography Rules

3.1 和文フォント

• 明朝体（メイン）: Noto Serif JP（Google Fonts / Web フォント）— 見出し・本文ともに使用
• 約物: YakuHanJP（半角約物）— 句読点・括弧のアキ詰め
• ゴシック体: フォールバックとしてのみ存在（ヒラギノ角ゴ → 游ゴシック → メイリオ）。Web フォントがロードされれば明朝で表示されるため、実際には使われない

3.2 欧文フォント

• サンセリフ（ラテン・数字）: Roboto（Google Fonts / Web フォント）
• 和文＝明朝 × 欧文・数字＝サンセリフ（Roboto）の対比がエディトリアルな質感を生む

3.3 font-family 指定

css/* 和文 見出し・本文（明朝） */
font-family: YakuHanJP, "Noto Serif JP", -apple-system, "system-ui",
  "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", 游ゴシック, YuGothic, メイリオ, Meiryo,
  "ＭＳ Ｐゴシック", sans-serif;

/* ラテン文字・数字（Roboto / サンセリフ） */
font-family: Roboto, -apple-system, "Noto Sans JP", "Segoe UI",
  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 游ゴシック, YuGothic,
  メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

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

• 和文チェーンの先頭は YakuHanJP（約物のみカバー）→ Noto Serif JP（明朝の本体）。Web フォントがロードされれば和文は明朝でレンダリングされる
• ただし末尾の OS フォールバックはゴシック（ヒラギノ角ゴ、游ゴシック、メイリオ）になっている。Noto Serif JP が読み込めない環境ではゴシックに落ちる点に注意
• ラテン文字・数字は Roboto が担当。明朝の和文と Roboto のラテンが混植され、エディトリアルなコントラストを作る

代替フォント注記は不要: Noto Serif JP も Roboto も Google Fonts で配信されているため、preview.html では実フォントをそのまま読み込める。 https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap

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

実測値（トップページ／商品ページ、2026-06-23 取得）

ウェイトの原則: 実測上、ほぼ全要素が weight 400（レギュラー）。見出しはサイズ差で階層を作り、太字（700）を多用しない。重みを抑えたセリフ設計が identity なので、勝手に bold を発明しない。

3.5 行間・字間

行間 (line-height) — 実測:

• リード文 (20px): 1.8（36px）
• 本文 (14px): 1.0〜1.8（用途で変動。読み物は 1.8、ナビ・1行ラベルは 1.0〜1.3）
• 大見出し (40px): 1.2（48px。明朝の大見出しを締める）
• ラテンキャプション (16px): 1.3（20.8px）

字間 (letter-spacing) — 実測:

• 和文（見出し・本文）: 0.35px（14px 上で 0.025em）。明朝に控えめなトラッキングを与えて端正に
• ラテンキャプション: 1.6px（16px 上で 0.1em）。Roboto の英字を大きく開いてエディトリアルに
• 小／フッター (10px): 0.1em

ガイドライン:

• 和文（明朝）の line-height は読み物で 1.8 を確保する
• ラテン見出し（Roboto）は letter-spacing 0.1em で字間を大きく開き、雑誌的な抜け感を出す
• 和文の letter-spacing は 0.025em 程度に抑え、明朝の自然なリズムを壊さない

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;

• ラテン見出し・1行ラベルは white-space: nowrap で改行させない
• 価格・タグは white-space: nowrap

3.7 OpenType 機能

css/* 約物の詰めは YakuHanJP が担当 */
font-family: YakuHanJP, "Noto Serif JP", ...;
font-feature-settings: normal;

• 句読点・括弧のアキ詰めは **palt ではなく YakuHanJP（半角約物フォント）**で実現している
• そのため font-feature-settings: "palt" 1 は使わない方針。normal のまま YakuHanJP に委ねる

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary Button — "カートに入れる" 等

• Background: #1c1d1d
• Text: #ffffff
• Padding: 17px
• Border Radius: 0px（直角）
• Font: 和文 stack, 14px, weight 400
• Border: none

Checkout / Secondary Button

• Background: #333333
• Text: #ffffff
• Padding: 17px
• Border Radius: 0px
• Font: 和文 stack, 14px, weight 400

Cart / Drawer Action（ゴールドアクセント）

• Background: #a26b25
• Text: #ffffff
• Padding: 17px
• Border Radius: 0px
• Font: 和文 stack, 14px, weight 400

Outline / Ghost Button

• Background: transparent
• Text: #1c1d1d
• Border: 1px solid #1c1d1d
• Padding: 16px（border 分を考慮）
• Border Radius: 0px
• Font: 和文 stack, 14px, weight 400

Inputs

Text Input

• Background: #ffffff（または地色 #e6e6e6）
• Border: 1px solid #1c1d1d（ヘアライン）
• Border Radius: 0px（直角）
• Padding: 12px
• Font: 和文 stack, 14px, weight 400

Focus 状態

• Border: 1px solid #1c1d1d（維持）+ box-shadow: 0 0 0 2px rgba(28,29,29,0.15)（推奨）

Cards / Surfaces

Product Card

• Background: #ffffff
• Border: none（影なし）
• Border Radius: 0px（画像も直角）
• 画像プレースホルダー地色: #eeeeee / #e6e6e6
• 区切り・タイトル間は余白で表現

Dim Surface

• Background: #f2f2f2
• Border Radius: 0px

Header

• Background: #ffffff（不透明白）
• Border: 下端にヘアライン（1px solid #e6e6e6 推奨）
• Position: fixed / top: 0
• ワードマークは中央寄せのセリフ

Announcement Bar（最下部固定）

• Background: #000000
• Text: #ffffff
• Position: fixed / bottom: 0
• Font: 14px, weight 400

5. Layout Principles

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

Container

• Max Width: 1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 24〜32px
• 中央寄せ・たっぷりの余白でプロダクトを主役にする

Border Radius Scale

THE では radius を一切使わない。ピル・角丸は使用しない。

Grid

• Columns: 推奨 12 カラム（実装は Flexbox / CSS Grid）
• Gutter: 16〜24px
• プロダクトカード: 4列（desktop）→ 2列（tablet）→ 2列／1列（mobile）

6. Depth & Elevation

• 実測ではカード・ボタンの shadow はほぼ none。非常にフラット
• 立体感・分離は 余白とヘアライン（#e6e6e6） で表現する
• ドロップシャドウに頼らず、白地と直角の構成で静謐さを保つ

7. Do's and Don'ts

Do（推奨）

• 和文は Noto Serif JP（明朝） + YakuHanJP（約物） で組む。読み物の line-height は 1.8
• ラテン文字・数字は Roboto を使い、明朝の和文と混植する
• ラテン見出し・キャプションは letter-spacing 0.1em で字間を開き、エディトリアルな抜け感を出す
• ボタン・入力・カード・画像はすべて radius 0px（直角） にする
• 配色は モノクローム（#1c1d1d / #ffffff / #999999 / #f2f2f2）を基本にする
• 暖色アクセントは ゴールド #a26b25 をカート系アクションに限定して使う
• アラート（通知ドット）は 朱赤 #ff4f33 のみに使う
• 階層はサイズ差で作る（weight 400 を基調に、太字を多用しない）
• 余白とヘアラインで分離する（shadow は基本 none）

Don't（禁止）

• ボタン・カードに 角丸／ピル（radius ≥ 4px）を使わない。直角がブランドの identity
• 和文に ゴシックを意図的に指定しない（フォールバック以外）。明朝の佇まいを保つ
• 約物詰めに font-feature-settings: "palt" 1 を使わない（YakuHanJP が担当）
• 見出しに安易な bold（700）を発明しない。サイズで階層を作る
• カラフルな差し色を増やさない。暖色は #a26b25、アラートは #ff4f33 のみ
• 立体感のために強いドロップシャドウを多用しない（フラットと余白で見せる）
• 純黒 #000000 を本文に使わない（Text Primary は #1c1d1d。#000000 はアナウンスバー背景専用）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Display Heading: 40px → 28〜32px
• Lead Paragraph: 20px → 16〜18px
• 本文 14px・line-height 1.8 は維持
• プロダクトカード: 4列 → 2列 → 1列
• 最下部アナウンスバーは固定のまま（本文に下部 padding を確保）

タッチターゲット

• Primary Button: 高さ 48px 以上（padding 17px + 14px font）
• 直角のままタップ領域を確保する

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Text Primary / Border / Link: #1c1d1d
Header Text: #222222
Text Secondary: #999999
Footer Dark: #111111
Surface Dim: #f2f2f2
Image Dim: #e6e6e6 / #eeeeee
Background: #ffffff
Announcement Bar: #000000
Accent Gold (cart action): #a26b25
Accent Alert (dot): #ff4f33
Checkout Button BG: #333333

JP Font (明朝): YakuHanJP, "Noto Serif JP", -apple-system, "system-ui",
  "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", 游ゴシック, YuGothic, メイリオ, Meiryo,
  "ＭＳ Ｐゴシック", sans-serif
Latin/Number Font: Roboto, -apple-system, "Noto Sans JP", "Segoe UI", ...
（注: OS フォールバックはゴシックだが、Noto Serif JP がロードされ和文は明朝で表示）

Display Heading: 40px / weight 400 / line-height 1.2 / letter-spacing 0.025em / #1c1d1d
Lead Paragraph: 20px / weight 400 / line-height 1.8 / letter-spacing 0.025em / #1c1d1d
Body / Nav / Link: 14px / weight 400 / line-height 1.0〜1.8 / letter-spacing 0.025em / #1c1d1d
Latin Caption: Roboto 16px / weight 400 / line-height 1.3 / letter-spacing 0.1em
Small / Footer: Roboto 10px / weight 400 / #999999

Border Radius: 0px（全要素・直角）
Primary Button: bg #1c1d1d / white / radius 0px / padding 17px / no border
Checkout Button: bg #333333 / white / radius 0px
Cart Action: bg #a26b25（ゴールド）/ white / radius 0px
Outline: transparent / #1c1d1d text / 1px solid #1c1d1d / radius 0px
Shadow: 基本 none（分離は余白とヘアライン #e6e6e6）
font-feature-settings: normal（palt 非使用。約物は YakuHanJP）
全要素 weight 400 基調（太字を多用しない）

プロンプト例

THE（the-web.co.jp）のデザインシステムに従って、デザインプロダクトの EC 商品一覧と商品詳細を作成してください。
- 和文フォント: YakuHanJP, "Noto Serif JP"（明朝）, ... 末尾 sans-serif フォールバック
- ラテン・数字フォント: Roboto
- 配色: モノクローム（背景 #ffffff / テキスト #1c1d1d / 補足 #999999 / 薄面 #f2f2f2）
- 大見出し: 40px / weight 400 / line-height 1.2 / letter-spacing 0.025em / #1c1d1d
- リード文: 20px / weight 400 / line-height 1.8 / #1c1d1d
- 本文: 14px / weight 400 / line-height 1.8 / letter-spacing 0.025em / #1c1d1d
- ラテンキャプション: Roboto 16px / letter-spacing 0.1em
- ボタンはすべて radius 0px（直角）。Primary は bg #1c1d1d / 白文字 / padding 17px / border none
- チェックアウトボタンは bg #333333、カート系アクションのみゴールド #a26b25
- アウトライン: transparent / 文字・枠 #1c1d1d / 1px solid / radius 0px
- カート通知ドットのアラートは朱赤 #ff4f33 のみ
- box-shadow は基本 none。分離は余白とヘアライン（#e6e6e6）で表現
- 角丸・ピルは使わない（直角が identity）
- 見出しに bold を多用しない（サイズで階層を作る。全要素 weight 400 基調）
- 純黒 #000000 は最下部アナウンスバー背景のみ。本文は #1c1d1d
- font-feature-settings は normal（palt 非使用。約物詰めは YakuHanJP）