# DESIGN.md — コンセント（CONCENT, Inc.）

> コンセント（https://www.concentinc.jp/）のデザイン仕様書。
> 1971 年創業のアレフ・ゼロを源流とし、エディトリアルデザインからサービスデザイン・デザイン経営支援までを手がける東京のデザイン会社。日本におけるサービスデザイン／デザイン経営の実践者として知られ、Service Design Network 日本支部の運営にも関わる。
> 最大の特徴は、**和文に「ヒラギノ UD 角ゴ StdN」を採用し、`font-feature-settings` を `normal` に据え置く**こと。UD（ユニバーサルデザイン）書体は「読み間違えにくさ」を優先して字面を大きく均一に設計しているため、`palt` で詰めると設計意図が損なわれる。**日本語 UI で `palt` を掛けないことに明確な理由があるサイト**として、このコレクションの中でも異例。
> もうひとつの要点は、**トップのキーコピーが 1 文字ずつ `<span class="u-kerning-0NN">` に包まれ、個別の `letter-spacing` を持つ**こと。`letter-spacing` を一律に掛けるのではなく、字の組み合わせごとにアキを詰める**光学的カーニングを 1 文字単位で実装**している。エディトリアルデザイン出身の会社らしい組版。
> 色は**黒 `#000000` と白 `#ffffff` の 2 色が骨格**で、ナビ帯のペールブルーグレー `#d4dde1` だけが面色を持つ。角丸は全域 `0px`。
> 実サイトの computed style 実測（2026-07-29 取得。トップ＋事例紹介一覧）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **黒い版面と白い紙。** 左上の黒ベタに白抜きの `CONCENT` ロゴを置き、そこから右に伸びる淡いブルーグレーの帯にナビを並べる。誌面のマストヘッドをそのまま Web に移した構成で、角丸も影もグラデーションも一切使わない
- **コンセントについて**: デザイン会社のコーポレートサイトであり、**事例（Works）とナレッジ（ひらくデザイン）が主コンテンツ**。読み物の量が多いため、本文の行間は 1.8 と広く取り、書体は UD 系を選ぶ。**「読みやすさ」がそのまま会社の主張になっている**
- **密度**: 中密度。ヒーローは全画面の動画グリッド、以下はカードの縦積み。カードは**上辺に 4px の黒罫**を持ち、これが誌面の罫の役割を果たす
- **キーワード**: ヒラギノ UD 角ゴ、`palt` 使わない、`letter-spacing: normal`、1 文字単位のカーニング span、黒 ＋ 白 ＋ `#d4dde1`、角丸 0、カード上辺 4px 黒罫
- **特徴**:
  - **`font-feature-settings: normal` がサイト全域**。日本語サイトの主流である `palt` を**意図的に使わない**。UD 書体の等幅に近い字面をそのまま活かす
  - **`letter-spacing: normal` も全域**。字間を一律には触らない
  - **その代わり、キーコピーだけ 1 文字ずつ span に包んで個別に詰める**（`u-kerning-031` → `ナ` に `-5.21px`、`u-kerning-033` → `ッ` に `-4.05px`、`u-kerning-034` → `ジ` に `0.01px`）。**42px の見出しに対して −0.124em 〜 0em と、字ごとに値がまったく違う**
  - **ウェイトは W3（Light 相当）と W6（Bold 相当）の 2 段**。CSS の `font-weight` ではなく、`MFW-HiraginoUDSansStdN-W3` / `-W6` のファミリ名を切り替えて表現する
  - **角丸は全域 0px**。ボタンもカードも入力欄も、1px または 4px の直線の罫だけで作る
  - CTA は **黒ベタ ＋ 白抜き（フッター）** と **白地 ＋ 黒 1px アウトライン（本文中）** と **透明 ＋ 白 1px アウトライン（画像上）** の 3 系統。**いずれも角丸 0px、右端に矢印用の余白を取る**

---

## 2. Color Palette & Roles

> 実測値。地は白 `#ffffff`、文字は純黒 `#000000`。**有彩色は存在しない**。唯一の面色がナビ帯のペールブルーグレー `#d4dde1`。

### Brand（ブランド）

