静嘉堂文庫美術館SEIKADO BUNKO ART MUSEUM
LANGUAGE
本日は
開館日
10:00 - 17:00
元禄! 師宣劇場
十二ヶ月風俗図巻 大公開
［前期］6/27(土)〜7/26(日)　［後期］7/28(火)〜8/30(日)
Photo by Keizo Kioku
Color
カラーパレット
Base — 紙と面
Main
#e5dfd5 / --main-color
ページ地色（生成り）。白ではない。body に直接当たる
Sub
#ffffff / --sub-color
カード・ボタン・カレンダーの面。地色ではなく「載せるもの」の色
Point — 差し色
Point
#003e7f / --point-color
紺 — サイトの主役色。見出し・展覧会ラベル・開館日ブロック
Point2
#2c251f / --point-color2
焦茶 — 本文の文字色・イベントラベル・暗幕
Point3
#e0ba71 / --point-color3
金 — 更新情報の強調 1 用途だけ
Notice
#e05803 / --notice-color
橙 — 注意書き・休館日の二重取り消し線
Accent — 変数化されていない実測色
Ticket Red
#a0371e
チケット購入 CTA のバー（350×60px・左下固定）
Deep Red
#910000
ドロワー内のチケット関連項目の面
Gold Chip
#dbd455
カレンダーのイベントチップ。文字は #333
Calendar / Neutral
Closed
#d8d8d8
休館日のセル
Tint Pink
#f3e4ea
日曜・特定日のセル
Tint Mint
#ebf3f3
平日のセル
Hairline
#aaaaaa
主役の罫線（123 箇所）。影の代わり
Typography
タイポグラフィ
News
お知らせ
英字 Minion Pro 24px / ls 0.48px（0.02em）＋ 明朝 36px / 400 / lh 1.8（64.8px） / ls 0.8px / 色 #003e7fセクション見出し — 英字を上に置く
元禄! 師宣劇場
十二ヶ月風俗図巻 大公開
明朝 38px / 500 / lh 1.2（写真の上だけ詰める） ＋ 24px / 400 / lh 1.2ヒーロー
関連イベント
明朝 28px / 400 / lh 1.8（50.4px） / ls 0.8pxサブ見出し
ご予約ならびにオンラインチケットのご購入
明朝 18px / 500 / lh 1.8（32.4px） / ls 0.8px小見出し
本文は Noto Sans JP を weight 300（Light）で組み、行間 1.8・字間 0.8px でゆったり流します。字間は em ではなく px 固定なので、大きい文字ほど相対的に締まって見えます。生成りの地色 #e5dfd5 の上で、この軽さがサイトの静けさをつくっています。
ゴシック 14px / 300 / lh 1.8（25.2px） / ls 0.8px / 色 #2c251f本文 — 400 にしない
8/16(日)まで、ミュージアムショップにて企画展関連グッズを販売しております。
ゴシック 14px / 400 / lh 1.5（21px） / ls 0.8pxお知らせ一覧 — 行間だけ詰める
ミュージアムショップ
明朝 18px / 400 / lh 1.8 / ls 1.8px（0.1em）写真上のキャプション — ここだけ開く
※日時指定予約優先です。当日券の販売もございます。
※美術館入口は、明治安田ヴィレッジ 1 階となります。
更新情報：展覧会ページを更新しました
補足 12px / 300 ／ 注意書き 14px / 色 #e05803 ／ 強調 16px / 色 #e0ba71補足・注意・更新情報
菱川師宣「十二ヶ月風俗図巻」 江戸時代・17世紀　静嘉堂文庫美術館蔵
明朝 10px / 400 / lh 1.8（18px） / ls 0.8px（= 0.08em）作品キャプション — 小さい文字ほど字間が開く
Exhibition
展覧会
展覧会 開催中 会期

元禄! 師宣劇場

菱川師宣が描いた十二ヶ月の風俗を、前期・後期に分けて全場面公開します。元禄の江戸に生きた人々の一年を、絵巻の流れのままにたどる展覧会です。

見出しと UI は明朝、本文はゴシックの Light。書体で役割を分け、罫と面色だけで領域を仕切ります。影は使いません。

※会期中、一部展示替えがあります。

詳しく見る
Component
ボタンとラベル
White Button（サイトの標準）
詳しく見る 年間スケジュール
background: #fff / color: #2c251f / border-radius: 10px / 240×50px / Noto Sans JP 16px。影は付けない
Ticket CTA（左端だけ角ばる）／ ドロワー内のチケット項目
チケット購入・日時指定予約→ 公式オンラインチケット
#a0371e / border-radius: 0 10px 10px 0 / 350×60px / padding-left 20px。実サイトでは position: fixed で画面左下に常時表示する（SP では幅いっぱいのバー）
Labels & Status
展覧会 イベント 開催中 予告 会期 日程
大きいラベルは radius 0（padding 8px / 明朝 16px）、小さいステータスは radius 5px（14px）
Collection
所蔵品紹介
展覧会
曜変天目（稲葉天目）
建窯・南宋時代（12〜13世紀）／国宝
詳しく見る
イベント
スライドトーク
8/23(土) 14:00〜／申込不要
詳しく見る
展覧会
民藝 SHOCK!!
2026年9月20日(土)〜11月24日(月・休)
詳しく見る
カードは #fff の面 ＋ 1px solid #aaa。box-shadow は使わない
Calendar
開館日カレンダー
日月火水木金土
2 3 4元禄! 師宣劇場 5元禄! 師宣劇場 6 7 8スライドトーク
9 10 11 12 13 14 15
曜日ヘッダー 16.2px / 700（日 #dd0000・土 #0000dd・平日 #333）／日付 18px / #777 / lh 1.8
休館日は <del> に border-top: 4px double #e05803 の二重線を重ねる。フォントはここだけ Helvetica Neue 系
Form
フォーム
デフォルト — #fff / 1px solid #aaa / radius 5px / Noto Sans JP 14px 300
フォーカス — border #003e7f ＋ 可視のフォーカスリング（実装では必ず明示する）
メールアドレスの形式をご確認ください（#e05803）
エラーは橙。赤 #dd0000 はカレンダーの日曜専用なので流用しない
Depth
奥行き

影を使わない（実測 0 件）。奥行きは「地色 → 白面 → 暗幕」の 3 段だけで表現します。

Level 0
#e5dfd5 の地色そのまま
Level 1
#ffffff の面。生成りとの明度差で浮かせる
Level 1'
1px solid #aaaaaa の罫
Level 2
rgba(0,0,0,.8) の暗幕（ナビ展開時）
Level 2'
linear-gradient(to top, transparent 0%, transparent 50%, #2c251f 90%)
Layout
レイアウト
Spacing Scale（1rem = 10px）
0.4rem
0.8rem
2rem
4rem
6rem
10rem
Container
max-width: 1200px（本文ブロックは 1000px / 700px も併用）／ margin-inline: auto

ブレークポイントは 1200px / 768px / 375px / 320px / 280px。小型端末まで 3 段階で詰めるのが特徴で、カレンダーが破綻しないようにしています。

このページは seikado.or.jp の computed style 実測（2026-08-18）に基づくデザインシステムのショーケースです。
和文は実サイトと同じ Shippori Mincho ／ Noto Sans JP（ともに Google Fonts）。
英字の minion-pro（Adobe Fonts）だけはローカルで表示できないため、EB Garamond に差し替えています。