誠実な高密度 Honest High-Density

DESIGN.md

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

https://3pt.co.jp/design-library/md/seijitsu-koumitsudo/DESIGN.md

# DESIGN.md — 誠実な高密度 / seijitsu-koumitsudo

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

## 1. コンセプト

新聞の紙面組み・鉄道時刻表・図書館目録・官報の様式美をWebに翻訳する。情報量が多いのに
迷わないのは、罫線と階層が厳格だからだ。装飾で密度を隠さず、**罫線・帯・記号の3つだけ**で
大量の情報に秩序を与える。「探し物を最短で見つけられること」自体を誠実さとして設計する。

**キーワード**: 高密度 / 罫線 / 索引 / 公共性 / 実務
**この見た目が向く場面**: 自治体・公共機関ポータル、医療・福祉の窓口案内、時刻表・料金表を
持つ交通/インフラ事業者、図書館・アーカイブ、規約や仕様が多い金融・法務系の情報ページ

## 2. タイポグラフィ

- 和文見出し: BIZ UDPGothic / ウェイト 700
- 和文本文: BIZ UDPGothic / ウェイト 400 / サイズ 14px / 行間 1.8 / 字間 0.01em
  （UDフォントの可読性・公共性がこのテイストの核。**Noto Sans JP 等に置換しない**）
- 欧文・数字: IBM Plex Sans（日付・電話番号・郵便番号・型番・件数などの算用数字と欧文ラベルは
  必ずこちらで組む。数字は `font-feature-settings: "tnum" 1` で桁を揃える。**Inter に置換しない**）
- 見出しスケール: 使わない。h1〜h3 の**フォントサイズはほぼ一定**（帯見出し 15px、小見出し
  14px 太字）。階層は「§4 の帯・罫線」で作る。見出しだけを大きくして級数で目立たせることを
  意図的にしない（新聞の見出しは大きいが、本ライブラリの本テイストでは時刻表寄りに振り、
  帯の色面と罫線の太さで階層を作る）
- 特記: キャプション・ラベル・欧字小見出しは 11〜12px・字間 0.06〜0.1em。本文中の強調は
  太字（700）または帯内の反転表示で行い、下線強調は使わない（下線はリンク専用）

## 3. カラー

無彩色（生成り紙色＋墨）＋**深藍 1色のみ**（mono-accent）。赤・緑・黄は一切使わない。
緊急度など状態の違いは色でなく「深藍の濃淡」と「記号の形（◆■●）」で作る。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース） | #fbfaf6（生成りがかった白） | 65% |
| 背景（表見出し行・帯替え） | #f2efe6（同系統の濃い紙色） | — |
| テキスト（唯一の文字色・墨） | #26241f | 28% |
| 罫線（薄墨・通常の行区切り） | #d9d6cd | — |
| 罫線（中墨・太め罫線／表頭の下線） | #8f8b80 | — |
| アクセント（深藍） | #1a4472 | 6%以下 |
| アクセント中間濃度（重要■） | #4a6d8f | 状態表現のみ |
| アクセント淡濃度（通知●・補助） | #7a8fa3 | 状態表現のみ |
| アクセント極淡（緊急行の背景敷き） | #eef2f5 | 行強調のみ・面積小 |

- 配色ルール: 深藍は「リンク・現在地・見出し帯・状態記号」の4用途に限定する。面（背景）を
  深藍で広く塗るのは見出し帯とユーティリティバーのみ（高さの小さい帯状要素に限る）
- **リンクの既定色は墨（#26241f）とし、下線なし。** 深藍（--color-accent）を文字色として
  直接あてるのは、(a) ナビゲーションの現在地表示、(b) 索引・お知らせ表内などに置く明示的な
  誘導リンク（「詳細 →」「一覧を見る →」のような矢印付きCTA、原則1テーブルにつき使う列は
  絞る）、(c) 状態記号（◆■●）、(d) 見出し帯の背景、の4用途に限定する。
- **一覧テーブルの項目名・担当窓口名など「本文扱いのリンク」に `a { color: var(--color-accent); }`
  をグローバル指定してはならない。** これをやると深藍の面積が§3冒頭で定めた「使用比率6%以下」を
  大きく超え、ページ全体が青みがかって見え、密度を墨一色で見せる本テイストの誠実さが崩れる。
  ベースは常に `a { color: var(--color-ink); text-decoration: none; }` とし、CTA用途のリンクだけ
  `.go`（または同等のユーティリティクラス）で深藍を明示的に付与し、ホバー時のみ全リンク共通で
  下線＋背景 --color-accent-pale に変化させる。
- **本文・見出し・キャプション・ラベルの文字色は #26241f（墨）1色に統一する。** 罫線色
  （薄墨 #d9d6cd・中墨 #8f8b80）は境界線・下線・帯の区切りにのみ使い、キャプションや
  ラベルの**文字色として流用しない**（中墨を文字色にすると背景 #fbfaf6 とのコントラスト比が
  約3.3:1でAA基準 4.5:1 を割るため）。情報の軽重は色の濃淡でなく、文字サイズ・太さ・罫線・
  背景帯の有無だけで作る（§4の「余白でなく罫線で階層を作る」思想と一貫させる）
