実測日 2026-09-24。https://www.kyohaku.go.jp/jp/ と /jp/visit/ の computed style から起こした。
CSS Custom Properties は 0 個。html の font-size は 10px で、rem は 10px 基準。
★開館状況バッジ。日付だけ Manrope(サイト中で唯一の欧文フォント・1 要素)、ラベルは Noto Sans JP。
影は 0 10px 20px rgba(0,0,0,0.16)。
本文・見出し・ナビはすべて #222222(可視 228 要素)。
朱 #d64000 は「開催中」「開催予定」のラベルだけに使われ、ボタンにも見出しにも出てこない。
可視 283 要素のうち 282 要素が "Noto Sans JP", sans-serif。残り 1 要素が Manrope。
和文のローカルフォント名を一切書いていないので、Web フォントが落ちたら sans-serif に直行する。
| 用途 | font-family |
|---|---|
| 本文・見出し・ナビ | "Noto Sans JP", sans-serif |
| 開館状況の日付(1 要素) | Manrope, sans-serif |
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 が当たる(合成太字も入らない)。
500 を「中間の太さ」として設計に組み込まないこと。
本当に中間が要るなら Google Fonts の URL を wght@400;500;700 に増やす。増やすと見た目が変わる。
| ページ | 400 | 500(実際は 400) | 700 |
|---|---|---|---|
| トップ | 123 | 66 | 94 |
| ご利用案内(下層) | 24 | 66 | 19 |
18px→0.9px、16px→0.8px、15px→0.75px、14px→0.7px、13px→0.65px、24px→1.2px。
サイズに比例して px が変わっている= em を各要素に書いている。
body に 1 回書いて継承させる設計ではない。
| 実測値 | 出現 | サイズ | em 換算 |
|---|---|---|---|
normal | 217 | 本文全般 | — |
| 0.9px | 34 | 18px | 0.05em |
| 0.75px | 10 | 15px | 0.05em |
| 0.7px | 7 | 14px | 0.05em |
| 0.8px | 6 | 16px | 0.05em |
| 0.65px | 4 | 13px | 0.05em |
| 1.2px | 2 | 24px | 0.05em |
font-feature-settings は可視 283 要素すべてが normal。
詰める(palt)のではなく、開く(0.05em)方向に振っているサイト。親切心で palt を足さないこと。
&text= サブセットで出す中国語・韓国語の注意書きを 1 文だけ出すために、その文に出てくる文字だけのサブセットを読み込んでいる。 フォント全体(数 MB)を配らずに、正しい字形で 1 文を見せる実装。
簡体字・繁体字・ハングルの注意書きを、それぞれ 1 文ぶんの文字だけ読み込む。
?family=Noto+Sans+SC:wght@400;700&display=swap&text=簡体字の注意書きに出てくる文字…
★&text= を付けると、その文字だけの極小サブセットが返る。
多言語の短い文を正しい書体で出したいときに再利用できる実装。
CTA は面を塗らない。白地に 1px solid #222222 の枠、border-radius: 42px。
padding の上下が非対称(上 16.1px / 下 16.8px)で、和文がピルの中で沈んで見えないようにしている。
| 種類 | 面 / 文字 | radius | padding | font |
|---|---|---|---|---|
| Primary(枠線ピル) | #ffffff / #222222 | 42px | 16.1px 56px 16.8px | 14px · 700 · 0.05em |
| Secondary(小ピル) | #ffffff / #222222 | 39px | 15.6px 52px | 13px · 400 · 0.05em |
| Inverse(黒帯) | #222222 / #ffffff | 0px | 20px 30px | 20px · 400 · normal |
★下の padding を 0.7px 厚くするのは、和文のベースラインより下の余白が視覚的に狭く見えるため。ピル型に和文を入れるときに真似する価値がある。
影が付くのは展示ステータスのバッジ(3 要素)と開館状況バッジ(1 要素)だけ。 下層ページには影が 1 つも無い。カードやモーダルに影を足さないこと。
| Level | Shadow | 用途 | 実測 |
|---|---|---|---|
| 0 | none | ほぼすべての要素 | 279 / 283 |
| 1 | 0 5px 18px rgba(0,0,0,0.1) | 展示ステータスのバッジ | 3 |
| 2 | 0 10px 20px rgba(0,0,0,0.16) | 開館状況バッジ | 1 |
| 項目 | 値 |
|---|---|
| コンテナ(主要セクション) | 1320px(14 箇所) |
| コンテナ(ヘッダー / フッター) | 1440px(7 箇所) |
| コンテナ(下層本文) | 1200px(6 箇所) |
| root font-size | 10px(1.5rem = 15px) |
| 本文の行間 | 2.00(15px / 30px) |
| ナビ・リンクの行間 | 1.67 |
| 主ブレークポイント | max-width: 767px(225 件)/ min-width: 768px(300 件) |
★モバイルファーストではない。min-width: 768px が既定側で、max-width: 767px でモバイルを上書きする書き方。