青図の製図 Blueprint Drafting

DESIGN.md

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

https://3pt.co.jp/design-library/md/aozu-seizu/DESIGN.md

# DESIGN.md — 青図の製図 / aozu-seizu

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

## 1. コンセプト

建築の実施設計図・青焼き（ブループリント）の様式美をWebに移す。通り芯（十字マーク＋
一点鎖線）をレイアウトの基準線として可視化し、寸法線・引出線・断面ハッチングという
製図の記法そのものを装飾として使う。「精度が信頼になる」業種の必然を、飾りではなく
**図面の記法**で語る。動かさない。図面は動かないものだから。

**キーワード**: 製図 / 通り芯 / 寸法線 / 青焼き / 精度
**この見た目が向く場面**: 構造設計・建築設計・施工管理・測量・不動産デベロッパー・
土木コンサルなど、「数値と線の正確さ」が信頼の根拠になる業種

## 2. タイポグラフィ

- 欧文・数字: Space Mono / ウェイト 400（本文注記）・700（強調数値・見出し内の数字）。
  **図面の注記文字そのもの。** 寸法値・型番・年号・電話番号・面積・階数などの算用数字は
  必ずこちらで組む。Space Mono は和文グリフを持たないため、和文と混在する行では
  `<span class="mono">` で数字部分だけを明示的に括る（例: `<span class="mono">2011</span>年6月`）。
  和文まじりの文字列をまるごと `.mono` にしない
- 和文本文: Noto Sans JP / ウェイト 400 / サイズ 16px（本文）・15px（補足文）/ 行間 1.8〜1.9
- 和文見出し: Noto Sans JP / ウェイト 500（600・700は使わない。太さでなく級数と
  図面番号ラベルで階層を作る）
- 見出しには必ず「図面番号」を添える。書式は `S-01`〜`S-06`（英字1〜2文字＋ハイフン＋
  2桁連番）。見出し本文の直上に `図面番号 S-0N — ENGLISH LABEL` の1行を Space Mono
  11〜12px・字間 0.06em・色は藍で置く。ページ全体で連番を維持し、飛び番・欠番を作らない
- 見出しスケール: h1（タイトルブロック内）22px / h2（各節）28px / h3（プレート内・表内小見出し）
  15〜16px。**特大見出しを作らない**（最大28px。図面の几帳面さを大きさで壊さない）

## 3. カラー

無彩色（紙白＋墨）＋**藍1色のみ**（mono-accent）。青焼き反転プレートのみ例外的に
藍地×白線の反転面を許可する（後述、排他）。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 背景（ベース・紙白） | #fafbfc | 62% |
| 背景（節替え・表見出し行） | #f1f3f6 | — |
| テキスト（主・墨） | #23272c | 26% |
| テキスト（弱・寸法値ラベル語） | #5a6270 | — |
| アクセント（藍） | #23538f | 10%前後（通り芯・寸法線・図番ラベルを含む） |
| 罫線（薄グレー） | #d5dade | — |
| 青焼きプレート地（排他・1箇所のみ） | #1e3a5f | プレート内のみ |
| 青焼きプレート線・文字 | #fafbfc（見出し）/ rgba(250,251,252,.68)（キャプション） | プレート内のみ |

- 配色ルール: 藍は「通り芯・寸法線・引出線・図面番号ラベル・リンク・強調」の6用途に
  限定する。これらはいずれも**線・点・小さな注記文字**であり、面（背景）としては
  使わない。唯一の例外が青焼き反転プレートで、これはページ中**1箇所のみ**、藍地に
  白線という「反転」そのものが図面資料の引用であることを示す装置。2箇所以上に
  増やさない・発光（box-shadow・text-shadow によるグロー）を絶対に付けない
- 純白 #ffffff・純黒 #000000 を使わない。赤・緑・黄など彩度のある色を一切足さない。
  耐震診断のIs値のような「段階」表現も、色を増やさず**尺度図＋数値ラベル**で表現する
  （§7参照）

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

- コンテンツ最大幅: 1180px / セクション内は「図面番号ラベル＋見出し」を左端 22px
  インデントでそろえる（後述の通り芯スペーサー分）
- **通り芯（十字マーク＋一点鎖線）をレイアウトの基準線として可視化する。** 各セクション
  （`.drawing-section`）の左端に、セクション全高を貫く一点鎖線を縦に1本走らせ、その
  最上部に「十字マーク（クロスヘア）＋英字1文字（Ⓐ〜Ⓕ）」を置く。ページを縦に貫く
  この基準線が、symmetric-grid の背骨になる。**方眼紙を全面に敷いて図面感を出す
  ことはしない。** 通り芯は主要セクションの数だけ（本パターンでは6本）に抑える
