京都国立博物館（Kyoto National Museum） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-24 / 対象: https://www.kyohaku.go.jp/jp/, https://www.kyohaku.go.jp/jp/visit/

1. Visual Theme & Atmosphere

• デザイン方針: 白地・Noto Sans JP 1 本・墨色 #222222 で組む国立博物館のコーポレートサイト。装飾を足さず、朱 #d64000 だけを導線に使う
• 密度: ゆったり。コンテナ 1320px、本文の行間は 2.00（15px / 30px）
• キーワード: Noto Sans JP、rem の基準が 10px、字間 0.05em を各要素に当てる、ピル型 CTA（radius 42px）、朱 #d64000

このサイトの核心は5つある。

1. Web フォントは 400 と 700 しか読み込んでいないのに、CSS は 500 を当てている。 Google Fonts の URL は family=Noto+Sans+JP:wght@400;700。それなのに font-weight: 500 がトップで 66 要素・下層で 66 要素ある。500 は存在しないので、CSS のフォントマッチングで 400 が選ばれる（合成太字にもならない）。→ 3.4 を必ず読むこと
2. html { font-size: 10px }。 rem は 10px 基準。1.5rem = 15px。16px 基準で rem を換算しないこと
3. 字間は「本文 normal / 見出し・ボタン 0.05em」の 2 値だけ。 しかも em を各要素に当てている（18px→0.9px、16px→0.8px、15px→0.75px、14px→0.7px、13px→0.65px と、サイズに比例して px が変わる）。body から px を継承させる設計ではない
4. 多言語を &text= サブセットで解いている。 Noto Sans SC / TC / KR を、それぞれ注意書き 1 文に出てくる文字だけ読み込む（...&text=%E7%B0%A1%E4%BD%93...）。フォント丸ごとではない
5. CSS Custom Properties が 0 個。 変数は 1 つも定義されていない。実装値そのものが仕様

palt は 1 要素も無く、縦組みも無い。 和文組版に手を入れているのは「見出しに 0.05em を足す」ことだけ。

2. Color Palette & Roles

色数が極端に少ない。文字色は実質 2 色。

朱 #d64000 は展示ステータスのラベル専用。 ボタンにも見出しにも使われていない。CTA に朱を塗らないこと（このサイトの CTA は白地＋墨の枠）。 #be0000 と #d64000 は別物。注意喚起は #be0000、展示ステータスは #d64000 と使い分ける。

3. Typography Rules

3.1 和文フォント

Noto Sans JP のみ。 可視テキスト 283 要素のうち 282 要素が "Noto Sans JP", sans-serif。残り 1 要素は開館状況バッジの日付（Manrope）。

document.fonts の実測:

描画に使えるのは Noto Sans JP の 400 と 700 だけ。 ここが 3.4 の「500 問題」の根拠になる。

3.2 欧文フォント

Manrope（400）。ただし使われているのは 1 要素だけ（ヘッダー右下の開館状況バッジ「09/24」）。

本文中の英数字は Noto Sans JP のラテングリフで描かれる。欧文のために別スタックを組んでいない。

3.3 font-family 指定

css/* 本文・見出し・ナビ — サイトのほぼ全域 */
font-family: "Noto Sans JP", sans-serif;

/* 開館状況バッジの日付のみ */
font-family: Manrope, sans-serif;

フォールバックの考え方

• 和文のローカルフォント名を一切書いていない。 Noto Sans JP が落ちたら sans-serif（OS 既定）に直行する
• Windows / macOS の書き分け（游ゴシック問題）をやっていない。Web フォント 1 本に寄せきる方針
• 多言語ページでは Noto Sans SC / Noto Sans TC / Noto Sans KR を同じ 1 文のためだけに読み込む

html<!-- 実サイトの読み込み方（簡体字の例・文字を URL に埋めてサブセット化） -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap&text=简体中文欢迎来到京都国立博物馆。…">

&text= を付けると、その文字だけの極小サブセットが返る。 中国語・韓国語の注意書きを 1 文だけ出すページで、フォント全体（数 MB）を読み込まずに済ませている。多言語の一言だけを正しい書体で出したいときの実装例として再利用できる。

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

html { font-size: 10px }。rem は 10px 基準。

サイズの分布（トップ・可視 283 要素）: 15px(121) → 14px(94) → 18px(30) → 26px(7) → 16px(6) → 30px(4) → 13px(4)

ウェイトの分布

