国立科学博物館（National Museum of Nature and Science） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 書体そのものがアクセシビリティ設計。モリサワの UD フォント（TBUD ゴシック）を Web フォントで配信し、字間には一切手を入れず、詰めは palt に任せる。赤・黒・白の3色で、影を1つも使わない
• 密度: 中程度。本文 17px に対して行間 34px（2.00）、リード文は 20px / 50px（2.50）と、日本語としても相当ゆったり組む
• キーワード: UD ゴシック、palt 全面適用、字間ゼロ、科博レッド、影なし

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

1. 和文書体は「TBUDゴシック」3ウェイト＋「UDタイポス」の計4本。すべて CSS 変数で名指しされている。 --font-sans-jp-r/b/e（Regular / Bold / ExBold）と --font-accent-jp（UDTypos510Std）。実測でも TBUDGoStd-Bold 175 要素 / ExBold 74 要素 / Regular 103 要素 / UDTypos510Std 3 要素（トップ）で、この4本以外の和文書体は1要素も無い
2. font-feature-settings: "palt" を全面適用している（実測 トップ 1948 要素 / 展示 TOP 1837 要素）。 収録サイト中で最大級の適用数
3. letter-spacing は normal 一択（実測 355/355 要素）。 詰めは書体と palt に任せ、CSS では字間を作らない。例外は UD タイポスの大見出しだけ（日本館 地球館 に 14px ＝ 0.2em、屋外展示 に 13.5px）
4. 書体名とウェイトを1対1でセットにして変数化している。 --font-sans-jp-b: "MFW-TBUDGoStd-Bold" と --font-sans-jp-b-weight: 600 が必ず対で使われる。太さは font-weight ではなく書体名で切り替える設計で、@font-face 側は font-weight: 1 1000 を受けるため合成太字が起きない

影は 0 種（box-shadow 実測 0 件）。面の区別は #F0F0F0 の地色と 1px solid #F0F0F0 の枠で行う。

アクセシビリティ機構（このサイト固有）

ヘッダーに 文字サイズ 大 / 小 と 反転表示 のトグルがある。そのため CSS 変数に高コントラスト用のブランド色が別に用意されている。

• 通常: --main-color: #d61d00
• 高コントラスト: --main-color-hc: #AD133F

実測（通常モード）では #d61d00 が可視 28 要素（トップ）/ 44 要素（展示 TOP）。#AD133F は 0 要素。 反転表示を実装しない場合でも、ブランド赤には濃い方の代替色が対になっていることを前提に設計する。

2. Color Palette & Roles

Primary（ブランドカラー）

Neutral（ニュートラル）