- ヒーローのみ、通り芯を「配置図」として全画面的に見せる（§7のヒーロー仕様を参照）。
  ヒーロー以外のセクションでは1本の縦線＋クロスヘアに抑制し、情報量とのバランスを保つ
- セクション間は `border-top: 1px solid var(--color-line)` で区切る。上下の余白は
  72px 基準（swiss-precision のような 120px の広大な余白は使わない。図面台帳らしい
  balanced density を保つ）
- 表（実績台帳・事務所概要・採用要項）は実 `<table>` または罫線区切りグリッドで組み、
  カード化（角丸＋影＋アイコン）に頼らない

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

- ヘッダー・ナビゲーション: 紙白地・墨文字・下線なし。ナビリンクは通常時下線なし、
  ホバーで藍の下線が出る（文字色は変えない。下線のみが§6の許容範囲）。ロゴは
  「藍罫線で囲んだ英字略称（YSJ）＋事務所名＋欧字副題」の組み。ヘッダー右のCTAボタン
  「構造相談の予約」はページ中の常設CTA。幅520px以下ではこのボタンを非表示にし、
  代わりにハンバーガーメニュー内に同じCTAを収める（`.gnav-cta`）。CTAの導線自体は
  ヒーローにも常設されるため、非表示にしても迷子にならない
- 角丸: 0px（すべて直角。図面に丸みはない）/ 影: 使わない（box-shadow 禁止）/
  境界線: 1px solid #d5dade が基本、強調境界（ヘッダー下・表題欄の枠・青焼きプレートの
  縁）は 1.5px solid。**線幅はこの1px/1.5pxの2種類のみに統一する（排他）。** 3種類目の
  線幅（2px・3pxなど）を追加しない
- ボタン: 直角・1.5px藍罫線・地は紙白・文字は藍。ホバーで背景が藍に反転し文字が
  紙白になる（0.15s程度の即時に近い切り替え。フェードを感じさせない）
- カード的要素: カードという概念を使わない。実績・事務所概要・採用要項はすべて
  罫線区切りの表またはグリッドセルで組む。「アイコン＋見出し＋説明の3カラム角丸カード」
  を作らない
- 寸法線（寸法値を示す装置）: 両端矢印＋中央に数値ラベル（背景色で罫線を切り欠く）。
  実装は §9 の `.dim` を参照。ヒーローの階高表示、設計フローの所要期間表示に使う
- 引出線（注記・特記事項を示す装置）: 起点の点＋短い横棒＋テキストの3点構成。
  実装は §9 の `.leader` を参照。事務所概要の「特記事項」で使用する
- 断面ハッチング（材料表示の凡例スワッチ）: 45°斜線パターンを幅56px・高さ7pxの
  小片として各節見出しの下に置く（`.hatch-bar`）。ヒーローの構造断面図の基礎部分にも
  同じ45°斜線ハッチングを使う。ハッチングを背景全面に敷かない
- 表・台帳: 罫線は横1px、表頭行のみ1.5px＋背景 #f1f3f6。数値列は右寄せ・Space Mono・
  `font-feature-settings:"tnum" 1` で桁をそろえる。狭幅では `.table-scroll`
  （横スクロールのみ）で対応し、行をカード化しない
- フォーム要素: 本パターンのデモにはフォームを置かない（連絡はmailto/tel導線のみ）。
  フォームを追加する場合は input/textarea を角丸0・1px藍罫線・フォーカスで罫線が
  1.5pxに太くなる仕様とする
- 画像の扱い: 写真は使わない。図はすべて自作インラインSVGの線画（1px/1.5pxの2種の
  線幅のみ）。3D・グラデ・抽象ブロブを使わない
- アクセント色の適用範囲: §3の6用途に限定。面（背景）としての使用は青焼きプレート
  1箇所のみの例外

## 6. モーション

- 量: **static（動かさない）。** 図面は動かないものだから、という本テイストの核心。
  スクロール連動アニメ・フェードイン・パララックス・数字カウントアップを一切使わない
- 許される最小の動き: リンク/ナビのホバー時の下線出現、ボタンホバー時の背景色反転
  （0.12〜0.15s）のみ
- 例外的な「動く」ように見える要素: ヒーローの余白寸法線（`#gaugeLine` /
  `#gaugeValue`）は、ロード時とリサイズ時にJSで実際のpadding値を再計測してテキストを
  更新する。これは**アニメーションではない**（イージングも遷移も持たない、値の
  再計算と即時反映のみ）。「動き」ではなく「その時点で正しい値を表示するための
  自己言及の仕掛け」として区別する

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