font-weight: 500 は読み込まれていない。 Google Fonts の URL は wght@400;700 で、document.fonts にも 400 と 700 しか載らない。 CSS フォントマッチングは 500 を要求されたとき 400 → 300 → … → 600 → 700 の順に探すので、実際には 400 が当たる（合成太字も入らない）。 つまり、このサイトの見た目のウェイトは 400 と 700 の 2 段しかない。 再現するときは 2 択でよい。 500 をそのまま書くなら「400 と同じ太さで出る」ことを承知の上で書く。500 を「中間の太さ」として設計に組み込まないこと。 逆に、500 を本当に中間の太さで出したいなら wght@400;500;700 に増やす（表示は変わるので、上の表の「実際に描画される weight」列も変わる）。

3.5 行間・字間

本文の行間は 2.00。 15px に対して 30px を当てている（rem 基準が 10px なので 3rem）。

字間は「本文 normal / 見出し・ボタン 0.05em」の 2 値。

実測（トップ・可視 283 要素）:

サイズが違うのに px が比例して変わっている＝ em を各要素に当てている。 body に 1 回書いて継承させる設計ではないので、見出し・ナビ・ボタンのそれぞれに letter-spacing: 0.05em を書く。 本文には書かない。 15px の本文 121 要素はすべて normal。

css/* 本文 — 字間は触らない */
body { font-size: 1.5rem; line-height: 3rem; letter-spacing: normal; } /* = 15px / 30px, html は 10px */

/* 見出し・ナビ・ボタン — 各要素に 0.05em */
.heading, .nav__item, .btn { letter-spacing: 0.05em; }

3.6 禁則処理・改行ルール

実サイトは word-break / line-break を明示していない（ブラウザ既定）。新規実装では以下を推奨する。

cssword-break: normal;        /* 和文はブラウザ既定の禁則に任せる */
overflow-wrap: anywhere;   /* 長い URL・英単語の突き抜けだけ防ぐ */
line-break: strict;        /* 小書き仮名・長音符も行頭に来させない */

禁則対象

• 行頭禁止: ）」』】〕〉》、。，．・：；？！ー々ゃゅょっ
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css/* このサイトは font-feature-settings を一切指定していない */
font-feature-settings: normal;

• palt は 0 要素。 可視 283 要素すべてが normal
• 約物の詰めは行わず、見出しの letter-spacing: 0.05em で「開く」方向に振っている（詰めるのではなく空ける設計）
• 再現時に親切心で palt を足さないこと。足すと見出しの字面が変わる

3.8 縦書き

css/* 該当なし */

writing-mode: vertical-rl は 0 要素。横組みのみ。

4. Component Stylings

Buttons

Primary（枠線ピル） — このサイトの標準 CTA。面を塗らない。

• Background: #ffffff
• Text: #222222
• Border: 1px solid #222222
• Padding: 16.1px 56px 16.8px（横幅の広いもの）/ 16.1px 21px 16.8px（狭いもの）
• Border Radius: 42px
• Font Size: 14px / Weight: 700 / Letter Spacing: 0.7px（0.05em）/ Line Height: 14px

padding の上下が非対称（上 16.1px / 下 16.8px）。 和文はベースラインより下の余白が視覚的に狭く見えるため、下を 0.7px 厚くしている。ピル型ボタンに和文を入れるときの実装として真似する価値がある。

Secondary（小ピル・申請リンク）

• Background: #ffffff
• Text: #222222
• Border: 1px solid #222222
• Padding: 15.6px 52px
• Border Radius: 39px
• Font Size: 13px / Weight: 400 / Letter Spacing: 0.65px（0.05em）

Inverse（黒帯リンク）

• Background: #222222
• Text: #ffffff
• Padding: 20px 30px
• Border Radius: 0px
• Font Size: 20px / Weight: 400 / Letter Spacing: normal

Badges / Chips

展示ステータス（「開催予定」「開催中」）

• Background: #ffffff
• Text: #d64000
• Border Radius: 9px
• Padding: 18px 22.5px
• Font Size: 18px / Weight: 700 / Letter Spacing: 0.9px（0.05em）
• Shadow: 0 5px 18px rgba(0,0,0,0.1)

開館状況バッジ（「09/24 休館」）

• Background: #222222 / Text: #ffffff
• 日付だけ Manrope 26px、ラベル「休館」は Noto Sans JP 20px
• Shadow: 0 10px 20px rgba(0,0,0,0.16)

Inputs

実サイトのトップ・下層に可視の入力欄は無い（検索はアイコンからモーダルで開く）。新規実装では下記に揃える。

• Background: #ffffff
• Border: 1px solid #dbdbdb
• Border (focus): 1px solid #222222
• Border Radius: 4px
• Padding: 12px 16px
• Font Size: 15px
• Height: 48px

Cards

