石見銀山 群言堂（Iwamiginzan Gungendo） DESIGN.md

石見銀山 群言堂（https://www.gungendo.co.jp/）のデザイン仕様書。 島根県大田市大森町——世界遺産・石見銀山の麓、人口 400 人ほどの集落に本社を置く衣料・生活用品のブランド。1989 年創業（株式会社石見銀山生活文化研究所）。「根のある暮らし」を掲げ、過疎の町に残ることそのものをブランドの主題にしている。 サイトの最大の特徴は 全ページが明朝体 1 書体（Zen Old Mincho）だけで組まれていること。ヘッダー、ナビ、商品名、価格、ボタンのラベル、カートの個数バッジまで、UI の全部が明朝。EC サイトでこれをやり切っている例はほとんどない。 もうひとつは 地色が白でないこと。#e2dfdd という温かみのある薄いグレージュがページ全体の地で、商品写真と白いカードがその上に浮く。**「紙ではなく、生成りの布の上に置いた」**質感になる。 プラットフォームは FutureShop（fs-l- / fs-c- のクラス接頭辞）。テンプレート由来の部品と、独自の gun_ 接頭辞の部品が混在する。 実サイトの computed style 実測（2026-07-31 取得。トップ＋服カテゴリ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体 1 本で、EC の全部を組む。 「読み物は明朝、UI はゴシック」という一般的な分業を採らない。カートボタンも価格も送料の注記も明朝で組むことで、サイト全体が商品カタログというより一冊の本に近い手触りになる
• 群言堂について: 商品は藍・墨・生成りといった低彩度の染めものが中心。サイトの配色もそれに合わせて、彩度を持つのは CTA の茶色 #875d45 ただ 1 色。この茶は革・土・染めの色であって、EC でよくある「目を引くための原色」ではない
• 密度: 中程度。商品グリッドは 3〜4 列で密だが、地色が沈んだグレージュなので白背景の EC より視覚的にうるさくない
• キーワード: Zen Old Mincho 単一、#e2dfdd のグレージュ地、#875d45 の茶、letter-spacing: normal、7px の額縁ボーダー
• 特徴:
  • font-family: "Zen Old Mincho", serif の 1 行が全域。和文・欧文・数字・記号のすべてがこの明朝。電話番号「050-3503-1906」も価格も明朝の数字で出る
  • letter-spacing が全域 normal。明朝体のサイトは字間を開けたくなるが、ここは一切開けない。Zen Old Mincho の字面がもともとゆったりしているため、追加の字送りが要らない
  • 地色 #e2dfdd が「白の代わり」。カードやモーダルだけが #ffffff で、それが紙として浮く構造。白を地色に使うと設計が壊れる
  • 文字色が #3a4145（青みのあるチャコール）。純黒でも純グレーでもなく、わずかに青を含む。グレージュの地に対して補色寄りに置くことで、沈んだ地の上でも文字が締まる
  • border: 7px solid #e8e8e8 という極太の額縁が特徴的な部品として存在する（radius 5px と組む）。1px の罫ではなく面としてのボーダーで、写真の周りに余白代わりの枠を作る
  • border-radius が 0 / 2 / 3 / 5 / 9 / 15px と細かく散っている。FutureShop テンプレート由来の値と独自実装が混在しているため。新規実装では 0 / 3px の 2 択に寄せるのが原典の印象に近い
  • 影はほぼ使わない。実測で見つかったのは 0 0 2px rgb(178,178,178) の 1 種類だけ
  • font-feature-settings は normal（palt なし）

2. Color Palette & Roles

CSS Custom Properties は定義されていない（FutureShop テンプレート＋独自 CSS）。以下はすべて computed style の実測値。

Brand（ブランド）

