淡交社（TANKOSHA） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体 1 本・ウェイト 1 段だけで組む。 茶道の月刊誌『淡交』を出す京都の出版社。太字も、ゴシックも、影も、角丸も使わない。字の大小と字間と行間の 3 つだけで階層をつくる
• 密度: 低い。新刊書影を大きく並べ、余白を多く取る。本文の行間は 2.00、リード文は 2.75 まで開く
• キーワード: 明朝一本、weight 400 のみ、0.2em の見出し、縦組み、抹茶色

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

1. サイト全体が font-weight: 400 だけでできている。 実測でトップ 321 要素中 321 要素、会社案内 159 要素中 159 要素がすべて 400。700 は 1 要素も無い。@font-face には Noto Serif JP の 700 が宣言されているが、document.fonts 上では全サブセットが unloaded（ダウンロードすらされていない）。太字を書くと、このサイトではなくなる
2. 書体は Noto Serif JP ただ 1 本。 実測 302 / 321 要素（残り 19 要素は <input> の UA 既定 Arial）。ゴシックは 1 文字も使わない
3. 字間は 2 段しかない。 本文は body に letter-spacing: .06em を 1 回だけ書いて継承させる（実測 0.96px が 279 要素）。見出しと英字ラベルには .2em を個別に当てる（32px→6.4px / 40px→8px / 30px→6px / 24px→4.8px / 13px→2.6px、すべて厳密に 0.2）。この 2 段以外の字間は存在しない
4. 縦組みが CSS で実装されている（画像ではない）。トップの h2.home-intro__head が writing-mode: vertical-rl、事業 3 枠のラベル「読む」「使う」「体験する」が vertical-lr。実測 4 要素

font-feature-settings: "palt" は 1 要素も使っていない（実測 0 件。CSS 全文でも 0 回）。フォントスタックに YakuHanMP の類も入っていないので、約物は詰まらないまま出る。CSS Custom Properties は自社トークン 0 個（検出された 49 個はすべて WordPress / Gutenberg の既定変数）。

2. Color Palette & Roles

Primary（ブランドカラー）

緑は 2 段。 #667938 がブランド色、#7e9d47 は下位見出しの面専用。新規実装では #667938 を既定にし、面を階層化したいときだけ #7e9d47 を使う。

Neutral（ニュートラル）