- **Ink** (`#000000`): ロゴブロック・フッター・カード上辺の罫・すべての文字。**コンセントは黒をブランドカラーとして使う**
- **Paper** (`#ffffff`): ページ地色、ロゴの白抜き、画像上のアウトラインボタンの罫

### Surface（面）

- **Nav Blue Gray** (`#d4dde1`, rgb 212,221,225): **グローバルナビ帯の面色**。サイトで唯一の有彩面で、彩度は極めて低い。黒いロゴブロックの右に接して伸び、誌面の「見出し帯」として機能する
- **Sub Nav Gray** (`#eeeff0`, rgb 238,239,240): サブナビ（`ニュース・イベント` / `採用情報` / `アクセス` / `ENGLISH`）の面色。Nav Blue Gray よりさらに退いた無彩色寄りのグレー
- **Overlay** (`rgba(0,0,0,0.54)` 〜 `rgba(0,0,0,0.8)`): ヒーロー動画の上に敷く暗幕。白文字と白アウトラインボタンを読ませるための減光

### Neutral（文字・罫）

- **Text Primary** (`#000000`): 見出し・本文
- **Text Muted** (`#777777`, rgb 119,119,119): ヘッダー内の補助テキスト・小見出しラベル（`ソリューションから探す：` 等）
- **Text Blue Gray** (`#616f75`, rgb 97,111,117): **サブナビの文字色**。`#d4dde1` と同系の青みを持つグレーで、面と文字を同じ色相でまとめている
- **Border** (`#000000`): カード上辺は **4px solid #000000**、ボタン枠は **1px solid #000000**。**グレーの罫は使わない**

### Semantic（意味的な色）

- コンセントは**意味色を持たない**。状態はラベルの文言（`[ セミナー・イベント ]` `開催日：` 等）で表現する
- **Danger／Error**: フォーム用途で必要な場合のみ赤（`#c0392b` 目安）。**面ではなく文字と 1px 罫に留める**（無彩色の基調を壊さないため）
- **Link**: 色を変えない。**黒のまま下線または矢印アイコン（`›`）で示す**

---

## 3. Typography Rules

> **和文 ヒラギノ UD 角ゴ StdN（W3 / W6）**。`font-feature-settings: normal`、`letter-spacing: normal` が全域で、**キーコピーだけ 1 文字単位の span で個別にカーニングする**。本文の行間は 1.8。

### 3.1 和文フォント

- **ゴシック体**: **ヒラギノ UD 角ゴ StdN**（`MFW-HiraginoUDSansStdN-W3` / `-W6`）。`MFW-` は Morisawa Fonts Web 経由の配信を示すプレフィックス
- **UD（ユニバーサルデザイン）書体を選んでいることが最大の設計判断**。UD 角ゴは通常のヒラギノ角ゴに対して、濁点・半濁点を大きく、字面を均一に、ふところを広く設計してあり、**小さいサイズや低コントラストでも読み間違えにくい**。デザイン会社が自社サイトでこれを選ぶのは、アクセシビリティに対する立場表明でもある
- **ウェイトは W3 と W6 の 2 段**。CSS の `font-weight` は 400 のまま（強調箇所のみ 700）で、実際の太さは**ファミリ名の切り替え**で作る
- フォールバック: `Verdana` → `ヒラギノUD角ゴ W3 JIS2004`（ローカルの UD 角ゴ）→ `ヒラギノ角ゴ Pro W3` → `Hiragino Kaku Gothic Pro` → `メイリオ` → `Meiryo` → `sans-serif`
- **ローカルの UD 角ゴを 2 番目の候補に置いている**のがポイント。Web フォントが落ちても、UD 角ゴを持つ macOS 環境では UD のまま表示される
- 明朝体は UI に使わない

### 3.2 欧文フォント

- **専用の欧文書体を持たない**。`Verdana` をフォールバックの 2 番目に置くが、実際には Web フォントの `MFW-HiraginoUDSansStdN` に含まれる欧文グリフで組まれる
- **`CONCENT` のロゴタイプは画像／SVG**（斜体のカスタムレタリング）。CSS で再現しない
- **preview.html での注記**: `MFW-HiraginoUDSansStdN`（ヒラギノ UD 角ゴ StdN）は Morisawa Fonts のライセンスフォントで、ローカルの preview.html では表示できない。プレビューでは **BIZ UDPGothic**（400 / 700）を代替として用いる。BIZ UDPGothic はモリサワが開発した UD 書体で Google Fonts から利用でき、**ヒラギノ UD 角ゴと同じ「UD 設計」の思想を共有する**（濁点の拡大、均一な字面、広いふところ）。実装時は必ずヒラギノ UD 角ゴ StdN を読み込むこと