• Background: #ffffff（ニュース帯の中は #f2f2f2）
• Border: なし
• Border Radius: 9px（ステータスバッジ付きの展示カード）/ 0px（ニュース・リンクカード）
• Padding: 40px 0px（ニュース行）
• Shadow: 0 5px 18px rgba(0,0,0,0.1)

5. Layout Principles

Spacing Scale

rem が 10px 基準なので、値はすべて 10 の倍数に寄っている。

Container

• Max Width: 1320px（トップの主要セクション・14 箇所）
• Max Width（ヘッダー / フッター）: 1440px（7 箇所）
• Max Width（下層本文）: 1200px（6 箇所）
• Padding (horizontal): 20px

Grid

• Columns: 3（展示カード）/ 2（フッターのリンク 2 段組）
• Gutter: 20px

6. Depth & Elevation

影は 2 種類しかない。

下層ページには影が 1 つも無い。 影は「トップで浮かせる 2 つの要素」専用。カードやモーダルに影を足さないこと。

7. Do's and Don'ts

Do（推奨）

• html { font-size: 10px } を前提に rem を計算する（1.5rem = 15px）
• 本文は 15px / line-height 30px（2.00）/ letter-spacing normal
• 見出し・ナビ・ボタンにはそれぞれ letter-spacing: 0.05em を書く
• 文字色は #222222。補助は #757575
• CTA は白地＋ 1px #222222 の枠＋ radius 42px のピル
• ピル型ボタンの padding は下を 0.5〜1px 厚くする（実サイト: 上 16.1px / 下 16.8px）
• 多言語の短い注意書きは &text= サブセットで読み込む

Don't（禁止）

• font-weight: 500 を「中間の太さ」として使わない。 Web フォントに 500 が無く、400 で描画される
• rem を 16px 基準で換算しない（すべて 1.6 倍ずれる）
• 本文に letter-spacing を足さない（121 要素すべて normal）
• font-feature-settings: "palt" を足さない（実サイトは 0 要素）
• 朱 #d64000 をボタンや見出しに塗らない（展示ステータスのラベル専用）
• 文字色に #000000 を使わない（実サイトは #222222）
• カード・モーダルに影を足さない（影は 2 要素だけ）
• CSS 変数があるつもりで書かない（このサイトの変数は 0 個）

8. Responsive Behavior

Breakpoints

実測されたメディアクエリ（件数順）:

主たる分岐は 767/768px の 1 本。 992 / 1200 / 1440 は補助。モバイルファーストではなく、max-width: 767px でモバイルを上書きする書き方（min-width: 768px が既定側）。

タッチターゲット

• 最小サイズ: 44px × 44px
• 実サイトの CTA は高さ 48.3px（14px × line-height 14px ＋ padding 16.1/18.2）で基準を満たす

フォントサイズの調整

• 本文 15px はモバイルでも据え置き（rem が 10px 基準なので比率で縮めない）
• 見出し 30px → モバイルでは 22〜24px 程度に縮める
• letter-spacing: 0.05em は em なのでサイズに追従する。モバイル用に書き直す必要はない

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #222222   （文字・枠線・黒帯）
Accent Color:  #d64000   （展示ステータスのラベル専用）
Alert Color:   #be0000
Text Muted:    #757575
Surface:       #f2f2f2
Background:    #ffffff
Font: "Noto Sans JP", sans-serif
Root Font Size: 10px      ← rem は 10px 基準
Body Size: 15px
Line Height: 2.00 (30px)
Body Letter Spacing: normal
Heading Letter Spacing: 0.05em （各要素に書く）
Weights: 400 / 700 のみ（500 は読み込まれていないので 400 で出る）
Button: 白地 + 1px #222222 + radius 42px + padding 16.1px 56px 16.8px

プロンプト例

京都国立博物館のデザインシステムに従って、展示一覧ページを作成してください。

- html の font-size は 10px。rem はすべて 10px 基準で計算すること
- フォント: "Noto Sans JP", sans-serif の 1 本だけ。ウェイトは 400 と 700 のみ使う
  （500 は Web フォントに存在しないので使わない）
- 本文: 15px / line-height 30px / letter-spacing normal / color #222222
- 見出し・ナビ・ボタンには letter-spacing: 0.05em を各要素に書く
- font-feature-settings は指定しない（palt を足さない）
- 展示ステータス（開催中／開催予定）のラベルは文字色 #d64000、
  白地・radius 9px・box-shadow 0 5px 18px rgba(0,0,0,0.1)
- CTA は白地 + 1px solid #222222 + border-radius 42px、
  padding は 16.1px 56px 16.8px（下を 0.7px 厚くする）
- カードやモーダルに影を足さない
- コンテナ幅 1320px、ブレークポイントは max-width: 767px