# DESIGN.md — ポーラ美術館（POLA MUSEUM OF ART）

> ポーラ美術館（https://www.polamuseum.or.jp/）のデザイン仕様書。
> 箱根・仙石原の森の中に建つ美術館。2002 年開館、設計は日建設計（安田幸一）。「箱根の自然と美術の共生」を掲げ、**建物の 8 割が地下に埋まっている**——森のスカイラインを壊さないための設計で、そのまま Web の性格にもなっている。
> サイトの最大の特徴は **モリサワ 2 書体（太ゴ B101 ＋ 中ゴシック BBB）と Futura PT の 3 本立て**。日本のグラフィックデザインの標準書体をそのまま Web に持ち込んでいる構成で、Adobe Fonts のダイナミックサブセットで配信される。
> もうひとつは **`letter-spacing` を em ではなく `1.5px` 固定で持っていること**。本文（24px）では 0.0625em だが、キャプション（11px）まで落ちると **0.136em** に膨らむ。**小さい文字ほど字間が開く**という、活版・写植的な字送りの感覚が px 指定として残っている。
> **CSS Custom Properties は 1 つも定義していない**（旧来型の WordPress テーマ）。トークン層に頼らず、値がそのまま CSS に書かれている。
> 実サイトの computed style 実測（2026-07-31 取得。トップ＋美術館について＋利用案内）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **紙の展覧会カタログをそのまま画面に置いた組版。** 面はほぼ `#f9f9f9`（わずかに温度のある白）1 色で、罫も影も角丸もない。画面を作っているのは**文字の大きさと余白と、作品写真の矩形**だけ
- **ポーラ美術館について**: トップページは **`POLA MUSEUM OF ART` の Futura PT ロゴタイプが画面の四辺を額縁のように取り囲む**構成。上辺は正位置、右辺は 90 度回転、左辺は反転、下辺は上下反転（一部は白抜きのアウトライン）。**額装そのものをレイアウトにしている**——美術館サイトとして極めて明確な一手
- **密度**: 低密度。**本文が 24px と大きく、行間 1.667**。読み物というより「壁面のキャプションを読む」速度に合わせてある
- **キーワード**: 太ゴ B101、中ゴシック BBB、Futura PT、`#f9f9f9`、角丸ゼロ、影ゼロ、`letter-spacing: 1.5px` 固定
- **特徴**:
  - **和文は 2 書体を役割で分ける**。地の文と見出しが **太ゴ B101 Pr6N**（`a-otf-futo-go-b101-pr6n`）、セクション見出しとキャプションが **中ゴシック BBB Pr6N**（`a-otf-gothic-bbb-pr6n`）。**太ゴが「本文」で中ゴが「小見出し」**という、一般的な感覚とは逆の配分になっている
  - **`letter-spacing` が px 固定**。`1.5px` が本文・見出し・キャプションで共通。**サイズが変わっても px が変わらない**ので、小さい文字ほど相対的に字間が開く（24px で 0.0625em → 11px で 0.136em）
  - **欧文（Futura PT）の字間は和文よりはるかに広い**。`24px` に `4px`（**0.167em**）。ロゴタイプとセクションラベルはこの広さで組む
  - **CSS Custom Properties がゼロ**。デザイントークン層を持たない。実装を起こすときは**こちらでトークン化する**（下の表がその原資）
  - **角丸が 1 つもない**（全要素 `border-radius: 0`）。**影も 1 つもない**。矩形と余白だけで構成する
  - **文字色に純黒 `#000000` を使っている**。`#f9f9f9` の地に純黒という強いコントラスト。**ここは意図的**（作品写真の隣で文字が負けないようにする）なので、流用時に `#333` へ薄めない
  - ブランド色の **`#043d8a`（濃紺）は文字とアイコンにしか出ない**。面を塗らない
  - **`max-width: 850px` が唯一と言っていい分岐点**。CSS 中 2795 箇所で使われる

---

## 2. Color Palette & Roles

> CSS Custom Properties は**定義されていない**。以下はすべて computed style の実測値。実装では下記をトークン化して使う。

### Brand（ブランド）

- **Museum Blue** (`#043d8a`): **ブランド色**。ロゴマーク、駐車場アイコン、「TOP」ボタン、リンクの文字色。**濃紺。面を塗るのに使わない**
- **Ink** (`#000000`): 見出し・本文。**純黒をそのまま使う**
- **Paper** (`#f9f9f9`): ページ地色。純白ではなく**わずかに沈めた白**

### Neutral（文字・面）

