みすず書房（MISUZU SHOBO） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 茶色（#734b28）と白だけで組む人文書の版元。トップは本棚の写真と游明朝の見出しで「読み物」を、書籍一覧は游ゴシック／メイリオの 12px と行間 1.10 で「目録」を見せる。同じサイトの中に読み物と目録の2つの組版がある
• 密度: トップは疎（可視 85 要素）、書籍一覧は密（可視 312 要素のうち 160 要素が行間 1.10）
• キーワード: 茶、游明朝、Web フォント 0 本、行間 1.10 の目録、palt

このサイトの核心は5つある。

1. Web フォントを 1 本も読み込まない。 @font-face は アイコンフォント icomoon（data URI）の 1 件だけで、フォントファイルのリクエストは実測 0 件。和文はすべて OS のローカル書体（游ゴシック・游明朝・メイリオ）で組んでいる
2. ローカル書体を3つのスタックで使い分ける。 ①游ゴシック先頭（ナビ・UI）、②メイリオ先頭（書籍一覧の本文・下層で 170 / 312 要素）、③游明朝（見出し・特集）。メイリオを先頭に置くスタックを明示的に持っているのが特徴
3. 行間が「密」と「疎」で二重化している。 書籍一覧は 1.10（160 要素）、記事の説明は 1.88（24 要素 / 15 要素）。body の既定は **1.875（16px / 30px）**で、目録だけ 1.10 に落としている
4. html の font-size が 992px を境に 16px → 13px に落ちる。 1440px / 1200px では 16px、834px / 375px では 13px。rem 指定が全部 0.8125 倍になるため、px 換算を 16 基準で固定してはいけない
5. CSS Custom Properties 35 個のうち、意味を持つのは 6 個だけ。 残りは Bootstrap 4 の既定変数（--blue: #007bff --indigo --purple --breakpoint-* 等）がそのまま残っている。--primary: #734b28 --sub: #b99d67 --accent: #09488f --dark: #231815 --light3: #f5f1e8 --ebook: #17a2b8 が自社の値

font-feature-settings: "palt" は トップ 28 要素 / 下層 23 要素に効いている（CSS 全文の palt 宣言は 3 回）。縦組みも 1 要素だけ実在する（下記 3.8）。

2. Color Palette & Roles

Primary（ブランドカラー）

茶が 2 つある。 #734b28（文字・帯）と #8e6746（右サイドナビの面）。新規実装では文字＝#734b28、面＝#8e6746 として使い分ける。

Category（記事カテゴリのラベル色）

いずれも 12px・白文字・border-radius: 0・1px の白枠という同じ形で、色だけでカテゴリを分ける。

Neutral（ニュートラル）

Bootstrap の残骸（使わないこと）

--blue: #007bff / --indigo: #6610f2 / --purple: #6f42c1 / --pink: #e83e8c / --orange: #fd7e14 / --yellow: #ffc107 / --green: #28a745 / --teal: #20c997 / --cyan: #17a2b8 / --info: #4876d0 / --success: #28a745 / --warning: #ffc107 / --danger: #dd6d5e

Bootstrap 4 の既定変数がそのまま残っている。 このうち実際に使われているのは --info（#4876d0 ＝ イベント ラベル）と --danger（#dd6d5e ＝ お知らせ ラベル）だけで、他は 1 要素も塗っていない。#007bff 等を「このサイトの色」として採用しないこと。

3. Typography Rules

3.1 和文フォント

Web フォントは使わない。 すべて OS のローカル書体。

• ゴシック体（UI・ナビ）: 游ゴシック（Yu Gothic / YuGothic）→ ヒラギノ角ゴ ProN → ヒラギノ Sans → メイリオ
• ゴシック体（書籍一覧の本文）: メイリオ（Meiryo）を先頭に置く別スタック。游ゴシックは2番目
• 明朝体（見出し・特集・縦組み）: 游明朝（Yu Mincho / YuMincho）→ ヒラギノ明朝 ProN → ヒラギノ明朝 Pro

3.2 欧文フォント

• 専用の欧文フォントを持たない。 数字・アルファベット（日付 2026.10.02、ISBN、NEWS）も和文書体の欧文グリフで出す
• --font-family-monospace（SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace）が Bootstrap 既定として宣言されているが、可視 0 要素

3.3 font-family 指定

css/* ① UI・ナビ・既定（Bootstrap の --font-family-sans-serif を上書き） */
font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             Meiryo, sans-serif;

/* ② 書籍一覧・書誌情報（メイリオ先頭の別スタック） */
font-family: Meiryo, "Yu Gothic", YuGothic, sans-serif;

/* ③ 見出し・特集・縦組み */
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
             serif;

/* ④ 明朝の短縮版（WEBみすずの記事タイトル等） */
font-family: "Yu Mincho", YuMincho, serif;

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

