土屋鞄製造所（Tsuchiya Kaban） DESIGN.md

土屋鞄製造所 公式サイト（https://tsuchiya-kaban.jp/）のデザイン仕様書。 1965年創業、ランドセルづくりから始まった日本の革鞄ブランド。 「時を超えて愛される、正直なものづくり」を掲げ、熟練の職人による手仕事と上質な素材にこだわる。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 「DM Sans + DNP秀英ゴシック銀 + weight 300 + 広い字間」で構成された、革職人の静かな誇りを感じさせるブランドサイト。欧文に DM Sans（幾何学的サンセリフ）を先頭に置き、和文に DNP秀英ゴシック銀（Adobe Font）を組み合わせる欧文優先フォントスタック。見出しには Adobe Caslon Pro + DNP秀英明朝の明朝セリフ系スタックを別途持つ二重書体システム。全体を weight 300（極細）で統一し、純白 #ffffff 背景に #004b87 の深いネイビーブルーをアクセントに配する
• 密度: ゆったりとした EC 型。大判の製品写真に呼吸感のある余白を持たせ、テキストは抑制的。革の質感と職人の手仕事を主役に据える
• キーワード: DM Sans、DNP秀英ゴシック銀、Weight 300、Tsuchiya Blue、広い字間、Sharp Corners、職人、革、静謐、正直
• 特徴:
  • 欧文優先の二重書体システム — 本文は DM Sans → DNP秀英ゴシック銀 → Poppins。見出しは Adobe Caslon Pro → DNP秀英明朝。用途に応じてセリフ/サンセリフを使い分ける
  • weight 300 で全体を統一 — body, h1, p, nav すべて ultralight。繊細で上品な空気感を作る
  • letter-spacing 1.6px（0.1em）がグローバル — body に letter-spacing: 1.6px を指定し、広い字間で静けさと高級感を演出。本文テキストのみ 0.02em に絞る
  • Tsuchiya Blue #004b87 — 深いネイビーブルーをブランドカラーとし、CTA ボタン、レビューシステム、アラートバーに使用。鞄の金具や紺色の革を想起させる
  • Sharp Corners（角丸なし） — ボタンの border-radius: 0px が特徴的。精密な革の裁断・縫製を連想させるシャープな造形。ただしウィッシュリスト系の pill バッジ（12px）は例外
  • font-feature-settings は normal — palt 未使用。字間は CSS の letter-spacing のみで制御

2. Color Palette & Roles

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

Brand

