スイスの精度 Swiss Precision

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/swiss-precision/DESIGN.md

# DESIGN.md — スイスの精度 / swiss-precision

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

スイス・インターナショナル・タイポグラフィの規律をWebに移す。厳格なグリッド、
中立なグロテスク書体、無彩色＋赤1色。装飾を一切足さず、**級数（大きさ）の対比・
整列・余白**だけで秩序と説得力を作る。動かさない。静止の構成そのものが強さになる。

**キーワード**: 精度 / グリッド / 中立 / 規律 / 機能主義
**この見た目が向く場面**: B2B・製造・計測・コンサル・研究機関・金融・インフラ

## 2. タイポグラフィ

- 和文（見出し・本文とも）: IBM Plex Sans JP / 見出し 600・小見出し 500・本文 400
- 欧文・数字: IBM Plex Sans（型番・数値・単位・年号は必ずこちらで組む。
  数字は等幅数字 `font-feature-settings: "tnum" 1` で桁を揃える。**Inter に置換しない**）
- 本文: 15px / 行間 1.8 / 字間 0.01em（詰めすぎない中立な組み）
- 見出しスケール: h1 64px / h2 40px / h3 22px / ラベル 12px（比率をきっちり保つ。
  モバイルは h1 40px / h2 28px）。**見出しは字間 -0.01em でタイトに、級数差で階層を作る**
- 特記: 主張は「大きさ」で作る。太字を乱発しない（強調は 600 まで、赤 or 級数で）。
  英字ラベルは 12px・字間 +0.12em・大文字＋等幅数字（例: 01 — PRODUCTS）。
  キャッチは断定・体言止めで短く。「〜を、もっと。」型の空虚コピーを書かない

## 3. カラー

無彩色ベース＋**赤1色**（mono-accent）。青・紫・緑を使わない。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（ベース） | #f4f4f1（冷たい紙白） | 60% |
| 地（節替え） | #eaeae6 | — |
| 濃（見出し・強い要素） | #131417 | — |
| テキスト（主） | #23252b | 25% |
| テキスト（弱・ラベル） | #6d6f75 | — |
| アクセント（赤） | #d8382a | 10%以下 |
| 罫線・グリッド線 | #d3d3cd | — |

- 配色ルール: 赤は「点」でのみ使う。許される用法は ①節番号 ②キーとなる1語・1数値
  ③極小の下線/ドットマーカー ④「詳細 →」等の誘導 の4つ。**面（背景）に赤を使わない。**
  赤を全リンクへ機械適用しない（本文/ナビの通常リンクは濃 #131417・下線ホバー）
- 純白 #ffffff・純黒 #000000 を使わない。信号色（緑/黄）を足さない

## 4. レイアウト・余白

- コンテンツ最大幅: 1200px / **12カラムグリッド**（gutter 24px）を厳格に守る
- グリッドの性格: 要素は必ずカラム境界に整列させる。見出し・本文・数値の左端をそろえる。
  **グリッド線（1px #d3d3cd）を意図的に見せてよい**（罫線で領域を仕切る＝スイスの作法）
- セクション間余白: 上下 120px 基準 / 要素間は 8px の倍数。余白は広めだが、
  必ずグリッドに乗せる（余白＝無秩序な空白ではなく、構造の一部）
- 各節の頭に「節番号（等幅数字 01）＋赤の点／短い罫＋英字ラベル＋和文見出し」を
  グリッド左端にそろえて置く。番号はページ全体で連番
- ヒーローの構成: **中央寄せにしない。** 左端そろえの大見出しをグリッド上半分に置き、
  補足文・数値を別カラムに配置する非対称構成。ボタンは最小限（テキストリンク優先）。
  「特大中央見出し＋サブコピー＋ボタン2つ＋下に画像」の定型を作らない

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 地色 or 白地・濃文字・下線なし。ナビはホバーで
  文字が赤 #d8382a に変わる（下線は出さない）。ロゴはグロテスクの語幹＋等幅の型番風表記