### 3.3 font-family 指定

```css
/* 本文・通常（W3） */
font-family: MFW-HiraginoUDSansStdN-W3, Verdana,
  "ヒラギノUD角ゴ W3 JIS2004", "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;

/* 強調・見出し（W6） */
font-family: MFW-HiraginoUDSansStdN-W6, Verdana,
  "ヒラギノUD角ゴ W6 JIS2004", "ヒラギノ角ゴ Pro W6",
  "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;

/* グローバル */
font-feature-settings: normal;   /* palt を使わない */
letter-spacing: normal;
font-weight: 400;
line-height: 1.8;
```

**フォールバックの考え方**:
- **和文が先頭**。欧文専用書体を置かず、和欧を同じ UD 角ゴで組む。**和欧の字面の統一を優先した選択**
- **2 番目がローカルの `ヒラギノUD角ゴ W3 JIS2004`**。Web フォントが落ちても UD 書体のまま表示させるための保険
- **`JIS2004` を明示**している。字形の新旧（辻・葛など）が環境で揺れないようにするための指定

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

| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|------|------|------|--------|-------------|----------------|------|
| Key Copy | UD 角ゴ W6 | 42px | 400 | **1.6** (67.2px) | **1 文字ごとに個別指定** | `c-headingCopy`。ヒーローのキーコピー |
| Page Display | UD 角ゴ W6 | 34px | 400 | **1.8** (61.2px) | normal | `c-headingLv1` |
| Heading 2 | UD 角ゴ W6 | 20px | 400 | **1.8** (36px) | normal | `c-headingLv2` |
| Lead | UD 角ゴ W3 | 18px | 400 | **1.6** (28.8px) | normal | `c-linkarea_textDescription`。事例タイトル |
| Body | UD 角ゴ W3 | 16px | 400 | **1.8** (28.8px) | normal | `body` 既定 |
| Sub / Nav | UD 角ゴ W3 | 14px | 400 | **1.8** (25.2px) | normal | ナビ・キャプション。強調は 700 |
| Small | UD 角ゴ W3 | 12px | 400 | **1.8** (21.6px) | normal | ラベル（`ソリューションから探す：`）`#767676` |
| Micro | UD 角ゴ W3 | 11px | 400 | **1.0** (11px) | normal | サブナビ・パンくず `#616f75` |
| Button | UD 角ゴ W3 | 10.5〜16px | 400 | 1.8 | normal | CTA。小サイズは 10.5px |

- **`font-weight` は 400 が基本**（`c-text-bold` の 14px のみ 700）。太さは W3 ↔ W6 のファミリ切替で作る
- **サイズは 10.5 / 11 / 12 / 14 / 16 / 18 / 20 / 34 / 42px**。読み物向けに 14〜18px が細かく刻まれている

### 3.5 行間・字間

- **行間 (line-height)**: **1.8 が全域の既定**（16 → 28.8 / 14 → 25.2 / 20 → 36 / 34 → 61.2 / 12 → 21.6）。**日本語の読み物としてかなりゆったりした設定**で、ナレッジ記事の多いサイトの性格に合う
- **例外は 1.6**（42px のキーコピー、18px のリード）と **1.0**（11px のマイクロテキスト）
- **字間 (letter-spacing)**: **全域 `normal`**
- **キーコピーだけ 1 文字単位で個別に詰める**（後述 3.7）

**ガイドライン**:
- **本文は必ず 1.8**。UD 書体は字面が大きいぶん行が詰まって見えやすく、1.8 でようやく落ち着く
- **`letter-spacing` を一律に足さない**。UD 書体は字送りを含めて可読性が設計されている
- 見出しを大きくするときだけ行間比を 1.6 に下げる

### 3.6 禁則処理・改行ルール

```css
overflow-wrap: break-word;
line-break: strict;
word-break: normal;
```