- 写真は使わない。すべて自作インラインSVGの線画で構成する
- **ヒーローは「配置図」として組む。** 画面全体に薄い通り芯（3本の縦一点鎖線＋2本の
  横一点鎖線、不透明度0.28程度）を敷き、縦線の上端に十字マーク＋circledレター
  （Ⓐ Ⓑ Ⓒ）を置く。方眼紙のように全面を格子で埋めない（3〜5本程度に抑える）。
  左上に「表題ブロック」（1.5px罫で囲んだ枠に、図面番号・事務所名(h1)・縮尺表記
  `S = 1 : 200` を収める）。中央に構造断面（3層フレーム＋屋根＋基礎ハッチング）の
  線画を置き、右側に実際の階高を示す寸法線（3200 / 3200 / 2800）を添える。
  CTAは「構造相談の予約」1つのみ（副CTAを並べない）
- ヒーロー内、表題ブロックの左上余白に**自己言及の寸法線**を置く: 実際の
  `.hero-inner` の左パディング値をJSで計測し、`←— 32px —→` のように動的に表示する
  （実装は §9）。デザインの余白そのものを図面の寸法として自己言及的に示す、本パターン
  唯一の遊び
- 耐震診断セクションに**青焼き反転プレート**を1箇所だけ置く。藍地 #1e3a5f に白線・
  白文字で、Is値（構造耐震指標）の目安を示す尺度図（0 / 0.3 / 0.6 / 1.0 の目盛りと
  基準線）を収める。グロー（box-shadow・filter:drop-shadow等の発光表現）を絶対に
  付けない。この1箇所以外に青焼き反転面を作らない

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

- Inter / Roboto / Arial / system-ui をデフォルトで使わない（Space Mono / Noto Sans JP
  で組む。和文混じりの文字列をまるごと Space Mono にしない）
- グラデーションを一切使わない（`linear-gradient` / `radial-gradient` /
  `conic-gradient` を含むCSSグラデーション関数、およびSVGの `<linearGradient>` /
  `<radialGradient>` 要素）。**一点鎖線や45°ハッチングなど、繰り返しパターンが
  必要な箇所も CSS グラデーションではなく SVGパターンの data URI 背景か `<pattern>`
  要素で作る**（§9のコード例を参照。repeating-linear-gradient も含めて不可）
- box-shadow・text-shadow・filter:drop-shadow によるグロー（発光）表現を一切使わない。
  青焼き反転プレートも例外なく発光させない
- border-radius を使わない（常に0。角丸カードを作らない）
- 「アイコン＋見出し＋説明の3カラム角丸カード」を作らない。区切りは罫線・表・
  グリッドセルで表現する
- スクロール連動アニメ・フェードイン・数字カウントアップ・パララックス・マーキーを
  使わない（motion: static を厳守。ヒーローの余白寸法線がロード/リサイズ時に
  テキストを更新する挙動のみ例外として許容し、それ以外の遷移アニメーションは
  一切追加しない）
- 藍以外の彩度色（赤・緑・黄・紫・青緑など）を一切追加しない。信号色トリオで
  状態表現をしない（耐震診断のIs値の段階表現も、色ではなく尺度図の位置と数値で示す）
- 純白 #ffffff・純黒 #000000 を使わない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ＋下に製品画像）を
  作らない。ヒーローは必ず「配置図」の型（通り芯グリッド＋表題ブロック＋断面図＋
  寸法線）で組む
- 絵文字・既製アイコンセット（Heroicons等）をアイコンに使わない。図はすべて
  1px/1.5pxの2種の線幅に統一した自作インラインSVG線画のみ
- 方眼紙（細かいグリッド線）を画面全面に敷いて安直に「図面感」を出さない。
  通り芯（3〜6本程度の一点鎖線＋クロスヘア）と寸法線で語る