| Role | Value | 用途 |
|------|-------|------|
| Text Primary | `#000000` | 見出し・本文。**純黒** |
| Text Secondary | `#333333` | 補助テキスト・キャプションの一部 |
| Background | `#f9f9f9` | **ページ地色**（`body` に直接指定） |
| Surface | `#e6e6e6` | 「睡蓮の池」「美術館について」等の**面付きナビブロック** |
| Text on Blue | `#f9f9f9` | 濃紺の上に置く文字（地色と同じ値を使う） |

> **注**: 反転文字に `#ffffff` ではなく **地色と同じ `#f9f9f9`** を使う。紙 1 枚の中で色数を増やさないための選択。

### Semantic（意味的な色）

**セマンティック色は定義されていない。** エラー・成功・警告に相当する色が存在しない（美術館サイトなのでフォームが最小限）。

- 必要な場合は **`#043d8a` を「情報・強調」として流用**し、赤や緑を新規に持ち込まない

### 色数のまとめ

**サイト全体で使われている色は実質 5 つ**（`#000000` / `#333333` / `#f9f9f9` / `#e6e6e6` / `#043d8a`）。作品写真がすべての彩度を担当する。

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体（本文・見出し）**: **太ゴ B101 Pr6N**（`a-otf-futo-go-b101-pr6n`／モリサワ、Adobe Fonts 配信）。写研由来の太ゴシック。**B101 は太めのウェイト**で、`font-weight: 400` の指定でもかなり太く出る
- **ゴシック体（セクション見出し・キャプション）**: **中ゴシック BBB Pr6N**（`a-otf-gothic-bbb-pr6n`／モリサワ、Adobe Fonts 配信）。日本の DTP でもっとも使われてきた標準ゴシック
- **明朝体**: 使用しない

> **重要（フォールバック時の見た目の落差）**: 太ゴ B101 は**書体自体が太い**が、フォールバック先の游ゴシック・ヒラギノ角ゴは `font-weight: 400` では**細い**。Adobe Fonts が読めない環境（ドメインライセンス外・オフライン）では、**ページ全体が別物のように軽く**なる。ローカル検証やプレビューを作るときは、この落差を必ず確認すること。

### 3.2 欧文フォント

- **サンセリフ**: **Futura PT**（`futura-pt`／Adobe Fonts）。ジオメトリックサンセリフ。**ロゴタイプ・セクションラベル・ページ番号**に使う。ウェイトは `400` と `600`
- **等幅**: 定義なし

### 3.3 font-family 指定

```css
/* 本文・見出し（既定） */
font-family: a-otf-futo-go-b101-pr6n, 游ゴシック体, "Yu Gothic", YuGothic,
             "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", sans-serif;

/* セクション見出し・キャプション */
font-family: a-otf-gothic-bbb-pr6n, sans-serif;

/* 欧文（ロゴタイプ・ラベル） */
font-family: futura-pt, sans-serif;
```

**フォールバックの考え方**:
- **和文優先**。モリサワの書体を先頭に置き、以降 **游ゴシック → ヒラギノ → Osaka → ＭＳ Ｐゴシック** と OS 別に落ちる
- **游ゴシックを 3 つの名前で書く**（`游ゴシック体` / `"Yu Gothic"` / `YuGothic`）。macOS の日本語名・Windows の英語名・旧 macOS の詰め名の 3 系統を全部拾うための定型。**この 3 つは省略しない**
- **`"ＭＳ Ｐゴシック"` は全角の書体名**。半角の `"MS PGothic"` では Windows で当たらないことがあるため全角で書く
- **中ゴシック BBB のスタックは `sans-serif` に直接落ちる**。和文フォールバックを持たないので、Adobe Fonts が読めない環境ではブラウザ既定のゴシックになる。**実装では本文と同じフォールバック列を足しておくのが安全**

**代替フォント**（Adobe Fonts が使えない場合）:

| 原典 | 代替（Google Fonts） | 理由 |
|------|---------------------|------|
| 太ゴ B101 Pr6N | **Zen Kaku Gothic New** の `700`／または Noto Sans JP `700` | 太ゴの字面幅に近いのは Zen Kaku Gothic New。**ウェイトを 700 に上げないと太ゴにならない** |
| 中ゴシック BBB Pr6N | **Noto Sans JP** の `400` | 標準ゴシックとして最も素直 |
| Futura PT | **Jost**／または Poppins | Jost は Futura を範にしたジオメトリックサンセリフで、字形がもっとも近い |

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

**`letter-spacing` は `1.5px` 固定**（欧文の Futura PT だけ別系統）。em 換算の列で、サイズが下がるほど相対的な字間が広がることを確認できる。