**禁則対象**:
- 行頭禁止: `）」』】〕〉》、。，．・：；？！`
- 行末禁止: `（「『【〔〈《`

- **キーコピーは意味の切れ目で明示的に改行する**（例:「ユーザーへの深い理解と／「ストーリー」が／ビジネスを動かす」）。`<br>` で 3 行に固定し、折り返しに任せない
- 事例タイトル（例:「AI フェムテックサービス『つきのかたち』導入検証」）は括弧の前後で改行させない

### 3.7 OpenType 機能 — `palt` を使わない設計

```css
font-feature-settings: normal;   /* サイト全域。palt を掛けない */
letter-spacing: normal;
```

- **`palt` を掛けないことが、このサイトの最も特徴的な組版判断**。UD 書体は「文字を大きく、字面を均一に、読み間違えにくく」設計されており、プロポーショナル詰めを掛けると濁点まわりや仮名のアキが不均一になって UD の設計意図が薄れる
- **`lnum` も使わない**。日付「2026.7.28（火）」は UD 角ゴの既定数字で組む

#### 1 文字単位のカーニング（`u-kerning-0NN`）

キーコピーだけは、`palt` の代わりに **1 文字ずつ `<span>` に包んで個別の `letter-spacing` を与える**。

```html
<h3 class="c-headingCopy">
  <span class="u-kerning-031">ナ</span><span class="u-kerning-032">レ</span><span
    class="u-kerning-033">ッ</span><span class="u-kerning-034">ジ</span><span
    class="u-kerning-035">を</span><span class="u-kerning-036">ひ</span>…
</h3>
```

```css
/* 42px のキーコピーに対する実測値 */
.u-kerning-031 { letter-spacing: -5.21px; }  /* ナ  = -0.124em */
.u-kerning-032 { letter-spacing: -5.21px; }  /* レ  = -0.124em */
.u-kerning-033 { letter-spacing: -4.05px; }  /* ッ  = -0.096em */
.u-kerning-034 { letter-spacing:  0.01px; }  /* ジ  =  0em     */
.u-kerning-035 { letter-spacing:  0.01px; }  /* を  =  0em     */
.u-kerning-036 { letter-spacing: -1.15px; }  /* ひ  = -0.027em */
```

- **値は字の組み合わせごとに違う**。`ナ` `レ` のように直線的で余白の大きい仮名は強く詰め（−0.124em）、`ジ` `を` のように字面の詰まった字は動かさない（0em）
- **`palt` の自動詰めではなく、デザイナーが 1 字ずつ決めた値**をビルド時に span へ展開している。エディトリアルデザインの詰め作業を Web に持ち込んだ実装
- **適用範囲はキーコピー（42px）だけ**。本文・見出し・ナビには一切掛けない
- **模倣する際の注意**: 大見出し 1 本に限定すること。本文に展開すると DOM が肥大し、選択・コピー・読み上げの体験を損なう

### 3.8 縦書き

- 該当なし。UI・記事とも横組み
- 事例のキービジュアル内の縦組みは画像として扱う

---

## 4. Component Stylings

### Buttons

**Outline（白地・黒 1px・角丸 0）— 本文中の標準 CTA**
- Background: `#ffffff`
- Text: `#000000`
- Border: `1px solid #000000`
- Border Radius: **`0px`**
- Padding: `10px 44px 10px 10.5px`（**右に 44px の余白を取り、アイコンを絶対配置する**）
- Font: 10.5〜14px / weight 400
- 例: `Googleマップを開く`（外部リンクアイコン付き）

**Solid（黒ベタ・白抜き・白 1px 罫）— フッターの主要 CTA**
- Background: `#000000`
- Text: `#ffffff`
- Border: `1px solid #ffffff`
- Border Radius: **`0px`**
- Padding: `13px 30px`
- Font: 14px / weight 400
- 例: `お問い合わせ`
- **黒地の上に白い罫を重ねる**。面と罫の両方で輪郭を作る

**Ghost（透明・白 1px 罫）— 画像／動画の上**
- Background: `transparent`
- Text: `#ffffff`
- Border: `1px solid #ffffff`
- Border Radius: **`0px`**
- Size: `270px × 70.8px`（**幅を固定して版面に置く**）
- Font: 16px / weight 400 ＋ 右端に `›` シェブロン
- 例: ヒーロー中央の `コンセントについて`

