静嘉堂文庫美術館（せいかどうぶんこびじゅつかん） DESIGN.md

東京・丸の内の静嘉堂＠丸の内（明治生命館 1 階）を拠点とする静嘉堂文庫美術館の公式サイト（https://www.seikado.or.jp/）のデザイン仕様書。 岩崎彌之助・小彌太父子の蒐集による国宝 7 件・重要文化財 84 件を含む約 20 万冊の古典籍と 6,500 件の東洋古美術を収蔵。国宝「曜変天目」で知られる。 最大の特徴は ページ地色が白ではなく #e5dfd5（生成り） であること。--main-color としてトークン化され、紙の色の上に白いカードを載せる構成をとる。 書体は 見出し・ナビ＝ Shippori Mincho（しっぽり明朝）／本文＝ Noto Sans JP Light(300)／英字＝ Minion Pro の三層。UI の骨格を明朝が担う、美術館サイトらしい設計。 letter-spacing は全サイズ一律 0.8px（px 固定）、line-height は一律 1.8。html { font-size: 62.5% } で 1rem = 10px とし、すべて rem で書く。 影を一切使わない（実測 0 件）。奥行きは 1px solid #aaa の罫と面色だけで作る。 実サイトの computed style 実測（2026-08-18 取得。トップページ + 利用案内ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 生成りの紙の上に、紺の明朝で組む。作品写真は大きく、UI は罫と面色だけで静かに支える
• 静嘉堂文庫美術館について: 2022 年に世田谷・岡本から丸の内へギャラリーを移した。重厚な西洋建築（明治生命館）に東洋古美術を置くという二重性が、生成り＋紺＋金という配色に表れている
• 密度: 中密度・展覧会情報型。開館日カレンダー、展覧会、イベント、所蔵品紹介を 1 ページに積む
• キーワード: 生成り #e5dfd5、紺 #003e7f、焦茶 #2c251f、金 #e0ba71、しっぽり明朝、Noto Sans JP Light、行間 1.8、字間 0.8px、影なし
• 特徴:
  • ページ背景が生成り #e5dfd5。--main-color として定義され、body に直接当たっている。白 #ffffff は「カードやボタンの面」であって地色ではない
  • 見出しと UI が明朝。h1〜h4、ナビ、ヒーロー、ラベルまで Shippori Mincho。ゴシック（Noto Sans JP）は本文と一部のユーティリティだけ
  • 本文が Light(300)。Noto Sans JP を weight 300 で組み、行間 1.8・字間 0.8px でゆったり流す。Regular(400) にしないのが印象を決めている
  • letter-spacing: 0.8px を px で固定。36px の見出しでは 0.022em、10px のキャプションでは 0.08em になる。「大きい文字ほど字間が締まる」効果が結果的に生まれている
  • line-height: 1.8 が全体の基準。例外はヒーローの大見出し（1.2）とニュース本文（1.5）だけ
  • html { font-size: 62.5% }（1rem = 10px）。CSS はすべて rem で書かれる（1.4rem = 14px）
  • 影が 0 件。box-shadow を一切使わず、**1px solid #aaa の罫（123 箇所）**で領域を仕切る
  • 角丸は 5px / 10px / 30px の 3 段階。ボタン 10px、ステータスバッジ 5px、丸い装飾 30px 以上
  • チケット CTA だけ形が違う。border-radius: 0 10px 10px 0 の左端が角ばった赤茶 #a0371e のバー（350×60px）を画面左下に固定する
  • 開館日カレンダーが情報設計の中心。日曜 #dd0000 / 土曜 #0000dd / 平日 #333、日付は #777、展覧会・イベントを色チップで重ねる

2. Color Palette & Roles

CSS Custom Properties が :root に定義されている。そのまま使うこと。

Base（紙と面）

