# DESIGN.md — ツムラ（TSUMURA） > このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 > セクションヘッダーは英語、値の説明は日本語で記述しています。 > 実測日: 2026-10-16 / 対象: `https://www.tsumura.co.jp/`, `/corporate/quality/` --- ## 1. Visual Theme & Atmosphere - **デザイン方針**: **生薬の色（くすんだ赤茶 `#803b2d`）を基調に、字間を一律 `.06em` 空けて組む。** 漢方という題材を、湿度のある茶系と広めの字送りで表現している - **密度**: 低い。本文は 14〜16px、行間 1.4、余白を大きく取る。1 画面に詰め込まない - **キーワード**: 生薬の赤茶、.06em の字空け、ピル型ボタン、影ひとつ **このサイトの核心は4つある。** 1. **字間 `.06em` を CSS の 46 箇所に手で配っている。** `body` に書いて継承させるのではなく、**各要素が自分のサイズで `em` を宣言する**ため、px がサイズに比例して変わる（14px→**0.84px** 54 要素 / 16px→**0.96px** 50 要素 / 20px→**1.2px** / 17px→**1.02px** / 13px→**0.78px**）。**この比例関係が崩れると別のサイトになる** 2. **`font-feature-settings: "palt"` は CSS に 8 箇所あるが、実際には効いていない**（トップの可視要素 0 件、下層 1 件）。**詰めているのではなく、空けているサイト** 3. **ヒーローの「自然と健康を科学する」は画像**（`txt_mv_1.png` / `txt_mv_2.png`、418×260px）。28px 以上の実テキストはトップに **1 要素も無い**。Web フォントで再現しようとしてはいけない 4. **影は全ページで 1 種類だけ**（`rgba(14,19,31,.1) 0 0 35px`、可視 1 要素）。段はすべて**面色**（`#f1f1f6` / `#f3eeed` / `#e9e4e3`）で作る CSS Custom Properties は実質 0 個（4 個あるうち 2 個は Swiper の既定値）。**設計トークンは存在せず、値はすべて直書き。** --- ## 2. Color Palette & Roles ### Primary（ブランドカラー） | 役割 | 実装値 | 実測 | |------|--------|------| | **生薬の赤茶** | **`#803b2d`** | **下層で面 26 要素 / 文字 16 要素、トップで面 4 要素 / 文字 10 要素**。CTA の塗り、見出し、`Movie` 等の英字ラベル。このサイトの主役 | | Brown Alt | `#773f31` | 下層の英字見出し 2 要素。**`#803b2d` とごくわずかに違う別値が混在している**（実装の実態。新規では `#803b2d` に寄せてよい） | | Brown Alt 2 | `#7f3b2d` | 同上 1 要素 | | **Taupe（バッジ面）** | **`#998882`** | **可視 15 要素の塗り面**。`IRニュース` `イベント` `ニュースリリース` のカテゴリバッジ | | **Gold** | **`#a79364`** | `日本の自然と伝統文化` の見出し 1 要素のみ。**明朝体（Noto Serif JP）と組で使う** | | Alert Red | `#c0163e` | `重要なお知らせ` の見出し 1 要素のみ | ### Neutral（ニュートラル） - **Text Primary** (`#333333`): 本文・ナビ。**可視 55 要素（トップ）／ 66 要素（下層）** - **Text Secondary** (`#666666`): ユーティリティナビ、補助文。**可視 61 要素** - **Text Strong** (`#222222`): 見出し h2（可視 12 要素） - **Text on Dark** (`#ffffff`): 茶面・写真上（可視 36 要素） - **Background** (`#ffffff`): ページ背景。`html` / `body` ともに塗り指定なしで、UA 既定の白 - **Surface Cool** (`#f1f1f6`): 製品検索タブ、`重要なお知らせ` の面（可視 10 要素）。**わずかに青みのあるグレー** - **Surface Warm** (`#f3eeed`): 下層のセクション面（可視 9 要素）。**赤茶を薄めた暖色のグレー** - **Surface Warm 2** (`#e9e4e3`): 下層のフィルタ面 - **Border** (`rgba(119,63,49,.2)`): 下層のピル型タグの枠。**黒ではなくブランド色の 20%** > **グレーが 2 系統ある。** `#f1f1f6`（寒色）はトップの機能面、`#f3eeed`（暖色）は下層のコンテンツ面。**混ぜない。** --- ## 3. Typography Rules ### 3.1 和文フォント - **ゴシック体（既定）**: **Noto Sans JP**（Google Fonts）。**可視 161 要素（トップ）／ 193 要素（下層）** でサイトのほぼ全部 - **明朝体**: **Noto Serif JP**。**可視 3 要素だけ**（`日本の自然と伝統文化` の見出しとその内訳）。weight 600。**明朝は「日本の伝統」を語る一語にだけ使う** ### 3.2 欧文フォント - **Lato**: 日付・`News` などの英数字。**可視 13 要素**。300 / 400 が `loaded` - **DM Sans**: **下層ページ専用の英字見出し**（`Movie` `Process` `Quality Policy`）。**可視 22 要素**。`loaded` - **Antonio**: `@font-face` の宣言はあるが **全ウェイト `unloaded`・可視 0 要素**。実装しない ### 3.3 font-family 指定 ```css /* 本文（実サイトの宣言をそのまま） */ font-family: "Noto Sans JP", sans-serif; /* 明朝（ブランドの一語のみ） */ font-family: "Noto Serif JP", serif; /* 英数字（日付・News） */ font-family: Lato, Helvetica, sans-serif; /* 下層の英字見出し */ font-family: "DM Sans", sans-serif; ``` - フォールバックは `sans-serif` 1 つだけの潔い構成。OS フォント名を並べない - フォント要求は **141 件、すべて `fonts.gstatic.com`**（Noto Sans JP の unicode-range サブセット）。`@font-face` の直書きは 1 件（Swiper のアイコン）のみ ### 3.4 文字サイズ・ウェイト階層 | 役割 | サイズ | ウェイト | 行間 | 字間 | 実測 | |------|--------|---------|------|------|------| | ヒーロー大見出し | — | — | — | — | **画像（PNG）。テキストではない** | | 大見出し h3 | 34px | **300** | 1.6 | 2.04px（= **.06em**） | 色 `#803b2d`。**細いウェイトで大きく組む** | | セクション見出し h2 | 30px | 500 | 1.4 | 1.5px（= .05em） | 色 `#222222` | | 下層の和文見出し | 37px | 500 | — | **2.76px**（= .0746em） | `生薬の栽培・調達` 等 5 要素 | | ナビ | 20px / 17px | 500 | 1.4 | 1.2px / 1.02px（= .06em） | | | 本文 | 15〜16px | 400 / 500 | **1.4** | 0.9〜0.96px（= .06em） | | | ユーティリティ | 14px | 400 | 1.4 | **0.84px**（= .06em） | **可視 52〜62 要素で最多** | | 注記 | 12〜13px | 400 | 1.6 | 0.78px（= .06em） | | **ウェイトは 300 / 400 / 500 の 3 段が主**（可視 400:113 / 500:47 / 300:14）。**700 はトップに 1 要素も無い。** 下層にだけ 600（40 要素）・700（5 要素・数字の `01` `02` `03`）・800（1 要素）が出る。 ### 3.5 行間・字間 — `.06em` を各要素に当てる ```css /* 実サイトの最頻宣言（CSS 全文で 46 箇所） */ letter-spacing: .06em; ``` **これは `body` 継承ではない。** サイズごとに px が変わっているのが証拠: | フォントサイズ | 実測 `letter-spacing` | 可視要素数 | |---|---|---| | 14px | **0.84px** | 52〜54 | | 16px | **0.96px** | 31〜50 | | 20px | **1.2px** | 13〜16 | | 17px | **1.02px** | 6 | | 13px | **0.78px** | 8〜11 | - **`em` で書いて各要素に配る。** `px` に読み替えると、サイズを変えたときに比率が崩れる - ただし **`rem` 宣言も混在している**（`.08rem` 5 箇所 / `.07rem` 4 箇所 / `.06rem` 3 箇所 / `.075rem` 2 箇所）。`html` が **10px** なので `.08rem = 0.8px` という**サイズ非依存の絶対値**。`em` と `rem` が同じサイトに同居しているので、**写すときは単位ごと写す** - `.05em` も 16 箇所あり、**見出しの一部だけわずかに狭い** #### 行間 ```css line-height: 1.4; /* CSS 全文で 127 箇所。可視 118〜132 要素で最多 */ ``` - **無単位の比率で書く**（`em` や `px` ではない）。各要素が自分のサイズで再計算する - 本文の読み物（CEO メッセージ、品質方針）だけ **1.8 / 2.3 / 2.6** と大きく開ける - `body` の `line-height` は **20.8px（= 1.3）**。本文ブロックでは必ず上書きされている ### 3.6 禁則処理・改行ルール - `word-break` は **`normal`**（6 幅すべてで確認）。`break-all` も `auto-phrase` も使っていない - 日本語の既定の禁則処理に任せる。読み物の行長は `max-width` で抑える ### 3.7 OpenType 機能 **`font-feature-settings: "palt"` は CSS 全文に 8 箇所あるが、実際には効いていない。** - 可視要素の実測は **トップ 0 件 / 下層 1 件**。宣言されたセレクタが描画される要素に当たっていない - **このサイトは詰めるのではなく、`.06em` で空けている。** `palt` を足すと設計が反転する - **再現するときは `font-feature-settings` を書かない** ### 3.8 縦書き - `writing-mode` が付くのは **`MENU` ボタン（34×127px の側面タブ）7 要素だけ**。本文の縦組みは無い - **ただし実サイトは `vertical-lr` を使っており、これは日本語として誤り。** 日本語の縦組みは右から左に流れるので `vertical-rl` が正しい（1 行のラベルなので実害は出ていない） ```css /* 実サイトはこうだが */ writing-mode: vertical-lr; /* 正しくは */ writing-mode: vertical-rl; ``` --- ## 4. Component Stylings ### Primary Button（ピル型・下層） ```css background: #803b2d; color: #ffffff; font-size: 16px; font-weight: 800; /* 小さい版は 13px / weight 400 */ line-height: 22.4px; letter-spacing: 0.8px; /* = .05em */ border-radius: 100px; /* ★完全なピル */ border: none; ``` ### Tag / Filter（枠線のピル） ```css background: transparent; color: #333333; font-size: 10px; line-height: 10px; letter-spacing: 0.96px; border: 1px solid rgba(119, 63, 49, 0.2); /* ★黒ではなくブランド色の20% */ border-radius: 100px; ``` ### Card（下層） ```css background: #ffffff; border-radius: 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.8px; box-shadow: none; /* ★カードに影は付けない */ ``` ### Badge（カテゴリ） ```css background: #998882; color: #ffffff; font-size: 12px; line-height: 16.8px; letter-spacing: 0.96px; border-radius: 0; /* ★バッジは直角 */ ``` ### 角丸の実測 | 値 | 可視要素数 | 用途 | |---|---|---| | **100px** | **46**（下層） | **ボタン・タグ（主役）** | | 50% | 10〜14 | 丸いアイコン | | 16px | 10 | 下層のカード外枠 | | 6px | 6 | 下層の小さいカード | | **30px 30px 0 0** | 3 | **セクションの上端だけを丸める** | | 30px 0 0 30px / 0 30px 30px 0 | 各 1 | 左右どちらかだけを丸める | | **0px** | — | **バッジ・タブ・トップの CTA** | > **トップはほぼ直角、下層はピルと 16px。** ページによって角丸の方針が違う。 --- ## 5. Layout Principles - トップのヒーローは**全画面の写真スライド**で、その上に**文字を画像で**重ねる - 下層（`/corporate/quality/`）のヒーローは **`