**Text Button（面なし・下線なし）**
- Background: `#ffffff`
- Text: `#000000`
- Border: なし
- Padding: `1px 6px`
- Font: 16px
- 例: `もっと見る` / `事例を絞り込む`（アコーディオンのトリガー）

- **共通ルール: 角丸は必ず 0px。右端にアイコン用の余白を取り、シェブロン `›` か外部リンクアイコンを絶対配置する**

### Header

```
┌──────────────┬────────────────────────────────────────┐
│              │  #eeeff0  サブナビ（11px / #616f75）    │
│  #000000     ├────────────────────────────────────────┤
│  CONCENT     │  #d4dde1  グローバルナビ（14px / #000） │
│  140×87px    │                                        │
└──────────────┴────────────────────────────────────────┘
```

- **ロゴブロック: 黒ベタ `#000000` / 140px × 87px**。白抜きの `CONCENT` 斜体ロゴ（画像）
- **サブナビ帯: `#eeeff0` / 文字 11px `#616f75`**（`ニュース・イベント` `採用情報` `アクセス` `ENGLISH` ＋ 検索窓）
- **グローバルナビ帯: `#d4dde1` / 文字 14px `#000000`**（`コンセントについて` `事例紹介` `ソリューション` `ひらくデザイン` `資料ダウンロード` `お問い合わせ` `メルマガ登録`）
- ドロップダウンは `#d4dde1` の面をそのまま下に伸ばす
- **ヘッダー全体の高さ 87px**。角丸・影なし

### Cards（事例・お知らせ）

- Background: `#ffffff`
- **Border Top: `4px solid #000000`** ← **コンセントのカードを特徴づける要素**
- 他辺の罫: なし
- Border Radius: **`0px`**
- Box Shadow: **`none`**
- 構成: 4px の黒罫 → サムネイル → カテゴリラベル（14px `[ セミナー・イベント ]`）→ タイトル（18px / lh 1.6）→ 日付（14px）
- **誌面の「柱」に相当する 4px の罫がカードの帰属を示す**

### Section Heading

- `h2.c-headingLv2` / 20px / `line-height: 1.8` / W6
- **見出しの右にスラッシュ状の罫を添える**（例: `ピックアップ ／`）
- 直下に `1px solid #000000` の水平罫を引いてブロックを開始する

### Forms

- Background: `#ffffff`
- Border: `1px solid #000000`
- Border Radius: **`0px`**
- Padding: `10px`
- Font: 11〜16px / `font-feature-settings: normal`
- 検索窓は 11px / `line-height: 1.6`
- Focus: 罫を `2px solid #000000` に太らせる（色は変えない）
- Error: `#c0392b` を文字と 1px 罫に使う。**面で塗らない**

### Video Controller

- ヒーロー動画に **`動画を停止する ⏸`** のトグルを必ず添える
- Background: `#ffffff` / Text: `#000000` / 12px / 角丸 0px
- **自動再生する動画には停止手段を用意する**（アクセシビリティ要件）

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| XS | 6px |
| S | 10px |
| M | 20px |
| L | 30px |
| XL | 44px |
| XXL | 80px |

- 実測のパディングは `1px 6px` / `10px` / `10.5px` / `13px 30px` / `10px 44px` に集中する
- **`44px` は「アイコン用の右余白」として繰り返し現れる**。ボタンの矢印・外部リンクアイコンの置き場所

### Container

- Max Width: **1366px**
- ヒーローの動画グリッドは**全幅ブリード**
- ヘッダー・フッターは全幅、中身だけ 1366px に収める
- 本文カラムはさらに内側に寄せる

### Grid

- Columns: 事例カードは 3 カラム、ニュースは 1 カラムのリスト
- Gutter: 30px
- **トップは「全幅の動画グリッド（4 分割）」→「ピックアップ 3 カラム」→「ニュースリスト」の 3 層**
- ヒーローは**動画を 4 枚のタイルに分割して敷き詰め、中央にキーコピーと Ghost ボタンを置く**

---

## 6. Depth & Elevation