• Text Primary (#333333): 本文・見出し・ナビ。トップ 269 要素 / 会社案内 124 要素。純黒は使わない
• Text on Dark (#ffffff): 写真の上のラベル、面の上の文字（トップ 20 要素 / 会社案内 12 要素）
• Text Muted (#7a7a7a): 書影キャプション、コピーライト（5 要素）
• Text Muted Light (#909090): 社是のルビ的な添え文 -君子の交わりは、淡きこと水の若し-（1 要素）
• Surface Gray (#ededed): グローバルナビの子メニューの面（トップ 11 要素 / 会社案内 10 要素）
• Dot Inactive (rgba(51, 51, 51, 0.15)): カルーセルの非選択ドット（5 要素）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 viewportTopBySample (3/3)。html / body ともに塗り指定なしで UA 既定の白）

会社案内の下層ページはヒーロー帯 .l-sub-img が #667938 で塗られている（面積 259,200px²）が、コンテンツの地色は白。viewportTopByArea の先頭の緑を地色と取り違えないこと。

3. Typography Rules

3.1 和文フォント

• 明朝体（唯一の書体）: Noto Serif JP（Google Fonts 配信）。weight: 400 のみが loaded
• フォールバックは 游明朝 → ヒラギノ明朝 ProN W3 → HG明朝E → ＭＳ 明朝。Web フォントが落ちても明朝のまま出る
• ゴシック体は使わない。 ナビもボタンも脚注も明朝

3.2 欧文フォント

• 専用の欧文フォントを持たない。 tankosha books & magazines credo policy origin といった英字ラベルも Noto Serif JP の欧文グリフで組む
• 例外は <input type="search"> の 19 要素で、これは UA 既定の Arial。意図した指定ではないので、新規実装では入力欄にも明朝を当てる

3.3 font-family 指定

css/* サイト全体で 1 つだけ */
font-family: "Noto Serif JP", 游明朝, YuMincho,
             "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
             HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

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

• Web フォント → OS 明朝の一本道。 途中でゴシックに逃げる分岐が無い
• 游明朝には Windows の Medium 問題（游ゴシックで起きるようなウェイト取り違え）は無いため、別名 @font-face の細工は不要
• @font-face は Google Fonts の Noto Serif JP 400 と 700 が宣言されているが、700 は全サブセットが unloaded。 700 を当ててもブラウザの合成太字になる（下記 3.4 参照）

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

ウェイトは 400 の 1 段だけ。 下表の Weight 列がすべて 400 なのは誤記ではなく実測値。

html { font-size: 10px }。 rem を使うときは 10 倍で読むこと（1.6rem = 16px）。本文の 16px は body に直接書かれている。

3.5 行間・字間

行間は「文章の長さ」で 4 段に切り替える。

字間は 2 段しかない。

• 本文（継承）: body { letter-spacing: .06em } を 1 回だけ書く。実測 1440px で 0.96px、375px で 0.84px。サイズが変わっても 0.06 の比率が保たれている（＝ px ではなく em 宣言）
• 見出し・英字ラベル（個別）: letter-spacing: .2em を要素ごとに当てる。32px→6.4px、40px→8px、30px→6px、24px→4.8px、13px→2.6px。どれも厳密に 0.2
• 例外は 2 つだけ: ロゴ脇のタグライン 0.25em、ロゴの英字 0.84em

ガイドライン:

• 0.96px と書かない。0.06em と書く。 モバイルで body が 14px に落ちるため、px 固定にすると字間だけ取り残される
• 本文に .2em を当てない。 0.2em は見出しと英字ラベルの語彙
• 中間の字間（0.08em、0.1em など）を作らない。 このサイトは 0.06 と 0.2 の 2 段で階層をつけている

3.6 禁則処理・改行ルール

cssbody {
  word-break: break-all;   /* 実サイトの指定。下記の注意を読むこと */
}

• 実サイトは body に word-break: break-all を当てている（1440 / 1200 / 834 / 375px の 4 幅すべてで実測）
• これは欧文にとっては望ましくない挙動。 break-all は英単語を途中で割る。実サイトには tankosha books & magazines のような短い英字しか無いため表面化していないが、長い英文を入れると単語の途中で折れる
• 新規実装では overflow-wrap: anywhere か word-break: normal を使い、和文の折り返しはブラウザ既定に任せることを推奨する（和文は既定で任意の文字位置で折り返せる）
• word-break: keep-all も CSS に存在するが、これは英字ラベル用の局所指定

3.7 OpenType 機能

このサイトは font-feature-settings を一切使っていない（実測 0 要素 / CSS 全文でも 0 回）。

• palt を足さないこと。 Noto Serif JP の既定の字送りに .06em を足す、というのがこのサイトの組み方。palt を入れると約物が詰まって字間の設計が崩れる
• フォントスタックに YakuHanJP / YakuHanMP の類も入っていない。約物は詰まらないまま出るのが正しい状態
• 数字は書影のキャプション（発売日：2025年11月4日）に出るが、tnum などの指定は無い

3.8 縦書き

CSS で実装されている（画像に焼き込んだ文字ではない）。実測 4 要素。

css/* ヒーローの見出し */
.home-intro__head {
  writing-mode: vertical-rl;
  font-size: 32px;
  line-height: 2.18;        /* 69.76px */
  letter-spacing: .2em;     /* 6.4px */
}

/* 事業 3 枠のラベル */
.home-business__list-item-copy {
  writing-mode: vertical-lr;
  font-size: 40px;
  line-height: 1;           /* 40px = 1 文字送り */
  letter-spacing: .2em;     /* 8px */
  color: #ffffff;           /* 写真の上に置く */
}

• 縦組みでも行間の考え方は横組みと変わらない。 見出しは 2.18、1 行のラベルは 1.00
• 縦組みにも .2em の字間をそのまま当てている（横組みの見出しと同じ値）
• vertical-rl（右から左）と vertical-lr（左から右）を使い分けている。複数行の見出しは rl、1 列のラベルは lr

4. Component Stylings

border-radius はサイト全体で 0px。 実測で 0 以外だったのはカルーセルのドット（50%）14 要素だけ。

Buttons

Outline（既定の CTA）

• Background: transparent
• Text: #333333
• Border: 1px solid #333333
• Padding: 19px 20px 18px（上下が非対称。明朝のベースラインに合わせた調整）
• Border Radius: 0px
• Font: 16px / weight 400 / letter-spacing 0.06em
• 例: 淡交社について 編集の現場から一覧

Solid（検索）

• Background: #667938
• Text: #ffffff
• Border: なし
• Padding: 1px 6px
• Border Radius: 0px

Carousel Dot

• Size: 円形（唯一の border-radius）
• 選択: #333333 / 非選択: rgba(51, 51, 51, 0.15)

Badges

News Badge（新着情報）

• Background: #667938 / Text: #ffffff
• Padding: 1px 5px 2px
• Font: 12px / weight 400
• Border Radius: 0px

Department Heading（会社案内）

• Background: #7e9d47 / Text: #ffffff
• Font: 18px / weight 400
• Border Radius: 0px

Inputs

• Border Radius: 0px
• Padding: 1px 6px
• UA 既定の Arial が当たっている（実測 19 要素）。新規実装では明朝を明示すること
• 右に #667938 の検索ボタンを並べる

Cards（新刊書影）

• Background: #ffffff
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 書影画像の下に 書名 18px / lh 1.80 → 著者・発売日 14px / lh 1.80 を積む

5. Layout Principles

Spacing Scale

Container

• Max Width: 1120px（実測トップ 8 要素 / 会社案内 10 要素で最多。両ページで一貫）
• 968px: 本文カラム
• 1280px / 1920px: ヒーローカルーセルの全幅ブロック

Grid

• トップ: ヒーローカルーセル（全幅）→ 縦組みリード → 事業 3 枠（写真＋縦組みラベル）→ 新刊 4 カラム → お知らせ
• 会社案内: 帯（#667938）→ 社是 / 企業方針 / 社名の由来 を 32px 見出し＋ 2.00 の本文で縦に積む

6. Depth & Elevation

影を一切使わないサイト。 CSS 全文には box-shadow が 8 回、text-shadow が 2 回宣言されているが、実測した 2 ページの可視要素では 1 つも使われていない。filter: drop-shadow() も CSS 全文で 0 回。

写真の上の白文字（「読む」「使う」「体験する」）にも影を付けていない。 写真側を暗く選ぶことで可読性を取っている。新規実装で text-shadow を足さないこと。

階層は罫線（1px solid #333333）と面（#ededed / #667938）だけで作る。

7. Do's and Don'ts

Do（推奨）

• font-weight: 400 だけで組む。 サイズと字間と行間で階層をつくる
• 書体は Noto Serif JP 1 本。 フォールバックも明朝で揃える（游明朝 → ヒラギノ明朝 ProN W3 → ＭＳ 明朝）
• body { letter-spacing: .06em } を 1 回書いて継承させる
• 見出しと英字ラベルには letter-spacing: .2em を個別に当てる
• 行間を文章の長さで切り替える: UI 1.50 → 書誌メタ 1.80 → 本文 2.00 → リード 2.75
• border-radius: 0 を貫く（円形のカルーセルドットだけ例外）
• 本文色は #333333、ブランド色は #667938
• 縦組みは writing-mode で実装する。複数行は vertical-rl、1 列ラベルは vertical-lr

Don't（禁止）

• font-weight: 700 を当てない。 Noto Serif JP の 700 は宣言されているが unloaded で、ブラウザの合成太字になる。実サイトには太字が 1 要素も無い
• ゴシック体を混ぜない。 ナビもボタンも入力欄も明朝
• font-feature-settings: "palt" を足さない（実サイトは 0 要素）
• 字間を 0.96px のような px 値で書かない。 モバイルで body が 14px に落ちるため比率が崩れる
• 0.06em と 0.2em の中間の字間を作らない
• box-shadow / text-shadow / filter: drop-shadow() を足さない（可視要素で 0 件）
• border-radius を 4px や 8px にしない
• 本文色を純黒 #000000 にしない（実サイトは #333333）
• word-break: break-all を欧文の多い画面にそのまま持ち込まない（3.6 参照）

8. Responsive Behavior

Breakpoints

• 分岐点が 600px と低い。 タブレットを独立して扱わず、600px を境に 2 面だけで設計している

タッチターゲット

• Outline ボタンは 19px 20px 18px のパディング＋ 16px の文字で約 58px 高。44px を満たす
• 検索ボタン（1px 6px）と 新着情報 バッジ（1px 5px 2px）は下回る。モバイルでは高さを確保すること

フォントサイズの調整

body の font-size が SP で落ちる。html は 10px で固定。

• 比率（1.50）と字間（.06em）は保たれ、基準サイズだけが 16px → 14px に落ちる。 line-height と letter-spacing を比率・em で書いているから成立している
• px で書き写すとモバイルで崩れる。 line-height: 1.5 / letter-spacing: .06em と書くこと

9. Agent Prompt Guide

クイックリファレンス

Brand Green:   #667938
Green Light:   #7e9d47
Text Color:    #333333
Muted:         #7a7a7a
Surface:       #ededed
Background:    #ffffff
Font (JP): "Noto Serif JP", 游明朝, YuMincho, "Hiragino Mincho ProN W3", HG明朝E, "ＭＳ 明朝", serif
Font Weight:   400 のみ（700 を使わない）
html font-size: 10px
Body Size:     16px（SP 14px）
Line Height:   1.50（UI） / 1.80（書誌） / 2.00（本文） / 2.75（リード）
Letter Spacing: .06em（body に 1 回・継承） / .2em（見出し・英字ラベル）
Border Radius: 0px
Box Shadow:    none
Container:     1120px
Breakpoint:    600px

プロンプト例

淡交社のデザインシステムに従って、書籍一覧ページを作成してください。
- font-family は "Noto Serif JP", 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ＭＳ 明朝", serif の 1 本だけ
- font-weight は 400 のみ。太字は一切使わない（700 は合成太字になるため禁止）
- body に letter-spacing: .06em と line-height: 1.5 を書いて継承させる
- セクション見出しは 32px / weight 400 / letter-spacing .2em
- 英字ラベル（books & magazines）は 13px / letter-spacing .2em
- 書名は 18px / line-height 1.8、本文は 16px / line-height 2.0、導入文は line-height 2.75
- CTA は transparent 背景 + 1px solid #333333 + padding 19px 20px 18px + border-radius 0
- 検索ボタンだけ背景 #667938 / 白文字
- border-radius はすべて 0px（カルーセルのドットのみ 50%）
- box-shadow と text-shadow は使わない。写真の上の白文字にも影を付けない
- font-feature-settings: "palt" は使わない
- コンテナは 1120px、ブレークポイントは 600px
- SP（375px）では body を 14px に落とす。line-height と letter-spacing は比率・em のままにする