# DESIGN.md — ビザスク（VisasQ）

> このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。
> セクションヘッダーは英語、値の説明は日本語で記述しています。
> 実測日: 2026-10-16 / 対象: `https://visasq.co.jp/`, `https://visasq.co.jp/service/`

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **純黒の本文に、1色の鮮やかな青だけを差す。** 角丸は `3px` という極小の一段しかなく、面はほぼ全部が直角に近い矩形。B2B のリード獲得を目的にした、装飾を削った業務的な設計
- **密度**: 高い。ファーストビューに 2 ステップの資料ダウンロードフォームを常設し、数値（80万人超・500カテゴリ以上）を大きく並べる
- **キーワード**: ビビッド・ブルー、純黒、角丸3px、数値訴求、フォーム常設

**このサイトの核心は4つある。**

1. **`font-feature-settings: "pkna"` を body に 1 行だけ書いて 1937 要素へ継承している。ところがこれは 1px も効いていない。** `pkna`（Proportional Kana＝仮名だけをプロポーショナル詰めする OpenType feature）は、このサイトが使っている **Google Fonts 配信の Noto Sans JP が持っていない**。同じ要素・同じ書体で実測すると `normal` と `pkna` が完全同幅で、`palt` だけが詰まる（下表）。**詰めたいなら `palt` を書く**
2. **`letter-spacing` は `normal` が既定**（可視 329 要素中 329 が normal ＝トップの最多値）。字間を当てるのは**見出しと数値だけ**で、本文は一切いじらない
3. **ウェイトは 400 と 700 の二択**（可視 219 / 174 要素）。500 と 900 はそれぞれ 4 要素しかなく、**500 は全部 Cookie 同意バナー（外部ウィジェット）**。サイト本体は 2 段だけ
4. **ルートは 16px 固定だが、`body` だけが 1024px 付近を境に 14px → 15px と「モバイルで大きくなる」。** 画面が狭いほど本文を大きくする設計で、向きが一般と逆

---

## 2. Color Palette & Roles

### Primary（ブランドカラー）

| 役割 | 実装値 | 実測 |
|------|--------|------|
| **VisasQ Blue** | **`#0052ff`** | **可視 24 要素（文字）／ 6 要素（面）**。CTA ボタンの面、`お問い合わせ`、数値の強調。このサイトで唯一の彩度の高い色 |
| **Blue Deep** | **`#003199`** | **可視 16 要素**。導入企業名のテキスト、下層の `ご利用に関するご相談` ボタン面 |
| **Navy（フォーム帯）** | **`#08277f`** | 資料ダウンロードフォームの見出し帯（`たった30秒の入力で、いますぐ資料ダウンロード`）専用。**1 要素** |

> **青は 3 つあるが役割が分かれている。** `#0052ff` が行動を促す色、`#003199` は実績を見せる色、`#08277f` はフォームの枠。**新規実装では `#0052ff` だけで組んでよい。**

### Neutral（ニュートラル）

- **Text Primary** (`#000000`): 本文・見出し。**可視 197 要素**。**このサイトは本文に純黒を使う**（`#333333` に逃げない）
- **Text Secondary** (`#7f7f7f`): フォームのラベル、補足文。**可視 122 要素**と多い。50% グレーちょうど
- **Text on Dark** (`#ffffff`): 青面・写真上のテキスト（可視 35 要素）
- **Danger** (`#dc2626`): フォームの必須マーク `*` のみ（可視 2 要素）
- **Background（トップ）** (`#f0f0f0`): ページ地色。`pageBackground.resolved` = `rgb(240,240,240)`
- **Background（下層）** (`#edf4fe`): **下層は淡い青に変わる**（`/service/` の `resolved`）。トップと同じ色にしない
- **Surface** (`#f6f6f6`): カードの面（可視 7 要素）
- **Surface Blue** (`#eaf2fb`): `ビザスクなら` の比較ブロック
- **Border** (`#d9d9d9` / `#e1e1e1`): 区切り線

### 外部ウィジェット由来（実装しない）

- `#1863dc`（Cookie バナーの `カスタマイズ` `同意しない`）、`#212121`（同バナー本文）は **Cookie 同意バナーの色**。サイトの設計色ではない

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体**: **Noto Sans JP**（Google Fonts）。400 と 700 の 2 ウェイトだけを読み込み、どちらも `loaded`
- **明朝体**: 使わない。セリフ系の和文は 2 ページとも可視 0 要素

### 3.2 欧文フォント

- **サンセリフ**: **Inter**（400 / 700 / 800、すべて `loaded`）。スタックの先頭に置いて欧文・数字を担当させる
- **Roboto**（700）も `loaded` で、**数値カウンタ（`230,000` `570,000`）11 要素だけ**に使われている

### 3.3 font-family 指定