実測では**全要素が `box-shadow: none`**。**コンセントは影を一切使わず、罫の太さと暗幕だけで階層を作る**。

| Level | 表現 | 用途 |
|-------|------|------|
| 0 | none | 既定。本文・画像 |
| 1 | `1px solid #000000` | ボタン枠・入力欄・セクション区切り |
| 2 | **`4px solid #000000`（上辺のみ）** | カード。**これがコンセントの「浮き」** |
| 3 | 面色 `#d4dde1` / `#eeeff0` | ヘッダー帯。地の白から手前に出す |
| 4 | `rgba(0,0,0,0.54)` 〜 `rgba(0,0,0,0.8)` | ヒーロー動画の暗幕。白文字と白罫を読ませる |

- **奥行きは「罫の太さ」で表現する**。1px → 4px の 2 段
- **`#d4dde1` は影の代わり**。ヘッダーが本文より手前にあることを、影ではなく面色で示す

---

## 7. Do's and Don'ts

### Do（推奨）

- 和文は**ヒラギノ UD 角ゴ StdN**（W3 / W6）。**UD 書体であることに意味がある**ので、通常のヒラギノ角ゴに置き換えない
- **フォールバックの 2 番目にローカルの `ヒラギノUD角ゴ W3 JIS2004` を置く**。Web フォントが落ちても UD のまま出す
- **`font-feature-settings: normal` を全域に指定する**（`palt` を掛けない）
- **`letter-spacing: normal` を全域に据え置く**
- **太さは `font-weight` ではなくファミリ（W3 ↔ W6）で切り替える**
- **本文の行間は 1.8**。見出し・リードのみ 1.6 に下げる
- キーコピーを詰めたい場合は、**1 文字ずつ span に包んで個別に `letter-spacing` を与える**。字の組み合わせごとに値を変える（`ナ` `レ` は −0.12em、`ジ` `を` は 0em）
- **角丸は全域 0px**
- **カードは上辺に `4px solid #000000` の罫だけを持たせる**。他辺は罫なし、影なし
- ボタンは**右に 44px の余白**を取り、シェブロン `›` または外部リンクアイコンを絶対配置する
- ヘッダーは「黒ベタのロゴブロック（140×87px）＋ `#eeeff0` のサブナビ ＋ `#d4dde1` のグローバルナビ」の 3 面構成にする
- 自動再生する動画には**必ず停止ボタンを添える**
- リンクは色を変えず、**黒のまま下線か矢印で示す**

### Don't（禁止）

- **`palt` を掛けない**。UD 書体の字面設計を壊す。**これはコンセントの明示的な選択であり、他サイトの慣習をここに持ち込まない**
- **`letter-spacing` を一律に足さない**（正・負のどちらも）。詰めが必要なのはキーコピーだけで、それは 1 文字単位でやる
- **1 文字単位のカーニングを本文に展開しない**。DOM が肥大し、テキスト選択・コピー・スクリーンリーダーの体験を損なう。**大見出し 1 本に限定する**
- **`font-weight: 700` で UD 角ゴを太らせない**。合成ボールドは UD 設計の字面を潰す。必ず W6 を読み込む
- 角丸を付けない。**ボタン・カード・入力欄・画像すべて 0px**
- 影を落とさない。階層は罫の太さ（1px / 4px）と面色で作る
- **有彩色を足さない**。`#d4dde1` と `#eeeff0` 以外の面色を使わない
- **リンクを青くしない**。黒のまま下線・矢印で示す
- 行間を 1.8 より詰めない。UD 書体は字面が大きいぶん、詰めると窮屈になる
- カードの罫を上辺以外に回さない（囲み枠にしない）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。ロゴブロックは縮小、ナビはハンバーガー。**動画グリッドは 1 枚に落とす** |
| Tablet | 768–1024px | 2 カラム。ヘッダーは 2 段構成を維持 |
| Desktop | > 1024px | コンテナ 1366px、事例カード 3 カラム、動画グリッド 4 分割 |

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG基準）
- Ghost ボタンは 270×70.8px、Solid ボタンは `padding: 13px 30px` で十分な高さを確保している
- **Outline ボタンの `10px 44px 10px 10.5px` は、右 44px がアイコン領域**。タップ領域としては高さ方向の padding を 12px 以上に増やすこと

