TOMBOW（トンボ鉛筆） DESIGN.md

トンボ鉛筆（https://www.tombow.com/）のデザイン仕様書。 1913年創業の総合文具メーカー。MONO消しゴム、ABTデュアルブラシペン、PiTのり等で知られる。 実サイトの computed style 実測（2026-06-20 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調にしたクリーンなコーポレートサイト。ディープクリムゾン #b70031 のブランドカラーがロゴ・CTA・リンクに一貫して使われ、老舗文具メーカーの品格と信頼感を表現。欧文セクション見出し（"NEWS"、"BRAND"）を weight 300 + 広い letter-spacing で大きく配置し、エディトリアルな印象を作る
• 密度: 本文の line-height は 1.68 とやや広め。body 全体に letter-spacing: 1px を指定し、日本語の読みやすさを確保。セクション見出しはさらに letter-spacing: 4px と大きく空ける
• キーワード: ディープクリムゾン、クリーン白基調、Barlow ジオメトリック欧文、YakuHanJP 約物詰め、エディトリアル見出し、老舗の品格
• 特徴:
  • YakuHanJP（約物半角専用フォント）を font-family の先頭に配置。括弧・句読点の余白を詰め、日本語組版の密度を上げる独自のアプローチ
  • Barlow（Google Fonts のジオメトリック・サンセリフ）を和文フォントの前に配置。欧文テキストは Barlow の均整な字形で表示される
  • 欧文セクション見出し（"NEWS"、"BRAND"、"PRODUCTS"）は weight 300（Light）で上品に、日本語の説明見出しは weight 400〜700 で読みやすさを確保
  • ブランドカラー #b70031 は CTA ボタン・テキストリンク・ロゴに限定使用。面で大きく塗ることは少なく、白い画面にポイントで効かせる
  • セクション背景の切り替えに #f6f7f9（クールライトグレー）を使用
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Brand Crimson (#b70031): メインのブランドカラー。ロゴアイコン、CTA ボタン背景、テキストリンク色。rgb(183, 0, 49) の深い赤
• Accent Teal (#44c1bb): "楽しむ" カテゴリのアクセント色。ブランドページ等で使用
• Accent Red (#ee4540): "見る" カテゴリのアクセント色。動画系コンテンツで使用
• Accent Purple (#5e2c47): "知る" カテゴリのアクセント色。読み物系コンテンツで使用

CTA / Buttons

• Primary CTA: 背景 #b70031 / 文字 #ffffff / radius 24px / border 1px solid #b70031 / 14px / weight 600
• Round Button（Ghost）: 背景 transparent / 文字 #000000 / border 1px solid #cccccc / radius 16px / 10px / weight 600
• Footer Round Button: 背景 transparent / 文字 #000000 / border 1px solid #b6b9b9 / radius 16px / 14px / weight 600

Tag / Badge

• Press Release Tag (#355e7e): プレスリリースのカテゴリタグ背景。文字 #ffffff / radius 4px / 10px / weight 600

Neutral

Semantic（実測未確認・推奨値）

実サイトにはフォーム系のエラー／成功色は表面化していない。コーポレートサイト向け推奨値:

• Danger: #cc0000 — ブランドレッドと近すぎないよう注意
• Success: #1e7b65 — 穏やかなグリーン
• Warning: #d97706 — オレンジ

Header

• Header BG: #ffffff
• Header Shadow: rgba(128, 130, 131, 0.2) 0px 5px 10px 0px
• Position: 固定（スクロール追従）

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を本命に、游ゴシック系をフォールバック
• 明朝体: 使用しない（サイト全体ゴシック統一）
• 特殊: YakuHanJP を font-family の先頭に配置。約物（括弧・句読点）のみを持つ特殊フォントで、約物の前後の余白を詰める

3.2 欧文フォント

• Barlow: ジオメトリック・サンセリフ。Google Fonts 提供。欧文テキスト（セクション見出し "NEWS"、"BRAND" 等）の表示に使用
• font-family 内で Noto Sans JP の前に配置されているため、ASCII 文字は Barlow が優先される

3.3 font-family 指定

css/* 全要素共通（body, h1〜h3, p, a, span, nav, header, footer） */
font-family: YakuHanJP, Barlow, "Noto Sans JP", YuGothic,
  "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic",
  メイリオ, sans-serif;

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

• YakuHanJP が先頭: 約物（「」、。等）だけこのフォントが処理し、半角幅で詰まった印象を作る。約物以外の文字はグリフを持たないので次のフォントにフォールバックする
• Barlow が2番目: ASCII 欧文はここで処理される。セクション見出しの "NEWS"、"BRAND" 等でジオメトリックな字形が出る
• Noto Sans JP 以降: 日本語の漢字・ひらがな・カタカナを処理
• 游ゴシック系は Windows 向けフォールバック。Medium 指定を挟むのは Windows での細字問題対策
• メイリオは古い Windows 向け最終フォールバック

代替フォント注記: YakuHanJP は CDN（jsdelivr）から読み込み可能。Barlow は Google Fonts 提供。preview.html ではそのまま使用できる。

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

実測値（トップ／商品情報ページ、2026-06-20 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (14px): 1.68（23.52px / 14px）— body に設定された基準値。全要素に継承
• 欧文セクション見出し (36px): 1.0（36px / 36px）— 欧文大文字のみなのでタイトでよい
• 日本語セクション見出し (30px): 1.66（49.8px / 30px）— 本文と近い余裕のある行間
• ナビ (12px): 1.68（20.16px / 12px）— 全体一貫
• タグラベル: 1.0（一行高さ）

字間 (letter-spacing) — 実測:

• 全体: 1px が body に設定され、ほぼ全要素に継承。これがトンボ鉛筆サイトの最大の特徴。14px 基準で約 0.071em
• セクション見出し (h2): 4px（36px 基準で約 0.111em）。欧文大文字をゆったり配置
• ボタン/タグの一部: letter-spacing: normal（letter-spacing を解除する要素もある）

ガイドライン:

• body レベルで letter-spacing: 1px を指定するのがトンボ鉛筆流。全要素に一貫した広い字間を与え、品のある印象を作る
• セクション見出しの欧文大文字はさらに広い 4px
• ボタンラベルや一部の UI 要素は letter-spacing: normal で解除することもある

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• サイト全体でシンプルな禁則設定
• YakuHanJP により約物幅が自動的に詰まるため、palt 等の追加処理は不要

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• YakuHanJP が約物詰めを担っているため、font-feature-settings: "palt" は不要。YakuHanJP 自体が約物だけを半角幅で持つフォントなので、字詰めは CSS ではなくフォントのグリフ設計で解決している
• Barlow はデフォルトのカーニングで十分

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（クリムゾンピル） — "トンボのブランドラインナップ"

• Background: #b70031
• Text: #ffffff
• Padding: 推定 8px 24px
• Border: 1px solid #b70031
• Border Radius: 24px（大きな角丸、ピルに近い）
• Font: 14px, weight 600, letter-spacing 1px

Round Button（ゴーストボタン） — "お知らせ一覧"、"プレスリリース一覧"

• Background: transparent
• Text: #000000
• Padding: 推定 4px 16px
• Border: 1px solid #cccccc
• Border Radius: 16px
• Font: 10px, weight 600, letter-spacing 1px

Footer Round Button — "お問合せ"、"総合カタログ"

• Background: transparent
• Text: #000000
• Padding: 推定 8px 24px
• Border: 1px solid #b6b9b9
• Border Radius: 16px
• Font: 14px, weight 600, letter-spacing 1px

Brand Link Tile — "さらに詳しく" テキスト

• Background: #ffffff（カード面）
• Text: #0e1618
• Font: 12px, weight 500, letter-spacing 1px
• 矢印アイコン付き

Tag Badge — "プレスリリース"

• Background: #355e7e
• Text: #ffffff
• Padding: 0px 10px
• Border Radius: 4px
• Font: 10px, weight 600

Inputs

• Background: transparent（rgba(0,0,0,0)）
• Border: 0px none（ヘッダー検索の実測値。フォーム全体の定義なし）
• Font: 14px, weight 400
• 実サイトに目立つフォーム UI は少ない（コーポレートサイトのため）

推奨実装（フォーム追加時）:

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #b70031（ブランド色をフォーカスに）
• Border Radius: 4px
• Padding: 10px 14px
• Font: 14px, weight 400
• Height: 44px

Cards / Surfaces

• Background: #ffffff（メイン）/ #f6f7f9（セクション切り替え用サーフェス）
• Border: なし（カード間は余白で分離）
• Border Radius: なし（角丸なし。シンプルなフラットカード）
• Shadow: 基本フラット（box-shadow: none）

Header

• Background: #ffffff
• Shadow: rgba(128, 130, 131, 0.2) 0px 5px 10px 0px
• Position: 固定（sticky/fixed）
• ロゴ色: #b70031

Footer

• Background: #ffffff
• Padding: 余裕のある上下パディング
• テキスト色: #0e1618
• ボタン: ゴーストラウンドボタン 1px solid #b6b9b9

5. Layout Principles

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

Container

• Max Width: 1200px 程度（推奨）
• Padding (horizontal): mobile 16px / desktop 24〜32px

Border Radius Scale

Grid

• 12 カラムグリッドが実装上自然
• Gutter: 24px

6. Depth & Elevation

• 実測ではヘッダー以外のほぼ全要素が box-shadow: none
• 立体感は最小限。白い面と #f6f7f9 サーフェスの切り替えで階層を表現
• ヘッダーの影は暖色寄りのグレー rgb(128, 130, 131) でニュートラルな印象

7. Do's and Don'ts

Do（推奨）

• font-family は YakuHanJP → Barlow → Noto Sans JP → 游ゴシック系 → メイリオ の順で指定する。YakuHanJP を先頭に置くのがトンボ鉛筆の特徴
• 本文の letter-spacing は 1px（≒ 0.071em）を body 全体に設定する（要素ごとにバラバラにしない）
• 本文の line-height は 1.68 を基本にする
• 欧文セクション見出し（"NEWS"、"BRAND" 等）は weight 300 + letter-spacing 4px でエディトリアルに
• 主要 CTA は #b70031 のブランドクリムゾン背景 + radius 24px
• ゴーストボタンは border 1px solid + radius 16px のラウンドスタイル
• セクション背景の切り替えには #f6f7f9（クールライトグレー） を使う
• テキスト色は #0e1618（青寄りの near-black） を一貫して使う
• タグバッジは #355e7e（ミューテッドブルー） 背景で控えめに

Don't（禁止）

• YakuHanJP を font-family から省略しない（約物詰めが崩れる）
• letter-spacing を 要素ごとにバラバラに設定しない（body の 1px から継承させるのが基本）
• 欧文セクション見出しに weight 700（Bold）を使わない（Light の上品さが失われる）
• CTA ボタンに 角丸なし（radius 0）や小さい角丸（4px） を使わない（24px の大角丸がブランドスタイル）
• テキスト色に 純粋な #000000 を広く使わない（#0e1618 の青みがかった near-black がブランドトーン）
• ブランドカラー #b70031 を 広い面積の背景に多用しない（白基調にポイントで効かせるのが基本）
• font-feature-settings: "palt" を 追加しない（約物詰めは YakuHanJP が担う。palt を重ねると二重に詰まる）
• ウォームグレー（#f2f2f0 等の黄寄り）を使わない（トンボ鉛筆はクールトーンの #f6f7f9）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• セクション H2 (EN): 36px → 24〜28px
• セクション H2 (JP): 30px → 20〜24px
• 本文サイズは 14px を維持（line-height 1.68 も維持）
• ナビはハンバーガーメニュー化

タッチターゲット

• Primary CTA: 高さ 44px 以上
• Round Button: 高さ 36px 以上
• タグバッジ: 装飾的（タッチ用ではない）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Crimson (CTA/Logo): #b70031
Accent Teal: #44c1bb
Accent Red: #ee4540
Accent Purple: #5e2c47
Tag Badge Blue: #355e7e
Near Black (Text): #0e1618
Gray Border: #cccccc
Surface: #f6f7f9
White: #ffffff
Header Shadow: rgba(128, 130, 131, 0.2) 0px 5px 10px 0px

Font: YakuHanJP, Barlow, "Noto Sans JP", YuGothic,
  "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic",
  メイリオ, sans-serif

Body Size: 14px / line-height 1.68 / weight 400 / letter-spacing 1px (≒0.071em)
Section H2 (EN): 36px / weight 300 / line-height 1.0 / letter-spacing 4px
Section H2 (JP): 30px / weight 400 / line-height 1.66 / letter-spacing 4px
Nav: 12px / weight 600 / letter-spacing 1px

Border Radius: 4px（タグ）/ 16px（ゴーストボタン）/ 24px（CTA）/ 50%（ドット）
Shadow: 基本 none。ヘッダーのみ rgba(128,130,131,0.2) 0px 5px 10px 0px

プロンプト例

トンボ鉛筆のデザインに従って、文具製品の一覧ページを作成してください。
- フォント: YakuHanJP, Barlow, "Noto Sans JP", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", メイリオ, sans-serif
- letter-spacing: body 全体に 1px を設定（全要素に継承させる）
- セクション見出し（欧文）: 36px / weight 300 / letter-spacing 4px / color #0e1618 / 大文字
- セクション見出し（和文）: 30px / weight 400 / line-height 1.66 / letter-spacing 4px
- 本文: 14px / weight 400 / line-height 1.68 / color #0e1618
- 主要 CTA: 背景 #b70031（ブランドクリムゾン）/ 白文字 / border-radius 24px / 14px / weight 600
- ゴーストボタン: 背景 transparent / 文字 #000 / border 1px solid #cccccc / radius 16px / 10px / weight 600
- タグバッジ: 背景 #355e7e / 白文字 / radius 4px / 10px / weight 600
- サーフェス: #f6f7f9（クールライトグレー、セクション切り替え）
- ヘッダー影: rgba(128, 130, 131, 0.2) 0px 5px 10px 0px
- 約物詰め: YakuHanJP が自動処理（palt は不要）
- テキスト色は #0e1618（青寄り near-black）。純黒 #000000 は避ける