• Text Primary (#222222): 本文・見出し。可視 193 要素（実サイトの宣言は --text-color: #222 と 3 桁。#222222 と同値）。純黒は使わない
• Text on Dark (#ffffff): 赤面・黒面・写真上のテキスト（可視 161 要素）
• Surface Dark (#222222): 本日開館 企画展 バッジ、日付切替タブ、文字サイズボタンの塗り面（可視 20 要素）
• Surface Gray (#666666): 予告 バッジ、非選択タブ（可視 6 要素）
• Background (#F0F0F0): ページの地色（--main-bg-color）。main.lo-globalContainer が敷く。カード枠の色にも使う
• Surface (#ffffff): カード・パネルの面（--white-color）
• Link Blue (#0034D1): カード内リンクの文字色（--main-link-color。実測 interactive 2 要素）

pageBackground.resolved は rgb(255,255,255)（根拠 body）だが、実際に見えている地色は #F0F0F0。 main.lo-globalContainer が 1,094,400px² を占めて白を覆う。コンテンツの地色は #F0F0F0 として組むこと。

3. Typography Rules

3.1 和文フォント

すべて モリサワ Fonts（MFW）配信の Web フォント。document.fonts で loaded を確認済み。

• TBUD ゴシックもUD タイポスもモリサワのユニバーサルデザイン書体。この選定自体がサイトの主張なので、代替する場合も UD 系を選ぶ
• MFW-UDTypos512Std-Regular も @font-face で宣言されているが、実測した全ページで unloaded。使わない

3.2 欧文フォント

• 専用の欧文書体を持たない。 数字・アルファベットも TBUD ゴシックの欧文グリフをそのまま使う
• フォールバックに "Helvetica Neue", Arial を置く
• Google Fonts が10ファミリー @font-face 宣言されているが、実測した全ページで全件 unloaded：Barlow（100〜900 の9本）、M PLUS Rounded 1c、Noto Sans JP、Noto Serif JP、Shippori Mincho B1、Yusei Magic、Zen Maru Gothic（5本）。宣言はあるが描画には一切使われていない。これらを前提に組まないこと

3.3 font-family 指定

css:root {
  --font-sans-jp-r: "MFW-TBUDGoStd-Regular";
  --font-sans-jp-b: "MFW-TBUDGoStd-Bold";
  --font-sans-jp-e: "MFW-TBUDGoStd-ExBold";
  --font-accent-jp: "MFW-UDTypos510Std-Regular";
  --font-sans-jp-r-weight: 400;
  --font-sans-jp-b-weight: 600;
  --font-sans-jp-e-weight: 800;
  --font-accent-jp-weight: 500;
}

/* 本文（body） */
font-family: var(--font-sans-jp-r), "Helvetica Neue", Arial,
             "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-weight: var(--font-sans-jp-r-weight);

/* 見出し・ナビ・ボタン */
font-family: var(--font-sans-jp-b);
font-weight: var(--font-sans-jp-b-weight);   /* 600 */

/* セクション見出し */
font-family: var(--font-sans-jp-e);
font-weight: var(--font-sans-jp-e-weight);   /* 800 */

/* 展示名の特大見出しのみ */
font-family: var(--font-accent-jp);

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

• 和文優先。 Web フォントを先頭に置き、欧文フォールバックはその後ろ
• 太さは書体名で切り替える。 font-family を Bold の書体に差し替えたうえで font-weight も一緒に動かす。@font-face 側が font-weight: 1 1000 を受けるため、600 / 800 を指定してもブラウザの合成太字にはならない
• font-weight だけで太くしない。 Regular の書体名のまま 700 を当てると合成太字になる

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

html { font-size: 10px }。rem は ×10 で px に直す（1.7rem = 17px）。

サイズ分布（トップ / 可視 355 要素）: 16px (116) / 18px (92) / 15px (45) / 13px (33) / 22px (16) / 20px (15) / 17px (13)

ウェイト分布（トップ）: 600 (175) / 400 (101) / 800 (77) / 700 (2) → 700 は 文字サイズ 大 / 小 ボタンの2要素だけ。 ここだけ bold の素指定が残っている

3.5 行間・字間

• 本文の行間: 2.00（17px → 34px）。これが body の既定値
• リード文の行間: 2.50〜3.00（20px → 50px / 60px）。日本語サイトでも最大級に広い
• 見出しの行間: 1.00〜1.60。40px 見出しは lh 40px（詰める）か 64px（1.60）
• UI（ナビ・ボタン）の行間: 1.25〜1.50
• 字間: normal。全ページを通してこれが既定（実測 355/355・371/374 要素）

ガイドライン:

• letter-spacing を書かない。 UD 書体と palt で字送りを作る設計なので、CSS で字間を足すと二重にかかる
• 例外は UD タイポスの特大見出しだけ：letter-spacing: 14px（70px に対して 0.2em）。このときは palt の効果より字空けが勝つ
• 行間比 分布（トップ）: 1.50 (86) / 1.63 (79) / 2.00 (78) / 1.25 (30) / 1.88 (27) / 1.00 (19)

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 展示名・特別展名は長いため、見出しでも折り返しを許す（white-space: nowrap を当てない）

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* グローバルに適用 */

• palt は全要素に効かせる（実測 1948 要素 / 1837 要素）。 見出しだけではなく本文・ナビ・フォームまで含む
• palt を効かせたうえで letter-spacing: normal を守るのがこのサイトの組み方。両方を足さない
• kern tnum は使っていない

3.8 縦書き

csswriting-mode: vertical-rl;

展示 TOP で 12 要素が縦組み（ob-tenjiHeading__txtJp / ob-tenjiHeading__txtEn）。外部ウィジェット由来ではなく、サイト本体の展示名見出し。

css.exhibit-heading__jp {
  writing-mode: vertical-rl;
  font-family: var(--font-accent-jp);   /* UDTypos510Std */
  font-size: 70px;
  line-height: 70px;                     /* 1.00 */
  letter-spacing: 14px;                  /* 0.2em。縦組みでは字間を開ける */
}
.exhibit-heading__en {
  writing-mode: vertical-rl;
  font-family: var(--font-accent-jp);
  font-size: 20px;
  line-height: 40px;                     /* 2.00 */
  letter-spacing: normal;
}

• 和文（日本館）と欧文（Japan Gallery）を並べて縦に組む。 欧文側は字間 normal のまま

4. Component Stylings

Buttons

Primary（赤・塗り）

• Background: #d61d00
• Text: #ffffff
• Font: 18px / TBUDGoStd-Bold / weight 600
• Padding: 0px 8px（日本館を見る）／ 4px 32px（展示一覧）
• Border Radius: 4px

Primary（赤・pill）

• Background: #d61d00 / Text: #ffffff
• Font: 15px / TBUDGoStd-ExBold / weight 800
• Padding: 8px 30px
• Border Radius: 1440px（完全な pill。実サイトは極端な値を入れている）

Dark（黒・塗り）

• Background: #222222 / Text: #ffffff
• Font: 17px / TBUDGoStd-Bold / weight 600
• Padding: 4px 21px
• Border Radius: 4px

Outlined（白＋黒枠）

• Background: #ffffff / Text: #0034D1（リンク色）
• Border: 2px solid #222222
• Border Radius: 10px
• Font: 17px / weight 400

Text Size Toggle（大 / 小）

• Background: #222222 / Text: #ffffff
• Font: 11px / weight 700（サイト唯一の 700）
• Border Radius: 2px

Badges / Chips

すべて TBUDGoStd-ExBold 16px / weight 800 / padding 4px 16px 4px 20px / radius 0px。塗り色だけで状態を分ける。

日付タブ（前日 / 今日 / 明日）

• 選択: #666666 / 非選択: #222222、いずれも 14px / weight 700 / radius 6px

Cards

• Background: #ffffff
• Border: 1px solid #F0F0F0（地色と同じ色の枠）
• Border Radius: 12px（大カード）／ 10px（ニュース行）／ 15px（展示トピックス）
• Padding: 26px 16px 43px（下が厚い）／ 24px 64px 24px 30px（右にアイコン分のアキ）
• Shadow: なし

Inputs

• Font: 20px / TBUDGoStd-Regular / weight 400
• Line Height: 40px（2.00）
• Text: #000000

5. Layout Principles

Spacing Scale

Container

Grid

• トップは「ヒーロー（左）＋ 開館情報・イベントパネル（右）」の非対称2カラム
• カードは gap 18px / 20px の3〜4カラム

6. Depth & Elevation

影を1つも使わないサイト。 階層は (a) 地色 #F0F0F0 と面 #ffffff の差、(b) 1px solid #F0F0F0 の枠、(c) border-radius の大きさ（4 / 6 / 10 / 12 / 15 / 20 / 1440px）で表す。

7. Do's and Don'ts

Do（推奨）

• 和文は TBUD ゴシック（UD 書体）を使う。 用途ごとに Regular / Bold / ExBold を書体名ごと差し替える
• 書体名とウェイトを対で変数化する（--font-sans-jp-b と --font-sans-jp-b-weight: 600）
• font-feature-settings: "palt" をグローバルに当てる
• letter-spacing: normal を守る（例外は縦組みの UD タイポス見出しのみ）
• 本文は 17px / line-height 34px（2.00）、リード文は 20px / 50px（2.50）
• 本文色は #222222、地色は #F0F0F0、面は #ffffff
• ブランド赤 #d61d00 には 高コントラスト用の #AD133F を対で用意する
• html { font-size: 10px } を前提に rem を読む（1.7rem = 17px）

Don't（禁止）

• letter-spacing を本文・見出しに足さない（palt と二重にかかる）
• font-weight だけで太字にしない。 書体名を Bold / ExBold に切り替える
• box-shadow を足さない（実サイトは 0 件）
• Noto Sans JP / Barlow / Zen Maru Gothic を使わない。 @font-face はあるが全て unloaded
• MFW-UDTypos512Std-Regular を使わない（宣言のみ・unloaded）
• 本文色に #000000 を使わない（実サイトは #222222）
• 本文の行間を 1.5 以下にしない（実サイトは 2.00）
• ページの地色を #ffffff と決めつけない（見えている地色は #F0F0F0）

8. Responsive Behavior

Breakpoints

• 1024px が主分岐。それ未満は「モバイル用の別レイアウト」として 979 件のルールが当たる

タッチターゲット

• ヘッダーボタン（14px / padding 0）と 大 小（11px）は 44px を下回る。モバイルでは高さを確保すること
• 赤 CTA（18px / padding 4px 32px）は満たす

フォントサイズの調整

• 本文 17px、ナビ 18px はブレークポイントをまたいで固定
• 文字サイズ 大 / 小 のトグルがあるため、rem ベースで組んで拡大に追従できるようにする

9. Agent Prompt Guide

クイックリファレンス

Brand Red:        #d61d00   (--main-color)
Brand Red (HC):   #AD133F   (--main-color-hc / 反転表示用)
Text Color:       #222222   (--text-color)
Link Color:       #0034D1   (--main-link-color)
Background:       #F0F0F0   (--main-bg-color)
Surface:          #ffffff   (--white-color)
Surface Dark:     #222222
Surface Gray:     #666666

Font (本文):  "MFW-TBUDGoStd-Regular", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif  / weight 400
Font (見出し): "MFW-TBUDGoStd-Bold" / weight 600
Font (大見出し): "MFW-TBUDGoStd-ExBold" / weight 800
Font (展示名): "MFW-UDTypos510Std-Regular"

html font-size: 10px   (1rem = 10px)
Body Size:      17px
Line Height:    2.00 (34px) / リード 2.50 (50px) / 見出し 1.00〜1.60
Letter Spacing: normal （縦組み見出しのみ 0.2em）
font-feature-settings: "palt"   ← 全要素
Border Radius:  4px (ボタン) / 10-12px (カード) / 1440px (pill) / 0px (バッジ)
Box Shadow:     なし

プロンプト例

国立科学博物館のデザインシステムに従って、展示一覧ページを作成してください。
- html { font-size: 10px }、body は "MFW-TBUDGoStd-Regular" / 17px / line-height 34px / color #222222
- 全要素に font-feature-settings: "palt" を当て、letter-spacing は normal のままにする
- 見出しは "MFW-TBUDGoStd-ExBold" / 40px / weight 800 / line-height 64px
- カード見出しは "MFW-TBUDGoStd-Bold" / 22px / weight 600 / line-height 44px
- ページの地色は #F0F0F0、カードは #ffffff / 1px solid #F0F0F0 / border-radius 12px / 影なし
- 状態バッジは 16px / ExBold / weight 800 / radius 0px、開催中=#d61d00、企画展=#222222、予告=#666666
- CTA は #d61d00 / #ffffff / 18px / weight 600 / border-radius 4px
- box-shadow は使わない