天童木工（Tendo Mokko） DESIGN.md

天童木工株式会社（https://www.tendo-mokko.co.jp/）のデザイン仕様書。 1940年創業、山形・天童の家具メーカー。柳宗理「バタフライスツール」や 成形合板（Roll Press Wood）の名作家具で知られる、日本のモダンデザインの担い手。 実サイトの computed style 実測（2026-06-24 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: Helvetica ベースのモノクロームで組む、静かでミニマルなプロダクト／ギャラリー型デザイン。白地に #333333 のテキスト、角丸ゼロ（radius 0）の四角い枠線ボタン、家具写真を主役にした余白の多い editorial。抑制と精度が天童木工らしさ
• 天童木工について: 成形合板技術と、柳宗理・剣持勇・Bruno Mathsson らの名作を製造してきた老舗。サイトも「製品＝作品」を端正に並べるカタログ／アーカイブ的構成。装飾を排し、写真とタイポグラフィの規律で品質感を出す
• 密度: 低〜中密度。グリッドに製品サムネイルを整然と並べ、ラベルは小さく 15px 前後。本文 line-height は 1.3 とタイトめで端正
• キーワード: Helvetica、モノクローム、角丸ゼロ、四角い枠線、写真主導、editorial、老舗、成形合板、規律
• 特徴:
  • 欧文は Helvetica / Helvetica Neue / Arial、和文は ヒラギノ角ゴ Pro（W3）→ メイリオ。欧文優先のフォールバック
  • 基調はモノクローム（テキスト #333333 / 白 #ffffff / グレー罫線 #b6b6b6・#e2e2e2）
  • 唯一のアクセントは深紅 #b20000。"NEW" バッジ・選択中・チェック等にごく少量だけ使う
  • ボタン・タイルは角丸ゼロ（radius 0）の直線的な枠線。pill や強い角丸は一切使わない
  • 本文サイズは 15px（16px ではない）。ラベル・ナビは 12〜14px と小さめで端正
  • オーバーレイ・メニューは**ダーク（rgba(45,45,45,0.9)）**に反転し、白テキストを乗せる
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。基調はモノクローム＋深紅アクセント。

Brand / Core

