東京国立博物館（Tokyo National Museum / 東博） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地・炭黒 #2b2b2b・深緑 #1b854d の3色でほぼ全てを組む。角丸を一切使わない矩形の面と、1px の罫線だけで構造をつくる。影はゼロ
• 密度: 情報量は多いが、行間 2.0 と広い余白で読ませる。所蔵品・展示スケジュール・開館カレンダーという「調べるためのUI」を、装飾なしで整理する設計
• キーワード: 炭黒、深緑、矩形、palt、行間2.0

このサイトの核心は3つ。

1. font-feature-settings: "palt" がページ全体にかかっている。 DOM 全走査 2,024 要素のうち 1,929 要素が palt。和文の字送りを詰めた上で letter-spacing: 1px で開き直す、という二段構えの組み方をしている
2. line-height が階層を問わずほぼ 2.0。 本文 16px/32px、見出し 40px/80px、大見出し 50px/100px。見出しでも詰めないのが特徴で、一般的な「見出しは 1.3」とは真逆
3. 角丸が存在しない。 可視要素で border-radius が 0 でないのは、SNS アイコンの 50%（8件）と Language ボタンの 3px（1件）だけ

2. Color Palette & Roles

CSS Custom Properties は 0個。以下はすべて computed style の実測値。

Primary（構造色）