- 角丸: 0px（全要素直角）/ 影: 使わない（立体を作らない。平面とグリッドで構成）/
  境界線: 1px solid #d3d3cd
- ボタン: 直角・塗り or 枠線。主ボタンは赤地は使わず**濃 #131417 地＋白文字**、
  ホバーで背景が赤に反転（0.12s、動きは最小）。副ボタンは 1px 濃罫線・透明地。
  ただし多用せず、基本の誘導は「テキスト＋赤の →」で行う
- カード的要素: **角丸カード＋影を作らない。** 領域は**グリッド線（罫線）で仕切る**。
  「アイコン＋見出し＋説明の3カラム角丸カード」を機能紹介に使わない。
  代わりに罫線で区切ったグリッドセル（番号＋見出し＋説明を左端そろえ）で組む
- 表・仕様: 罫線は横1px。数値・型番・単位は等幅数字でカラムをそろえる（スペック表向き）
- フォーム要素: input / textarea は白 or 地色背景・1px 濃罫線・角丸0・
  フォーカスで罫線が赤に変わる。ラベルは上に 12px 大文字で置く
- 画像の扱い: 使う場合は角丸なし・枠なし・影なし。グリッドのカラム幅にきっちり合わせ、
  アスペクト比を統一。装飾フィルタをかけない
- アクセント色の適用範囲: §3 の4用法に限定。赤は面で使わない

## 6. モーション

- 量: **static（動きを使わない）**。スクロール連動アニメ・フェードイン・パララックス・
  カウントアップを**一切使わない**。静止した構成の完成度で見せる
- 許される最小の動き: リンク/ボタンのホバー時の色変化のみ（0.12s）。それ以外は動かさない
- 使わない動き: opacity/translate のスクロール出現、数字カウントアップ、カルーセル、
  マーキー、パララックス、拡大縮小。**「動き＝リッチ」という手癖をここでは明確に否定する**

## 7. 写真・イラスト・図版

- 写真がなくても成立させる（グリッド・級数・赤の点が主役）。図はSVGの線画
  （1px 罫、赤 or 濃の細線）で描く。3D・グラデ・抽象ブロブを使わない
- アイコンは線幅を統一した自作インラインSVG線画のみ。絵文字・アイコンフォント・
  既製アイコンセットの寄せ集めを使わない

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / Noto Sans をデフォルトで使わない（IBM Plex Sans JP / IBM Plex Sans で組む）
- グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow を使わない
- border-radius を使わない（常に 0。角丸カードを作らない）
- 「アイコン＋見出し＋説明の3カラム角丸カード」を作らない。区切りはグリッド線（罫線）で表現する
- スクロール連動アニメ・フェードイン・数字カウントアップを使わない（motion: static を厳守）
- 青〜紫を足さない。赤 #d8382a 以外の彩度色・信号色を追加しない。赤を面（背景）に使わない
- 純白 #ffffff・純黒 #000000 を使わない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない
- 絵文字・既製アイコンセットをアイコンに使わない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #f4f4f1;
  --color-bg-alt: #eaeae6;
  --color-ink: #131417;      /* 見出し・強い要素（純黒は使わない） */
  --color-text: #23252b;     /* 本文 */
  --color-text-weak: #6d6f75;/* ラベル・弱 */
  --color-accent: #d8382a;   /* スイスの赤。面積10%以下・点でのみ */
  --color-line: #d3d3cd;     /* グリッド線・罫線 */
  /* 変数には総称ファミリ(sans-serif)を含めないこと */
  --font-heading: "IBM Plex Sans JP";
  --font-body: "IBM Plex Sans JP";
  --font-latin: "IBM Plex Sans";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1200px;
  --gutter: 24px;
  --cols: 12;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+JP:wght@400;500;600;700&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), sans-serif` の順に指定する
  （英数字が自動で IBM Plex Sans になる）
- 数値・型番・表は `font-feature-settings: "tnum" 1;` で等幅数字にし桁をそろえる
- レイアウトは `display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);`
  を基本コンテナに敷き、各要素を `grid-column` で明示配置する