| Role | Font | Size | Weight | Line Height | Letter Spacing | em 換算 | 用途 |
|------|------|------|--------|-------------|----------------|---------|------|
| Logotype | Futura PT | 35.3px | 600 | 35.3px (1.0) | normal | — | ヘッダーのロゴ |
| Display (EN) | Futura PT | 30px | 600 | 30px (**1.0**) | 1.4px | 0.047em | 四辺の額縁ロゴタイプ |
| Section Label (EN) | Futura PT | 24px | 600 | 24px (**1.0**) | **4px** | **0.167em** | 欧文セクションラベル |
| Nav Label (EN) | Futura PT | 16px | 600 | 16px (1.0) | normal | — | `#043d8a` の欧文ナビ |
| **Heading (h2 / h3)** | 太ゴ B101 | **24px** | 400 | 40px (**1.667**) | 1.5px | 0.0625em | 見出し |
| **Body (p)** | 太ゴ B101 | **24px** | 400 | 40px (**1.667**) | 1.5px | 0.0625em | **本文。大きい** |
| Lead | 太ゴ B101 | 20px | 400 | 40px (**2.0**) | 1.5px | 0.075em | リード文 |
| Lead（広字間） | 太ゴ B101 | 20px | 400 | 40px (2.0) | **3.8px** | **0.19em** | 見出し的に組むリード |
| **Section Head** | 中ゴ BBB | **18px** | 400 | 34px (**1.889**) | 1.5px | 0.083em | **セクション見出し** |
| Small | 太ゴ B101 | 15px | 400 | 15px (1.0) | 0.8〜1px | 0.053〜0.067em | ナビ・小リンク |
| **Caption** | 中ゴ BBB | **11px** | 400 | 20px (**1.818**) | 1.5px | **0.136em** | 作品キャプション・注記 |

- **`font-weight` は全域 `400`（和文）と `600`（Futura PT）の 2 値だけ**。**太さでヒエラルキーを作らない**——太ゴ B101 が書体としてすでに太いので、ウェイトを動かす必要がない
- **本文が 24px** というのはかなり大きい。一般的な日本語サイトの本文（15〜17px）の 1.5 倍。**縮めると美術館サイトの間合いが崩れる**
- **欧文（Futura PT）の `line-height` はすべて `1.0`**。字面がそのまま矩形になるので、額縁レイアウトのように**辺に沿わせるのに都合がいい**

### 3.5 行間・字間

- **本文の行間**: **1.667**（24px → 40px）
- **リードの行間**: **2.0**（20px → 40px）。**`40px` を固定して、サイズを変えることで行間比を動かしている**
- **セクション見出しの行間**: **1.889**（18px → 34px）
- **キャプションの行間**: **1.818**（11px → 20px）
- **和文の字間**: **`1.5px` 固定**（本文で 0.0625em、キャプションで 0.136em）
- **欧文の字間**: **`4px`（0.167em）**（Futura PT のセクションラベル）

**ガイドライン**:
- **`line-height` を px（`40px`）で固定し、`font-size` の側を動かす**のがこのサイトの組み方。20px と 24px が同じ 40px の行送りに乗るので、**2 段組にしたときにベースラインが揃う**
- **`letter-spacing` を em に置き換えない**。px 固定であることが、小さい文字を開いて見せる効果を生んでいる
- **欧文だけ字間を 3 倍近く開ける**（和文 0.0625em に対し欧文 0.167em）。和欧を同じ字間で組まない

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

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

- 作品名・作家名は**改行させない**（`white-space: nowrap` または手動改行）。「クロード・モネ」を行またぎさせない
- 見出しは手で改行位置を決める

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* 全域 */
```

- **`palt` を使っていない**。字間は `letter-spacing: 1.5px` で一律に開ける方向で、**詰める方向の調整はしない**
- 太ゴ B101 / 中ゴ BBB はもともと**字面が詰まった書体**なので、palt を足すと窮屈になる。**この組み合わせでは palt を入れないのが正しい**
- `kern` も明示していない

### 3.8 縦書き

該当なし。ただし**トップページの額縁ロゴタイプは `transform: rotate()` による回転**で、`writing-mode` は使っていない（欧文なので縦組みではなく回転が正しい）。

---

## 4. Component Stylings

**角丸・影・グラデーションを一切使わない。** 部品は「矩形」「罫」「余白」だけで作る。

### Buttons

**Outline（サイト唯一のボタン形）**
- Background: `transparent`
- Text: `#000000`
- Border: `2px solid #000000`
- **Border Radius: `0px`**
- Padding: `10px 7px 11px 10px`
- Font: 太ゴ B101 `15px` / `400` / `letter-spacing: 1px`

