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

ポーラ美術館（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（文字・面）

注: 反転文字に #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 が使えない場合）:

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

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

• 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 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

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

3.7 OpenType 機能

cssfont-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

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

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

Grid

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

6. Depth & Elevation

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

• 奥行きという概念を持たない。#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）の両面。

• 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 の倍数で取る（本文の行送りと揃える）