• 和文優先。 欧文フォントを先頭に置かず、游ゴシック／游明朝の欧文グリフで統一する
• ②のメイリオ先頭は意図的。 書籍一覧は 12px という小さい級数で著者名・価格・ISBN を並べるため、ヒンティングが効いて小さい字が潰れにくいメイリオを優先している（游ゴシックは小級数で細くなる）。この使い分けを「游ゴシックに統一」と直さないこと
• 游ゴシックの Windows Medium 問題への対策は入っていない（"Yu Gothic Medium" 等をチェーンに持たない）。Windows では Light 寄りに出ることを前提に、太さが要る箇所は font-weight: 600 を当てている

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

※ 992px 未満ではルートが 13px になり、rem 由来の値はすべて 0.8125 倍になる（下記 8 章）。以下は 1440px 時の実測値。

13.008px は端数ではなくライブラリ由来。 Bootstrap の .small 相当（16px × 0.813）。992px 未満ではルートが 13px になるので 10.57px まで落ちる。

3.5 行間・字間

行間 — 読み物 1.875 / 目録 1.10 の二重構造

line-height: 1.10 は日本語本文としては極端に詰まっているが、このサイトでは**「読む文」ではなく「引く情報」（著者名・価格・ISBN）にだけ**当てている。本文に 1.10 を使わない。

字間 — normal が既定、要所だけ正負に振る

ガイドライン:

• 本文に letter-spacing を足さない。 既定は normal
• グローバルナビだけ -0.05em と詰める（横幅を稼ぐため）
• 日付・明朝の惹句・ジャンル見出しは逆に空ける（0.07〜0.2em）。明朝＋字空けがこのサイトの「読ませる」合図

3.6 禁則処理・改行ルール

css/* 実測: body の既定値 */
word-break: normal;
overflow-wrap: normal;
line-break: auto;

• line-break の指定は無し。word-break: auto-phrase も不使用（CSS 全文で 0 回）
• CSS 全文の word-break 宣言は 5 回（長い書名・URL 用の個別上書き）

3.7 OpenType 機能

cssfont-feature-settings: "palt" 1;   /* 見出し・ラベルに適用（トップ 28 / 下層 23 要素） */

• palt を使う。 ただし body 全体ではなく 見出し・ラベル・惹句だけ（CSS 全文の宣言は 3 回）
• 書籍一覧の本文（メイリオ 12px）には効いていない。小級数の目録はベタ組みのまま

3.8 縦書き

css/* トップの「この一冊」ラベル */
writing-mode: vertical-rl;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
font-size: 19.2px;
font-weight: 300;
line-height: 1.20;        /* 23.04px */
letter-spacing: 0.192px;  /* 0.01em */

• 実測 1 要素（<em> タグ、テキストは 最新）。画像ではなく CSS で組まれた本物の縦組み
• 書体は游明朝・weight 300。縦組みは明朝で細くという扱い
• 下層ページには縦組みは無い（0 件）

4. Component Stylings

Buttons

Primary（茶の面）

• Background: #8e6746
• Text: #ffffff
• Border Radius: 0px（右サイドナビ）／ 7px（下層のタグ）
• Font Size: 14px / Weight 700 / Line Height 1.10
• Letter Spacing: normal

Secondary（白地・茶の枠・丸み）

• Background: transparent
• Text: #734b28
• Border: 1px solid #734b28
• Border Radius: 28px（詳細はこちら）／ 48px（ニュースレター登録）
• Font Size: 14–18px / Weight 400 / Font Family 游明朝（14px 版）
• Letter Spacing: 0.35–0.45px

第2ボタンだけ明朝で組まれている（"Yu Mincho", YuMincho, serif）。実サイトの特徴なので残す。

Badges（カテゴリラベル）

• Background: #4876d0（イベント）／ #dd6d5e（お知らせ）／ #00904b（話題の本）
• Text: #ffffff
• Border: 1px solid #f4f4f4（面と同じ地色の枠で、面から浮かせる）
• Border Radius: 0px
• Font Size: 12px / Weight 400 / Font Family メイリオ / Line Height 1.10

Cards（書影・ニュース行）

• Background: #f4f4f4
• Border Radius: 2px（書影の下敷き 30 要素 / 20 要素）
• Shadow: rgba(0,0,0,0.2) 0 0 3.2px（書影 30 要素）／ rgba(0,0,0,0.16) 0 0 20px（大きい面 8 / 20 要素）

Pagination

• Border Radius: 100%（12 要素）
• Background: #5c5c5c（現在ページ）/ Text #ffffff / 14px / Line Height 1.25

Link Underline（茶の半分下線）

cssbackground: linear-gradient(to left, rgba(0,0,0,0) 50%, rgba(115,75,40,0.4) 50%);

• 可視 19 要素（トップ）/ 17 要素（下層）。ホバーで左から下線が伸びる演出の静止状態。border-bottom ではなくグラデーションで作っている

