世田谷美術館（SETAGAYA ART MUSEUM） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地に展覧会の色を置く。 館そのものには色を持たせず、展覧会・イベントごとに割り当てた6色だけが画面に立つ。罫線と面で組み、角丸はバッジの真円以外に使わない
• 密度: 中程度。会期・展示室・タイトルを縦に積むカード形式。本文の行間は 1.73、展覧会タイトルは 2.10 とゆったり
• キーワード: 約物サブセット、極細と極太、カテゴリカラー、950px固定、印刷を前提にしたメディアクエリ

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

1. 約物だけを別フォントに差し替えて詰める。palt は1文字も使っていない（CSS 全文で font-feature-settings の宣言 0 件、実測 font-feature-settings を持つ要素 0 件）。代わりに YakuHanJP を unicode-range で約物だけに限定して被せている。「約物が詰まっている＝palt」と読み違えないこと
2. CSS Custom Properties が 0 個。色は hex をそのままクラス名にしている（.color_039788 .color_d70000 …）。実測 customPropertiesSummary.own = 0 / platform = 0。設計トークンという層が存在しない
3. 書体スタックはサイト全体で1本しかない。 YakuHanJP, "Noto Sans Japanese", sans-serif が 可視テキストの全要素（トップ 168/168、下層 108/108）。見出しも本文もナビもフッターも同じ1行で、差は太さとサイズだけでつけている

ルートの font-size は固定値ではなく、画面幅に追従する流体値。 デスクトップでは 10px だが、タブレットで 8px、モバイルでは 4.99999px まで縮む（実測。下表は 4 幅での計測）。

rem を px に読み替えて固定しないこと。 1rem はデスクトップで 10px、モバイルでは約 5px になる。CSS には font-size: 1.28vw や calc((0.7878787878787877vw - 0.08484848484848229px) * 1.6) のような vw ベースの式が書かれており、4.99999px という半端な実測値がその証拠。この DESIGN.md の 3.4 節のサイズはすべてデスクトップ（1440px / 1200px）での実測値。

2. Color Palette & Roles

Category（展覧会・イベントの色）

このサイトのブランドカラーは「無い」。 代わりに6色のカテゴリカラーがあり、展覧会ごと・イベント種別ごとに1色が割り当てられる。CSS 全文での出現回数がほぼ揃っている（12〜15回） のは、6色が同じ役割の体系として書かれている証拠。

色の割り当て方が独特。 クラス名が color_ ＋ hex そのもの（.color_3e4eb8、.color_039788）で、展覧会ごとに HTML 側でクラスを付け替える。CSS 変数もトークン名も介さない。

css#CONTENTS .list01.list_calendar li .title.color_039788 { color: #039788 }
#CONTENTS .ticket_info_navibar.color_039788 { background-color: #039788 }
#CONTENTS .exhibition_unit.color_039788 .title .extraordinary {
  background: linear-gradient(transparent 17%, #039788 17%, #039788 /* …蛍光ペン風の下線 */ );
}

新規実装でこの流儀を真似する必要はない（色を増やすたびにクラスが増える）。が、既存ページに手を入れるときは「色＝クラス名」を前提にする。

Neutral（ニュートラル）