```css
/* 実サイトの宣言をそのまま */
font-family: Inter, "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Yu Gothic",
             "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
             "Hiragino Sans", Meiryo, sans-serif;
```

**ただし游ゴシックの並びは誤っている。** `YuGothic`（Regular）が `"Yu Gothic Medium"` より**前**にあるため、Noto Sans JP が落ちた Windows では Regular に当たって細く出る。正しくは Medium を先に置く:

```css
/* 正しい並び（Windows で Medium を拾わせる） */
font-family: Inter, "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium",
             YuGothic, "Yu Gothic", "Helvetica Neue", Arial,
             "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
```

実害は限定的（Noto Sans JP が `loaded` なので通常そこまで到達しない）が、**フォント配信が落ちた時だけ細くなる**ので直す価値がある。

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

| 役割 | サイズ | ウェイト | 行間 | 字間 | 実測 |
|------|--------|---------|------|------|------|
| **ヒーロー h1** | **41.87px** → **29px**（834px 以下） | 700 | 1.4 | **2.0935px**（= .05em） | 1024px を境に 2 段。流体ではない |
| セクション見出し h3 | 22px | 700 | 1.575 | normal | |
| 数値カウンタ | 42px | 900 | 1.0 | **-1.68px**（= **-.04em**） | `230,000` 等 5 要素。**数字だけ詰める** |
| 中見出し | 34px | 700 | — | 1.7px（= .05em） | 13 要素 |
| 本文 | **14px**（1200px 以上）／ **15px**（834px 以下） | 400 | **1.7** | normal | body 直書き |
| ラベル・注記 | 12px | 400 | 1.45 | normal | 可視 150 要素で最多 |

**ウェイトは 400 と 700 だけで組む。** 900 はヒーローの数値 4 要素のみ、500 は Cookie バナー由来。**600 は設計に存在しない。**

### 3.5 行間・字間

```css
/* body に 1 回だけ書いて継承させる */
line-height: 1.7;          /* = 23.8/14。可視 67 要素 */
letter-spacing: normal;    /* ★既定。可視 329 要素 */
```

- **行間は無単位の比率**で書く。`em` や `px` で固定しない。CSS 全文の最頻は `1.5`（65 箇所）、次いで `1`（61）、`2`（31）、`1.8`（21）、`1.7`（20）
- **字間は `normal` が既定。** 当てるのは次の 3 つだけ:

| 対象 | 宣言 | 実測 px |
|---|---|---|
| ヒーロー h1（41.87px） | `.05em` | 2.0935px |
| 数値カウンタ（42px） | **`-.04em`** | **-1.68px**（**詰める**） |
| 見出し・ラベル | `.03em` / `.05em` | 0.48px / 1.7px |

- CSS の宣言数は `.03em` 17 箇所 / `.05em` 14 箇所 / `0` 11 箇所 / `-.04em` 3 箇所。**本文には一切当たっていない**

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

- `word-break` は `normal`（既定のまま）。`auto-phrase` は使っていない
- ヒーローの 3 行（`アクセスしづらい` / `一次情報の収集を` / `たった1時間で`）は**要素を分けて手で改行している**。自動改行に任せていない

### 3.7 OpenType 機能 — 宣言はあるが効いていない

```css
/* 実サイトの body 宣言 */
body { font-feature-settings: "pkna"; }   /* ← 1937 要素へ継承。だが無効 */
```

**同一ページ・同一書体（Noto Sans JP 400 / 100px）で measure した実測値:**

| サンプル | `normal` | `"pkna"` | `"palt"` |
|---|---|---|---|
| `あいうえおかきくけこ` | 1000px | **1000px**（変化なし） | **898px** |
| `シャッターチャンス` | 897px | **897px**（変化なし） | **787.61px** |
| `「ビザスク」、それは。` | 1049px | **1049px**（変化なし） | **856.81px** |
| `一次情報収集`（漢字のみ） | 600px | 600px | 600px |

- **`pkna` は Google Fonts 配信の Noto Sans JP に入っていないため、ブラウザが黙って無視する。** エラーも警告も出ない
- 同じ CSS には `font-feature-settings: "palt"` も 3 箇所書かれているが、**可視要素には 1 つも当たっていない**（継承されているのは効かない `pkna` の方）
- **再現するときは `"palt"` を書く。** `pkna` をそのまま写すと「詰めたつもりで 1px も詰まっていない」状態を再現することになる

```css
/* 正しく詰めたいとき */
body { font-feature-settings: "palt"; }
```

### 3.8 縦書き

該当なし。`writing-mode` が `horizontal-tb` 以外の要素は **2 ページとも 0 要素**。縦組みは使わない。

---

## 4. Component Stylings

### Primary Button（青の面）

```css
background: #0052ff;
color: #ffffff;
font-size: 20px;          /* 下層の大きい CTA。小さい版は 14px / 16px */
font-weight: 700;
line-height: 30px;
letter-spacing: normal;
border-radius: 3px;       /* ★このサイトの角丸は 3px がほぼ唯一 */
border: none;
```

