根津美術館（Nezu Museum） DESIGN.md

根津美術館（https://www.nezu-muse.or.jp/）のデザイン仕様書。 1941 年開館、東京・南青山。東武鉄道の社長を務めた実業家・初代根津嘉一郎の日本・東洋古美術コレクションを基礎とする私立美術館。国宝『燕子花図屏風』（尾形光琳）を所蔵する。2009 年に隈研吾設計の本館が竣工し、竹垣に沿う長いアプローチが館の顔になった。 最大の特徴は、サイト全体が明朝体で組まれていること。body { font-family: "Noto Serif JP" } が起点で、ゴシック（Noto Sans JP）は日付・ナビ・表組みという「読ませない情報」だけに使われる。古美術館としての品位を、色ではなく書体の選択で作っている。 ブランド色は 金茶 #aa855a の 1 色だけ。チケット購入 CTA・現在言語・展示室ラベル・フォーカスリングがすべてこの色。 組版の要点は 2 つ。ひとつは body が 13px 基準で、文字サイズを全部 % で積むレガシー手法（124% = 16px、404% = 52px）。もうひとつは 可変フォントの重みを 100〜700 まで全域使うこと（本文は 600、大見出しは逆に 300 や 100 へ細くなる）。 実サイトの computed style 実測（2026-07-30 取得。トップ＋開催中の展覧会＋美術館について）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体・白地・金茶 1 色。影は 1 つも使わない。 ファーストビューは隈研吾の竹垣アプローチの写真で全面を占め、UI は写真の上に白文字を置くだけ。下層ページは白地に明朝の 1 カラム。装飾を足さず、書体と余白だけで格を出す
• 根津美術館について: 私立美術館として展覧会の会期と開館状況が最優先。ファーストビューの下端に「日付パネル（黒地）＋本日の開館状況＋チケット購入（金茶）」の 3 連が固定され、休館中は「Attention」の半透明白パネルが写真に重なる。庭園を持つ館なので「いまの庭園」という季節のコンテンツがトップに常設される
• 密度: 低密度。作品名・寸法・時代といった古美術のメタ情報は表組みに追い出し、本文は明朝で 1.7 の行間でゆったり流す
• キーワード: Noto Serif JP（明朝）全域、金茶 #aa855a 単色、影ゼロ、radius 3〜4px、13px 基準の % ラダー、可変フォント 100〜700
• 特徴:
  • 明朝が既定、ゴシックが例外。body は "Noto Serif JP", serif。"Noto Sans JP", sans-serif に切り替わるのは ① グローバルナビ ② 会期の日付（2026年8月15日（土）～10月12日（月・祝））③ カレンダーの表組み ④ 開館情報のリスト だけ。**「数字と操作はゴシック、言葉は明朝」**という切り分け
  • 文字サイズが全部パーセント。body { font: 13px/1.231 arial... } というリセットが 13px を敷き、そこに 124% / 139% / 154% / 170% / 185% / 216% / 247% / 262% / 293% / 372% / 404% を積む。YUI Fonts 系の古典的な手法で、16px と思っている本文は実際には 16.12px（13 × 1.24）。実測値が 18.07px 20.02px 22.1px 32.11px 52.52px のように端数だらけになるのはこれが理由
  • 可変フォントの重みを両方向に振る。自己ホストの NotoSerifJP-VariableFont_wght.woff2（font-weight: 200 900）を使い、本文の既定が 600。そこから小見出しは 700 へ太らせ、大きな見出しは 300、国宝名などの特大表示は 100 へ細らせる。「大きい字ほど細く」という明朝組みの定石を可変フォントで実装している
  • box-shadow がサイト全体で 1 つも使われていない。奥行きは写真・半透明の白パネル・黒帯だけで作る
  • 角丸は 3px と 4px の 2 段。チケット購入ボタンは 3px、詳細リンクは 4px。日付パネルに隣接するボタンだけ 片側だけ丸める（border-radius: 0 3px 3px 0）
  • フォーカスリングがブランド色。:focus-visible で文字色・ボーダー・背景がすべて #aa855a に変わる（outline は使わない）
  • カレンダーで曜日を色分けする。土曜 #003f8c（紺）、日曜・祝日 #a60000（臙脂）。和暦カレンダーの慣習的な配色をそのまま Web に持ち込んでいる
  • CSS Custom Properties は 0 個。すべて実値で書かれている

2. Color Palette & Roles

実測値。地は白 #ffffff、文字は #333333。有彩色はブランドの金茶 1 色＋カレンダーの曜日色＋お知らせバッジの水色に限られる。

Brand（ブランド）

