玉川堂
1816
01 — COLORS

UI に使う色は白・黒とグレー 4 段だけ。ブランドカラーと呼べる有彩色を持たず、銅の色は写真と商品説明が担当する。中間グレーの面(カード面など)は作らず、白と黒の二値を崩さない。

Background
#ffffff
ページ地色(純白)
Ink
#000000
文字・黒タイル・フッターの面
Sub Text
#333333
サブメニューのリンク
Caption
#666666
著作権・日付・入力欄の文字
Muted
#999999
アウトラインボタンの文字
Gray
#aaaaaa
スライダーの非活性インジケータ
Border
#cccccc
罫・ボタンの枠
KV Overlay
rgba(0,0,0,.3)
工房写真に重ねる暗幕

銅の色(UI には使わない)

赤銅・紫金・黒味銅・栗色は玉川堂の着色技法による経年色。写真と商品説明の中でのみ示すものであり、UI の面色や罫には使わない。参考として掲載する。

赤銅(しゃくどう)
#7b3f2e 目安・写真内の参考色
紫金(しきん)
#4a2a2a 目安・写真内の参考色
黒味銅(くろみどう)
#2b2320 目安・写真内の参考色
栗色(くりいろ)
#5c3a25 目安・写真内の参考色

02 — TYPOGRAPHY

組版

和文も欧文も「りょう Display PlusN」1 書体のみ。palt と letter-spacing 0.96px と line-height 2.0 がグローバルに効き、見出しだけ行間 1.1 に締まる。見出しは weight 300、本文は weight 500 と、太さの関係が逆転する。

打つ。時を打つ。
Display · 48px · weight 300 · lh 1.1 (52.8px) · ls 0.96px (0.02em)
玉川堂について
Menu Title · 28px · weight 500 · lh 2.0 (56px) · ls 0.96px (0.034em)
お知らせ・催事情報
Heading 2 · 24px · weight 300 · lh 1.1 (26.4px) · ls 0.96px (0.04em)
玉川堂メールマガジン お申込
Heading 3 · 18px · weight 300 · lh 1.1 (19.8px) · ls 0.96px (0.053em)
本文(既定)— 一枚の銅板を鎚で叩き縮め、継ぎ目のない器に成形する。玉川堂の鎚起銅器は、この一点においてほかに例を見ない技法でつくられています。
Body · 16px · weight 500 · lh 2.0 (32px) · ls 0.96px (0.06em)
鎚起銅器 玉川堂 - GYOKUSENDO
Logo Link · 16px · weight 300 · lh 1.0 · ls 1.6px (0.1em) — ロゴリンクのみ字間が別扱い
段落 — 銅は使い込むほどに色を深めます。手の脂と時間が、赤銅から紫金へ、紫金から黒味銅へと表情を移していきます。
Body Small · 14px · weight 500 · lh 2.0 (28px) · ls 0.96px (0.069em)
玉川堂について 玉川堂の歴史 玉川堂の技術
Submenu · 14px · weight 400 · lh 1.43 (20px) · #333333
Copyright © GYOKUSENDO. All Rights Reserved.
Caption · 12px · weight 500 · lh 2.0 (24px) · ls 0.96px (0.08em) · #666666 — px 固定なので小さい文字ほど広く見える

03 — ARTICLE

組版サンプル

打つ。時を打つ。

2026.07.28 お知らせ・催事情報

玉川堂について

文化十三年、越後国燕にて創業。以来二百余年、一枚の銅板を鎚で叩き縮めて器に成形する「鎚起銅器」をつくり続けてきました。継ぎ目のない一体の器は、金属を延ばすのではなく縮めることで生まれます。

叩けば銅は硬くなり、焼けばまた柔らかくなる。この繰り返しを何千回と重ねて、湯沸ひとつが仕上がります。工房の見学では、その音を間近で聞いていただけます。

玉川堂の技術

器の口を締めるほど鎚の跡は細かくなり、胴の張りには大きな鎚目を残します。同じ形は二つとなく、使い手の手のなかで色を深めていくことを前提につくられています。

銅は熱を素早く伝え、水を柔らかくすると言われます。道具として毎日使われ、修理を重ねながら次の代へ渡っていく。それが私たちの考える器のあり方です。


04 — MENU TILES

黒タイル

ヘッダーのメニューではなく、写真の上に #000000 のベタ面を重ねた黒タイルの一覧がサイトの導線になる。見出し 28px(行間 2.0)+ 説明 14px(行間 1.5)。角丸も影も持たない。


05 — BUTTONS

ボタン

CTA は主張しない。文字色まで灰(#999999)に落とし、罫線も薄い #cccccc。角丸は 0px。目立たせたいときも色ではなく余白と位置で解決する。


06 — CARDS

お知らせ

写真 → 日付(14px / #666666)→ タイトル(16px / weight 500 / 行間 2.0)の順に積む。角丸 0px、影なし。

2026.07.20
燕本店 夏季休業のお知らせ
2026.07.08
銀座店 鎚起銅器展を開催いたします
2026.06.28
工房見学のご予約について
2026.06.12
湯沸の修理・再着色を承ります

07 — FORMS

フォーム

デフォルト / フォーカス / エラーの3状態。角丸 0px、枠は #cccccc、フォーカスは純黒。入力欄も明朝で組む(実サイトの input[type=email] は Open Sans に落ちているが、これは実装の取り残しであり再現しない)。

正しい電話番号を入力してください。
送信

08 — ELEVATION

奥行き

実測ではすべての要素が box-shadow: none。奥行きは白と黒の二値でつくり、中間のグレー面を持たない。影の代わりに 1px の罫線を使い、重ね合わせは KV の 30% の暗幕だけ。

Level 0
none(既定・純白)
Level 1
1px solid #cccccc(罫線で輪郭)
Level 2
#000000(黒タイル・フッター)
Level 3
rgba(0,0,0,.3)(KV の暗幕)

09 — LAYOUT

スペーシング

8 / 15 / 24 / 40 / 80 / 120px。行間 2.0 が空間の基本単位で、16px 本文なら 1 行 = 32px。余白もこの倍数に寄せると縦のリズムが揃う。読み物カラムは 720px 前後。

XS 8
S 15
M 24
L 40
XL 80
XXL 120