- 線幅に1px・1.5px以外の太さ（2px、3pxなど）を追加しない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #fafbfc;
  --color-bg-alt: #f1f3f6;
  --color-ink: #23272c;
  --color-text-weak: #5a6270;
  --color-line: #d5dade;
  --color-accent: #23538f;         /* 図面の藍。1色のみ */
  --color-plate-bg: #1e3a5f;       /* 青焼き反転プレート専用・ページ中1箇所のみ */
  --color-plate-line: #fafbfc;
  --color-plate-line-dim: rgba(250, 251, 252, 0.68);
  /* 変数には総称ファミリを含めない */
  --font-jp-body: "Noto Sans JP";
  --font-jp-head: "Noto Sans JP";
  --font-mono: "Space Mono";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1180px;
  --gutter: 24px;
  --line-thin: 1px;
  --line-thick: 1.5px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&display=swap`
- 数字は `.mono` クラス（`font-family: var(--font-mono), monospace;`）で明示的に
  括る。和文と算用数字が混在する行は数字部分だけを `<span class="mono tnum">` で
  囲み、文字列全体を mono にしない
- `font-feature-settings: "tnum" 1;` を数値テーブル・寸法値に必ず適用し桁をそろえる

**通り芯（十字マーク＋一点鎖線）— CSSグラデーションを使わずSVG data URIで作る**
```css
.drawing-section{ position:relative; border-top:1px solid var(--color-line); }
.drawing-section::before{
  content:"";
  position:absolute; left:32px; top:0; bottom:0; width:1px;
  /* 長線16px・すきま6px・点2px・すきま6pxの30pxタイルをrepeat-y */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='30'%3E%3Cline x1='1' y1='0' x2='1' y2='16' stroke='%2323538f' stroke-width='1'/%3E%3Cline x1='1' y1='20' x2='1' y2='22' stroke='%2323538f' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat-y;
  opacity:.4;
}
```
```html
<div class="grid-ref" aria-hidden="true">
  <svg viewBox="0 0 22 22">
    <circle cx="11" cy="11" r="9" fill="var(--color-bg)" stroke="#23538f" stroke-width="1"/>
    <line x1="11" y1="4" x2="11" y2="18" stroke="#23538f" stroke-width="1"/>
    <line x1="4" y1="11" x2="18" y2="11" stroke="#23538f" stroke-width="1"/>
  </svg>
  <span>B</span>
</div>
```

**寸法線（両端矢印＋数値）**
```css
.dim{ position:relative; height:20px; display:flex; align-items:center; }
.dim__line{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--color-accent); }
.dim__line::before,.dim__line::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent; transform:translateY(-50%);
}
.dim__line::before{ left:0; border-right:7px solid var(--color-accent); }
.dim__line::after{ right:0; border-left:7px solid var(--color-accent); }
.dim__value{ position:relative; margin:0 auto; background:var(--color-bg); padding:0 8px;
  font-family:var(--font-mono); font-size:12px; color:var(--color-accent); }
```
```html
<div class="dim"><span class="dim__line" aria-hidden="true"></span><span class="dim__value mono">3200</span></div>
```

**引出線（起点の点＋短い横棒＋テキスト）**
```css
.leader{ display:flex; align-items:flex-start; gap:10px; }
.leader__dot{ width:6px; height:6px; border-radius:50%; background:var(--color-accent); margin-top:7px; }
.leader__stem{ width:20px; height:1px; background:var(--color-accent); margin-top:10px; }
.leader__text{ font-size:13px; color:var(--color-text-weak); line-height:1.7; }
```

**断面ハッチング（材料表示スワッチ・45°斜線・data URIパターン）**
```css
.hatch-bar{
  width:56px; height:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cline x1='0' y1='7' x2='7' y2='0' stroke='%2323538f' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
}
```

**ヒーローの自己言及寸法線（実測padding値を表示。アニメーションではない）**
```js
function measure() {
  var pad = parseFloat(getComputedStyle(frame).paddingLeft) || 32;
  line.style.width = Math.round(pad) + 'px';
  value.textContent = Math.round(pad) + 'px';
}
measure();
window.addEventListener('resize', function () { clearTimeout(t); t = setTimeout(measure, 150); });
```

**フッター（表題欄=タイトルブロック）**
```css
table.tb{ width:100%; border:1.5px solid var(--color-ink); }
table.tb td{ border:1px solid var(--color-ink); padding:12px 14px; }
table.tb .label{ font-size:10.5px; color:var(--color-text-weak); }
table.tb .val{ font-family:var(--font-mono); font-size:13px; }
```
事務所名・縮尺（`S = 1 : 1`）・日付・図番・作成者・承認者の6セルを2行3列で組む。
実務ページとして成立させるため、枠の外に住所・電話・メール・サイトナビ・
著作権表記を通常のテキストブロックとして必ず添える。

- 青焼き反転プレートはページ中**1箇所のみ**。`background: var(--color-plate-bg)`
  に `color: var(--color-plate-line)`、内部の図はSVGの `stroke="#fafbfc"` の
  線画のみで構成し、box-shadow等のグロー装飾を一切付けない