本は心の旅路
店舗一覧shop list 新着情報information ランキングranking お買物ガイドshopping guide
01 / Colors

Color Palette

白ではなく生成りのクリーム地をページ背景に敷き、その上に白のカードを浮かべる。深緑1色でアクセントを付ける。

Yurindo Green
#007d48
CTA・見出しの差し色・リンク色。43 件
Deep Green
#274633
フッター周辺の濃い面
Sage
#a8c5b8
罫線・区切り
Background
#f8f5ee
ページ背景。白ではない
Mint Tint
#f3faf7
最多の面色(88件)。チップ・タブの地
Mint Border
#c2d9c8
チップの枠。ミント地とセットで使う
Cream Surface
#f5f0e4
カテゴリ帯・方眼背景の地
Ivory
#fbfaf2
最も淡い面
White
#ffffff
カードの面。クリーム地の上で「浮き」になる
Stock Available
#2b6295
「在庫がある」バッジ
Stock None
#a35c1b
「在庫がない」バッジ
Text Primary
#2e2a2a
本文。わずかに赤みのある墨色
WordPress のプリセット色は全部未使用。 --wp--preset--color--*(vivid-red / luminous-vivid-orange 等)と --wp--preset--shadow--* はテーマ既定として宣言されているだけで、実サイトでは1箇所も描画されない。自前の変数は --radius: 8px ひとつだけ。

Typography

見出しは 凸版文久ゴシック(明朝の骨格を持つ人文系ゴシック)、本文は Noto Sans JP の ウェイト 500。palt をサイト全体に当てたうえで letter-spacing: .08em で空け直す、二段構えの字間設計。

Hero Heading
凸版文久ゴシック / 40px / 600
lh 1.4 / ls .06em
本は心の旅路
Article H2
凸版文久ゴシック / 38px / 600
lh 1.21 / ls .08em
有隣堂しか知らない世界
Section H2
凸版文久ゴシック / 29px / 600
lh 1.45 / ls .04em
新着・特典・イベント
H3 (card)
凸版文久ゴシック / 23px / 600
lh 1.52 / ls .03em
BASEGATE 横浜関内店
H4 (label)
Noto Sans JP / 19px / 500
lh 1.26 / ls .045em / #007d48
店舗一覧
Lead
Noto Sans JP / 27px / 500
lh 1.19 / ls .06em
6周年記念ステッカーを配布します
Body(基準)
Noto Sans JP / 18px / 500
lh 1.9 / ls .08em / palt
1909年、横浜に生まれた書店です。本と文具と雑貨を扱いながら、その街に必要な棚をつくることを続けてきました。行間は 1.9、字間は 0.08em。詰めてから空け直すことで、和文の字面が均一に整います。
Nav Label
凸版文久ゴシック / 16px / 600
lh 1.0 / ls .06em
お買物ガイド 出版物 求人情報
Nav Link
Noto Sans JP / 15px / 500
lh 1.6 / ls .035em / #007d48
Small
Noto Sans JP / 14px / 500
lh 1.9 / ls .1em
※ 在庫状況は各店舗にお問い合わせください
Eyebrow (EN)
Work Sans / 16px / 500
lh 1.0 / ls .04em
shopping guide

font-weight: 400 はほぼ登場しない。基準は 500、見出しは 600、ロゴまわりだけ 700。

03 / Article

記事の組版

このセクションの地は 32px 方眼の repeating-linear-gradient。方眼紙のモチーフで、コンテンツ紹介ブロックに使われる。

本・文具・雑貨特典有隣堂しか知らない世界イベント

毎週火曜に更新している動画チャンネルは、書店員が自分の好きなものを語るだけの番組から始まりました。売り場に立つ人が何を面白がっているのかを、そのまま外に出す。それが結果として棚の説明になっている、というのが続いている理由だと思います。

棚は誰がつくるのか

本文は 18px / 行間 1.9 / 字間 0.08em。日本語サイトとしてはかなり広い設定で、紙の書籍に近い密度になります。見出しだけを明朝寄りのゴシックにすることで、本文との対比が生まれます。

04 / Buttons

Buttons & Chips

角丸は 4px(小)/ 8px(標準)/ 16px(大)/ 999px(ピル)から選ぶ。チップは「ミント地+ミント枠+緑文字」の3点セット。

詳しく見る アルバイト募集中 → 在庫がある 在庫がない

Primary Pill は padding: 8px 52px 8px 24px。右の 52px は矢印アイコンの領域。

すべて本・文具・雑貨カフェと食品イベント特典

タブは border-radius: 8px。アクティブは緑ベタ、非アクティブは白地+緑枠+緑文字。

店舗一覧 — 有隣堂のお店を探す 在庫検索 — 商品の在庫を探す

右端の固定タブは rgba(0,125,72,.9) / rgba(41,68,84,.9)、角丸は 8px 0 0 8px(左だけ丸める)。

Cards

影は使わない。クリーム地に白のカードを置くこと自体が「浮き」になる。

アトレ恵比寿店

駅直結。文具と実用書の棚が広く、平日の夜も遅くまで開いています。

BASEGATE 横浜関内店

カフェを併設した旗艦店。イベントスペースでは著者イベントを定期開催。

BACON Books & cafe

本を読みながら過ごせる書店とカフェ。オールデイダイニング 1909 を併設。

有隣堂 大阪梅北店

関西1号店。神奈川の書店が届ける棚づくりを、そのまま持ち込みました。

06 / Forms

Forms

入力欄は白地+ミント枠+border-radius: 4px。ラベルは凸版文久ゴシックの緑。

全角で入力してください

フォーカスリングは #007d48

メールアドレスの形式が正しくありません

セレクトも同じ枠・同じ角丸

Depth & Elevation

影で階層を作らない。 面色と角丸だけで層を表す。WordPress の --wp--preset--shadow--* は宣言のみで未使用。

Level 0 — 地background: #f8f5ee
Level 1 — カードbackground: #fff; border-radius: 8px
Level 2 — チップbackground: #f3faf7; border: 1px solid #c2d9c8
Level 3 — オーバーレイbackground: rgba(46,42,42,.9)
08 / Layout

Layout

コンテナ幅 1360px(フルブリード寄りは 1440px)。カードは最小 260px の auto-fill グリッド。

max-width: 1360px
260px min
260px min
260px min
260px min
TokenValue用途
XS8pxチップの左右 padding、ピルの縦 padding
S12pxカードフッターの縦 padding
M16px丸ボタンの縦 padding
L24pxグリッドの gutter、カード内側
XL32px大型カードの内側
XXL48px最大カードの左右 padding
RadiusValue実測件数
XS4px213 件(最多)
SM8px56 件(--radius)
Pill999px30 件
Round50%28 件
LG16px14 件
BreakpointWidth説明
Mobile≤ 767px1カラム。固定タブは下端へ
Tablet768–1179px2カラム
Desktop1180–1439px3〜4カラム / max-width 1360px
Wide≥ 1440px4カラム / max-width 1440px