• Main (#e5dfd5) — --main-color: ページ地色（生成り）。body に直接当たる。この色がサイトの印象そのもの
• Sub (#ffffff) — --sub-color: カード・ボタン・カレンダーの面。地色ではなく「載せるもの」の色

Point（差し色）

• Point (#003e7f) — --point-color: 紺。見出し（h1〜h4）、ヘッダーの開館日ブロック、展覧会ラベル、ステータスバッジの文字。サイトの主役色
• Point2 (#2c251f) — --point-color2: 焦茶。本文の文字色、イベントラベルの面、ナビの暗幕、画像下のグラデーション
• Point3 (#e0ba71) — --point-color3: 金。#update-box strong（更新情報の強調）に使う唯一の華やかな色。1.6rem
• Notice (#e05803) — --notice-color: 橙。注意書き（.attention 1.4rem）と、休館日を示す del の二重取り消し線（border-top: 4px double）

Accent（変数化されていない実測色）

• Ticket Red (#a0371e): チケット購入 CTA のバー。左下固定、350×60px
• Deep Red (#910000): グローバルナビ内のチケット関連項目の面
• Gold Chip (#dbd455): カレンダーの「イベント（スライドトーク等）」チップ。文字は #333

Calendar（開館日カレンダー専用）

• Closed (#d8d8d8): 休館日のセル
• Tint Pink (#f3e4ea): 日曜・特定日のセル
• Tint Mint (#ebf3f3): 平日のセル
• Sunday Text (#dd0000) / Saturday Text (#0000dd) / Weekday Text (#333333) / Date Text (#777777)

Neutral（罫）

• Hairline (#aaaaaa): 主役の罫線（実測 123 箇所）。セクション・テーブル・カードの区切り
• Hairline Light (#cccccc): 補助の罫
• Hairline White (#ffffff): 濃色の上に引く白罫（.white-line）
• Scrim (rgba(0, 0, 0, .8) / rgba(44, 37, 31, .7)): ナビ展開時の暗幕・画像のオーバーレイ
• Image Gradient: linear-gradient(to top, transparent 0%, transparent 50%, #2c251f 90%) — 画像上部に文字を置くための焦茶のかぶせ

3. Typography Rules

明朝が骨格、ゴシックが本文。palt は使わず、字間 0.8px（px 固定）・行間 1.8 を全体に効かせる。

3.1 和文フォント

• 明朝体: Shippori Mincho（しっぽり明朝） — --mincho-font: 'Shippori Mincho', serif
  • 見出し（h1〜h4）・グローバルナビ・ヒーロー・展覧会ラベル・ステータスバッジに使う
  • weight は 300 / 400 / 500 / 700 を使い分ける（ナビの第 2 階層が 300、既定 400、小見出し・ナビ第 1 階層が 500、「開催中」バッジが 700）
• ゴシック体: Noto Sans JP — --gothic-font: 'Noto Sans JP', sans-serif
  • 本文・注釈・ヘッダーのユーティリティ（LANGUAGE / ENGLISH / リンク集）・ボタンのラベルに使う
  • 本文は weight 300（Light）。400 にしない
• 明朝を「見出し用の飾り」にしない。ナビもラベルも明朝で、ゴシックのほうが脇役という珍しい役割配分

3.2 欧文フォント

• セリフ: Minion Pro — --entitle-font: 'minion-pro', serif（Adobe Fonts）
  • セクション名の英語表記専用（「News」「Collection」「Information / Access」）
  • 24px / weight 400 / ls 0.48px（0.02em） / 色 #003e7f。和文見出しの上に小さく置く
• サンセリフ: 欧文専用の指定はなく、Noto Sans JP の欧文グリフに流す
• カレンダーだけ別スタック: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", …（テーブルの数字を等幅感のある欧文で揃えるため）

3.3 font-family 指定

css:root {
  --main-color:   #e5dfd5;
  --sub-color:    #fff;
  --point-color:  #003e7f;
  --point-color2: #2c251f;
  --point-color3: #e0ba71;
  --notice-color: #e05803;
  --gothic-font: 'Noto Sans JP', sans-serif;
  --mincho-font: 'Shippori Mincho', serif;
  --entitle-font: 'minion-pro', serif;
}

html { font-size: 62.5%; }   /* ★ 1rem = 10px。以降すべて rem で書く */

body {
  background: var(--main-color);
  font-family: var(--mincho-font);   /* ★ 既定が明朝 */
  font-size: 1rem;                   /* = 10px（リセット用の基準） */
  line-height: 1.8;                  /* ★ 全体の基準 */
  letter-spacing: .08rem;            /* = 0.8px。px 固定で全サイズ共通 */
  font-feature-settings: normal;     /* palt は使わない */
}

/* 本文 */
p { font-family: var(--gothic-font); font-size: 1.4rem; font-weight: 300; }

/* セクションの英語表記 */
.en-title { font-family: var(--entitle-font); font-size: 2.4rem; letter-spacing: .048rem; color: var(--point-color); }

/* カレンダーだけ別スタック */
table { font-family: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN",
                     "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif; }

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

• 明朝・ゴシックとも Google Fonts で完結する（Shippori Mincho / Noto Sans JP）。フォールバックは serif / sans-serif の 1 段だけで、游明朝やヒラギノを名指ししない
• Adobe Fonts に依存するのは英字の Minion Pro だけ。落ちても serif に落ちるため、和文の見え方は壊れない
• Minion Pro を使えない環境では、EB Garamond / Cormorant Garamond などオールドスタイルのセリフに置き換えると印象が近い（Noto Serif は現代的すぎる）

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

• weight は 300 / 400 / 500 / 700 の 4 値。ただし 700 は「開催中」バッジとカレンダーの曜日ヘッダー、LANGUAGE ラベルの 3 箇所だけ
• 本文の 300（Light）が最大の特徴。ここを 400 にすると全体の軽やかさが失われる

3.5 行間・字間

• 行間は 1.8 が全体の基準。見出しもキャプションも同じ
  • 例外 1: ヒーローの大見出し（38px / 24px）は 1.2 — 写真の上で 2 行に収めるため
  • 例外 2: ニュース本文は 1.5、ラベルは 1.4 — 一覧の行数を抑えるため
• 字間は 0.8px の px 固定。em ではないため、大きい文字ほど相対的に締まって見える（36px→0.022em、10px→0.08em）
  • 例外 1: 写真上のキャプション（18px）だけ 1.8px（0.1em） に開く
  • 例外 2: Minion Pro の英字は 0.48px（0.02em）
• palt は使わない

ガイドライン:

• 行間 1.8 を崩さない。日本語の読み物として十分に開き、生成りの地色と合わせて「余白の多い版面」を作っている
• 字間を em に置き換えない。0.8px 固定という設計をそのまま持つ（em にすると見出しが間延びする）
• 本文は必ず Noto Sans JP の 300。見出しは Shippori Mincho の 400／500

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
word-break: normal;
line-break: strict;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 「元禄! 師宣劇場」「民藝 SHOCK!!」のように感嘆符・和欧混植を含む展覧会名が頻出する

• 「菱川師宣「十二ヶ月風俗図巻」 江戸時代・17世紀」のようなかぎ括弧＋中黒＋漢数字のキャプションを割らない

• 「［前期］6/27(土)〜7/26(日)」の角括弧・スラッシュ・波ダッシュを行頭に送らない

• word-break: break-all は使わない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全ページ共通 */

• palt を掛けない。Shippori Mincho の字面をそのまま使い、letter-spacing: 0.8px だけで調整する
• 明朝に palt を効かせると括弧と句読点が詰まり、古美術のキャプションが読みにくくなる

3.8 縦書き

縦組みは使わない。 writing-mode の指定は 0 件（ロゴの「静嘉堂文庫美術館」は画像）。

4. Component Stylings

影を使わない。ボタンは白面 ＋ radius 10px、バッジは面色 ＋ radius 0 / 5px。

Buttons

White Button（サイトの標準）— .white-btn

• Background: #ffffff（生成りの地色から浮かせる）
• Text: #2c251f
• Border: なし（.white-line を足すと 1px solid #ffffff）
• Border Radius: 10px
• Size: 240 × 50px（.small） / .wide は幅いっぱい
• Font: ゴシック 16px / 400 / ls 0.8px
• 例: 「詳しく見る」「年間スケジュール」「所蔵品紹介」「アクセス」

Ticket CTA（サイトで最も強い導線）— .ticket-btn

• Background: #a0371e（赤茶）
• Text: #ffffff
• Border Radius: 0 10px 10px 0（左端だけ角ばる）
• Size: 350 × 60px / Padding: 0 0 0 20px
• 画面左下に固定表示し、右端に → を置く
• 例: 「チケット購入・日時指定予約」

Nav Ticket（ドロワー内）

• Background: #910000（深紅） / Text: #ffffff
• 明朝 13px / 500

Badges / Labels

• 大きいラベルは radius 0、小さいステータスは radius 5px という使い分け

Cards

• Background: #ffffff（生成りの地色に対して面を作る）
• Border: 1px solid #aaaaaa（影の代わり）
• Border Radius: 0〜10px
• Shadow: なし（サイト全体で 0 件）
• 構成: 画像 → ラベル（紺 or 焦茶）→ タイトル（明朝）→ 会期（明朝 13px）→ 白ボタン

Calendar（開館日カレンダー）

• 面: #ffffff / 罫: 1px solid #aaaaaa
• 曜日ヘッダー: 16.2px / 700。日 #dd0000 / 土 #0000dd / 平日 #333333
• 日付: 18px / 400 / #777777 / lh 1.8
• セルの色分け: 休館 #d8d8d8 / 日曜・特定日 #f3e4ea / 平日 #ebf3f3
• 休館日は del に border-top: 4px double #e05803 の二重取り消し線を重ねる
• フォントはここだけ "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", …

Header

• Background: #e5dfd5（地色と同じ）
• 開館日ブロック: #003e7f の面に白文字。「本日は」12px / 500、「開館日」18px / 500、「10:00 - 17:00」14px / 500
• ユーティリティ（リンク集 / サイトマップ / プレスルーム / ENGLISH）: ゴシック 12px / 400 / #003e7f
• LANGUAGE セレクタ: 白面 ＋ radius 30px（ピル）

Global Nav（ドロワー）

• Background: rgba(0, 0, 0, .8) の暗幕
• 第 1 階層: 明朝 13px / 500 / 白
• 第 2 階層: 明朝 11px / 300 / 白
• 画像の上に文字を置く箇所は linear-gradient(to top, transparent 0%, transparent 50%, #2c251f 90%) をかぶせる

Inputs

• 実測できるフォームがトップ／利用案内ページに無いため、以下は変数から導いた推奨値
• Background: #ffffff / Border: 1px solid #aaaaaa / Border Radius: 5px
• Padding: 12px 16px / Font: ゴシック 14px / 300 / lh 1.8 / ls 0.8px
• Focus: border-color: #003e7f ＋ 可視のフォーカスリングを明示する
• Error: #e05803（--notice-color） の文字と枠。赤 #dd0000 はカレンダーの日曜専用なので流用しない

5. Layout Principles

Spacing Scale

html { font-size: 62.5% } により 1rem = 10px。余白も rem で持つ。

Container

• Max Width: 1200px（本文ブロックは 1000px / 700px も併用）
• 中央寄せ: margin-inline: auto
• Padding (horizontal): 20px 前後（SP は 15px）

Grid

• 展覧会・所蔵品は 2〜3 カラム
• 区切りは 1px solid #aaaaaa。gap ではなく罫で仕切る箇所が多い
• カレンダーは 7 列のテーブル（<table> を使う。div グリッドに置き換えない）

6. Depth & Elevation

影を使わない。実測で box-shadow は 0 件。

• 奥行きは「地色 → 白面 → 暗幕」の 3 段だけで表現する
• box-shadow を足さないこと。影を入れた瞬間に、紙の上に物を置いた質感が壊れる

7. Do's and Don'ts

Do（推奨）

• ページ地色は #e5dfd5（生成り）。白は「載せるもの」の色として使う
• 見出し・ナビ・ラベルは Shippori Mincho、本文は Noto Sans JP の 300（Light）
• line-height: 1.8 / letter-spacing: 0.8px を全体に効かせる（字間は px 固定のまま）
• html { font-size: 62.5% } を置き、すべて rem で書く
• 英語のセクション名は Minion Pro 24px / ls 0.02em / #003e7f で和文見出しの上に置く
• ボタンは白面 ＋ radius 10px。240×50px を標準サイズにする
• チケット CTA は #a0371e ＋ border-radius: 0 10px 10px 0 で左下に固定する
• 区切りは 1px solid #aaaaaa
• 金 #e0ba71 は更新情報の強調 1 用途だけに留める

Don't（禁止）

• 背景を白にしない。#e5dfd5 を白に変えると、このサイトのデザインは成立しない
• box-shadow を使わない（サイト全体で 0 件）
• 本文を weight 400 にしない。300 の軽さが版面をつくっている
• 字間を em に置き換えない。0.8px 固定という設計を守る
• palt を掛けない
• 赤 #dd0000 を UI に流用しない（カレンダーの日曜専用）。注意喚起は橙 #e05803
• 見出しをゴシックにしない。このサイトは明朝が骨格
• カレンダーを div グリッドに置き換えない（<table> ＋ <del> の意味づけを保つ）

8. Responsive Behavior

Breakpoints

• max-width: 280px まで面倒を見るのが特徴。古い小型端末でカレンダーが破綻しないようにしている

レイアウトの切り替え

• グリッド: 3 カラム → 2 カラム → 1 カラム
• ナビ: 横並び ＋ ハンバーガー → 全画面ドロワー（rgba(0,0,0,.8) の暗幕）
• チケット CTA: 左下固定のまま。SP では幅いっぱいのバーにする
• カレンダー: 7 列を維持し、チップのテキストを省略表示に切り替える

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• 白ボタンは 50px 高なので基準を満たす。ラベル・チップ（padding 8px / 0 4px）はタップ領域を別途確保する

フォントサイズの調整

• 見出し: 36px → 24px、ヒーロー 38px → 24〜28px
• 本文 14px / lh 1.8 / weight 300 は下げない
• 字間 0.8px は px 固定のためそのまま維持（SP で小さくすると相対的に開いて見え、かえって読みやすい）

9. Agent Prompt Guide

クイックリファレンス

Background:   #e5dfd5   (--main-color)   ★白ではない
Surface:      #ffffff   (--sub-color)
Point:        #003e7f   (--point-color)  見出し・紺のラベル
Point2:       #2c251f   (--point-color2) 本文の文字色・イベントラベル
Point3:       #e0ba71   (--point-color3) 更新情報の強調のみ
Notice:       #e05803   (--notice-color) 注意書き・休館日の二重線
Ticket:       #a0371e   チケット CTA
Hairline:     #aaaaaa   1px solid（影の代わり）

Font (見出し・ナビ): 'Shippori Mincho', serif
Font (本文):        'Noto Sans JP', sans-serif  ★weight 300
Font (英字):        'minion-pro', serif

Root:          html { font-size: 62.5% }  → 1rem = 10px
Body Size:     14px (1.4rem) / weight 300
Line Height:   1.8   （ヒーローのみ 1.2、ニュースは 1.5）
Letter Spacing: 0.8px（px 固定。全サイズ共通）
palt:          使わない
Shadow:        なし（0 件）
Radius:        ボタン 10px / ステータス 5px / ラベル 0
Container:     1200px
Breakpoint:    1200px, 768px, 375px, 320px, 280px

プロンプト例

静嘉堂文庫美術館のデザインシステムに従って、展覧会一覧セクションを作成してください。

- ページ背景は #e5dfd5（生成り）。白 #ffffff はカード・ボタンの面としてだけ使う
- html { font-size: 62.5% } を置き、以降は rem で記述する
- 見出しは 'Shippori Mincho', serif / 36px / 400 / line-height: 1.8 / letter-spacing: .8px / 色 #003e7f
- 見出しの上に英語表記を 'minion-pro', serif / 24px / letter-spacing: .48px / 色 #003e7f で置く
- 本文は 'Noto Sans JP', sans-serif / 14px / font-weight: 300 / line-height: 1.8 / letter-spacing: .8px / 色 #2c251f
- 展覧会ラベルは背景 #003e7f・白文字・border-radius: 0・padding: 8px、イベントラベルは #2c251f
- ステータス（予告・会期）は白背景 / border-radius: 5px / padding: 2px 6px
- ボタンは背景 #ffffff / 色 #2c251f / border-radius: 10px / 240×50px / Noto Sans JP 16px
- チケット CTA は背景 #a0371e / border-radius: 0 10px 10px 0 / 350×60px を画面左下に固定
- box-shadow は使わない。区切りは 1px solid #aaaaaa
- font-feature-settings は normal（palt を掛けない）
- コンテナは max-width 1200px。768px 以下で 1 カラム、ナビは rgba(0,0,0,.8) の全画面ドロワー