### Secondary Button（白面・青文字）

```css
background: #ffffff;
color: #0052ff;
font-size: 16px;
font-weight: 700;
border-radius: 3px;
```

### フォーム（ファーストビュー常設）

```css
/* 見出し帯 */
background: #08277f;
color: #ffffff;
border-radius: 4px 4px 0 0;
/* 本体 */
background: #ffffff;
border-radius: 0 0 4px 4px;
/* select */
border-radius: 6px;
```

- ラベルは **12px / `#7f7f7f`**、必須マーク `*` は **`#dc2626`**
- 送信ボタン `次へ` は `#0052ff` の全幅

### 角丸の実測

| 値 | 可視要素数 | 用途 |
|---|---|---|
| **3px** | **28** | **ボタン・カード（主役）** |
| 6px | 2 | `select` |
| 4px 4px 0 0 / 0 0 4px 4px | 各 1 | フォームの上下 |
| 50% | 2 | ステップ表示の丸 |

**2px の角丸は Cookie バナー由来。実装しない。**

---

## 5. Layout Principles

- ヒーローは**左にコピー、右に資料請求フォーム**の 2 カラム固定。フォームは常にファーストビュー内に置く
- 実績値は**横 3〜4 列のグリッド**で、数値を 42px / weight 900 で、単位を小さく添える
- 下層（`/service/`）は**淡い青（`#edf4fe`）の地に白いカード**を重ねる構成

---

## 6. Depth & Elevation

**影は実質 1 つだけ。**

```css
/* フローティングの資料ダウンロード CTA（可視 1 要素） */
box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 19px 0px;
```

- カード・ボタンには影を付けない。**面の差（`#ffffff` / `#f6f6f6` / `#f0f0f0`）だけで階層を作る**
- `rgba(172,171,171,.3) 0 -1px 10px` は Cookie バナーの影。実装しない

---

## 7. Do's and Don'ts

### Do

- **本文は純黒 `#000000`、補助は `#7f7f7f`** の 2 段で組む
- **ウェイトは 400 と 700 だけ**を使う
- **角丸は `3px`**。ボタンもカードも同じ値にする
- **字間は `normal` を既定**にし、見出しと数値だけ `.05em` / `-.04em` を当てる
- **本文の行間は 1.7**（`body` に 1 回書いて継承させる）
- 青は `#0052ff` 1 色に絞る

### Don't

- **`font-feature-settings: "pkna"` を書かない。** Noto Sans JP では 1px も詰まらない。詰めるなら `"palt"`
- **`YuGothic` を `"Yu Gothic Medium"` より前に置かない**（Windows で細くなる）
- **500 / 900 を本文やボタンに使わない**（500 は Cookie バナー、900 は数値専用）
- **角丸を 8px や 12px にしない。** このサイトの硬さは 3px から来ている
- **影でカードを浮かせない。** 面色の差で段を作る
- **下層の地色をトップと同じにしない**（トップ `#f0f0f0` / 下層 `#edf4fe`）

---

## 8. Responsive Behavior

| 幅 | `html` | `body` | `h1` |
|---|---|---|---|
| 1440px | 16px | **14px** / 行間 23.8px | 41.87px |
| 1200px | 16px | **14px** | 41.87px |
| 1024px | 16px | 14px | 41.87px |
| 834px | 16px | **15px** / 行間 25.5px | **29px** |
| 768px | 16px | 15px | 29px |
| 767px | 16px | 15px | 29px |
| 375px | 16px | **15px** | 29px |

- **`html` は 6 幅すべて 16px で固定。** 流体ではない
- **`body` は 1200px と 834px の間で 14px → 15px に「増える」。** 狭い画面ほど本文が大きい。**一般的な縮小方向と逆なので、ブレークポイントを写し間違えると印象が変わる**
- `h1` は同じ境目で 41.87px → 29px に落ちる（階段。`clamp()` ではない）

---

## 9. Agent Prompt Guide

このサイトの見た目でUIを作るときは、次を守る。

1. 書体は **Inter + Noto Sans JP**（400 / 700 のみ）。スタックの先頭は Inter、2 番目に Noto Sans JP
2. **`font-feature-settings` は `"palt"` を使う。`"pkna"` と書かない**（実サイトは `pkna` だが無効）
3. 本文 `#000000` / 補助 `#7f7f7f` / 強調 `#0052ff` の 3 色で組む
4. **角丸は 3px に統一**。影は使わず面色で段を作る
5. 本文の行間は **1.7**、字間は **`normal`**。見出しだけ `.05em`、数値だけ `-.04em`
6. ルートは 16px 固定。本文は **デスクトップ 14px / 834px 以下 15px**
7. ウェイトは **400 と 700 の二択**。600 を作らない