- 例外として、深藍の3階調（#1a4472 / #4a6d8f / #7a8fa3）は §3冒頭で定めた4用途
  （リンク・現在地・見出し帯・状態記号）でのみ文字色/図形色として使ってよい。3階調とも
  背景 #fbfaf6 に対し 3:1 以上（リンクと現在地表示に使う #1a4472 と #4a6d8f は 4.5:1 以上）を
  確保している。それ以外の箇所（本文・キャプション・ラベル本体）は必ず墨1色を使う
- 緊急・重要・通知の3段階は**信号色トリオ（赤/黄/緑）を絶対に使わない**。深藍の濃淡
  （#1a4472 → #4a6d8f → #7a8fa3）と記号の形（◆ → ■ → ●）の**両方**を必ず併記し、
  隣接テキストラベル（「緊急」「重要」「通知」）も必ず添える（色だけに依存しない＝
  色弱でも記号とラベルで判別できる設計。3段階の淡濃度もすべて背景 #fbfaf6 に対し
  3:1以上のコントラストになるよう選色している）
- 純白 #ffffff・純黒 #000000 を使わない

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

- コンテンツ最大幅: 1180px / **12カラムグリッド**（gutter 16px）を厳守
- 密度の作り方: セクション間の余白は最小限（上下 40〜56px）にとどめ、**罫線と行間 1.8 の
  リズムだけで**息継ぎさせる。余白の広さで高級感を出す設計をしない（swiss-precision とは
  逆の意図的な選択）
- グリッドの性格: 表（新着・索引・当番医・カレンダー・施設一覧）はすべて実 `<table>` で組み、
  1px の薄墨罫線で行を、2px の中墨罫線（二重罫線でも可）で表頭を区切る。表内の数値・日付・
  電話番号は右寄せ or 桁揃え
- 見出しの型: 各節の頭に**背景帯**（深藍地・白文字、高さ最小限）を置く。帯の中身は
  「節番号2桁＋和文タイトル＋欧字ラベル」の1行のみ。**帯内の和文タイトルは装飾用の `<span>`
  ではなく、必ずそのセクションの見出し要素（`<h2>`、帯の下に重ねる小見出しがあれば `<h3>`）
  としてマークアップする。** ページ内に複数配置される帯はすべて見出し階層を構成し、
  スクリーンリーダーの見出しジャンプ・目次生成で各節に到達できることを必須要件とする
  （§2で「帯見出し15px」をh1〜h3スケールの一部と定義しているのはこの前提による）。帯の下に
  太字の小見出しを罫線区切りで重ねてもよいが、フォントサイズの跳躍は使わない
- ヒーローの型外し: **ヒーローセクションを置かない。** ページ最上部（ユーティリティバー・
  ブランドヘッダーの直下）は「キーワード検索窓＋主要12窓口の早見索引表」から始める。
  中央寄せの特大見出しや製品写真は置かない。1秒でも早く目的の窓口に着かせることが
  このテイストの「型外しの一手」であり、コンセプトそのものである

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

- ヘッダー・ナビゲーション: 最上部にユーティリティバー（深藍地・白文字・高さ32px、外部リンクや
  文字サイズ切替を置く）→ その下にブランド行（生成り地・墨文字、二重罫線 `border-bottom:
  3px double var(--color-line-mid)` で区切る）→ その下にナビ行（生成り地、リンクは通常時
  墨文字・下線なし、ホバーで下線＋背景薄藍 `--color-accent-pale` に変化）。ナビはサイズや
  太字で目立たせず、ホバーの下線と背景変化のみで反応を示す
- 角丸: 0px（全要素直角）/ 影: 一切使わない（box-shadow 禁止） / 境界線: 通常 1px solid
  `--color-line`、表頭・区切りの強調は 2〜3px（二重罫線含む）solid `--color-line-mid`
- ボタン: 直角・塗り or 枠線のみ。検索ボタンは深藍地＋白文字、ホバーで `--color-accent-mid`
  に変化（0.15s）。それ以外の一般ボタンは白地＋1px墨罫線＋ホバーで背景 `--color-bg-alt`
- カード的要素: **角丸カード＋影のfeatureカードを一切作らない。** 情報のまとまりは
  すべて「罫線で仕切った表組み（新聞のダイヤ・時刻表と同じ構造）」で表現する。3カラム紹介
  カードの代替は「表 or 定義リスト＋縦罫線」で行う
- 状態記号: ◆（緊急・#1a4472 塗り）／■（重要・#4a6d8f 塗り）／●（通知・#93a7ba 塗り）の
  3種を各行の先頭セルに置き、隣接セルに「緊急」「重要」「通知」の文字ラベルも必ず併記する
  （記号だけに依存しない）
- フォーム要素: input[type=text/search] は白地・1px 墨罫線・角丸0・パディング 10px 12px、
  フォーカス時に罫線が深藍 `--color-accent` に変わる（box-shadow は使わない。罫線の色変化のみ）
