有隣堂（YURINDO） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-08-31 / 対象: https://www.yurindo.co.jp/, /store/bookstore/, /topics/36340/

1. Visual Theme & Atmosphere

• デザイン方針: 白ではなく生成りのクリーム地（#f8f5ee）をページ背景に敷く。その上に白のカードを角丸で浮かべ、深緑1色でアクセントを付ける。紙と印刷物の手ざわりを画面に持ち込む設計
• 密度: 書店らしく要素は多いが、カード同士の余白を広く取り、面ごとにクリーム／ミント／白を塗り分けて視覚的に切り分けている
• キーワード: 生成り、深緑、丸み、文久ゴシック、紙もの

3つの特徴が同時に効いている:

1. 本文ウェイトが 500（Medium）。400 ではない。文字が少し太く、紙の印刷に近い黒みになる
2. font-feature-settings: "palt" が全要素にかかっている（実測で確認済み。ヘッダーの arial 指定 span を除く全要素）。字間 0.08em との併用で、詰めてから空けるという二段構えの調整
3. 見出しが toppan-bunkyu-gothic-pr6n（凸版文久ゴシック / Adobe Fonts）。明朝の骨格を持つ人文系ゴシックで、本文の Noto Sans JP と明確に対比される

一部のセクション背景には 32px 方眼の repeating-linear-gradient（罫線 #dad6cb / 地 #f5f0e4）が敷かれる。方眼紙のモチーフ。

2. Color Palette & Roles

Primary（ブランドカラー）

