SUWADA（諏訪田製作所） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-02 / 対象: https://www.suwada.co.jp/, /about_ja/craftsmanship, /products_ja/nailnippers

1. Visual Theme & Atmosphere

新潟県三条市の刃物メーカー（1926年創業）。ニッパー型つめ切りで知られ、 工場そのものを見せる「オープンファクトリー」を運営している。 サイトはページ地色が純黒 #000000 で、そこに工場の暗い写真を全画面で敷き、 白い明朝とセリフ体を置く。暗室に工具を並べたような画面をつくっている。

• デザイン方針: 黒地・全画面写真・セリフ体。刃物の金属光沢を暗さで引き立てる
• 密度: 低い。1スクロールに1メッセージ。写真が主で文字は最小限
• キーワード: 黒地、全画面写真、明朝、2emの角丸、スクリム

このサイトの特徴的な癖（他サイトと違う点）

1. body の背景が #000000。白地に黒ではなく、黒地に白が既定。 下層ページの本文エリアだけが白に反転する
2. 和文の読み物が明朝（Noto Serif JP）。ナビ・フッターのUIだけがゴシック。 「読ませる文＝明朝／機能の文字＝ゴシック」で書体を割る
3. 欧文見出しが Libre Baskerville の font-weight: 300。 セリフ体を細くして黒地に置くという、日本のメーカーサイトでは珍しい選択
4. border-radius が px ではなく 2em。実測値が font-size のちょうど2倍 （12px→24px、15.4px→30.8px、16.94px→33.88px）。文字サイズに追従する角丸
5. font-size が 1.1em の入れ子で決まる。14 → 15.4 → 16.94 と 1.1倍ずつ積み上がるため、実測値に小数が出る
6. 写真の上の文字は必ずスクリム（黒の半透明）越し。透過率が 0.2 / 0.4 / 0.5 / 0.7 の4段階で使い分けられている

2. Color Palette & Roles

Base（基調）