• Tsuchiya Blue (#004b87): ブランドカラー。CTA ボタン背景、レビューシステム（星・リンク）、メルマガ登録ボタン、アラートバー背景に使用。出現回数 2 + 関連色多数
• Tsuchiya Blue Light (rgba(0,75,135,0.2)): ウィッシュリスト系 UI のアクセント面。出現回数 3

Semantic

• Danger / Error (#990000): カスタムプロパティ --text-color-red で定義。エラーテキスト、バリデーション
• On-sale (#e32c2b): セール価格表示（--on-sale-text: 227 44 43）
• Success (#307a07): 成功メッセージ（--success-text: 48 122 7）
• Warning (#ed8a00): 警告メッセージ（--warning-text: 237 138 0）

Neutral

• Text Primary (#222222): 本文テキスト。わずかに柔らかい深いグレー
• Text Header (#1c1c1c): ヘッダー・ナビゲーション。ほぼ黒に近いが純黒ではない
• Text Muted (rgba(34,34,34,0.6)): プレースホルダー、無効状態のテキスト
• Border (#cccccc): フォーム入力欄の罫線（--border-normal: 1px solid #ccc）
• Border Dark (#222222): セカンダリボタンの罫線
• Background (#ffffff): ページ背景。純白
• Surface Alt (#edebe8): フッター・インフォメーション領域の温かみのあるライトグレー。出現回数 7
• Surface Light (#f5f5f5): 軽いグレー面。出現回数 5
• Surface Warm (#fef3e2): ウィッシュリスト通知の温かいクリーム

3. Typography Rules

3.1 和文フォント

ゴシック体（本文用）:

• DNP秀英ゴシック銀（dnp-shuei-gothic-gin-std）— Adobe Font。上品で伝統的なゴシック体。DM Sans の後ろに配置し和文補完として機能

明朝体（見出し用）:

• DNP秀英明朝（dnp-shuei-mincho-pr6n）— Adobe Font。見出し専用のカスタムプロパティ --heading-font-family で指定

3.2 欧文フォント

• DM Sans（Google Fonts。幾何学的サンセリフ。本文・UI テキストの先頭）
• Adobe Caslon Pro（Adobe Font。オールドスタイルセリフ。見出しの先頭。Shopify の --heading-font-family で指定）
• Poppins（Google Fonts。幾何学的サンセリフ。フォールバック）
• Jost（フォールバック。見出しスタック内）
• Abel（サンセリフ。一部ウィッシュリスト UI に使用）

3.3 font-family 指定

css/* 本文（欧文優先 → 和文ゴシック） */
font-family: "DM Sans", dnp-shuei-gothic-gin-std, Poppins, sans-serif;

/* 見出し（Shopify --heading-font-family） */
font-family: "Adobe Caslon Pro", "dnp-shuei-mincho-pr6n", Jost, sans-serif;

/* メルマガ登録ボタン（和文ゴシック単独） */
font-family: dnp-shuei-gothic-gin-std, serif;

/* 欧文専用（カスタムプロパティ） */
font-family: "DM Sans", sans-serif;  /* --text-font-family-en */

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

• 欧文優先スタック — DM Sans を先頭に置き、欧文グリフは幾何学的サンセリフで統一。和文は DNP秀英ゴシック銀に落ちる
• 見出しはセリフ系 — Adobe Caslon Pro + DNP秀英明朝の組み合わせで、本文のサンセリフ体とのコントラストを作る（ただし実測では見出しも DM Sans + ゴシック銀で表示されるケースが多い）
• Poppins はセーフティネット — DM Sans が読めない環境での欧文フォールバック

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

実サイトの computed style に基づく。

3.5 行間・字間

• 本文の行間 (line-height): 1.8（14px × 1.8 = 25.2px）。日本語としてはゆったりめ。カスタムプロパティ --base-line-height: 180% で定義
• 見出しの行間: 1.5（--heading-line-height: 150%）。ヒーロー・セクション見出しに適用
• 本文の字間 (letter-spacing): 0.02em（0.28px）。和文本文は控えめな字間
• グローバルの字間: 0.1em（1.6px）。body に letter-spacing: 1.6px が指定されており、見出し・キャプション・ナビなど広範囲に継承される。カスタムプロパティ --base-letter-spacing: .05em とは異なる実測値
• ナビの字間: 0.133em（12px に対して 1.6px）。小さなテキストに広い字間で開放感を持たせる

ガイドライン:

• body の letter-spacing: 1.6px（0.1em）は土屋鞄の世界観の核心。安易に詰めない
• 本文（14px / weight 500）のみ 0.02em で可読性を確保するが、他の要素は 0.1em 前後の広い字間
• ウェイトは 300 が基調だが、本文テキストは 500、セクション見出しは 700、CTA は 600 と用途に応じて使い分ける

3.6 禁則処理・改行ルール

• 特別な CSS 指定は確認されていない。ブラウザのデフォルト挙動を尊重
• 商品名やコピーは短文で構成されるため、禁則処理が問題になる場面は少ない

3.7 OpenType 機能

css/* font-feature-settings は normal（未指定） */
font-feature-settings: normal;

• palt 未使用 — Vermicular や note と異なり、プロポーショナル字詰めを適用しない
• 字間は CSS の letter-spacing のみで制御する設計
• DNP秀英ゴシック銀は元々字面が美しいため、palt なしでも整った組版になる

3.8 縦書き

• 未使用

4. Component Stylings

Buttons

Primary CTA（角丸なし）

実例: メルマガ「登録」ボタン

• 背景: #004b87（Tsuchiya Blue）
• 文字色: #ffffff
• 罫線: なし
• font-family: dnp-shuei-gothic-gin-std, serif
• font-size: 14px / weight 600
• border-radius: 0px（角丸なし — 革の裁断のようなシャープさ）
• padding: 0px 10px
• line-height: 14px

Secondary（枠線ボタン）

実例: 「試し読みはこちら」

• 背景: transparent
• 文字色: #222222
• 罫線: 1px solid #222222
• font-size: 16px / weight 300
• border-radius: 0px
• padding: 15px
• letter-spacing: 1.6px

Pill Badge

実例: 「ログインして永久に保存する」

• 背景: #ffffff
• 文字色: #1c1c1c
• 罫線: 1px solid #1c1c1c
• font-size: 13px / weight 600
• border-radius: 12px（pill 型）
• padding: 10px 16px

Cart Action

実例: 「カートに移動 +」

• 背景: transparent
• 文字色: #004b87
• 罫線: 1px solid #004b87
• font-size: 13px / weight 600
• border-radius: 0px
• padding: 12px 18px

Inputs

• 背景: #ffffff
• 文字色: #505050（Klaviyo フォーム） / #222222（Shopify フォーム）
• 罫線: 1px solid #cccccc
• 罫線（フォーカス時）: 1px solid #004b87（推定）
• border-radius: 0px（--input-border-radius: 0.0rem）
• padding: 0.65rem 0.8rem（--input-padding-block / --input-padding-inline）
• font-family: dnp-shuei-gothic-gin-std, serif（Klaviyo） / DM Sans + ゴシック銀（Shopify）
• font-size: 14px / weight 400

Cards

• 背景: transparent
• 罫線: なし
• 影: なし（フラット）
• 角丸: なし
• 製品写真が主役。テキストは下部に製品名・価格を配置

Navigation

• 背景: transparent → スクロール時固定（--header-is-sticky: 1）
• 文字色: #1c1c1c
• font-size: 12px（nav リンク） / weight 300
• letter-spacing: 1.6px
• ロゴ「土屋鞄製造所」は h1 / 16px / weight 300

5. Layout Principles

Spacing Scale

カスタムプロパティに基づく。

Container

• Max Width: 100%（--container-max-width）
• 段階的制約:
  • XXS: 27.5rem（440px）
  • XS: 42.5rem（680px）
  • SM: 61.25rem（980px）
  • MD: 71.875rem（1150px）
  • LG: 78.75rem（1260px）
  • XL: 85rem（1360px）
• Gutter: 3rem（48px）

Grid

• 製品カードは等幅グリッド
• ヒーローはフルブリード画像 + 中央揃えテキスト
• フッターは #edebe8 の温かい面色で区切る

Layout 原則

• 製品写真が主役 — 大きなアスペクト比で革の質感を見せる
• 広い字間で静けさを演出 — 1.6px のグローバル letter-spacing がページ全体にゆったりとした呼吸感を与える
• セクションは面色で区切る — #ffffff → #edebe8 → #004b87 の面色切替
• Tsuchiya Blue のアクセントは控えめ — ページ全体はモノトーンで、ブルーは CTA とアラートバーに限定

6. Depth & Elevation

• 影: 最小限の使用。カスタムプロパティで定義されるが、実際のコンポーネントではほぼフラット
• 角丸: CTA ボタン・フォーム入力は 0px（--button-border-radius: 0.0rem）。ウィッシュリスト pill のみ 12px
• ウィッシュリストの影: rgba(0,0,0,0.2) 0px 0px 25px 0px（唯一のドロップシャドウ）

7. Do's and Don'ts

Do's

• 欧文は DM Sans を先頭に指定し、和文は DNP秀英ゴシック銀にフォールバックさせる
• body に letter-spacing: 1.6px（0.1em）を指定する。広い字間がブランドの静けさを作る
• weight 300 を基調とし、本文は 500、見出しは 500–700、CTA は 600 と段階的に使い分ける
• CTA ボタンは border-radius: 0px（角丸なし）で。革の裁断を思わせるシャープなエッジ
• Tsuchiya Blue #004b87 を CTA・ブランド要素に限定使用する
• 本文は line-height: 1.8（--base-line-height: 180%）でゆったりと組む
• テキスト色は #222222 を使う。純黒ではなく、柔らかい深いグレー
• フッター・情報セクションは #edebe8 の温かみのあるグレーで区切る
• 製品写真は大きく、余白は十分に取る
• セカンダリボタンは 1px solid #222222（暗い罫線 + 透明背景）で控えめに

Don'ts

• CTA 以外に #004b87 を散らさない — ブランドブルーは限定的に使うことで価値が出る
• 角丸を安易に付けない — 0px がデフォルト。pill（12px）はウィッシュリスト系 UI の例外
• letter-spacing を 0 にしない — 広い字間はブランドアイデンティティの一部
• weight 700 以上を多用しない — 700 は「MAIL MAGAZINE」等の欧文セクション見出しに限定
• palt を追加しない — 土屋鞄は font-feature-settings: normal で設計されている
• DNP秀英ゴシック銀を DM Sans より前に置かない — 欧文優先スタックが設計意図
• テキスト色に純黒 #000000 を使わない — #222222 または #1c1c1c を使う
• 彩度の高いアクセントカラーを追加しない — パレットは Tsuchiya Blue + ニュートラルグレーの二軸

8. Responsive Behavior

Breakpoints

カスタムプロパティの clamp() 関数から推定。

タッチターゲット

• セカンダリボタンのパディング 15px でタッチターゲットは十分確保
• ナビリンクは line-height: 30px + padding: 0 15px で 30px 高を確保

フォントサイズの調整

• 見出し: clamp() 関数で自動スケーリング（例: clamp(1.375rem, ... , 2rem)）
• 本文: --default-text-font-size: 14px 固定
• グローバル letter-spacing はモバイルでも維持

レイアウトの変化

• デスクトップの複数列グリッド → モバイルで縦積み
• ヒーロー画像はフルブリード維持
• ナビゲーションはハンバーガーメニューに切替

9. Agent Prompt Guide

土屋鞄らしい UI を生成するときは以下を伝えるとよい：

- 本文 font-family: "DM Sans", "Zen Kaku Gothic New", Poppins, sans-serif
  （※ DNP秀英ゴシック銀の代替として Zen Kaku Gothic New を使用）
- 見出し font-family: "Libre Caslon Text", "Shippori Mincho", Jost, serif
  （※ Adobe Caslon Pro の代替として Libre Caslon Text、DNP秀英明朝の代替として Shippori Mincho）
- body に letter-spacing: 1.6px（0.1em）— 広い字間がブランドの静けさ
- 本文 font-size: 14px / font-weight: 500 / line-height: 1.8 / letter-spacing: 0.02em
- 見出し font-weight: 300–700（段階的に使い分け）
- font-feature-settings: normal（palt 未使用）
- ブランドカラー #004b87（Tsuchiya Blue）— CTA・レビューに限定
- テキスト色 #222222（深いグレー。純黒は使わない）
- 背景色 #ffffff（純白）
- フッター・面色 #edebe8（温かいライトグレー）
- CTA は角丸なし: border-radius: 0px / bg: #004b87 / text: white / font-weight: 600
- セカンダリボタン: transparent / border: 1px solid #222222 / radius: 0px / padding: 15px
- フォーム入力: border-radius: 0px / border: 1px solid #cccccc
- 影はほぼ使わない（box-shadow: none がデフォルト）
- 角丸は基本 0px。pill バッジ（12px）は例外
- セクション区切りは面色の切替（白 → #edebe8 → #004b87）
- 製品写真を大きく配置し、余白を十分に取る

フォント代替ガイド