> **注**: padding が上下左右で不揃い（`10px 7px 11px 10px`）。**和文の字面が上に寄る分を下で 1px 補正**している。流用するなら上 10 / 下 11 の非対称を残す。

**Blue Label（`#043d8a` の面）**
- Background: `#043d8a`
- Text: `#f9f9f9`
- Border Radius: `0px`
- 「TOP」等の戻りボタン

### Surface Blocks（面付きナビ）

- Background: `#e6e6e6`
- Border: なし
- **Border Radius: `0px`**
- 「睡蓮の池」「美術館について」等の大きめのナビブロック

### Links

- Color: `#000000`（本文中）／ `#043d8a`（ナビ・ラベル）
- **下線を持たない**。位置と余白で押せることを示す
- Font Size: `15px` / `letter-spacing: 0.8〜1px`

### Inputs

フォームは検索欄程度で、専用の意匠を持たない。実装するときは:
- Background: `#ffffff`
- Border: `1px solid #000000`
- **Border Radius: `0px`**（角丸を持ち込まない）
- Font Size: `16px`（iOS の自動ズーム回避）

### Cards

- **カードという部品が存在しない**。作品・展覧会は**画像の矩形とその下のキャプション**だけで並ぶ
- Background / Border / Shadow: なし
- 画像は `border-radius: 0`。**作品画像に角丸を付けない**（額装の矩形を壊さない）

---

## 5. Layout Principles

### Container

- **Max Width: `850px`** — 実質唯一の基準幅。CSS 中 2795 箇所で使われる
- サブ幅: `1060px` / `1000px` / `880px` / `740px` / `700px`（ブロック単位の例外）
- **ワイド対応が 2 段ある**: `min-width: 1590px` と `min-width: 2120px`。**大画面で余白と文字を積極的に広げる**（美術館サイトらしく、大きなディスプレイでの鑑賞を想定している）

### Spacing

寸法トークンは存在しない。実測から読み取れる刻み:

| Value | 用途 |
|-------|------|
| `7px` / `10px` / `11px` | ボタンの padding（非対称） |
| `35px` | 見出しの下マージン |
| `40px` | 本文・見出しの行送り（＝ 縦のリズムの基準） |

- **縦のリズムの単位は `40px`**（行送りと一致）。余白を 40 の倍数で取ると本文のベースラインに乗る

### Grid

- 1 カラム（850px）が基本
- トップページの額縁レイアウトのみ、**四辺にロゴタイプを配した特殊な枠組み**（`transform: rotate()` で辺に沿わせる）

---

## 6. Depth & Elevation

**影は 1 つも使われていない。** 全要素で `box-shadow: none`、`border-radius: 0`。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | **すべて** |

- **奥行きという概念を持たない**。`#f9f9f9`（地）と `#e6e6e6`（面）の 2 段だけで、それも「浮いている」ではなく「別の紙」として扱う
- モーダル・ドロップダウンが必要な場合も、**影ではなく `2px solid #000000` の罫で切る**

---

## 7. Do's and Don'ts

### Do（推奨）

- **和文を 2 書体で役割分担する**（本文・見出し＝太ゴ B101／セクション見出し・キャプション＝中ゴ BBB）
- **游ゴシックは 3 つの名前で書く**（`游ゴシック体, "Yu Gothic", YuGothic`）
- **`"ＭＳ Ｐゴシック"` は全角で書く**
- **`letter-spacing` を `1.5px` の px 固定で持つ**（em に置き換えない）
- **欧文（Futura PT）の字間は和文の 3 倍近く開ける**（`4px` / 0.167em）
- **`line-height` を `40px` に固定して font-size 側を動かす**（ベースラインが揃う）
- 本文は **24px** を維持する（美術館サイトの間合い）
- 色は `#000000` / `#333333` / `#f9f9f9` / `#e6e6e6` / `#043d8a` の 5 色に収める
- **CSS Custom Properties を自分で定義する**（原典にはトークン層がない）

### Don't（禁止）

