Design System Preview

京都国立博物館 — Noto Sans JP 1 本、字間 0.05em、ウェイトは実質 2 段

実測日 2026-09-24。https://www.kyohaku.go.jp/jp/ と /jp/visit/ の computed style から起こした。 CSS Custom Properties は 0 個。html の font-size は 10px で、rem は 10px 基準。

09/24 休館

★開館状況バッジ。日付だけ Manrope(サイト中で唯一の欧文フォント・1 要素)、ラベルは Noto Sans JP。 影は 0 10px 20px rgba(0,0,0,0.16)。

文字色は実質 2 色、朱は展示ステータス専用

本文・見出し・ナビはすべて #222222(可視 228 要素)。 朱 #d64000 は「開催中」「開催予定」のラベルだけに使われ、ボタンにも見出しにも出てこない。

Ink
#222222
★本文・見出し・ナビ・枠線。純黒は使わない
Accent(朱)
#d64000
★展示ステータスのラベル専用。CTA に塗らない
Alert
#be0000
注意書き 3 要素。朱とは使い分ける
Text Muted
#757575
日付・フッターのサブ項目・コピーライト
Surface
#f2f2f2
ニュース帯・フッターの下地(面 33 要素)
Divider
#efefef
区切りの細い帯
Disabled Surface
#dbdbdb
CMP の「拒否する」ボタン
Background
#ffffff
ページ背景
02 / Typography

Noto Sans JP 1 本、rem は 10px 基準

可視 283 要素のうち 282 要素が "Noto Sans JP", sans-serif。残り 1 要素が Manrope。 和文のローカルフォント名を一切書いていないので、Web フォントが落ちたら sans-serif に直行する。

用途font-family
本文・見出し・ナビ"Noto Sans JP", sans-serif
開館状況の日付(1 要素)Manrope, sans-serif
セクション見出し
30px · 700 · 1.53
ls 0.05em
開催中の展覧会
ページ見出し
26px · 500 と書いてあるが 400 で出る · 1.38
ご利用案内
中見出し
24px · 700 · 1.66
ls 1.2px = 0.05em
museum partners
展示タイトル
18px · 700 · 1.38
ls 0.9px = 0.05em
特別展 源氏物語 王朝のかがやき
ナビ
16px · 500(→ 400)· 1.67
ls 0.8px = 0.05em
学ぶ・楽しむ
★本文
15px · 400 · 2.00(30px)
ls normal · 最頻(121 要素)
名品ギャラリーでは、当館の所蔵品と寄託品のなかから、絵画・書跡・染織・考古など各分野の作品を定期的に入れ替えて展示しています。会期中の展示替えについては、各展示室の案内をご覧ください。
補助・日付
14px · 400 · 1.67
ls normal(94 要素)
イベント・講座 2026.09.14
申請リンク
13px · 400 · 1.0
ls 0.65px = 0.05em
ロケーション撮影利用申請
コピーライト
11px · 400 · 1.25
© Kyoto National Museum.

500 は読み込まれていない。実際の太さは 2 段しかない

Google Fonts の URL は family=Noto+Sans+JP:wght@400;700。 document.fonts にも 400 と 700 しか載らない。それなのに CSS は トップで 66 要素・下層で 66 要素に font-weight: 500 を当てている。 CSS のフォントマッチングは 500 を要求されたとき 400 → 300 → … → 600 → 700 の順に探すので、 実際には 400 が当たる(合成太字も入らない)。

font-weight: 400 — @font-face あり
名品ギャラリー 2026
★font-weight: 500 — @font-face に無い。左と同じ太さで出る
名品ギャラリー 2026
font-weight: 700 — @font-face あり
名品ギャラリー 2026

500 を「中間の太さ」として設計に組み込まないこと。 本当に中間が要るなら Google Fonts の URL を wght@400;500;700 に増やす。増やすと見た目が変わる。

ページ400500(実際は 400)700
トップ1236694
ご利用案内(下層)246619
04 / Letter Spacing

本文 normal、見出し 0.05em。em を各要素に当てる

18px→0.9px、16px→0.8px、15px→0.75px、14px→0.7px、13px→0.65px、24px→1.2px。 サイズに比例して px が変わっている= em を各要素に書いている。 body に 1 回書いて継承させる設計ではない。