• Charcoal (#2b2b2b): サイトの基幹色。本文の文字色（実測 933 要素で最多）、濃色パネルの面、主要ボタンの面と枠。このサイトの「黒」は純黒ではなく #2b2b2b
• Black (#000000): 「予告」バッジ、白ボタンの上の文字色。#2b2b2b と使い分けている（26件）

Accent（行動色）

• TNM Green (#1b854d): チケット購入・通知登録など「行動させる」導線の専用色。展示項目の左縦罫、「注目」バッジ、「電子チケット販売」ボタンの面。汎用の success ではなく、東博の CTA 色
• Link Blue (#2869dd): 本文中のテキストリンク（実測 137 要素）。ボタンには一切使わない

Calendar（開館カレンダー専用の状態色）

開館カレンダーは色だけでなく記号（○ ☽ ▲ ×）も併記して状態を示す。色覚に依存しない設計。

Semantic

• Danger (#990000): 来館案内ページの注意書き（休館・変更のお知らせ）。深い赤で、鮮やかな赤は使わない

Neutral（ニュートラル）

• Text Primary (#2b2b2b): 本文
• Text on Dark (#ffffff): 濃色パネルの上（実測 808 要素）
• Background (#ffffff): ページ背景。body に明示指定
• Surface Dark (#2b2b2b): 「本日の開館情報」「カレンダーから来館日を選択」等の濃色パネル
• Divider (#4d4d4d): 濃色パネル内の罫線

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP → ヒラギノ角ゴ ProN → ヒラギノ角ゴシック → メイリオ
• 明朝体: 使用しない

ロゴ（「東京国立博物館」の明朝）は画像であり、Web フォントではない。本文に明朝を持ち込まないこと。

3.2 欧文フォント

• サンセリフ: Helvetica Neue → Arial。和文より前に置く欧文優先型
• セリフ / 等幅: 定義なし

3.3 font-family 指定

css/* サイト全体で単一のスタック */
font-family: "Helvetica Neue", Arial, "Noto Sans JP",
             "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

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

• 欧文優先型。 Helvetica Neue → Arial を先頭に置き、和文グリフだけを Noto Sans JP 以降に任せる。数字・年号・欧文の作品名が多いサイトなので、欧文の字形を優先している
• ヒラギノ角ゴ ProN（JIS2004 字形）。Pro ではない
• font-family はこの1本だけ。 見出し用・本文用の使い分けが存在しない
• ブラウザ既定の Arial 単独が出る箇所（Google 翻訳ウィジェット、input[type=submit] 等）はサードパーティ／UA 既定であり、設計には含めない

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

root の font-size は 10px（rem で組むと 1.6rem = 16px）。

本文のウェイトが 400 ではなく 500。 ヒラギノ / Noto Sans JP の Medium を本文に使うことで、白地に対する黒の締まりを出している。400 で実装すると全体が薄く見える。

3.5 行間・字間

• 行間: 2.0 が既定。本文も見出しも 2.0。詰めるのは 1.5 / 1.6 の2段だけ
• 字間: 1px 固定（em ではない）。サイト全体で letter-spacing: 1px の1値のみ（実測 437 要素すべて）

字間が px 固定であることの意味: 16px 本文では 0.0625em、40px 見出しでは 0.025em になる。サイズが大きいほど相対的に詰まって見える設計で、大見出しが締まり、本文がゆったりする。0.06em のような em 指定に置き換えると、見出しがだらしなく開くので必ず 1px で書くこと。

ガイドライン:

• 見出しで line-height を 1.2〜1.3 に詰めない。このサイトは見出しでも 2.0 を基本にする
• ただし写真の上に乗る大きなヒーロー見出し（44px）だけは 1.5 に落ちる

3.6 禁則処理・改行ルール

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

作品名・展示名が長いため、濃色パネル内の見出しは意図した位置で改行している。表組み（料金表・開館時間）が多く、セル内の折り返しは自動に任せる。

禁則対象:

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

3.7 OpenType 機能

cssfont-feature-settings: "palt";

palt をページ全体（body）に適用している。 実測 2,024 要素中 1,929 要素（95%）が palt 有効。無効な 95 要素は Google 翻訳ウィジェットと input / button の UA 既定スタイル。

palt と letter-spacing: 1px の併用がこのサイトの組み方。palt で括弧・句読点まわりのアキを詰め、そのうえで一律 1px 開き直すことで、和欧混植でも字送りが乱れない。

片方だけ真似ない。palt だけ入れると全体が詰まりすぎ、letter-spacing だけ入れると括弧の前後が空きすぎる。

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

すべて border-radius: 0。 ボタンは「面 or 枠」の2形式しかない。

Primary Solid（構造・遷移）

• Background: #2b2b2b
• Text: #ffffff
• Border: 1px solid #2b2b2b
• Padding: 13.5px 22.5px
• Border Radius: 0
• Font Size: 18px / Weight: 700

Action Solid（チケット・通知／緑）

• Background: #1b854d
• Text: #ffffff
• Border: 1px solid #1b854d
• Padding: 6.4px 56px 6.4px 16px
• Border Radius: 0
• Font Size: 16px / Weight: 700

Outline（副次的な導線）

• Background: transparent
• Text: #2b2b2b
• Border: 1px solid #2b2b2b
• Padding: 8px 16px / 6.4px 56px 6.4px 16px
• Border Radius: 0

Outline Heavy（言語切替）

• Border: 2px solid #2b2b2b
• Padding: 6.4px 52px

Inverse（濃色パネルの上）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #ffffff
• Padding: 13.5px 22.5px

Card Link（アイコン付きの大きな導線）

• Background: #ffffff / Text: #2b2b2b
• Padding: 18.4px 12px 18.4px 36px
• Font Size: 20〜24px / Weight: 700

padding の右が極端に広い（56px）のは、右端に > シェブロンを置くため。 左が 36px 広いパターンは左端にアイコンを置くため。この非対称パディングがボタンの型なので、padding: 8px 16px の均等に直さないこと。

Badges

• 展示中: 面 #2b2b2b / 文字 #ffffff / padding 10px 6px / radius 0
• 注目: 面 #1b854d / 文字 #ffffff / padding 10px 6px / radius 0
• 予告: 面 #000000 / 文字 #ffffff / padding 6px 18px / radius 0 / 20px 700

Pagination

• 現在ページ: 面 #1b854d / 文字 #ffffff / border 1px solid #1b854d / radius 2px
• 他ページ: 面 #ffffff / 文字 #333333 / border 1px solid #2b2b2b / radius 2px
• Padding: 4px 8px

Inputs

• Background: #ffffff
• Border: 1px solid #2b2b2b
• Border Radius: 0
• Font Size: 16px（iOS のズーム回避のため 16px を下回らない）
• 検索フォームは既定で折りたたまれ、虫眼鏡アイコンで展開する

Cards / Panels

• 濃色パネル: 面 #2b2b2b / 文字 #ffffff / radius 0 / 影なし
• 展示リスト項目: 左に #1b854d の縦罫（3〜4px）＋ 白背景
• 表組み: th は 22px/700、td は 16px/500、罫線 1px

5. Layout Principles

Spacing Scale

明示トークンは無い。実測のギャップ：

Container

• Max Width: 1280px（実測 10要素で最多）
• 全幅ラッパー: 1336px
• 記事幅: 1070px

Grid

• トップの主要ブロック: 左 914px ＋ 右 384px の2カラム（開館情報 ＋ カレンダー）
• 展示一覧: 16px gutter の等幅グリッド

6. Depth & Elevation

影は 1件も存在しない。可視要素の box-shadow は実測 0件。

奥行きは「白地 / 炭黒パネル / 写真」の3層と 1px の罫線だけで表現する。 カードやモーダルに影を足すと、このサイトの平面的な整理感が崩れる。

7. Do's and Don'ts

Do（推奨）

• body に font-feature-settings: "palt" を当て、同時に letter-spacing: 1px を指定する。 この2つはセット
• letter-spacing は 1px の固定値で書く（em に置き換えない）
• line-height は 2.0 を既定にする。見出しでも詰めない
• 本文のウェイトは 500（400 ではない）
• 面色は #2b2b2b（構造）と #1b854d（行動）の2色に絞る
• ボタンの padding は右 56px / 左 16px の非対称にし、右端にシェブロンを置く
• カレンダーなど状態を色で示す箇所は、必ず記号（○ ☽ ▲ ×）を併記する
• font-size は 16px を下回らない（input も含む）

Don't（禁止）

• border-radius を足さない。 このサイトの角丸は SNS アイコンの 50% と Language ボタンの 3px だけ
• box-shadow を使わない。 実測 0件
• 見出しの line-height を 1.2〜1.3 に詰めない（2.0 が既定）
• letter-spacing を em で書かない（大見出しがだらしなく開く）
• リンク色 #2869dd をボタンの面色に使わない（テキストリンク専用）
• 緑 #1b854d を汎用の success として使わない（チケット・通知など行動導線の専用色）
• 明朝体を持ち込まない（ロゴは画像）
• 本文テキストに #000000 を使わない（#2b2b2b）
• Arial 単独のスタックを真似ない（UA 既定・翻訳ウィジェット由来）

8. Responsive Behavior

Breakpoints

実質 768px の1本でモバイル／デスクトップを切り替える（実測 57箇所と突出）。それ以外は個別要素の微調整。

タッチターゲット

• 最小サイズ: 44px × 44px
• カレンダーのセルは実測 40px 前後なので、モバイルでは高さを 44px 以上に広げる
• Language ボタン（padding 1.3px 6.5px）はデスクトップ専用の小さなユーティリティ。モバイルでは別の導線にする

フォントサイズの調整

• 本文 16px は維持（縮めない）
• Display 50px / Heading 40px は 24〜28px 程度まで縮める
• 行間 2.0 はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Primary Color:   #2b2b2b   (Charcoal / 構造)
Accent Color:    #1b854d   (TNM Green / 行動)
Link Color:      #2869dd
Danger:          #990000
Text Color:      #2b2b2b
Background:      #ffffff
Font: "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
Root Size:       10px  (1.6rem = 16px)
Body Size:       16px / weight 500
Line Height:     2.0
Letter Spacing:  1px  (固定値)
Font Feature:    "palt"  (body に全体適用)
Radius:          0
Shadow:          none
Container:       1280px
Breakpoint:      768px

プロンプト例

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

- body に font-feature-settings: "palt" と letter-spacing: 1px を当てる
  （letter-spacing は em ではなく 1px 固定）
- 本文は 16px / font-weight 500 / line-height 2.0 / color #2b2b2b
- 見出しも line-height 2.0 を維持する（詰めない）
- border-radius は 0。box-shadow は使わない
- 「本日の開館情報」のような要約ブロックは #2b2b2b の濃色パネル＋白文字
- 展示項目は左に #1b854d の縦罫を 4px 引く
- 「チケット購入」ボタンだけ面色 #1b854d、それ以外の遷移ボタンは #2b2b2b
- ボタンの padding は 6.4px 56px 6.4px 16px（右端に > シェブロンを置くため）
- 状態を色で示す箇所は必ず記号（○ ☽ ▲ ×）を併記する
- コンテナ幅 1280px、ブレークポイント 768px