- **角丸を持ち込まない**（全要素 `border-radius: 0`）。特に作品画像に角丸を付けない
- **影を付けない**（`box-shadow` は 1 箇所も使われていない）
- **`font-feature-settings: "palt"` を足さない**。太ゴ B101 / 中ゴ BBB はもともと字面が詰まっており、字間は開ける方向で設計されている
- **文字色を `#333` に薄めない**。`#000000` の純黒は作品写真と並べるための意図的な選択
- **`#043d8a` で面を塗らない**（「TOP」ボタン等の小面積を除く）。濃紺は文字とアイコンの色
- **`font-weight` でヒエラルキーを作らない**（和文は全域 `400`）。太ゴ B101 は書体として既に太い
- 本文を 16px に縮めない（レイアウトの前提が 24px / 行送り 40px で組まれている）
- 中ゴ BBB のスタックを `sans-serif` 直落ちのまま実装しない（**和文フォールバックを足す**）
- **Adobe Fonts が使えない環境で太ゴ B101 の代替に `font-weight: 400` を当てない**（游ゴシック 400 では細すぎて別物になる。700 に上げる）

---

## 8. Responsive Behavior

### Breakpoints

**デスクトップファースト（`max-width`）＋ ワイド拡張（`min-width`）の両面**。

| Name | Query | 使用箇所数 | 説明 |
|------|-------|-----------|------|
| **Tablet / Mobile** | `max-width: 850px` | **2795** | **主分岐。ここで 1 カラムに落ちる** |
| Mobile | `max-width: 700px` | 96 | スマホ |
| Mobile（小） | `max-width: 640px` | 32 | |
| Mobile（極小） | `max-width: 379px` / `370px` | 13 / 19 | iPhone SE 級 |
| Desktop | 既定 | — | 850px コンテナ |
| **Wide** | `min-width: 1590px` | 296 | **大画面で余白・文字を広げる** |
| **Ultra Wide** | `min-width: 2120px` | 221 | **さらに広げる** |

- **`min-width` 側に 2 段（1590 / 2120px）ある**のが特徴。多くのサイトは大画面でコンテナを固定して余白だけ増やすが、**ここは文字と画像を積極的に大きくする**。美術館サイトとして「大きな画面では大きく見せる」という判断
- `max-width: 370px` と `379px` が両方ある（9px 差）のは経年の継ぎ足し。**新規実装では 1 本に寄せる**

### タッチターゲット

- Outline ボタン: `15px（行）+ 10px + 11px + 2px × 2 = 40px` → **44px 基準にわずかに足りない**。実装では上下 padding を `12px` に上げて 45px を確保する

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

- 本文 `24px` はモバイルで `16〜18px` へ落とす（デスクトップ比 70% 前後）
- **`letter-spacing: 1.5px` は px 固定なので、フォントを縮めると相対字間が広がる**。モバイルで開きすぎる場合は `1px` へ落とす
- Futura PT のセクションラベル（24px / 字間 4px）はモバイルで `18px` / 字間 `3px` 程度に

---

## 9. Agent Prompt Guide

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

```
Brand (Blue):     #043d8a（文字・アイコン専用。面を塗らない）
Text:             #000000（純黒。薄めない）
Text Secondary:   #333333
Background:       #f9f9f9（純白ではない）
Surface:          #e6e6e6
Font (本文・見出し): a-otf-futo-go-b101-pr6n, 游ゴシック体, "Yu Gothic", YuGothic,
                    "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", sans-serif
Font (小見出し・注記): a-otf-gothic-bbb-pr6n, sans-serif
Font (欧文):        futura-pt, sans-serif
Body Size:        24px / weight 400
Line Height:      40px（px 固定。1.667 相当）
Letter Spacing:   1.5px（px 固定。em にしない） / 欧文は 4px
Font Feature:     なし（palt を足さない）
Radius:           0px（全要素）
Shadow:           none（全要素）
Container:        850px
Breakpoint:       max-width 850px（主分岐） / min-width 1590px・2120px（ワイド拡張）
```

### プロンプト例

```
ポーラ美術館のデザインシステムに従って、展覧会の一覧セクションを作成してください。
- コンテナ: max-width 850px
- ページ背景: #f9f9f9（純白にしない）
- 本文: 太ゴ B101 スタック / 24px / 400 / line-height 40px / letter-spacing 1.5px
- セクション見出し: 中ゴシック BBB / 18px / 400 / line-height 34px / letter-spacing 1.5px
- 欧文ラベル（Exhibition 等）: futura-pt / 24px / 600 / line-height 24px / letter-spacing 4px
- キャプション: 中ゴシック BBB / 11px / 400 / line-height 20px / letter-spacing 1.5px
- 作品画像は border-radius: 0。角丸を付けない
- カード部品は作らない。画像の矩形とその下のキャプションだけで並べる
- 影は一切使わない。面を分けるときは #e6e6e6 を使う
- ボタンは transparent + border 2px solid #000000 + radius 0 の 1 種類だけ
- font-feature-settings は指定しない（palt を足さない）
- 縦の余白は 40px の倍数で取る（本文の行送りと揃える）
```