• 金茶 / Kincha (#aa855a): 唯一のブランドカラー。チケット購入 CTA の面、現在の言語（JP）、展示室ラベル（展示室2）、会期ステータス（予告）、そしてフォーカスリング。竹と土壁の中間のような、古美術館らしい落ち着いた茶
• Ink (#333333): 見出し・本文。純黒は使わない
• Paper (#ffffff): 地色（下層ページ）

注: トップページのファーストビューは全面が写真なので、ページ背景色として観測されるのは写真上のスクリム（rgba(0, 0, 0, 0.35)）。地色は下層ページの #ffffff が正。

Surface（面）

• Background (#ffffff): ページ地色
• Nav Active (#fff8f1): 現在のセクションを示すサイドナビの面。金茶をごく薄めた生成り
• Panel Light (#f7f7f7): お知らせ・重要文化財ラベルの面
• Panel (#f2f2f2): 区切りブロックの面
• Tag (#eeeeee): 作品分類タグ（漆工 彫刻 陶磁 考古・鏡 宝飾時計）の面
• Ink Panel (#333333): 日付パネル・フッター・「終了」ステータスの地。白文字を載せる
• Scrim (rgba(0, 0, 0, 0.35)): ファーストビュー写真の上に敷く覆い。ナビの白文字を読ませるため
• Scrim Strong (rgba(0, 0, 0, 0.5)): 言語切替周りの濃いスクリム
• Attention Panel (rgba(255, 255, 255, 0.8)): 休館告知の半透明白パネル。写真を透かして見せる

Neutral（文字・罫）

• Text Primary (#333333): 見出し・本文
• Text Inverse (#ffffff): 写真上のナビ・黒帯・フッターの文字
• Text Muted (#aaaaaa): 非選択の言語（EN）
• Border (#999999): 一般の罫（1px solid）
• Border Inverse (#ffffff): 写真上・黒地上の罫（1px solid）
• Calendar Closed (#dddddd): カレンダーの休館日セル。トップページで最も出現回数が多い面色（21 回）

Semantic（意味的な色）

• カレンダーは色だけに頼らず凡例を併記する（開館 / 休館 / 本日）
• 重要文化財 の緑 #597d52 は作品情報だけに使う。UI の成功色ではない

注: Swiper（スライダーライブラリ）既定の #007aff がページャに出るが、根津美術館のブランドカラーではない。実装で流用しないこと。

3. Typography Rules

3.1 和文フォント

• 明朝体（既定）: Noto Serif JP。自己ホストの可変フォント。サイトの既定書体はこちら
• ゴシック体（限定）: Noto Sans JP。自己ホストの可変フォント。ナビ・日付・表組み・開館情報のみ

css/* 自己ホストの可変フォント（原典の @font-face） */
@font-face {
  font-family: "Noto Serif JP";
  src: url("/common/fonts/NotoSerifJP-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;      /* 可変軸 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("/common/fonts/NotoSansJP-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;      /* 可変軸 */
  font-style: normal;
  font-display: swap;
}

• Google Fonts ではなく自己ホスト。1 リクエストで全ウェイトが載る可変フォントなので、100〜700 を自由に使える設計になっている

3.2 欧文フォント

• 専用の欧文フォントを持たない。NEZUCAFÉ Attention MENU JP / EN などの欧文は Noto Serif JP / Noto Sans JP 内蔵の欧文グリフで組む
• 等幅: 定義なし

3.3 font-family 指定

css/* 既定（明朝） */
body {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1.7;
  color: #333333;
}

/* ゴシックに切り替える箇所（ナビ・日付・表組み・開館情報） */
font-family: "Noto Sans JP", sans-serif;

フォールバックの考え方:

• 和文単独指定 + generic family のみ。游明朝・ヒラギノ明朝への段階的フォールバックは持たない
• 可変フォントの読み込みが失敗した場合は OS の serif（macOS: ヒラギノ明朝 / Windows: MS P明朝）に落ちる。font-display: swap なので初回描画は代替書体で出る
• 実装で移植する場合、フォールバックを足すなら "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif の順を推奨

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

文字サイズは body の 13px を基準にした % で積む。 リセット CSS の body { font: 13px/1.231 arial, helvetica, clean, sans-serif } が基準を作り、サイト側の body は font-size を上書きせず font-family / font-weight / line-height だけを指定する。

• 16.12px 18.07px 32.11px のような端数は端数の事故ではなく、% × 13px の計算結果。実装で 16px に丸めると字面が変わる。移植するなら 13px 基準の % をそのまま持ち込むのが安全
• 実測の階層:

ウェイトは 100 / 200 / 300 / 400 / 500 / 600 / 700 の 7 段を使う（可変フォントの軸をフルに使う）。

• **「大きい字ほど細く、小さい字ほど太く」**が原則。52.52px は 300、18.07px は 600。明朝体の組版としては正統だが、Web では珍しい

3.5 行間・字間

• 本文の行間: 1.7（body で全域に指定）。30.72px / 18.07px 27.40px / 16.12px 54.59px / 32.11px がすべて 1.7 で一致する
• 見出しの行間: 1.0（52.52px のトップ見出し、28.08px の h3）／ 1.5（h5・特大作品名）／ 1.3 1.4 1.6 2.5 も部分的に使う
• 字間: 既定は normal。字間を入れるのはページタイトル（h1）と記事タイトル（h2）だけで、letter-spacing: 3px

• 3px を px で固定しているので、字が小さいほど相対的な字間が広くなる。24.06px のサブタイトルでは 0.125em に達する。移植時は em に読み替えず px のまま持ち込むと再現しやすい

3.6 禁則処理・改行ルール

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

• 展覧会名は「はじめての古美術鑑賞」／「―美術のなかの文字―」のように <span> で意図的に 2 行に割る。自動折り返しに任せない
• 作品名に含まれる 　（全角スペース）を区切りに使っている箇所がある（竹雀図　）。トリムせずそのまま出す

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全域 */

• palt を一切使っていない。明朝体を等幅のまま流し、字詰めは行わない。約物のアキがそのまま残るのが根津美術館の字面
• 見出しの詰まりは palt ではなく letter-spacing: 3px（＝逆に開ける）で調整している

3.8 縦書き

該当なし（横組みのみ）。

4. Component Stylings

Buttons

Primary（チケット購入）

• Background: #aa855a
• Text: #ffffff
• Font: Noto Serif JP 16.12px / 600
• Padding: 25px 20px（縦長のサイドボタン）／ 15px 20px（本文中）
• Border Radius: 3px
• 日付パネルに隣接する版は片側だけ丸める: border-radius: 0 3px 3px 0 ／ 3px 0 0 3px

Secondary（詳細はこちら）

• Background: #333333
• Text: #ffffff
• Font: Noto Serif JP 18.07px / 600
• Padding: 15px 20px
• Border Radius: 4px

Ghost（写真・黒地の上）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 10px
• Border Radius: 3px

Badges / Tags

• バッジは角丸を持たない（radius: 0）。丸いのは「本日」マーカーだけ

Inputs

• Background: #ffffff
• Border: 1px solid #999999
• Border Radius: 3px
• Padding: 10px 15px
• Font: Noto Serif JP 16.12px / 600
• Focus: 下記の :focus-visible に従う

Focus

css/* テキストリンク */
:focus-visible { color: #aa855a; text-decoration: underline; }

/* ボタン・面を持つ要素 */
:focus-visible {
  border: 1px solid #aa855a;
  background: #aa855a;
  color: #ffffff;
  text-decoration: none;
}

/* 既に金茶の面を持つ要素（チケット購入など） */
:focus-visible { opacity: 0.8; text-decoration: none; }

• outline を使わず、色と下線で示す。ブランド色 #aa855a がそのままフォーカス色
• 金茶の面を既に持つボタンは不透明度 0.8 に落として示す

Cards

• Background: #ffffff（面色を持たない）
• Border: なし／必要なら 1px solid #999999
• Border Radius: 0
• Shadow: なし
• 展覧会カードは写真 ＋ 明朝の見出し ＋ ゴシックの会期の 3 層で構成する

Side Navigation

• 通常: 面 #ffffff / 文字 #333333 / Padding 15px 10px
• 現在地: 面 #fff8f1 / 文字 #333333
• Font: Noto Serif JP 16.12px / 600
• Radius: 0

5. Layout Principles

Spacing Scale

CSS 変数を持たないため、実測値から読み取れる刻みは以下。

• 5px 刻みが基本。4px グリッドではない

Container

• Max Width: 明示的な max-width を持たず、width: 100% ＋ 左右パディングで構成する
• Padding (horizontal): 15px（モバイル）〜 80px（デスクトップのフッター実測）
• ファーストビューはフルブリード（写真が viewport 全面）

Grid

• 展覧会・コレクションは 2〜4 カラム。下層の本文は 1 カラム
• カレンダーは <table> の 7 列（曜日）

6. Depth & Elevation

box-shadow はサイト全体で 1 つも使われていない。

奥行きは以下で作る。

• 「浮かせる」のではなく「透かす」。古美術館らしい、紙や障子に近い階層表現

7. Do's and Don'ts

Do（推奨）

• 本文・見出しは明朝（Noto Serif JP）で組む。これがこの館の第一の性格
• ゴシック（Noto Sans JP）は日付・ナビ・表組み・開館情報に限る。「数字と操作はゴシック、言葉は明朝」
• body の既定ウェイトを 600 にする。明朝の 400 では画面上で細すぎる
• 大きな見出しはウェイトを下げる（52.52px → 300、特大の作品名 → 100）
• line-height: 1.7 を本文の既定にする
• 字間は h1 / h2 のみ letter-spacing: 3px、他は normal
• 文字サイズは 13px 基準の %（124% = 16.12px…）で積む。移植時は端数を丸めない
• 影を使わず、スクリムと半透明パネルで階層を作る
• カレンダーの土曜 #003f8c / 日曜・祝日 #a60000 を守る
• フォーカスは #aa855a（色 + 下線、または面の反転）

Don't（禁止）

• font-feature-settings: "palt" を追加しない。原典は全域 normal。字詰めを入れると明朝の字面が変わる
• 文字色に純黒 #000000 を使わない。#333333
• 金茶 #aa855a 以外のブランド色を持ち込まない。有彩色は金茶とカレンダーの曜日色だけ
• box-shadow を追加しない（1 つも使われていない）
• 角丸を 4px より大きくしない。ピル（9999px）は使わない
• バッジに角丸を付けない（radius: 0。丸いのは「本日」マーカーだけ）
• 緑 #597d52 を成功色として使わない（重要文化財 等の指定区分専用）
• Swiper 既定の #007aff を流用しない
• letter-spacing: 3px を本文に広げない（読みづらくなる）

8. Responsive Behavior

Breakpoints

max-width ベース（デスクトップファースト）。段が多い。

フォントサイズの調整

見出しだけを % の段で落とし、本文は動かさない。

• 本文は全ブレークポイントで 16.12px のまま。行間だけ 1.7 → 1.74（28px）に微調整される
• clamp() / vw は使わない。すべてメディアクエリの段切り

タッチターゲット

• チケット購入ボタンは padding: 25px 20px で高さ 70px 以上を確保
• 詳細リンクは 15px 20px ＋ 18.07px × 1.7 で高さ約 61px

9. Agent Prompt Guide

クイックリファレンス

Brand (金茶):     #aa855a  （CTA / 現在地 / 展示室ラベル / フォーカス）
Text:             #333333
Text Inverse:     #ffffff
Background:       #ffffff
Nav Active:       #fff8f1
Panel:            #f7f7f7 / #f2f2f2
Tag:              #eeeeee
Ink Panel:        #333333
Calendar 開館/休館/本日: #9bb8dc / #dddddd / #ffd46e
Calendar 土/日祝:  #003f8c / #a60000
Font (既定・明朝):  "Noto Serif JP", serif        ← 本文・見出し
Font (限定・ゴシック): "Noto Sans JP", sans-serif  ← 日付・ナビ・表組み
Base:             13px（% で積む。124% = 16.12px / 139% = 18.07px / 404% = 52.52px）
Body Size:        16.12px（124%）〜 18.07px（139%）
Body Weight:      600  ← 明朝なので太めが既定
Line Height:      1.7
Letter Spacing:   normal（h1 / h2 のみ 3px）
Font Feature:     normal（palt は使わない）
Radius:           3px（ボタン） / 4px（リンク） / 0（バッジ）
Shadow:           none（全域）
Focus:            color: #aa855a + underline ／ 面は #aa855a に反転

プロンプト例

根津美術館のデザインシステムに従って、展覧会一覧ページを作成してください。
- 地色 #ffffff、文字 #333333
- 本文・見出しは "Noto Serif JP", serif（明朝）。body の font-weight は 600、line-height は 1.7
- 会期の日付と表組みだけ "Noto Sans JP", sans-serif（400）に切り替える
- ページタイトル（h1）: 32.11px / 600 / letter-spacing 3px
- 展覧会名（h2）: 38.09px / 700 / letter-spacing 3px。それ以外は letter-spacing: normal
- font-feature-settings は normal（palt を付けない）
- 「チケット購入」ボタン: 背景 #aa855a / 文字 #ffffff / radius 3px / padding 15px 20px / 16.12px / 600
- 「詳細はこちら」ボタン: 背景 #333333 / radius 4px
- 会期ステータスのバッジ: 開催予定は #aa855a、終了は #333333、いずれも radius 0
- 指定区分ラベル（重要文化財）: 面 #f7f7f7 / 文字 #597d52 / radius 0
- box-shadow は一切使わない
- フォーカスは outline ではなく color: #aa855a + text-decoration: underline