★見出し・ナビ・ボタン — letter-spacing: 0.05em
特集展示 雛まつりと人形
★本文 — letter-spacing: normal(121 要素すべて)
館蔵の雛人形と雛道具を、江戸から昭和にかけての流れがわかるように並べます。
実測値出現サイズem 換算
normal217本文全般—
0.9px3418px0.05em
0.75px1015px0.05em
0.7px714px0.05em
0.8px616px0.05em
0.65px413px0.05em
1.2px224px0.05em

font-feature-settings は可視 283 要素すべてが normal。 詰める(palt)のではなく、開く(0.05em)方向に振っているサイト。親切心で palt を足さないこと。

多言語の一言を &text= サブセットで出す

中国語・韓国語の注意書きを 1 文だけ出すために、その文に出てくる文字だけのサブセットを読み込んでいる。 フォント全体(数 MB)を配らずに、正しい字形で 1 文を見せる実装。

Noto Sans SC / TC / KR — 400 のみ loaded(700 は unloaded)

簡体字・繁体字・ハングルの注意書きを、それぞれ 1 文ぶんの文字だけ読み込む。

読み込み方

?family=Noto+Sans+SC:wght@400;700&display=swap&text=簡体字の注意書きに出てくる文字…

★&text= を付けると、その文字だけの極小サブセットが返る。 多言語の短い文を正しい書体で出したいときに再利用できる実装。

06 / Buttons

白地 + 1px の枠 + radius 42px のピル。面を塗らない

CTA は面を塗らない。白地に 1px solid #222222 の枠、border-radius: 42px。 padding の上下が非対称(上 16.1px / 下 16.8px)で、和文がピルの中で沈んで見えないようにしている。

展示一覧 お知らせはこちら 画像利用申請 オンラインチケット 拒否する
種類面 / 文字radiuspaddingfont
Primary(枠線ピル)#ffffff / #22222242px16.1px 56px 16.8px14px · 700 · 0.05em
Secondary(小ピル)#ffffff / #22222239px15.6px 52px13px · 400 · 0.05em
Inverse(黒帯)#222222 / #ffffff0px20px 30px20px · 400 · normal

★下の padding を 0.7px 厚くするのは、和文のベースラインより下の余白が視覚的に狭く見えるため。ピル型に和文を入れるときに真似する価値がある。

影は 2 種類だけ。カードには付けない

影が付くのは展示ステータスのバッジ(3 要素)と開館状況バッジ(1 要素)だけ。 下層ページには影が 1 つも無い。カードやモーダルに影を足さないこと。

開催予定
京都国立博物館開館130周年記念 特別展 大狩野
2027年3月13日(土)〜 5月9日(日)
開催中
特集展示 雛まつりと人形
2027年2月6日(土)〜 3月14日(日)
開催予定
特別公開 和束谷の開拓者 ― 原山古墳被葬者の実像 ―
2026年10月6日(火)〜 11月23日(月)
LevelShadow用途実測
0noneほぼすべての要素279 / 283
10 5px 18px rgba(0,0,0,0.1)展示ステータスのバッジ3
20 10px 20px rgba(0,0,0,0.16)開館状況バッジ1
08 / Layout

コンテナ 1320px、本文の行間は 2.00

お知らせ 2026.09.10 10月の名品ギャラリーの展示替えについて
イベント・講座 2026.09.14 特別展ワークショップ「あそんで・あわせて源氏物語」参加者募集
ご来館の皆様へ 2026.08.17 申込期間(先着順):2026年9月8日(火)10時から
項目値
コンテナ(主要セクション)1320px(14 箇所)
コンテナ(ヘッダー / フッター)1440px(7 箇所)
コンテナ(下層本文)1200px(6 箇所)
root font-size10px(1.5rem = 15px)
本文の行間2.00(15px / 30px)
ナビ・リンクの行間1.67
主ブレークポイントmax-width: 767px(225 件)/ min-width: 768px(300 件)

★モバイルファーストではない。min-width: 768px が既定側で、max-width: 767px でモバイルを上書きする書き方。