• Background (#000000): ページ地色。body { background: #000 } で明示指定
• Text on Dark (#ffffff): 黒地の上のすべての文字（見出し・本文・ナビ・フッター）
• Surface Light (#f2f2f2): グローバルナビのドロップダウン、下層の白地セクション
• Text on Light (#000000): 白地セクションの本文・見出し・ボタン文字

Scrim（写真の上に敷く黒の半透明 — 4段階）

Gradient Scrim（工程写真のキャプション下敷き）

cssbackground: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);

製造工程の写真カードで使用。上端は完全透明、下端は純黒。 写真の下部だけを潰してキャプションを読ませる。

Neutral（ニュートラル）

• Chip Dark (#222222): カテゴリ札（「つめ切り」「クラフトマンシップ」）の面色
• Divider (#cccccc): 白地セクションの区切り罫
• Text Muted (#888888): ナビの言語切替「JP / EN / 中文」
• Text Caption (#999999): 商品カードの補足
• Text Hover (#333333): 白地ナビのホバー時

注意: 有彩色を1色も持たない。ロゴマークの赤だけが画像として存在し、 CSS上のブランドカラーは無彩色のみ。差し色を足さないこと。

3. Typography Rules

3.1 和文フォント

役割で2系統に分ける。

• 明朝体（読ませる文 — 本文・リード・見出しの和文）: "Noto Serif JP", serif
• ゴシック体（機能の文字 — ナビ・フッター・ボタン・UI）: 游ゴシック / ヒラギノ角ゴ ProN / メイリオ のプラットフォームフォント

和文Webフォントは Noto Serif JP の1本だけ。ゴシックは端末依存に任せている。

3.2 欧文フォント

• セリフ（見出し専用）: "Libre Baskerville", serif — font-weight: 300 で使う
• サンセリフ（UI）: "Source Sans Pro"（一部で "Helvetica Neue", Helvetica, Verdana が先行）

英語の見出し（Craftsmanship / Products / Nail Nippers）は すべて Libre Baskerville。和文見出しの上に必ず英語見出しが乗る二段構成。

3.3 font-family 指定

css/* UI・ナビ・フッター（ゴシック） */
font-family: "Source Sans Pro", 游ゴシック, YuGothic,
             "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, sans-serif;

/* 本文まわり（欧文フォールバックを1段厚くしたバリエーション） */
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Verdana,
             游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3",
             "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;

/* 読ませる和文（明朝） */
font-family: "Noto Serif JP", serif;

/* 欧文見出し */
font-family: "Libre Baskerville", serif;

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

• 欧文優先チェーン。Source Sans Pro を先頭に置き、和文は游ゴシック → ヒラギノ ProN → メイリオ の順で Win / Mac 双方を拾う
• 和文の明朝だけは Webフォント（Noto Serif JP）を積んで端末差を消している。 読ませる文の見え方はブランドの一部という判断
• 游ゴシックが先、ヒラギノが後。Windows を先に見る順序

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

3.5 行間・字間

• 和文（明朝）の行間は一律 2.0。15.4px→30.8px、14px→28px。 黒地に白の明朝を読ませるための余裕
• 欧文見出しの行間は 1.5。ただし下層の見出し帯だけ 1.0 に詰め、 代わりに letter-spacing: 0.1em で横に伸ばす
• 字間の基本は 0.05em（0.7px ÷ 14px）。和文明朝・フッターに共通
• 0.1em を使うのは2箇所だけ … 下層ページの英語見出し（36px）と ヒーローの和文コピー（16px / weight 600）
• ナビ・欧文見出しは letter-spacing: normal

css/* 読ませる和文 */
.lead {
  font-family: "Noto Serif JP", serif;
  font-size: 15.4px;          /* = 14px × 1.1 */
  line-height: 2.0;
  letter-spacing: 0.045em;
  font-feature-settings: "palt";
}

/* 下層ページの英語見出し — 行を詰めて字間を空ける */
.page-title {
  font-family: "Libre Baskerville", serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 1.0;
  letter-spacing: 0.1em;
}

1.1em の入れ子スケール: このサイトは font-size を em で積むため、 実測に 15.4px / 16.94px / 30.8px / 33.88px という小数が現れる。 それぞれ 14×1.1、14×1.1²、その2倍。px で丸めず 1.1 倍の連鎖として実装すると 同じリズムが再現できる。

3.6 禁則処理・改行ルール

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

• ヒーローの和文コピーは 、 の位置で明示的に改行されている （「美を創りだす道具は、それ自身も美しく、／愛情が湧く本物でなければならない。」）。 読点で折る位置を人が決める前提でコピー幅を設計する
• 「つめ切り」「ニッパー」など製品名は途中で折らない

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• body は normal、その下のコンテンツ要素に palt が当たっている。 継承ではなく要素ごとの指定。実測で body だけ font-feature-settings: normal
• 明朝の和文にも palt が効いているため、括弧・句読点まわりが詰まる

3.8 縦書き

該当なし。全ページ横組み。

3.9 preview.html でのフォント代替

このサイトは代替がほぼ不要。Adobe Fonts / 商用Webフォントを使っていないため、 preview.html でも実サイトとほぼ同じ見え方になる。

4. Component Stylings

Buttons

Outline Pill（主要CTA — 塗らずに枠線1本）

• Background: transparent
• Text: #000000（白地）/ #ffffff（黒地）
• Border: 2px solid currentColor
• Border Radius: 2em（実測 30.8px ÷ font-size 15.4px）
• Padding: 15px 60px — 左右を極端に広く取る
• Font: 15.4px / weight 400 / letter-spacing: 0.045em

css.btn {
  display: inline-block;
  background: transparent;
  color: currentColor;
  border: 2px solid currentColor;
  border-radius: 2em;            /* px で書かない */
  font-size: 1.1em;              /* = 15.4px */
  line-height: 1;
  letter-spacing: 0.045em;
  padding: 15px 60px;
}

用例: 「ご購入はこちら」「商品カテゴリ一覧へ」「SUWADAについて」「YouTube」「Facebook」

Filled Pill（ヘッダーの問い合わせ）

• Background: #ffffff / Text: #000000
• Border: 2px solid #ffffff（背景と同色。枠線ボタンと構造を揃えている）
• Border Radius: 2em（実測 24px ÷ 12px）
• Padding: 11px 10px / Font: 12px / weight 400

Tags / Labels

Category Chip（角丸ゼロの矩形）

• Background: #222222 / Text: #ffffff
• Border Radius: 0px — ボタンが 2em なのに対し、札は角丸を持たない
• Padding: 10px 20px / Font: 14px / weight 400

用例: 「つめ切り」「クラフトマンシップ」

Cards（商品カード・工程カード）

• Background: transparent（黒地にそのまま置く）
• Border / Shadow: なし
• 構成: 写真 → グラデーションスクリム → 番号（欧文 28px）→ 説明（明朝 14px / 2.0）

css.process-card {
  position: relative;
}
.process-card::after {          /* 写真の下部だけ潰す */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
}

Navigation

• 黒地・白文字。ドロップダウンだけ #f2f2f2 に反転し、文字は #000000
• 言語切替「JP / EN / 中文」は #888888、選択中のみ #ffffff
• ホバー時の白地ナビの文字は #333333

5. Layout Principles

Container

• Max Width: 1170px（Bootstrap 3 系 .container の既定）
• Padding (horizontal): 15px（デスクトップ）

Spacing Scale

15px の倍数で組まれている（Bootstrap のグリッド由来）。

Grid

• 商品一覧: 3カラム / Gutter 30px
• 製造工程: 3カラム（8工程を並べる）
• ヒーロー: 全画面（100vw × 100vh）のスライドショー

Hero

• 高さ 100vh。背景画像は background-size: cover のスライドショー
• 文字は左寄せ・垂直中央。中央揃えにしない

6. Depth & Elevation

影を一切使わない。奥行きは影ではなくスクリムの濃度（0.2 / 0.4 / 0.5 / 0.7）で 表現する。手前に来るものほどスクリムが濃い。

7. Do's and Don'ts

Do（推奨）

• ページ地色は #000000。白地セクションは #f2f2f2 で部分的に反転させる
• 読ませる和文は明朝（"Noto Serif JP", serif）、UIはゴシックにする
• 和文本文の line-height は 2.0、letter-spacing は 0.05em
• 英語見出しは Libre Baskerville の font-weight: 300
• 和文見出しの上に必ず英語見出しを重ねる（「Craftsmanship / クラフトマンシップ」）
• ボタンの角丸は 2em（px で書かない）。左右パディングは 60px と広く取る
• 写真の上の文字には必ずスクリムを敷く（0.2 / 0.4 / 0.5 / 0.7 の4段階）
• font-size は 1.1em の入れ子で積む

Don't（禁止）

• 有彩色を足さない。CSS上のブランドカラーは無彩色のみ
• 影を使わない。奥行きはスクリムの濃度でつくる
• ボタンを塗りつぶさない（ヘッダーの白ピルだけが例外）
• カテゴリ札に角丸を付けない（border-radius: 0）
• 和文本文をゴシックにしない。明朝であることが工房の印象をつくっている
• 和文の line-height を 1.5 以下にしない（黒地に白の明朝は行間が要る）
• ヒーローのコピーを中央揃えにしない（左寄せ・垂直中央）

8. Responsive Behavior

Breakpoints

Bootstrap 3 系の既定値。

モバイルでの変化

• グローバルナビ → ハンバーガー。展開時は #f2f2f2 の白地パネル
• 英語見出し 36px → 24px 前後。letter-spacing: 0.1em は維持する
• ボタンの左右パディング 60px → 30px 前後（画面幅に合わせて縮める）
• ヒーローは 100vh を維持し、コピーは 2行から3〜4行に折り返す

タッチターゲット

• 最小 44px × 44px。枠線ボタンは上下パディング 15px ＋ 2px ボーダーで約 47px を確保

9. Agent Prompt Guide

クイックリファレンス

Background:      #000000（ページ地色）
Surface Light:   #f2f2f2（白地セクション・ドロップダウン）
Text on Dark:    #ffffff
Text on Light:   #000000
Chip:            #222222
Divider:         #cccccc
Text Muted:      #888888 / #999999
Scrim:           rgba(0,0,0,0.2 / 0.4 / 0.5 / 0.7)
Heading Font:    "Libre Baskerville", serif（weight 300 / 欧文のみ）
Reading Font:    "Noto Serif JP", serif（和文の本文・リード）
UI Font:         "Source Sans Pro", 游ゴシック, YuGothic,
                 "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif
Body Size:       14px（base）/ 15.4px（リード）
Line Height:     2.0（和文本文・ナビ）/ 1.5（欧文見出し・フッター）/ 1.0（下層見出し）
Letter Spacing:  0.05em（和文本文）/ 0.1em（下層英語見出し・ヒーロー和文）
Border Radius:   2em（ボタン）/ 0（札）
Button:          transparent + 2px solid currentColor / padding 15px 60px
Shadow:          none
palt:            on（body は normal、コンテンツ要素に指定）

プロンプト例

SUWADA（諏訪田製作所）のデザインシステムに従って、製品詳細ページを作成してください。
- ページ背景は #000000。本文セクションだけ #f2f2f2 に反転させる
- 黒地の文字は #ffffff、白地の文字は #000000
- 英語見出しは "Libre Baskerville", serif / font-weight: 300
  ページ上部の見出し帯は 36px / line-height: 1.0 / letter-spacing: 0.1em
  セクション見出しは 36px / line-height: 1.5 / letter-spacing: normal
- 和文の本文・リードは "Noto Serif JP", serif
  15.4px / line-height: 2.0 / letter-spacing: 0.045em
- ナビ・フッターは "Source Sans Pro", 游ゴシック, YuGothic,
  "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif / 14px / line-height: 2.0
- 和文見出しの上に必ず英語見出しを重ねる（例: "Nail Nippers" / 「つめ切り」）
- ボタンは塗らず transparent + 2px solid currentColor
  border-radius: 2em（px で書かない）、padding: 15px 60px
- カテゴリ札は #222222 の背景に白文字、border-radius: 0、padding: 10px 20px
- 写真の上に文字を置くときは黒のスクリムを敷く
  ヒーロー rgba(0,0,0,0.2) / カード rgba(0,0,0,0.4) / 見出し帯 rgba(0,0,0,0.5) /
  フッター rgba(0,0,0,0.7)
- 工程写真のキャプションは linear-gradient(rgba(0,0,0,0), #000) を重ねて読ませる
- 影は使わない。有彩色を足さない
- font-feature-settings: "palt" をコンテンツ要素に当てる
- コンテナ幅 1170px、商品は3カラム / gutter 30px