• Text Primary (#333333): 本文・見出し・ナビ。可視 43 要素 / 17 要素。CSS 全文で 152 回。純黒ではない
• Text on Dark (#ffffff): 黒面・カテゴリ面の上のテキスト（可視 69 / 55 要素）
• Text Muted (#666666): カレンダーのイベント名（可視 10 要素）
• Text Disabled (#808080): 分館リンク・寄付の案内（可視 3 要素）
• Surface Gray (#f5f5f5): 一覧カードの面。可視 25 要素。CSS 全文で 60 回。このサイトで最も多い面色
• Black（面） (#000000): ボタン・タブの選択状態（可視 26 要素の塗り面）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 viewportTopBySample (12/12)）

html も body も background-color が rgba(0,0,0,0) で、地色は最上位の div が持っている。body に色を書かない実装なので、body { background: ... } で上書きしても効かない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans CJK JP。ただし font-family 名は Noto Sans Japanese（Google Fonts の現行名 Noto Sans JP ではない）。CDN ではなく自前ホスト（../font/NotoSansCJKjp-Regular.woff）
• 約物専用: YakuHanJP。unicode-range で約物だけに限定したサブセットフォントで、400 / 500 / 700 の3本
• 明朝体: 使用しない

3.2 欧文フォント

• 専用の欧文フォントを持たない。 数字も欧文も Noto Sans Japanese の欧文グリフで組む
• 例外は動画プレイヤーのアイコンフォント VideoJS（unloaded）と、一部 UI の Arial, Helvetica, sans-serif（CSS 全文で 5 回）

3.3 font-family 指定

CSS 全文で本文用の font-family はこの1行だけ（'YakuHanJP', 'Noto Sans Japanese', sans-serif が1回）。body に書いて全体へ継承させている。

css/* 本文・見出し・ナビ・フッター すべて共通 */
font-family: "YakuHanJP", "Noto Sans Japanese", sans-serif;

約物サブセットの仕組み（実サイトの @font-face をそのまま）:

css@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 400;              /* 500 / 700 も同じ形で計3本 */
  font-display: block;
  src: url("../font/YakuHanJP-Regular.woff2") format("woff2"),
       url("../font/YakuHanJP-Regular.woff") format("woff");
  /* 約物だけに限定する。ここが肝 */
  unicode-range: U+3001-3002, U+3008-3011, U+3014-3015, U+30fb,
                 U+ff01, U+ff08-ff09, U+ff0c, U+ff0e, U+ff1a-ff1b,
                 U+ff1f, U+ff3b, U+ff3d, U+ff5b, U+ff5d;
}

• スタックの先頭に置くのが必須。 YakuHanJP が約物（、。「」（）・：；？！）だけを担当し、それ以外の文字は自動的に2番目の Noto Sans Japanese に落ちる
• palt を併用しない。 YakuHanJP は字形そのものが詰まっているので、palt を足すと二重に詰まって逆に窮屈になる

和文フォントの @font-face（自前ホスト・実サイトのまま）:

css@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansCJKjp-Regular.eot?v=1.0.4");   /* IE9 Compat */
  src: local("Noto Sans CJK JP Regular"),
       url("../font/NotoSansCJKjp-Regular.eot?v=1.0.4#iefix") format("embedded-opentype"),
       url("../font/NotoSansCJKjp-Regular.woff?v=1.0.4") format("woff"),
       url("../font/NotoSansCJKjp-Regular.ttf?v=1.0.4") format("truetype");
}

.eot と local() が残っている＝IE 対応時代の実装がそのまま現役。 新規実装では .eot / .ttf を落として woff2 1本でよい。ただし font-family 名を Noto Sans JP に変えると、このサイトの CSS は全部当たらなくなる（名前が宣言と一致しなくなるため）。名前は Noto Sans Japanese のまま扱う。

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

3.5 行間・字間

字間は em を各要素に当てる。 サイズが変わると px 値も比例して変わるので、px に読み替えて固定しないこと（42px → 3.36px、22px → 2.2px、12px → 1.2px は すべて同じ 0.08em / 0.1em 系の宣言）。

• 本文の字間: normal。実測 107 / 63 要素で最多。本文は詰めも空けもしない（約物は YakuHanJP が詰めるので、letter-spacing に頼らない）
• 見出し・ラベルの字間: .03em / .05em / .08em / .1em / .2em。CSS 全文では .05em が 38 回で最多、次いで .03em 13 回、.1em 8 回
• 負の字間がある: -.01em（2回）/ -.02em（2回）/ -.03em（3回）/ -.05em（1回）。フッターの小さいリンクを詰めるために使う
• 本文の行間: 1.73（15px → 25.95px）。展覧会タイトルは 2.10（20px → 42px）と極端に広い
• 単一行のラベルは line-height: 1.00（実測 134 / 75 要素で最多）。この 1.00 を「行間の既定値」と読み違えないこと。折り返す文章には必ず 1.5 以上が当たっている

css/* 本文 */
letter-spacing: normal;
line-height: 1.73;

/* セクション見出し */
letter-spacing: .05em;
line-height: 1.5;

/* グローバルナビ */
letter-spacing: .2em;

3.6 禁則処理・改行ルール

• word-break / line-break の宣言は無い（ブラウザ既定のまま）
• 展覧会タイトルは HTML 側で改行位置を手で入れている（スウェーデン・テキスタイル ／ 暮らしと自然に息づく北欧デザイン の2行）。自動改行に任せず、タイトルは人が折る

3.7 OpenType 機能

css/* このサイトは font-feature-settings を一切書かない */

• palt は使わない（CSS 全文で font-feature-settings の宣言 0 件 / 実測 0 要素）
• 約物詰めは YakuHanJP が担当する。 palt を足すと二重に詰まるので、このサイトの設計に合わせるなら書かない

3.8 縦書き

使用しない（実測 writing-mode: vertical-rl の要素 0 件）。

3.9 ウェイトの落とし穴（重要）

CSS が当てているウェイトと、実際に描画されるウェイトが一致しない。

• CSS で宣言されている @font-face は 100 / 200 / 300 / 400 / 500 / 700 / 900 の7本（NotoSansCJKjp-Thin / -Light / -DemiLight / -Regular / -Medium / -Bold / -Black）
• document.fonts に載るのは 100 / 200 / 400 / 700 の4本だけ（実測）。300 / 500 / 900 は実測で確認できなかった
• CSS は 500 を 15 回、900 を 2 回当てている。 実測では 500 が 37 要素 / 900 が 4 要素に付いている。このウェイトは指定どおりに出ていない可能性が高い（最近傍のウェイトへのフォールバック、またはブラウザの合成）

新規実装での扱い: 100 / 200 / 400 / 700 の4本だけを使う。 500 や 900 を当てると、意図した中間の太さにならない。太さの対比は 100（会期の日付）↔ 700（見出し） の振れ幅でつける。これがこのサイトの見た目を決めている。

さらに、読み込まれるウェイトはページごとに違う。 トップは 100 が loaded / 200 が unloaded、/exhibition/ はその逆。ページに実際に現れた字形しか読み込まれないので、「サイト全体で常に4本ある」とは考えないこと。

4. Component Stylings

Buttons

Primary（黒の面）

• Background: #000000
• Text: #ffffff
• Border: 1px solid #333333（一部）/ none
• Border Radius: 0px
• Font Size: 13〜15px
• Font Weight: 700
• Letter Spacing: normal

Category Badge（真円）

• Background: カテゴリ6色のいずれか（#3e4eb8 / #039788 / #fed910 / #d70000 / #ec1561）
• Text: #ffffff
• Border Radius: 100%（50% ではなく 100% と書かれている。描画結果は同じ）
• Font Size: 15px / Weight: 700
• 用途: 「開催中」「次回」

実サイトの黄色バッジ（#fed910 の面に #ffffff の文字）はコントラスト比 1.39 で、事実上読めない（実測。interactive の3番目）。この組み合わせは複製しないこと。 黄色を面に使うなら文字色を #333333 にする（コントラスト比 11.1）。他の5色は白文字で AA を満たす。

Back to Top

• Background: #ffffff / Text: #333333
• Border Radius: 26px

Cards

• Background: #f5f5f5（可視 25 要素）
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 見出しは 15px / 700 / letter-spacing: 0.45px（= .03em）

Inputs

• サイト内検索はヘッダーのアイコンから展開する。通常表示では露出していない
• ナビゲーションのトグルに border-radius: 12% が1要素ある（このサイトで唯一の半端な角丸）

5. Layout Principles

Container

• Max Width: 950px 固定（CSS 全文で max-width: 950px が 11 回、実測でもトップ 12 要素 / 下層 5 要素）
• 補助的に 1280px（3 要素）と 440px（4 要素）
• 流体ではない。 1878px はフルブリードのヒーロー用

Grid

• gap を使っていない（実測 gaps: []）。float / margin で組む世代の実装
• 展覧会カードは1カラムで縦に積む

Spacing

• トークン化された余白スケールは無い（CSS 変数 0 個）
• ボタンの内側は padding: 0 ＋ line-height で高さを作る（15px / line-height: 15px）

6. Depth & Elevation

影はほぼ使わない。 実測で box-shadow を持つ要素は トップに 1 種 1 要素のみ、下層は 0 種。

影を足さないこと。 面の区別は #f5f5f5 と #ffffff の差でつけている。

7. Do's and Don'ts

Do（推奨）

• font-family は "YakuHanJP", "Noto Sans Japanese", sans-serif の1本で通す。 見出しだけ別書体にしない
• YakuHanJP をスタックの先頭に置く。 2番目以降だと約物が差し替わらない
• 本文の letter-spacing は normal。 空けるのは見出し・ナビ・ラベルだけ
• 字間は em で書く（.03em / .05em / .1em / .2em）。サイズが変われば追従させる
• 太さは 100 / 200 / 400 / 700 の4段で組む。 極細（100・200）を大きなサイズに使うのがこのサイトの見せ場
• 本文の行間は 1.73、展覧会タイトルは 2.10
• 色は hex を直接書く（CSS 変数を導入すると既存の .color_xxxxxx と二重管理になる）
• コンテナは 950px 固定

Don't（禁止）

• font-feature-settings: "palt" を足さない。 YakuHanJP と二重に詰まる
• font-weight: 500 / 900 を当てない。 @font-face の実体が確認できず、意図した太さで出ない
• font-family 名を Noto Sans JP に書き換えない。 宣言名は Noto Sans Japanese
• line-height: 1.00 を本文に使わない。 1.00 が実測で最多なのは単一行のラベルが多いからで、文章用の値ではない
• 角丸を足さない（バッジの 100% とトップ戻りの 26px 以外は 0px）
• 影を足さない
• CSS Custom Properties を前提にしない（0 個）

8. Responsive Behavior

Breakpoints

メディアクエリがすべて print, screen and (...) で書かれている。 美術館の展覧会情報は印刷される前提で、印刷時にもデスクトップのレイアウトを当てている。

• 境界は 600 / 950 / 1024 / 1280。 コンテナ幅 950px とブレークポイント 950px が一致している
• 高解像度画像の出し分けに (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi) を使う

ルートの縮小（重要）

ブレークポイントを跨ぐと html の font-size そのものが変わる（1章の表を参照）。1440px で 10px → 834px で 8px → 375px で 4.99999px。

• rem で書かれた値はすべて画面幅に追従する。 モバイルでは 1rem が約半分になる
• 実測でもモバイルだけ別の値が当たる: グローバルナビのリンクは 1440px で 15px / 400 / letter-spacing: 3px だが、375px では 16px / 500 / letter-spacing: 3.2px と、サイズも太さも変わる（letter-spacing は .2em のままなので px だけ追従）
• 1回の計測を「このサイトの文字サイズ」と書かないこと。 幅ごとに測る

タッチターゲット

• グローバルナビのリンクは 15px / line-height: 15px と小さい。モバイルで流用するなら padding で 44px を確保する

9. Agent Prompt Guide

クイックリファレンス

Text Color:    #333333
Background:    #ffffff
Surface:       #f5f5f5
Category:      #3e4eb8 / #039788 / #fed910 / #d70000 / #ec1561 / #a7b809
Font:          "YakuHanJP", "Noto Sans Japanese", sans-serif
Root Size:     10px（デスクトップ）/ 8px（834px）/ 約5px（375px） ← 流体
Body Size:     15px（デスクトップ実測）
Line Height:   1.73
Letter Spacing: normal（本文）/ .05em（見出し）/ .2em（ナビ）
Weights:       100 / 200 / 400 / 700  ← この4段のみ
Container:     950px
Radius:        0（バッジのみ 100%）
Shadow:        なし
palt:          使わない

プロンプト例

世田谷美術館のデザインシステムに従って、展覧会一覧のカードを作成してください。

- font-family は "YakuHanJP", "Noto Sans Japanese", sans-serif の1本だけを使う
  （YakuHanJP は unicode-range で約物限定のサブセット。必ずスタックの先頭に置く）
- font-feature-settings: "palt" は書かない（YakuHanJP と二重に詰まる）
- 会期の日付は 42px / font-weight: 100 / letter-spacing: .08em / line-height: 1
- 展覧会タイトルは 20px / font-weight: 400 / line-height: 2.1 / letter-spacing: normal
  文字色は展覧会ごとのカテゴリ色（#3e4eb8 など）
- 「開催中」バッジは カテゴリ色の面に白文字、border-radius: 100%、15px / 700
- カードの面は #f5f5f5、角丸なし、影なし
- 本文は 15px / 400 / line-height: 1.73 / letter-spacing: normal / 色 #333333
- font-weight は 100 / 200 / 400 / 700 だけを使う（500・900 は当てない）
- コンテナは max-width: 950px