- 画像の扱い: 写真は使わない（§7 参照）。アイコンは角丸なし・枠なしのSVG線画のみ
- アクセント色の適用範囲: §3 の4用法（リンク／現在地／見出し帯／状態記号の◆と主ボタン）に
  厳密に限定する。本文中の強調・罫線・通常ナビの非アクティブ状態には使わない

## 6. モーション

- 量: **static（動きを使わない）**
- 許される最小の動き: リンク・ナビ・行のホバー時の下線表示／背景色変化のみ（0.15s ease）。
  検索input のフォーカス時の罫線色変化も同様に 0.15s
- 使わない動き: スクロール連動フェード、パララックス、数字のカウントアップ、カルーセル、
  マーキー、タイプライター。ページは開いた瞬間に**すべての情報が静止した状態で**揃っている
  ことを誠実さの表現とする

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

- 写真は一切使わない。密度の高い情報面そのものを主役にする
- 施設・手続きのアイコンは**線幅 1.5px 統一の自作インライン SVG 線画**、色は深藍 1色のみ
  （fill を使う場合も同じ深藍1色。中間濃度・淡濃度は状態記号にのみ使い、アイコンには使わない）
- 装飾目的だけの図版・埋め草の一切を置かない（背景のブロブ・幾何学模様・アイソメトリック
  イラストなどを追加しない）。図として許されるのは実務上意味のある線画アイコンのみ

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

- Inter / Roboto / Arial / Noto Sans JP をデフォルトで使わない（BIZ UDPGothic / IBM Plex Sans
  で組む。UD書体の公共性がこのテイストの核であり、他書体への置換はテイストの否定になる）
- グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow を使わない
- border-radius を使わない（常に 0。角丸カードを作らない）
- 「アイコン＋見出し＋説明」の3カラム角丸カードで機能・サービス紹介をしない。情報のまとまりは
  必ず罫線区切りの表組みで表現する
- 中央寄せの特大見出し＋サブコピー＋ボタン2つの定型ヒーローを作らない。**ヒーロー自体を
  置かない**（最上部は検索窓＋主要窓口索引表で開始する）
- 緊急・重要・通知の区別に**赤・黄・緑の信号色トリオを使わない**。深藍の濃淡＋◆■●の
  形の違いの両方で表現する（色のみに依存する状態表現をしない）
- 絵文字をアイコンとして使わない（線幅1.5pxで統一した自作インラインSVG線画のみ使う）
- スクロール連動アニメ・フェードイン・数字カウントアップを使わない（motion: static を厳守）
- 余白の広さや大きな写真で「高級感」「余裕」を演出しない（このテイストは密度を隠さない）
- 純白 #ffffff・純黒 #000000 を使わない
- ダミー統計のカウントアップ表示をしない（数値は静止で置く。§6参照）
- `a { color: var(--color-accent); }` のようにリンクの文字色をグローバルに深藍指定しない。
  リンクの既定色は常に墨（#26241f・下線なし）。深藍は§3で定めた4用途（現在地表示／矢印付き
  CTA／状態記号／見出し帯の背景）に限定し、`.go` 等のユーティリティクラスで個別に付与する
- 帯見出し（節の頭の深藍背景帯）内の和文タイトルを装飾用の `<span>` や `<div>` だけで
  組まない。帯1つにつき必ず `<h2>`（または `<h3>`）を1つ含め、見出し階層を飛ばしたり
  同一階層のレベルを重複させたりしない（アウトラインで各節へジャンプできることが必須）

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #fbfaf6;
  --color-bg-alt: #f2efe6;
  --color-ink: #26241f;
  --color-line: #d9d6cd;
  --color-line-mid: #8f8b80;
  --color-accent: #1a4472;
  --color-accent-mid: #4a6d8f;
  --color-accent-soft: #7a8fa3;
  --color-accent-pale: #eef2f5;
  --font-heading: "BIZ UDPGothic";
  --font-body: "BIZ UDPGothic";
  --font-latin: "IBM Plex Sans";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1180px;
  --gutter: 16px;
  --cols: 12;
}
```

```css
a { color: var(--color-ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; background: var(--color-accent-pale); }
.go { color: var(--color-accent); font-weight: 500; } /* CTA・矢印リンク専用 */
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap`
- 本文の font-family は `var(--font-body), var(--font-latin), sans-serif` の順。日付・電話番号・
  型番など算用数字を含む語は `.num { font-family: var(--font-latin); font-feature-settings:
  "tnum" 1; }` で括り、桁を揃える
- レイアウトは `display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter);`
  を基本コンテナに敷く。表組みセクションは `<table>` を用い、CSSグリッドは索引の2カラム
  併置（目的別索引／五十音索引）や施設一覧のアイコン列配置に使う
- 状態記号 ◆■● は文字（Unicode）でよいが、色は必ず `--color-accent` /
  `--color-accent-mid` / `--color-accent-soft` を指定し、直後に「緊急」「重要」「通知」の
  テキストラベルを続ける（スクリーンリーダー・色弱ユーザーへの配慮）
- 検索・索引フィルタなど最小限の vanilla JS は可（フレームワーク不可）。動きを伴う演出目的の
  JS（スクロール連動・カウントアップ等）は書かない