• Text Primary (#333333): 見出し・本文・ナビ・ロゴの主要テキスト（白地）
• Background (Main) (#ffffff): ページ背景・メインキャンバス
• Accent Red (#b20000): "NEW" バッジ・選択中・チェックマーク等のアクセント（少量のみ）

Neutral / Line

Dark Overlay（反転メニュー）

Semantic（推奨値）

実サイトに明確なエラー／成功色は確認されなかった（アクセントは深紅 #b20000 のみ）。モノクロームのトーンを崩さない範囲で推奨する補完値:

• Danger: #b20000（ブランドの深紅を流用）
• Success: #333333（色ではなくチェックアイコン／テキストで表現）
• Link Hover: #000000（黒に寄せる）または #b20000

3. Typography Rules

3.1 和文フォント

• ゴシック体（メイン）: ヒラギノ角ゴ Pro W3（"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"）→ メイリオ / Meiryo → "ＭＳ Ｐゴシック" / "MS PGothic"。OS 標準のゴシックで描画する
• ProN ではなく Pro: 天童木工は Pro（第一水準・第二水準漢字。約物が異なる）を指定。ProN と混同しない
• 明朝体: 使用しない（全面ゴシック）
• weight は 400（本文・ナビ）/ 700（強調ラベル）の2段

3.2 欧文フォント

• サンセリフ（メイン）: Helvetica → Helvetica Neue → Arial。Web フォントは読み込まず、システムフォントで描画する
• 製品名・カテゴリ名の英字（"Tendo Classics" "Roll Press Wood" 等）は Helvetica の端正な字面で見せる

3.3 font-family 指定

css/* 全テキスト共通 */
font-family: Helvetica, "Helvetica Neue", Arial,
  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

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

• 欧文・数字は Helvetica → Helvetica Neue → Arial（欧文優先）
• 和文は ヒラギノ角ゴ Pro W3 → メイリオ → MS Pゴシック（Mac → Windows の順）
• Web フォント非依存のため初期表示が速い。Helvetica の規律ある字面がブランドの精度感を担う

preview.html での注記: Helvetica・ヒラギノは OS 依存（Adobe/Web フォント不使用）。Mac では Helvetica + ヒラギノ角ゴ Pro、Windows では Arial + メイリオで描画される。preview では雰囲気を近づけるため、欧文 Helvetica Neue 系、和文フォールバックに Noto Sans JP を補助的に読み込んでもよい（実機は OS フォント）。

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

実測値（トップページ、2026-06-24 取得）。本文 15px・タイトな line-height 1.3 が端正さの核。

3.5 行間・字間

行間 (line-height) — 実測:

• 本文・ナビ (15px): 1.3（19.5px。端正でタイト）
• メニューリスト (15px): 2.1〜2.6（行間を大きく開けたリスト）
• ラベル・日付 (12〜14px): 1.14〜1.33

字間 (letter-spacing) — 実測:

• 全テキスト normal。Helvetica / ヒラギノのメトリクスにそのまま委ねる。トラッキングは加えない

ガイドライン:

• 本文は 15px / line-height 1.3 とやや詰めて端正に組む（広げすぎない）
• メニュー・目次は逆に line-height 2.0 以上で余白を開け、選びやすくする
• letter-spacing は触らず normal（規律は字面と余白で出す）

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 製品名（"バタフライスツール" 等）は折り返しを避け、収まらなければ 2 行で省略
• 英字製品名は white-space: nowrap

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt 等は未採用。システムフォントのメトリクスをそのまま使う

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

実測値。すべて 角丸ゼロ（radius 0）の直線的な枠線が基調。

Buttons / CTA

Primary Outline Button（実測） — "Online Store" / "Showroom" / "Contact"

• Background: transparent
• Text: #333333（Helvetica 15px / weight 400）
• Border: 1px solid #333333
• Border Radius: 0px（角丸ゼロ）
• 四角い枠線のリンクボタン。英字＋和文補足を2行で組むことが多い

Secondary Outline Button（実測） — メニュー内 "Tendo Classics" 等

• Background: transparent
• Text: #333333（Helvetica 15px / weight 400）
• Border: 1px solid #b6b6b6（淡い罫線）
• Border Radius: 0px
• セカンダリ。淡いグレー枠で控えめに

Accent Button（推奨・少量）

• Background: #b20000
• Text: #ffffff（weight 400〜700）
• Border: なし
• Border Radius: 0px
• 強調が必要なときだけ深紅。多用しない（1 画面に 1 つ程度）

Badge

"NEW" Badge（実測）

• Background: #b20000
• Text: #ffffff（12px / weight 400）
• Padding: 10px 13px（実測の checkmark 系。バッジは小さく）
• Border Radius: 0px
• 新着・選択中を示す唯一の有彩アクセント

Inputs

Text Input（推奨）

• Background: #ffffff
• Border: 1px solid #b6b6b6
• Border Radius: 0px（角丸ゼロ）
• Padding: 8px 12px
• Font: 15px / weight 400 / #333333
• Focus: border #333333（または #b20000）。リングは付けず罫線の濃淡で示す

Cards / Surfaces

Product Tile（推奨）

• Background: #e2e2e2（サムネイルの地）または #ffffff
• Border: なし（影なし）／必要なら 1px solid #e2e2e2
• Border Radius: 0px
• 製品写真＋小さなラベル（製品名 12px / カテゴリ 12px / 700）。余白とグリッドで区切る
• "NEW" の製品には深紅バッジを重ねる

Dark Menu / Overlay（実測）

• Background: rgba(45,45,45,0.9)（≒ #2d2d2d）
• 見出し・リンク・"CLOSE": #ffffff
• ナビは行間を広く（line-height 2.0+）開けた白テキストのリスト

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1080〜1200px（推奨）
• Padding (horizontal): mobile 16px / desktop 24〜40px
• 製品サムネイルを整然と並べる中央寄せグリッド。余白を端正にとる

Border Radius Scale

• 天童木工は角丸を一切立てない（radius 0）。pill・角丸は使わない

Grid

• Columns: 推奨 12 カラム
• Gutter: 16〜24px
• 製品タイル: 4列（desktop）→ 3列（tablet）→ 2列（mobile）。整然と揃える

6. Depth & Elevation

• 天童木工は基本的に影を使わない（フラット）
• 立体感は 白地 ↔ ダークオーバーレイ（#2d2d2d）のコントラストと、罫線（#333333 / #b6b6b6）の濃淡で表現する
• どうしてもポップオーバー等で影が必要な場合のみ、ごく薄い 0 2px 8px rgba(0,0,0,0.08) を推奨（多用しない）

7. Do's and Don'ts

Do（推奨）

• フォントは Helvetica, "Helvetica Neue", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif のチェーン（欧文優先）
• 和文は **ヒラギノ角ゴ Pro（ProN ではない）**を指定する
• 本文は 15px / line-height 1.3 とやや詰めて端正に組む。メニュー・目次は逆に line-height 2.0+ で開ける
• 基調はモノクローム（テキスト #333333 / 白 #ffffff / 罫線 #b6b6b6・#e2e2e2）
• アクセントは深紅 #b20000 のみを "NEW" バッジ・選択中・チェックにごく少量使う
• ボタン・入力・タイル・バッジは角丸ゼロ（radius 0）の直線的な枠線
• メニュー／オーバーレイはダーク（#2d2d2d / rgba(45,45,45,0.9)）に反転し白テキストを乗せる
• 写真を主役に、余白とグリッドの規律で品質感を出す

Don't（禁止）

• 角丸（radius）を立てない（pill・角丸 8px は天童木工らしさを壊す。すべて 0）
• letter-spacing を加えない（normal。規律は字面と余白で）
• 深紅以外の有彩色を持ち込まない（モノクローム＋深紅 #b20000 が基調）
• 深紅 #b20000 を大きな面に塗らない（バッジ・少量のアクセントに限定）
• 本文を 16px 以上に大きくしない（15px の端正さを保つ）／逆にメニューを詰めすぎない
• 影を多用しない（基本フラット。奥行きは罫線とダーク反転で）
• 和文に ProN を指定しない（天童木工は Pro）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Section Heading: 24〜28px → 20px
• 本文 15px・line-height 1.3 は維持
• 製品タイル: 4列 → 3列 → 2列（整然と揃える）
• ナビはダークオーバーレイのフルスクリーンメニューに（line-height 2.0+ のリスト）
• 枠線ボタンは横幅いっぱいに伸ばしてもよい（radius 0 は維持）

タッチターゲット

• 枠線ボタン: 高さ 44px 以上
• メニュー項目: 高さ 44px 以上（line-height を広く確保済み）
• 製品タイル: タイル全体をタップ可能に

ダークモード

• 該当なし（実測時点で未対応。ただしダークオーバーレイメニューが構造的に存在する）

9. Agent Prompt Guide

クイックリファレンス

Text Primary: #333333
Background (Main): #ffffff
Accent Red: #b20000（少量のみ）

Border (strong): #333333
Border (light): #b6b6b6
Tile Grey: #e2e2e2
Overlay Dark: rgba(45,45,45,0.9) ≒ #2d2d2d
Text on Dark: #ffffff

Font: Helvetica, "Helvetica Neue", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
（欧文優先・Web フォント非依存・和文は Pro / ProN ではない）

Section Heading: Helvetica 24-28px / weight 400 / line-height 1.4 / #333333
Body / Nav: 15px / weight 400 / line-height 1.3 / normal / #333333
Emphasis Link: 15px / weight 700 / #333333
Menu Item: 15px / weight 400 / line-height 2.1-2.6（行間広め）
Date / Meta: 14px / weight 400 / line-height 1.14
Category Label: 12px / weight 700
"NEW" Badge: 12px / #fff on #b20000
letter-spacing: normal（全域）

Primary Outline Button: transparent / text #333 / border 1px #333 / radius 0
Secondary Outline: transparent / text #333 / border 1px #b6b6b6 / radius 0
Accent Button (少量): bg #b20000 / text #fff / radius 0
Input: bg #fff / border 1px #b6b6b6 / radius 0
Product Tile: bg #e2e2e2 or #fff / radius 0 / 影なし
Radius: 0（全要素・角丸禁止）
Shadow: none（基本フラット。奥行きは罫線とダーク反転で）

プロンプト例

天童木工（Tendo Mokko）のデザインシステムに従って、名作家具の製品紹介セクションを作成してください。
- フォント: Helvetica, "Helvetica Neue", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
  （欧文優先。和文は ProN ではなく Pro を指定。Web フォントは読み込まない）
- 基調はモノクローム: テキスト #333333 / 背景 #ffffff / 罫線 #b6b6b6・#e2e2e2
- 本文・ナビ: 15px / weight 400 / line-height 1.3 / letter-spacing normal / color #333333（端正にやや詰めて組む）
- セクション見出し: Helvetica 24-28px / weight 400 / line-height 1.4
- メニュー・目次は逆に line-height 2.0+ で行間を広く開ける
- アクセントは深紅 #b20000 のみ。"NEW" バッジ・選択中・チェックにごく少量だけ使う（大きな面には塗らない）
- ボタン・入力・タイル・バッジはすべて角丸ゼロ（border-radius: 0）の直線的な枠線
- 主要ボタンは透明地＋1px solid #333 の四角い枠線。セカンダリは 1px solid #b6b6b6 の淡い枠線
- メニュー／オーバーレイはダーク（rgba(45,45,45,0.9)）に反転し、白テキストを乗せる
- box-shadow は使わない（フラット。奥行きは罫線の濃淡とダーク反転で表現）
- 製品写真を主役に、余白とグリッド（4列）の規律で品質感を出す