ツムラ（TSUMURA） DESIGN.md

このファイルは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（ブランドカラー）

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 文字サイズ・ウェイト階層

ウェイトは 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 が変わっているのが証拠:

• em で書いて各要素に配る。 px に読み替えると、サイズを変えたときに比率が崩れる
• ただし rem 宣言も混在している（.08rem 5 箇所 / .07rem 4 箇所 / .06rem 3 箇所 / .075rem 2 箇所）。html が 10px なので .08rem = 0.8px というサイズ非依存の絶対値。em と rem が同じサイトに同居しているので、写すときは単位ごと写す
• .05em も 16 箇所あり、見出しの一部だけわずかに狭い

行間

cssline-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（ピル型・下層）

cssbackground: #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（枠線のピル）

cssbackground: 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（下層）

cssbackground: #ffffff;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.8px;
box-shadow: none;          /* ★カードに影は付けない */

Badge（カテゴリ）

cssbackground: #998882;
color: #ffffff;
font-size: 12px;
line-height: 16.8px;
letter-spacing: 0.96px;
border-radius: 0;          /* ★バッジは直角 */

角丸の実測

トップはほぼ直角、下層はピルと 16px。 ページによって角丸の方針が違う。

5. Layout Principles

• トップのヒーローは全画面の写真スライドで、その上に文字を画像で重ねる
• 下層（/corporate/quality/）のヒーローは <video>（1440×900）
• セクションの面を 30px 30px 0 0 で上端だけ丸め、前のセクションに重ねて段差を作る
• 本文の最大幅は固定値で、中央寄せ

6. Depth & Elevation

影は全ページで 1 種類だけ。

cssbox-shadow: rgba(14, 19, 31, 0.1) 0px 0px 35px 0px;   /* 可視 1 要素 */

• 0 0 35px（offset なしの大きなぼかし）。真下に落とす影ではない
• 色は黒ではなく rgba(14,19,31,.1)＝わずかに青い黒。そのまま写す
• カード・ボタン・バッジには影を付けない。段は面色（#f1f1f6 / #f3eeed / #e9e4e3）で作る

7. Do's and Don'ts

Do

• 字間 .06em を各要素に em で当てる（body に 1 回書いて継承させない）
• 行間は無単位の 1.4。読み物だけ 1.8〜2.6
• 大見出しは weight 300 で大きく（34px / #803b2d）
• ボタンは border-radius: 100px の完全なピル
• 枠線は rgba(119,63,49,.2)＝ブランド色の薄めを使う
• 明朝（Noto Serif JP）は**「日本の伝統」を語る一語にだけ**使う

Don't

• ヒーローの大見出しを Web フォントで組まない。 実サイトは PNG 画像（txt_mv_*.png）
• font-feature-settings: "palt" を当てない。 このサイトは詰めずに空けている
• letter-spacing を px で書かない（.06em の比例が崩れる）。ただし rem 宣言の箇所は rem のまま
• 700 をトップの見出しに使わない（トップに 1 要素も無い）
• カードやボタンに影を付けない（影は全ページで 1 要素だけ）
• #f1f1f6（寒色）と #f3eeed（暖色）を混ぜない
• writing-mode: vertical-lr と書かない（実サイトの誤り。正しくは vertical-rl）

8. Responsive Behavior

• html は 6 幅すべて 10px で固定（rem 宣言はこの 10px が基準。.08rem = 0.8px）
• body だけが 375px で 16px → 15px に落ちる。 1440〜767px は完全に同じで、崖はもっと狭いところにある
• 字間は em 宣言なので body の縮小に追従する（0.96 → 0.9px）。px に固定すると追従しなくなる

9. Agent Prompt Guide

このサイトの見た目でUIを作るときは、次を守る。

1. 書体は Noto Sans JP（300 / 400 / 500）。フォールバックは sans-serif のみ
2. 字間は .06em を各要素に当てる（body 継承にしない）。行間は無単位 1.4
3. 主役の色は #803b2d（生薬の赤茶）。バッジ面は #998882
4. 本文 #333333 / 補助 #666666 / 見出し #222222
5. ボタンは border-radius: 100px、枠線は rgba(119,63,49,.2)
6. 影は使わない。 段は #f1f1f6（寒色）か #f3eeed（暖色）の面で作る
7. 大見出しは weight 300 の 34px。太字で詰めない
8. 明朝（Noto Serif JP）を使うのはブランドの一語だけ