面は 5 段でごく浅く上がる。隣との差が 3〜9 しかないので、罫を引かずに面だけで区切りが成立する。白(#ffffff)は地色ではなく「カードの色」——地の上に紙として浮く。
彩度を持つ色は 5 つだけ(#875d45 / #667895 / #862800 / #3572b0 / #1e5d9b)。うち 2 つはリンク色なので、面として塗られるのは実質 3 色。
font-family: "Zen Old Mincho", serif の 1 行が全域。ヘッダー、ナビ、商品名、価格、ボタンのラベル、カートの個数バッジ(8px)まで、UI の全部が明朝。「読み物は明朝、ボタンはゴシック」という分業を採らないのが、このサイトの唯一最大の個性。letter-spacing は全域 normal——明朝サイトでも字間を一切開けない。
ウェイトは 400 / 500 / 700 の 3 段。500(Medium)を見出しに積極的に使い、700 は特集の大見出しとヘッダーのユーティリティだけ。見出しの行間は 1.2 まで詰める——明朝の縦画が揃うので、ゴシックより詰めても崩れない。
「買う」は暖色(#875d45)、「待つ・知らせを受け取る」は寒色(#667895)で分ける。色番のラベルは商品画像の上に rgba(30,30,30,.7) の下地で重ねる。価格も明朝の数字で出す——ここに欧文サンセリフを混ぜない。
※ 枠バッジ(NEW・再入荷・予約商品)を写真の上に重ねるときは白(#ffffff)を敷く。文字色も罫も #3a4145 なので、暗い商品写真の上ではそのままだと読めない。
島根県大田市大森町。世界遺産・石見銀山の麓にある、人口四百人ほどの集落です。かつて銀を掘る人々でにぎわったこの町は、鉱山が閉じたあと静かになりました。
私たちは一九八九年、この町で会社をはじめました。都市に出ていくのではなく、ここに残る。そう決めたことが、そのままブランドの主題になりました。服も、布も、暮らしの道具も、すべてこの土地の時間の中から生まれています。
古い家を直して住み、畑を耕し、藍を建てる。特別なことは何もしていません。ただ、根を張るということを、続けているだけです。
ボタンのラベルも明朝で組む。ここをゴシックに切り替えると、サイトの個性が丸ごと消える。
Primary #875d45 / radius 3px / padding 12px 18px / 12px(18 + 12×2 + 1×2 = 44px でタッチターゲット基準をちょうど満たす)。Secondary #667895。Neutral #646464 / radius 0。Outline 1px solid #3a4145 / radius 0。
商品リスト内のボタンだけ radius 0 で、縁が #925e33 と一段黄みに寄る。高さは 36px で 44px 基準に届かないため、主要 CTA には使わない。
Default
Focus
Error
入力欄の文字も明朝。文字サイズは 16px(iOS の自動ズーム回避)、radius 0。エラーはブランド茶の系統の #862800 で示す(原色の赤を持ち込まない)。
※ 原典は入力欄の文字色だけ #333333 でテンプレート由来の揺れがある。ここでは #3a4145 に揃えている。
影はほぼ使わない。実測で見つかったのは 0 0 2px rgb(178,178,178) の 1 種類だけ。奥行きは面色の 5 段と額縁ボーダーで作る。
#ffffff のカードが #e2dfdd の地に浮く7px solid #e8e8e80 0 2px rgb(178,178,178)。ドロップダウン等寸法トークンは存在しない。実測から読み取れる刻み。
原典の角丸は 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: 767px と min-width: 767px が両方あって 767px ちょうどが二重に当たるので、新規実装では 767 / 768px で分ける。