• Gungendo Brown (#875d45): ブランド色。サイトで唯一の彩度。カートに入れるボタン、カート個数のバッジ、モーダルの主 CTA。革・土・染めの茶
• Brown Border (#925e33): 商品リスト内のボタンだけが持つ、茶より一段黄みに寄せた縁の色（1px solid）
• Ink (#3a4145): 文字色。青みのあるチャコール。純黒を使わない
• Paper（地色） (#e2dfdd): ページ地色。温かみのある薄いグレージュ。body に直接指定

Surface（面）

注: 面が #e2dfdd → #ebe9e8 → #f6f5f5 → #f7f7f7 → #ffffff の 5 段でごく浅く上がっていく。隣の段との差が 3〜9 しかないので、罫を引かずに面だけで区切りが成立する。

Semantic（意味的な色）

• セール色 #862800 はブランド茶 #875d45 の「彩度を上げて暗くした」隣。赤を新規に持ち込まず、ブランド茶の系統の中でセールを表現している——ここがこのサイトの配色設計でいちばん巧い所
• #667895（副 CTA）だけが寒色。「買う（茶・暖色）」と「待つ・知らせを受け取る（青・寒色）」を色温度で分けている
• 成功・エラーの専用色は定義されていない。必要なら副 CTA の #667895 と セール色 #862800 を流用する

色数のまとめ

彩度を持つ色は 5 つだけ（#875d45 / #667895 / #862800 / #3572b0 / #1e5d9b）。うち 2 つはリンク色なので、面として塗られる色は実質 3 色。

3. Typography Rules

3.1 和文フォント

• 明朝体: Zen Old Mincho（Google Fonts）。サイト全域でこれ 1 書体のみ。ウェイトは 400 / 500 / 700 の 3 段
• ゴシック体: 使わない。例外は SNS アイコン等の極小ラベル（10px）で、ここだけヒラギノ角ゴのスタックに落ちる

Zen Old Mincho について: Zen フォントシリーズの明朝体で、Google Fonts で配信されている数少ない本格的な日本語明朝。「Old」の名のとおり、現代的な明朝（游明朝・Noto Serif JP）よりも仮名が大ぶりで、横画が太め。EC のような小さい文字でも潰れにくいのは、この字面の設計による。Google Fonts なので、プレビューでも原典と同じ書体が再現できる（Adobe Fonts のようなドメイン制限がない）。

3.2 欧文フォント

• 専用の欧文フォントを持たない。数字も英字も Zen Old Mincho の内蔵グリフで組む
• 電話番号「050-3503-1906」（19px 相当）も明朝の数字で出る。ここに欧文サンセリフを混ぜないのがこのサイトの一貫性

3.3 font-family 指定

css/* 全域 */
font-family: "Zen Old Mincho", serif;

/* 例外: 極小アイコンラベルのみ */
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ,
             Osaka, "MS PGothic", arial, helvetica, sans-serif;

html<!-- Google Fonts の読み込み -->
<link href="https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700&display=swap" rel="stylesheet">

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

• 和文明朝 → serif の 2 段だけ。游明朝・ヒラギノ明朝へのフォールバックを持たない（Google Fonts を必ず読み込む前提）
• 実装では中間の和文明朝を足しておくのが安全:

cssfont-family: "Zen Old Mincho", "Hiragino Mincho ProN", "游明朝", YuMincho,
             "MS PMincho", serif;

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

letter-spacing は全域 normal。 明朝体のサイトでありながら字間を一切開けない。

• ウェイトは 400 / 500 / 700 の 3 段。500（Medium）を見出しに積極的に使うのが特徴で、700 は「特集の大見出し」「ヘッダーのユーティリティ」といった限られた場所だけ
• 見出しの行間が 1.2 と詰まっている（36px → 43.2px、24px → 28.8px）。明朝の縦画が揃うので、詰めても読める
• 本文は 1.5、読み物だけ 1.8。「商品情報＝ 1.5／読みもの＝ 1.8」の 2 段構え
• カート個数のバッジが 8px の明朝 700。この極小サイズでも明朝を貫く

3.5 行間・字間

• 本文の行間: 1.5（16px → 24px）
• 読み物の行間: 1.8（16px → 28.8px）
• 見出しの行間: 1.2 〜 1.4
• 字間: 全域 normal（0）

ガイドライン:

• 明朝だからといって letter-spacing を開けない。Zen Old Mincho は字面が広めなので、追加の字送りを入れると間延びする
• 見出しは 1.2 まで詰める。明朝の縦画の並びが揃うため、ゴシックより詰めても崩れない
• 本文 1.5 は日本語としては標準的だが、読み物は 1.8 へ上げる。用途で行間を切り替える

3.6 禁則処理・改行ルール

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

• 商品名（「楊柳ショートパンツ」等）はグリッド内で 2 行に収める前提。3 行になる長さは避ける
• 色番の「ぎんねず（B）」のような括弧付きの表記は改行させない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全域 */

• palt を使っていない。字間 normal と合わせて、Zen Old Mincho の字送りをそのまま出す方針
• 明朝体に palt を掛けると仮名が寄って印象が変わるため、この書体では入れないのが正解

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary（カートに入れる／購入手続きへ）

• Background: #875d45
• Text: #ffffff
• Border: 1px solid #875d45
• Border Radius: 3px
• Padding: 12px 18px
• Font: 12px / 400

Primary（商品リスト内）

• Background: #875d45
• Text: #ffffff
• Border: 1px solid #925e33 ← 縁だけ一段黄みに寄せる
• Border Radius: 0px
• Padding: 5px 10px
• Font: 16px / 400

Secondary（入荷お知らせ）

• Background: #667895
• Text: #ffffff
• Border: 1px solid #667895
• Border Radius: 3px
• Padding: 12px 18px
• Font: 12px / 400

Neutral

• Background: #646464
• Text: #ffffff
• Border Radius: 0px
• Padding: 8px
• Font: 16px / 400

Outline

• Background: transparent
• Text: #3a4145
• Border: 1px solid #3a4145
• Border Radius: 0px
• Padding: 4px 8px
• Font: 12px / 400

Badges

Sale

• Background: #862800
• Text: #ffffff
• Border Radius: 2px
• Padding: 5px 7px
• Font: 10px / 400

Outline（NEW・再入荷・予約商品等）

• Background: transparent（商品写真の上に重ねるときは #ffffff を敷く）
• Text: #3a4145
• Border: 1px solid #3a4145
• Border Radius: 2px
• Padding: 5px 7px
• Font: 10px / 400

注: 文字色も罫も #3a4145 なので、暗い商品写真の上に透明のまま重ねると読めない。カード面（白）の上では透明でよいが、写真に重ねる位置に置くなら background: #ffffff を敷く。塗りのある #862800 のセール バッジにはこの問題がない。

Cart Count

• Background: #875d45
• Text: #ffffff
• Border Radius: 9px（小さな円）
• Font: 8px / 700

Frame Card（額縁ボーダー）

このサイトを特徴づける部品。

• Background: #ffffff または transparent
• Border: 7px solid #e8e8e8 ← 1px の罫ではなく面としてのボーダー
• Border Radius: 5px
• Padding: 0 〜 30px
• Font: 16px / 700（見出し）／ 19px / 400（本文）

考え方: 7px の薄いグレーの枠が、写真やコンテンツの周りに余白代わりの縁を作る。影を使わずに「別の層」を表現する手段。枠の色 #e8e8e8 は地色 #e2dfdd より 6 だけ明るいので、地の上でごく浅く浮く。

Cards

• Background: #ffffff
• Border: なし（または上記の額縁ボーダー）
• Border Radius: 3px
• Padding: 15px 20px 15px 30px / 20px 20px 20px 30px（左だけ広い非対称）
• Shadow: なし（例外は下記 Elevation）

Inputs

• Background: #ffffff
• Border Radius: 0px
• Padding: 3px 5px 3px 30px（左 30px は検索アイコン分）
• Font: 13px（ヘッダー検索）／ 20px（大きい検索欄）
• Text: #333333

注: 入力欄の文字色だけ #333333 で、本文の #3a4145 と違う。FutureShop テンプレート由来。新規実装では #3a4145 に揃える。

Color Swatch

• Overlay: rgba(30, 30, 30, 0.7)
• Text: #ffffff
• 商品画像の上に色番（「ぎんねず（B）」「くろ」）を重ねる

5. Layout Principles

Container

• 商品グリッドは 3〜4 列。読み物・特集は 1〜2 列
• Padding (horizontal): カード内は 20px 〜 30px（左が広い非対称）

Spacing

寸法トークンは存在しない。実測から読み取れる刻み:

Radius

0 / 2 / 3 / 5 / 9 / 15px と散っている（テンプレートと独自実装の混在）。

新規実装では 0px（入力欄・リスト内ボタン）と 3px（ボタン・カード）の 2 択に寄せる。 バッジは 2px。それ以外は原典の継ぎ足しなので踏襲しなくてよい。

6. Depth & Elevation

影はほぼ使わない。 実測で見つかったのは 1 種類だけ。

• 奥行きは面色の 5 段（#e2dfdd → #ebe9e8 → #f6f5f5 → #f7f7f7 → #ffffff）で作る。隣との差が 3〜9 しかない浅い階段
• もう 1 つの手段が 7px solid #e8e8e8 の額縁ボーダー。影の代わりに太い枠で層を分ける

7. Do's and Don'ts

Do（推奨）

• font-family: "Zen Old Mincho", serif を全域に適用する。ボタン・価格・バッジも明朝で組む
• letter-spacing: normal を守る（明朝でも字間を開けない）
• ページ地色を #e2dfdd にする。白は「カードの色」として取っておく
• 文字色は #3a4145（青みのあるチャコール）。純黒を使わない
• セールの色はブランド茶の系統（#862800）から取る。原色の赤を持ち込まない
• **「買う」は暖色（#875d45）、「待つ・知らせを受け取る」は寒色（#667895）**で分ける
• 見出しの行間は 1.2 まで詰める（明朝は詰めても崩れない）
• 面の階段は #e2dfdd / #ebe9e8 / #f6f5f5 / #ffffff から選ぶ
• 影の代わりに 7px solid #e8e8e8 の額縁ボーダーを使う
• Google Fonts から Zen Old Mincho の 400 / 500 / 700 を読み込む

Don't（禁止）

• UI をゴシック体に切り替えない。「読み物は明朝、ボタンはゴシック」という分業をしない——それがこのサイトの唯一最大の個性
• ページ地色を #ffffff にしない。白地にすると「布の上」の質感が消え、ただの EC になる
• letter-spacing を開けない（明朝サイトでやりがちだが、Zen Old Mincho では間延びする）
• font-feature-settings: "palt" を足さない（明朝の仮名が寄って印象が変わる）
• 彩度の高い赤・緑を新規に持ち込まない。セールは #862800、注意は #667895 で足りる
• #875d45 以外の彩度を CTA に使わない（副次アクションの #667895 を除く）
• 影でカードを浮かせない（面色 5 段と額縁ボーダーで階層を作る）
• 角丸を 5 / 9 / 15px まで新規に増やさない（0 / 2 / 3px に寄せる）
• 入力欄の文字色に #333333 を使わない（テンプレート由来の揺れ。#3a4145 に揃える）
• 本文の行間を 1.2 に詰めない（見出し用の値。本文は 1.5、読み物は 1.8）

8. Responsive Behavior

Breakpoints

デスクトップファースト（max-width）が主。max-width: 767px が実質の分岐点。

• max-width: 767px と min-width: 767px が両方ある（767px ちょうどが二重に当たる）。新規実装では 767px / 768px で分ける
• モバイルでは nav.gun_sp_menu（#f6f5f5 の全画面ドロワー）に切り替わる

タッチターゲット

• Primary ボタン: 18px（行）+ 12px × 2 + 1px × 2 = 44px → 44px 基準をちょうど満たす
• 商品リスト内ボタン: 24px + 5px × 2 + 1px × 2 = 36px → 基準未満。主要 CTA には使わない
• バッジ（5px 7px / 10px）は押せない表示要素なので対象外

フォントサイズの調整

• 本文 16px はブレークポイントで変えない
• Display（36px）はモバイルで 24px 前後へ
• 商品名（16px / 500 / 1.3）はモバイルでも維持する（グリッドが 2 列に減るため縮める必要がない）

9. Agent Prompt Guide

クイックリファレンス

Brand (CTA):      #875d45（茶。サイトで唯一の主要彩度）
CTA Border:       #925e33（商品リスト内ボタンの縁だけ）
Secondary CTA:    #667895（入荷お知らせ等。寒色）
Sale:             #862800（ブランド茶の系統。原色の赤にしない）
Neutral CTA:      #646464
Link:             #3572b0 / #1e5d9b（商品名）
Text:             #3a4145（青みのあるチャコール。純黒にしない）
Background:       #e2dfdd（グレージュ。白ではない）
Surface:          #ffffff（カード） / #ebe9e8 / #f6f5f5 / #f7f7f7
Frame Border:     7px solid #e8e8e8（radius 5px）
Swatch Overlay:   rgba(30, 30, 30, 0.7)
Font:             "Zen Old Mincho", serif   ← 全域。UI も明朝
Weights:          400 / 500 / 700
Body Size:        16px / weight 400
Line Height:      1.5（本文） / 1.8（読み物） / 1.2〜1.4（見出し）
Letter Spacing:   normal（明朝でも開けない）
Font Feature:     なし（palt を足さない）
Radius:           0px / 2px（バッジ） / 3px（ボタン・カード）
Shadow:           none（例外: 0 0 2px rgb(178,178,178)）
Breakpoint:       max-width 767px（主分岐）

プロンプト例

石見銀山 群言堂のデザインシステムに従って、商品一覧グリッドを作成してください。
- font-family: "Zen Old Mincho", serif を全体に適用（ボタン・価格・バッジも明朝で組む）
- letter-spacing: normal（開けない） / font-feature-settings は指定しない
- ページ背景: #e2dfdd（白にしない）
- 商品カード: 背景 #ffffff / radius 3px / 影なし
- 商品名: 16px / 500 / line-height 20.8px / color #1e5d9b
- 価格: 16px / 400 / color #3a4145（明朝の数字で出す）
- 本文・説明: 16px / 400 / line-height 24px / color #3a4145
- セクション見出し: 24px / 500 / line-height 28.8px
- 「カートに入れる」: 背景 #875d45 / 文字 #ffffff / border 1px solid #875d45 /
                     radius 3px / padding 12px 18px / 12px
- 「入荷お知らせ」: 背景 #667895 / 文字 #ffffff / radius 3px（寒色で「買う」と区別）
- 「50%OFF」バッジ: 背景 #862800 / 文字 #ffffff / radius 2px / padding 5px 7px / 10px
- 「NEW」バッジ: transparent / border 1px solid #3a4145 / radius 2px
- 色番のラベルは商品画像の上に rgba(30,30,30,0.7) の下地で重ねる
- 影は使わない。層を分けたいときは border: 7px solid #e8e8e8 の額縁を使う
- ブレークポイントは max-width: 767px の 1 本