### フォントサイズの調整

- 本文 16px / 行間 1.8 は据え置き。**UD 書体の可読性はこの組み合わせが前提**
- Key Copy 42px → モバイルでは 24〜28px。**このとき 1 文字単位のカーニング値も再計算する**（px 固定なので、サイズを変えると詰めが崩れる。`em` で持つか、ブレークポイントごとに値を持ち替える）
- Page Display 34px → 22〜24px、Heading 2 20px → 18px
- サブナビ 11px はモバイルではメニュー内に畳む（11px のままタップさせない）

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
Background:     #ffffff
Text:           #000000   （純黒）
Text Muted:     #777777
Text Blue Gray: #616f75   （サブナビ）
Nav Blue Gray:  #d4dde1   （グローバルナビ帯。唯一の面色）
Sub Nav Gray:   #eeeff0   （サブナビ帯）
Overlay:        rgba(0,0,0,0.54) 〜 rgba(0,0,0,0.8)   （ヒーロー動画の暗幕）
JP Font (W3):   MFW-HiraginoUDSansStdN-W3, Verdana, "ヒラギノUD角ゴ W3 JIS2004",
                "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, sans-serif
JP Font (W6):   MFW-HiraginoUDSansStdN-W6, …（強調はファミリで切り替える）
Latin Font:     専用書体なし（和文と同じ UD 角ゴで組む）
Body Size:      16px / weight 400
Weight:         400（全域。太さは W3 ↔ W6 のファミリ切替）
Line Height:    1.8（全域の既定） / 1.6（42px キーコピー・18px リード） / 1.0（11px）
Letter Spacing: normal（全域。キーコピーのみ 1 文字単位で個別指定）
Feature:        normal（palt を使わない ← UD 書体の設計を尊重）
Container:      1366px
Radius:         0px（全要素）
Border:         1px solid #000（ボタン・入力欄） / 4px solid #000（カード上辺）
Shadow:         none
```

### プロンプト例

```
コンセント（CONCENT, Inc.）のデザインシステムに従って、事例紹介の一覧ページを作成してください。
- 和文はヒラギノ UD 角ゴ StdN（無ければ BIZ UDPGothic）。UD 書体であることに意味があるので
  通常のヒラギノ角ゴや Noto Sans JP に置き換えない。
  フォールバックの 2 番目にローカルの "ヒラギノUD角ゴ W3 JIS2004" を置く
- font-feature-settings は全域 normal。palt を掛けない（UD 書体の字面設計を尊重する）
- letter-spacing は全域 normal
- font-weight は 400 のまま。強調は W6（代替: BIZ UDPGothic 700）へファミリを切り替える
- line-height は全域 1.8。42px のキーコピーと 18px のリードのみ 1.6
- キーコピーを詰める場合のみ、1 文字ずつ <span> に包んで個別の letter-spacing を与える。
  値は字ごとに変える（ナ・レ は -0.124em、ッ は -0.096em、ジ・を は 0em）。本文には展開しない
- 地は白 #ffffff、文字は純黒 #000000。有彩色は使わない
- ヘッダーは「黒ベタのロゴブロック 140×87px（白抜きロゴ）＋ #eeeff0 のサブナビ帯（11px/#616f75）
  ＋ #d4dde1 のグローバルナビ帯（14px/#000）」の 3 面構成にする
- カードは上辺に 4px solid #000000 の罫だけを持たせる。他辺の罫なし、角丸 0px、影なし
- CTA は 3 系統：本文中は白地＋1px solid #000（padding 10px 44px 10px 10.5px）、
  フッターは黒ベタ #000＋白文字＋1px solid #fff（padding 13px 30px）、
  画像上は透明＋1px solid #fff（270×70.8px）。すべて角丸 0px、
  右端 44px の余白にシェブロン › を絶対配置する
- リンクは色を変えず、黒のまま下線か矢印で示す
- コンテナは max-width 1366px、事例カードは 3 カラム、ガター 30px
- 影は一切使わない。階層は罫の太さ（1px / 4px）と面色（#d4dde1 / #eeeff0）で作る
- 自動再生する動画には「動画を停止する」トグルを必ず添える
```