5. Layout Principles

Container

• Max Width: 1366px（トップ 7 回・下層 4 回）
• 書籍一覧のカラム: 25%（トップ 8 回・下層 20 回）＝ 4 カラムの書影グリッド
• 記事カラム: 66.6667%（2/3）

Grid

• 書籍一覧は 4 列（25%）。Bootstrap のグリッドをそのまま使う
• gap の宣言は 0 件（Bootstrap の padding ベースのガターで組んでいる）。flex/grid の gap を使っていない

Spacing

• calc(100% + 12.8px) ＝ Bootstrap の .row の負マージン（ガター 12.8px、片側 6.4px）

6. Depth & Elevation

影は「オフセット 0・ぼかしのみ」。 本の表紙を紙として見せるための縁取りで、UI の浮き上がりには使っていない。

7. Do's and Don'ts

Do（推奨）

• Web フォントを読み込まない。 游ゴシック・游明朝・メイリオのローカル書体で組む
• 書籍一覧・書誌情報は Meiryo, "Yu Gothic", YuGothic, sans-serif の 12px（小級数はメイリオ優先）
• 読み物の本文は 16px / line-height 1.875 / letter-spacing normal
• 目録（著者・価格・ISBN）だけ line-height 1.10 に落とす
• 明朝＋字空け（0.07〜0.2em）は「読ませる」合図として見出し・惹句に使う
• グローバルナビだけ letter-spacing: -0.05em と詰める
• リンクの下線は linear-gradient(to left, transparent 50%, rgba(115,75,40,0.4) 50%)
• 書影には rgba(0,0,0,0.2) 0 0 3.2px の縁

Don't（禁止）

• line-height: 1.10 を読み物の本文に使わない（目録専用）
• Bootstrap の既定色（#007bff #6610f2 #6f42c1 …）を採用しない。 使っているのは #4876d0 と #dd6d5e だけ
• Noto Sans JP / Noto Serif JP を足さない（このサイトはローカル書体だけで完結している）
• 書籍一覧を游ゴシックに統一しない（メイリオ先頭は意図的）
• rem の px 換算を 16px 基準で固定しない（992px 未満でルートが 13px になる）
• gap を前提にレイアウトを組まない（Bootstrap の padding ガター 12.8px）

8. Responsive Behavior

Breakpoints（Bootstrap 4）

ルートが 992px を境に切り替わる（最重要）

• html 自体が 16px → 13px に切り替わる。 rem 由来の値はすべて 0.8125 倍になる（13.008px → 10.57px）
• line-height は無単位（1.875）で宣言されているので比率は保たれる。 px に読み替えないこと
• 見出しも追従する: h2 24px（1440px）→ 19.077px（834px）→ 17.7px（375px）。letter-spacing は 0.07em 宣言なので 1.68px → 1.335px → 1.239px とサイズに比例して追従する

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #734b28（文字・帯）/ #8e6746（面）
Text Color: #000000 / 補助 #909090
Surface: #f4f4f4 / Paper #f5f1e8
Background: #ffffff
Font (UI):   "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
Font (目録): Meiryo, "Yu Gothic", YuGothic, sans-serif
Font (見出し): "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif
Body: 16px / line-height 1.875 / letter-spacing normal
目録: 12px / line-height 1.10 / letter-spacing normal
Web フォント: 使わない（ローカル書体のみ）
Radius: 0px（ラベル）/ 2px（書影）/ 28px・48px（ボタン）
Container: 1366px / 書籍グリッド 25%（4列）
html font-size: 16px（≥992px）/ 13px（<992px）

プロンプト例

みすず書房のデザインシステムに従って、書籍の一覧ページ（4列グリッド）を作成してください。
- Web フォントは読み込まない。すべてローカル書体で組む
- ページ見出し: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif / 30px / weight 600
- 「ジャンルで探す」のような小見出し: 游明朝 24px / weight 600 / letter-spacing 0.2em
- 書名: Meiryo, "Yu Gothic", YuGothic, sans-serif / 16px / weight 600 / line-height 1.6 / 色 #000000
- 著者・訳者・価格・ISBN: メイリオ 12px / weight 400 / line-height 1.10 / 色 #909090
- 書影: 背景 #f4f4f4、角丸 2px、影 rgba(0,0,0,0.2) 0 0 3.2px
- ジャンルのタグ: 背景 #8e6746、白文字 14px / weight 400、角丸 7px
- ページネーション: 現在ページは背景 #5c5c5c の円（border-radius 100%）、白文字 14px
- リンクの下線: linear-gradient(to left, transparent 50%, rgba(115,75,40,0.4) 50%)
- グリッドは 25% の 4 列、コンテナ 1366px、ガターは padding 6.4px（gap は使わない）
- 992px 未満では html の font-size を 13px にする
- 本文に letter-spacing を足さない。palt は見出しにだけ当てる