群言堂IWAMIGINZAN
050-3503-1906
受付時間:平日 10〜17 時(12〜13 時を除く)
布 : すべてをみる
カラーパレットCOLORS
Gungendo Brown
#875d45
ブランド色。サイトで唯一の主要彩度。革・土・染めの茶
Secondary
#667895
「入荷お知らせ」等。寒色で「買う」と区別
Sale
#862800
ブランド茶の系統。原色の赤にしない
Ink
#3a4145
青みのあるチャコール。純黒を使わない
Paper(地色)
#e2dfdd
ページ地色。白ではない

面は 5 段でごく浅く上がる。隣との差が 3〜9 しかないので、罫を引かずに面だけで区切りが成立する。白(#ffffff)は地色ではなく「カードの色」——地の上に紙として浮く。

#e2dfdd 地
#ebe9e8 帯
#f6f5f5 ドロワー
#f7f7f7 リスト
#ffffff カード

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

50%OFF NEW 再入荷 予約商品
タイポグラフィTYPOGRAPHY

font-family: "Zen Old Mincho", serif の 1 行が全域。ヘッダー、ナビ、商品名、価格、ボタンのラベル、カートの個数バッジ(8px)まで、UI の全部が明朝。「読み物は明朝、ボタンはゴシック」という分業を採らないのが、このサイトの唯一最大の個性。letter-spacing全域 normal——明朝サイトでも字間を一切開けない。

Display / h3
36px w700
lh 43.2px (1.2)
根のある暮らし
Heading / h2
24px w500
lh 28.8px (1.2)
特集いろいろ
Subheading / h3
19px w700
lh 26.6px (1.4)
石見銀山 大森町のこと
Nav / a
19px w400
lh 28.5px (1.5)
服 布 暮らし シリーズ
Body / p(既定)
16px w400
lh 24px (1.5)
島根県大田市大森町。世界遺産・石見銀山の麓にある、人口四百人ほどの集落です。群言堂の本社は、いまもこの町にあります。
読み物 / p
16px w400
lh 28.8px (1.8)
かつて銀を掘る人々でにぎわった町は、鉱山が閉じたあと静かになりました。私たちはそこに残り、土地の暮らしから生まれるものをつくり続けています。用途で行間を切り替える——商品情報は 1.5、読みものは 1.8。
Product Name / h2
16px w500
lh 20.8px (1.3)
楊柳ショートパンツ
Body Small
14px w400
lh 23.8px (1.7)
お届けは通常 3〜5 日ほどいただいております。
Utility
13px w700
lh 19.5px (1.5)
ログイン/新規会員登録
Badge
12px w400
lh 18px (1.5)
カートに入れる
Cart Count
8px w700
lh 17px
3 この極小サイズでも明朝を貫く
例外: 極小ラベル
10px / ヒラギノ角ゴ
唯一のゴシック
SNS アイコンのラベルだけがゴシックに落ちる

ウェイトは 400 / 500 / 700 の 3 段。500(Medium)を見出しに積極的に使い、700 は特集の大見出しとヘッダーのユーティリティだけ。見出しの行間は 1.2 まで詰める——明朝の縦画が揃うので、ゴシックより詰めても崩れない。

新着商品NEW ARRIVALS

「買う」は暖色(#875d45)、「待つ・知らせを受け取る」は寒色(#667895で分ける。色番のラベルは商品画像の上に rgba(30,30,30,.7) の下地で重ねる。価格も明朝の数字で出す——ここに欧文サンセリフを混ぜない。
※ 枠バッジ(NEW・再入荷・予約商品)を写真の上に重ねるときは白(#ffffff)を敷く。文字色も罫も #3a4145 なので、暗い商品写真の上ではそのままだと読めない。

読みものJOURNAL

根のある暮らし

島根県大田市大森町。世界遺産・石見銀山の麓にある、人口四百人ほどの集落です。かつて銀を掘る人々でにぎわったこの町は、鉱山が閉じたあと静かになりました。

私たちは一九八九年、この町で会社をはじめました。都市に出ていくのではなく、ここに残る。そう決めたことが、そのままブランドの主題になりました。服も、布も、暮らしの道具も、すべてこの土地の時間の中から生まれています。

古い家を直して住み、畑を耕し、藍を建てる。特別なことは何もしていません。ただ、根を張るということを、続けているだけです。

ボタンBUTTONS

ボタンのラベルも明朝で組む。ここをゴシックに切り替えると、サイトの個性が丸ごと消える。

Primary #875d45 / radius 3px / padding 12px 18px / 12px18 + 12×2 + 1×2 = 44pxタッチターゲット基準をちょうど満たす)。Secondary #667895。Neutral #646464 / radius 0。Outline 1px solid #3a4145 / radius 0

商品リスト内のボタンだけ radius 0 で、縁が #925e33 と一段黄みに寄る。高さは 36px で 44px 基準に届かないため、主要 CTA には使わない

カードCARDS

カードは #ffffff / radius 3px / 影なし。padding は 20px 20px 20px 30px左だけ広い非対称(原典どおり)。

額縁ボーダー

border: 7px solid #e8e8e8radius 5px。1px の罫ではなく面としてのボーダーで、写真やコンテンツの周りに余白代わりの縁を作る。

影の代わりに使う

枠の色 #e8e8e8 は地色 #e2dfdd より 6 だけ明るいので、地の上でごく浅く浮く。影を使わずに「別の層」を表現する手段

フォームFORMS

Default

全角でご記入ください

Focus

outline 2px solid #875d45

Error

正しい郵便番号をご記入ください

入力欄の文字も明朝。文字サイズは 16px(iOS の自動ズーム回避)、radius 0。エラーはブランド茶の系統の #862800 で示す(原色の赤を持ち込まない)。
※ 原典は入力欄の文字色だけ #333333 でテンプレート由来の揺れがある。ここでは #3a4145 に揃えている。

奥行きELEVATION

影はほぼ使わない。実測で見つかったのは 0 0 2px rgb(178,178,178) の 1 種類だけ。奥行きは面色の 5 段額縁ボーダーで作る。

Level 0 — 面色
既定。#ffffff のカードが #e2dfdd の地に浮く
額縁ボーダー
7px solid #e8e8e8
Level 1 — 例外
0 0 2px rgb(178,178,178)。ドロップダウン等
レイアウトLAYOUT

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

5px — バッジの上下 padding
7px — バッジの左右 padding
8px — Neutral ボタン
12px — 主要ボタンの上下
18px — 主要ボタンの左右
20px — カードの padding
30px — カードの左 padding(非対称)

原典の角丸は 0 / 2 / 3 / 5 / 9 / 15px と散っている(FutureShop テンプレートと独自実装の混在)。新規実装では 0px(入力欄・リスト内ボタン)と 3px(ボタン・カード)の 2 択に寄せ、バッジは 2px

0px(入力欄・リスト内ボタン) / 2px(バッジ) / 3px(ボタン・カード) / 5px + 7px 罫(額縁)

ブレークポイントは max-width: 767px が主分岐(CSS 中 32 箇所)。ここで 1 カラム+ #f6f5f5 の全画面ドロワーに切り替わる。以下 600px、上に min-width: 768px / 960px原典は max-width: 767pxmin-width: 767px が両方あって 767px ちょうどが二重に当たるので、新規実装では 767 / 768px で分ける。