• Yurindo Green (#007d48): ブランドの中核。CTA の面色、見出しの差し色、リンク色を兼ねる。トップの uniqueBackgrounds で 43 件
• Deep Green (#274633): フッター周辺の濃い面。緑の暗色対
• Sage (#a8c5b8): 罫線・区切りに使う淡い緑

Surface（面色）— このサイトの肝

• Background (#f8f5ee): ページ背景。白ではない。body に明示指定（pageBackground.resolved 根拠 body）
• Mint Tint (#f3faf7): 最多の面色（88件）。チップ・タブ・丸アイコンボタンの地
• Mint Border (#c2d9c8): 上記チップの枠。ミント地とセットで必ず使う
• Cream Surface (#f5f0e4): クリームよりわずかに濃い面。カテゴリ帯・方眼背景の地
• Ivory (#fbfaf2): セクション見出しブロックの最も淡い面
• White (#ffffff): カードの面。背景がクリームなので白が「浮き」として機能する

Semantic / Status

• Stock Available (#2b6295): 「在庫がある」バッジ（青）
• Stock None (#a35c1b): 「在庫がない」バッジ（茶）

Overlay

• rgba(46, 42, 42, 0.9): Cookie バナー
• rgba(0, 125, 72, 0.9): 右端の固定「店舗一覧」タブ
• rgba(41, 68, 84, 0.9): 右端の固定「在庫検索」タブ

Neutral（ニュートラル）

• Text Primary (#2e2a2a): 本文。純黒ではなくわずかに赤みのある墨色
• Text Input (#444746): 入力欄の文字
• Grid Rule (#dad6cb): 方眼背景の罫線

3. Typography Rules

3.1 和文フォント

• 本文ゴシック: Noto Sans JP のみ（フォールバックは generic の sans-serif だけ）
• 見出しゴシック: 凸版文久ゴシック（toppan-bunkyu-gothic-pr6n）。Adobe Fonts 供給。serif にフォールバックする宣言になっている
• 明朝体: 使用しない（文久ゴシックが明朝寄りの役割を担う）

3.2 欧文フォント

• サンセリフ: Work Sans（英字のアイブロウ／ラベル用）
• 等幅: 定義なし

3.3 font-family 指定

css/* 本文・ナビゲーション・UI 全般 */
font-family: "Noto Sans JP", sans-serif;

/* 見出し（h2〜h4・ナビラベル） */
font-family: toppan-bunkyu-gothic-pr6n, serif;

/* 英字ラベル・アイブロウ */
font-family: "Work Sans", sans-serif;

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

• 和文フォントを単独で指定する割り切り型。Web フォント前提で、ローカルフォントを並べない
• 見出しのフォールバックが serif なのは意図的。凸版文久ゴシックが読めない環境ではゴシックではなく明朝に落ちる（骨格の近さを優先している）
• Adobe Fonts はドメインライセンスのため、複製環境では表示できない。 代替は下記参照

preview.html での代替フォント: toppan-bunkyu-gothic-pr6n は Adobe Fonts のドメイン制限があるためローカルで表示できない。Google Fonts の Zen Old Mincho または Shippori Mincho ではなく、Zen Kaku Gothic New に serif を併記するのが近い。文久ゴシックは「明朝の骨格を持つゴシック」なので、明朝に振ると太さが合わない。

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

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

3.5 行間・字間

• 本文の行間: 1.9（34.2px / 18px）。日本語サイトの中でもかなり広い部類
• 見出しの行間: 1.2〜1.56。サイズが大きいほど詰める
• 本文の字間: 0.08em（1.44px / 18px）。この値がサイト全体の基準
• 見出しの字間: 0.02em〜0.08em。ヒーローの 40px でも 0.06em を入れる

ガイドライン:

• palt と letter-spacing: 0.08em を必ずセットで使う。 どちらか片方だけだと字面が変わる。palt で約物とかなを詰め、letter-spacing で全体を均一に空け直す
• 本文 18px / 行間 1.9 はセットで再現する。16px に落とすなら行間も 1.8 程度に合わせる

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《
• 見出しは字間が広いため折り返し位置がずれやすい。長い書名は <br> で明示的に折る

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• palt はサイト全体にかかっている（本文を含む）。 見出し限定ではない
• 例外はヘッダー内の arial, sans-serif を当てた span（アイコン用）のみで normal
• palt 単独では字間が詰まりすぎるため、letter-spacing: 0.08em で空け直す前提の設計

3.8 縦書き

該当なし。

4. Component Stylings

--radius: 8px が唯一の自前 CSS 変数。実際には 4px（213件）> 8px（56件）> 999px（30件）> 50%（28件）> 16px（14件）> 12px（10件） の順で使われる。

Buttons

Primary Pill（主要CTA・右矢印つき）

• Background: #007d48
• Text: #ffffff
• Padding: 8px 52px 8px 24px ← 右の 52px は矢印アイコンの領域
• Border Radius: 999px
• Font Size: 16px / Font Weight: 500 / Letter Spacing: 0.04em

Primary Rounded（「アルバイト募集中」等）

• Background: #007d48
• Text: #ffffff
• Padding: 16px 24px
• Border Radius: 28px
• Font Size: 16px / Font Weight: 500 / Letter Spacing: 0.03em

Tab（フィルタタブ）

• アクティブ: Background #007d48 / Text #ffffff / Border 1px solid #007d48
• 非アクティブ: Background #ffffff / Text #007d48 / Border 1px solid #007d48
• Border Radius: 8px / Font Size: 18px / Font Weight: 500 / Letter Spacing: 0.02em

Tint Chip（カテゴリチップ）

• Background: #f3faf7
• Text: #007d48
• Border: 1px solid #c2d9c8
• Padding: 0 8px
• Border Radius: 4px
• Font Size: 16px / Font Weight: 500

Circle Icon Button

• Background: #f3faf7 / Text: #007d48 / Border: 1px solid #c2d9c8
• Border Radius: 50% / Font Size: 19px

Sticky Side Tab（右端固定）

• Background: rgba(0, 125, 72, 0.9)（店舗一覧）/ rgba(41, 68, 84, 0.9)（在庫検索）
• Border Radius: 8px 0 0 8px（左だけ丸める）

Card Footer Label（カード下端に食い込む帯）

• Background: #007d48 / Text: #ffffff
• Border Radius: 0 0 8px 8px
• Padding: 12px 0 / Font Size: 17px / Font Weight: 600 / Letter Spacing: 0.1em

Badges

• 在庫あり: Background #2b6295 / Text #ffffff
• 在庫なし: Background #a35c1b / Text #ffffff
• Padding: 0 6px 2px / Border Radius: 4px / Font Size: 17px / Font Weight: 500

Inputs

• Background: #ffffff
• Border: 1px solid #c2d9c8
• Border Radius: 4px
• Padding: 0 10px
• Font Size: 16px / Font Weight: 500 / Text: #444746
• 検索ボタンは #007d48 のベタで、入力欄の右に 0 8px 8px 0 の角丸で連結する

Cards

• Background: #ffffff（背景がクリーム #f8f5ee なので白が浮きになる）
• Border: なし（面色の差だけで区切る）
• Border Radius: 8px（標準）/ 16px（大型）
• Padding: 20px / 24px 32px / 32px / 40px 48px
• Shadow: 使わない

Special: 方眼背景

cssbackground-image:
  repeating-linear-gradient(90deg, #dad6cb, #dad6cb 1px, transparent 0, transparent 32px),
  repeating-linear-gradient(0deg,  #dad6cb, #dad6cb 1px, #f5f0e4 0, #f5f0e4 32px);

「有隣堂しか知らない世界」など、コンテンツ紹介ブロックの地に使う。32px の方眼。

5. Layout Principles

Spacing Scale

Container

• Max Width: 1360px（標準）/ 1440px（フルブリード寄りのセクション）
• Card Min Width: 260px（グリッドの最小カラム幅）
• Padding (horizontal): 16px（モバイル）／ 24〜40px（デスクトップ）

Grid

• 商品・店舗カード: 4カラム（最小 260px の auto-fill）
• Gutter: 24px 前後

6. Depth & Elevation

このサイトは影で階層を作らない。 DOM 全走査で見つかる box-shadow は白の淡いグロー1件のみ。

WordPress の --wp--preset--shadow--*（natural / deep / sharp / outlined / crisp）は宣言されているが1箇所も使われていない。

7. Do's and Don'ts

Do（推奨）

• ページ背景は #f8f5ee（クリーム）にする。#ffffff にしない
• 本文は font-weight: 500 / 18px / line-height: 1.9 / letter-spacing: 0.08em
• font-feature-settings: "palt" を全体に当て、letter-spacing で空け直す
• 見出しは toppan-bunkyu-gothic-pr6n, serif（フォールバックは serif のまま）
• チップは「ミント地 #f3faf7 ＋ ミント枠 #c2d9c8 ＋ 緑文字 #007d48」の3点セットで作る
• カードは白 #ffffff ＋ border-radius: 8px ＋ 枠なし。浮きは背景との明度差で出す
• 角丸は 4px（小）/ 8px（標準）/ 16px（大）/ 999px（ピル）から選ぶ

Don't（禁止）

• ページ背景を白にしない。 白はカードの色であり、地の色ではない
• 本文を font-weight: 400 にしない。 このサイトの基準は 500
• palt だけ入れて letter-spacing を省かない（詰まりすぎる）
• 見出しのフォールバックを sans-serif に変えない（serif が正しい）
• WordPress のプリセット色（--wp--preset--color--*）を使わない。全部未使用の既定値
• 影でカードを浮かせない
• 純黒 #000000 を文字色に使わない（#2e2a2a）

8. Responsive Behavior

Breakpoints

CSS の @media から実測した主要な分岐。

1230 / 1250 / 1270 / 1290 / 1330 / 1370 / 1600 / 1700px にも細かい調整が入る。

タッチターゲット

• 最小 44px × 44px。ピルボタン（padding: 8px 52px 8px 24px / 16px）は約 40px なので、モバイルでは縦 padding を 12px に増やす

フォントサイズの調整

• ヒーロー見出し 40px → 26px 程度
• 記事 H2 38px → 24px 程度
• 本文 18px は据え置き（もともと大きめの設定なので下げない）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #007d48
Deep Green: #274633
Background: #f8f5ee   ← 白ではない
Surface (card): #ffffff
Surface (tint): #f3faf7  / border #c2d9c8
Surface (cream): #f5f0e4 / #fbfaf2
Text Color: #2e2a2a
Badge: #2b6295（在庫あり）/ #a35c1b（在庫なし）
Font (body): "Noto Sans JP", sans-serif
Font (heading): toppan-bunkyu-gothic-pr6n, serif
Font (EN): "Work Sans", sans-serif
Body: 18px / 500 / line-height 1.9 / letter-spacing 0.08em
font-feature-settings: "palt"（全体）
Border Radius: 4 / 8 / 16 / 999px
Shadow: なし

プロンプト例

有隣堂のデザインシステムに従って、店舗一覧ページを作成してください。
- ページ背景は #f8f5ee（クリーム）。白ではない
- カードは #ffffff / border-radius 8px / 枠なし / padding 24px 32px
- 見出しは toppan-bunkyu-gothic-pr6n, serif / 600 / 23px / line-height 1.52 / letter-spacing 0.03em
- 本文は "Noto Sans JP", sans-serif / 500 / 18px / line-height 1.9 / letter-spacing 0.08em
- font-feature-settings: "palt" を body に当てる
- エリア絞り込みチップは 背景 #f3faf7 / 文字 #007d48 / 枠 1px solid #c2d9c8 / radius 4px / padding 0 8px
- 「詳しく見る」は #007d48 のピル（radius 999px）、白文字 16px / 500、padding 8px 52px 8px 24px
- 在庫バッジは #2b6295（あり）/ #a35c1b（なし）、radius 4px
- 影は使わない。浮きはクリーム地に白カードを置くことで表す
- コンテナ幅は 1360px、カードは最小 260px の 4 カラム