九州国立博物館（Kyushu National Museum） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 青 #1a63bc を主役に据えた公共情報サイト。Bootstrap で組まれていた旧サイトを Tailwind に載せ替え、旧サイトの computed 値を「実測 base 層」として移植している
• 密度: 高い。カード・バッジ・カレンダーが密に並ぶ。情報を探させるサイト
• キーワード: ヒラギノ角ゴ ProN、palt を見出しに全適用、ウェイトの主役が 600、画面幅で字間と行間を変える、青 #1a63bc

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

1. 見出しの主役ウェイトが 600。 可視 113 要素のうち 600 が 61、700 が 26、400 が 17。base 層は h1〜h6 { font-weight: 700 } だが、h3〜h6 は 600 で上書きされている。macOS では 600 がヒラギノ角ゴ ProN の W6 に素直に当たる（ProN は W3 と W6 の 2 本）。700 を指定すると W6 の合成太字になる
2. 画面幅で letter-spacing と line-height を変える。 Desktop 0.04em / 1.8 → Tablet 0.035em / 1.75 → Mobile 0.03em / 1.7。小さい画面ほど詰める。実測でも 1440px 幅で 0.68px、800px 幅で 0.588px と変わる
3. palt は見出し専用。 base 層の h1〜h6 に font-feature-settings: "palt" 1。トップで 136 要素、下層で 76 要素が継承で palt を持つ。本文には掛けていない
4. 自社トークンは --kx-* の 9 個だけ。それなのに Bootstrap 由来の色が Tailwind の任意値クラスで直書きされている。 --kx-primary: #1a63bc があるのに、カードの見出しは text-[#0d6efd]（Bootstrap の既定青）。このサイトには青が 2 つある
5. 和文 Web フォントを読み込んでいるのに、macOS ではほぼ使われない。 Google Fonts から Noto Sans JP:wght@400;500;600;700 と Inter:wght@400;500;600;700 を読み込むが、実測でテキストを持つ要素 521 個のうち ヒラギノ角ゴ ProN が 517、Noto Sans JP は 4

--kx-ff-base と --kx-ff-heading は 1 語だけ違う。 heading にだけ "Noto Sans JP" が挟まっている。Windows では見出しだけ Web フォント、本文はローカルの BIZ UDPGothic という切り分け。

2. Color Palette & Roles

Primary（ブランドカラー）

もう一つの青（Bootstrap 既定の残留）

#1a63bc（自社トークン）と #0d6efd（Bootstrap 既定）が同じページに同居している。 新規に書くなら var(--kx-primary) = #1a63bc に統一すること。 #0d6efd は移行の残留物であって設計意図ではない。

Semantic（意味的な色・すべて Bootstrap 5 既定値）

Neutral（ニュートラル）

ページの地色は #e4e4e4（薄いグレー）で、カードが白。 白地に白カードではないので、カードに枠線を付けなくても面が分かれる。

カレンダーの日付色（下層のご利用案内）

3. Typography Rules

3.1 和文フォント

ヒラギノ角ゴ ProN（OS ローカル）が実質の本番書体。 実測でテキストを持つ 521 要素のうち 517 要素がヒラギノ角ゴ ProN。

document.fonts の実測（和文・欧文のみ抜粋）:

4 ウェイト × 2 ファミリー = 8 本の Web フォントを読み込んで、macOS ではほぼ使わない。 これは無駄ではなく Windows 向けの備え（→ 3.3）。ただしこの読み込み量は設計判断として意識すること。

3.2 欧文フォント

Inter（400/500/600/700）を読み込んでいるが、実測ではテキスト要素に 1 つも当たっていない。

英数字（2026.9.17、September）もヒラギノ角ゴ ProN のラテングリフで描かれている。

3.3 font-family 指定

2 本のスタックがあり、違いは "Noto Sans JP" が挟まっているかどうかだけ。

css:root {
  /* 本文 */
  --kx-ff-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                -apple-system, BlinkMacSystemFont, "Segoe UI",
                "BIZ UDPGothic", "Yu Gothic Medium", "Yu Gothic",
                Meiryo, sans-serif;

  /* 見出し（★ Noto Sans JP が 1 つ挟まる） */
  --kx-ff-heading: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                   -apple-system, BlinkMacSystemFont, "Noto Sans JP",
                   "BIZ UDPGothic", "Yu Gothic Medium", "Yu Gothic",
                   Meiryo, sans-serif;
}
body { font-family: var(--kx-ff-base); }
h1, h2, h3, h4, h5, h6 { font-family: var(--kx-ff-heading); }

順序の意味

Windows の游ゴシック問題を「BIZ UDPGothic を游ゴシックより前に置く」ことで解いている。 このリポジトリの収録例では 5 つ目の流儀になる（SmartHR の別名 AdjustedYuGothic、白鶴酒造の MyYuGothicM、カリモク家具の Yu Gothic 上書き、東京オペラシティ AG のスタック順、そして本例の UD フォント優先）。 公共施設らしい選択でもある。BIZ UD 系は読み書きに配慮した字形で、游ゴシックの細さ問題も同時に回避できる。 見出しだけ "Noto Sans JP" を差し込んでいるので、Windows では見出し＝ Web フォント、本文＝ローカルの BIZ UDPGothic になる。和文 Web フォントの重さを見出しだけに払う設計。

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

html { font-size: 16px }。本文サイズは clamp() で 16px → 17px に伸びる。

cssbody {
  /* iPhone SE:16px → iPad:16.5px → Desktop:17px */
  font-size: clamp(1rem, 0.975rem + 0.15vw, 1.0625rem);
}

ウェイトの分布

このサイトのウェイト設計は「本文 400 / 見出し 600 / 大見出しと強調 700 / 特大ボタン 900」。 600 が主役なのは、本番書体のヒラギノ角ゴ ProN が W3（≒300–400）と W6（≒600）の 2 本しか持たないため。600 を指定すると W6 がそのまま当たり、合成が入らない。 逆に 700 を指定すると W6 に対する合成太字になる（macOS / Chrome）。26 要素がこれに当たる。 base では h1〜h6 { font-weight: 700 } と書いてあるが、h3〜h6 の規則が 600 に上書きしている。 実装を読むときは base だけを見ないこと。 900 は 3 つの大ボタンだけ。 ヒラギノには W9 相当が無いので、これも合成太字になる。多用しないこと。

3.5 行間・字間

画面幅で字間と行間を変える。このサイトで最も特徴的な設計。

cssbody {
  line-height: 1.8;
  letter-spacing: 0.04em;
}
@media (min-width: 768px) and (max-width: 1024px) {
  body { line-height: 1.75; letter-spacing: 0.035em; }
}
@media (max-width: 767.98px) {
  body { line-height: 1.7;  letter-spacing: 0.03em; }
}

画面が狭いほど、行間も字間も詰める。 狭い画面で 0.04em を維持すると 1 行の文字数が落ちて読みづらくなるため。 実測でも 1440px 幅では letter-spacing: 0.68px（17px × 0.04em）、800px 幅では 0.588px（16.8px × 0.035em）と変化している。

字間は em 宣言 → px 継承。

実測（下層・可視 166 要素）:

同じ 0.68px が 109 要素・サイズはバラバラ = 継承。 em は body に 1 回だけ書いて、子で再宣言しない。 見出しだけは 0.02em を明示（サイズに比例して 0.32px / 0.376px / 0.52px と変わる）。

行間は 1.8（本文）/ 1.4（見出し）の 2 段。

3.6 禁則処理・改行ルール

実サイトは word-break を明示せずブラウザ既定。text-rendering: optimizeLegibility と font-kerning: normal を body に指定している。

cssbody {
  -webkit-font-smoothing: auto;      /* ← 実サイトは antialiased にしていない */
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

禁則対象

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

-webkit-font-smoothing: antialiased を足さないこと。 実サイトは auto（＝ subpixel）のまま。公共サイトとして細らせない判断。

3.7 OpenType 機能

cssh1, h2, h3, h4, h5, h6 {
  font-feature-settings: "palt" 1;
  -webkit-font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
}

• palt は見出しにだけ掛ける。 トップで 136 要素、下層で 76 要素が "palt" を持つ（見出しとその子孫）
• 本文には掛けない。 body 側は font-feature-settings: normal
• palt と letter-spacing: 0.02em を併用している。約物を詰めたぶんを字間でわずかに戻す組み方
• ユーティリティにも font-feature-settings:"palt"; letter-spacing:.1em を持つクラスが 1 つある（強い字空けを掛けるラベル用）

3.8 縦書き

css/* 該当なし */

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

4. Component Stylings

Buttons

Primary（ヘッダー帯・青ボタン）

• Background: #1e6bb8
• Text: #ffffff
• Border: 2px solid #1e6bb8
• Padding: 4px 16px
• Border Radius: 4px
• Font Size: 14px / Weight: 700 / Line Height: 19.6px

Primary Outline（下層の主要リンク）

• Background: #ffffff
• Text: #1a63bc
• Border: 1px solid #1a63bc
• Border Radius: 4px
• Font Size: 17px / Weight: 700 / Letter Spacing: 0.68px

Large（3 連の大ボタン・グラデーション）

• Background: linear-gradient(135deg, #2b7fbd 0%, #1a63bc 100%)
• Text: #ffffff
• Border Radius: 14px
• Font Size: 20px / Weight: 900 / Letter Spacing: 0.04em
• Shadow: 0 4px 12px rgba(0,0,0,0.15)

Badges / Chips

カテゴリバッジ（Bootstrap 既定色をそのまま使用）

• Border Radius: 4px
• Padding: 4px 8px
• Font Size: 11.4px / Weight: 700 / Letter Spacing: 0.304px（0.02em 継承）
• Text: #ffffff（Info の #0dcaf0 のみ #000000）

カウントダウン（「残り 4 日」）

• Background: #6f42c1 / Text: #ffffff
• Border Radius: 5.42px（下層は 6.375px）
• Font Size: 14.45px / Weight: 600

Inputs

実サイトのトップ・下層に可視の入力欄は無い（検索は別ページ）。新規実装では下記に揃える。

• Background: #ffffff
• Border: 1px solid #dddddd（--kx-border）
• Border (focus): 1px solid #1a63bc
• Border Radius: 4px
• Padding: 8px 12px
• Font Size: 17px
• Height: 44px

Cards

• Background: #ffffff
• Border: なし（地色 #e4e4e4 との差で面が分かれる）
• Border Radius: 12px（30 要素）/ 16px（12 要素・展示カード）
• Shadow: 0 2px 12px rgba(0,0,0,0.06)
• カード内見出し: h5 16px / 600 / palt

Tabs

• Border Radius: 8px 8px 0 0
• Background（非アクティブ）: #f5f5f7 / Text: #444444
• Font Size: 17px / Weight: 700 / Line Height: 40px

5. Layout Principles

Spacing Scale

Tailwind の既定スケール（0.25rem 刻み・html は 16px）。

見出しの下マージンは base 層で固定:

cssh1, h2, h3 { margin-bottom: 1.5rem; }   /* 24px */
h4, h5     { margin-bottom: 1rem; }     /* 16px */
h2 { margin-top: 2.5rem; }  h3 { margin-top: 2rem; }
@media (max-width: 767.98px) {
  h1, h2 { margin-bottom: 1rem; }
  h2 { margin-top: 1.75rem; }  h3 { margin-top: 1.25rem; }
}

Container

• Max Width: 1320px
• 幅いっぱいのセクション（100%）が 17 箇所。帯は全幅、中身だけ 1320px
• スクロールオフセット: --kx-scroll-offset: 105px（固定ヘッダー分）

Grid

• Columns: 3（展示カード）/ 7（カレンダー）
• Gutter: 16px

6. Depth & Elevation

影は黒 α のみで、色を混ぜていない。 3 段とも rgba(0,0,0,α)。Level 1 の 0.06 が基準で、浮かせたいものだけ 0.15 に上げる。 下層のカレンダーには rgba(0,0,0,0) 0 0 0 9999px inset が 120 要素あるが、これは透明＝実質 none（ホバー時に色を差すための仕込み）。再現不要。

7. Do's and Don'ts

Do（推奨）

• 本文は 16px → 17px の clamp() / line-height 1.8 / letter-spacing 0.04em
• 画面幅で字間と行間を落とす（Tablet 0.035em / 1.75、Mobile 0.03em / 1.7）
• 見出しには font-feature-settings: "palt" 1 と letter-spacing: 0.02em をセットで書く
• 見出しのウェイトは h1/h2 が 700、h3〜h6 が 600
• リンクは color: var(--kx-primary) = #1a63bc、hover で #0f3d75
• ページの地色は #e4e4e4、カードは白 + radius 12px + 0 2px 12px rgba(0,0,0,0.06)
• Windows 対策は "BIZ UDPGothic" を游ゴシックより前に置く
• 見出しだけ "Noto Sans JP" をスタックに挟む（本文はローカルで済ませる）

Don't（禁止）

• #0d6efd を新規に使わない。 Bootstrap からの移行残留。青は #1a63bc に統一する
• font-weight: 700 を見出しの既定にしない。 ヒラギノは W3 / W6 の 2 本なので、700 は合成太字になる。600 を使えば W6 が素直に当たる
• 900 を多用しない（3 連の大ボタン専用。これも合成）
• 本文に palt を掛けない（見出し専用）
• 子要素で letter-spacing を em で再宣言しない（body の値が px で継承される設計）
• -webkit-font-smoothing: antialiased を足さない（実サイトは auto）
• カードに枠線を足さない（地色との差で分かれている）
• --kx-text-muted: #666666 を「使われている色」として扱わない（可視 0 要素）

8. Responsive Behavior

Breakpoints

Tailwind の既定ブレークポイント ＋ Bootstrap 由来の .98px 端数が混在している。

prefers-reduced-motion: reduce に 3 件対応している。 カルーセルの自動送りを止める。公共サイトとして必須。

タッチターゲット

• 最小サイズ: 44px × 44px
• 3 連の大ボタンは高さ 80px 超。カレンダーのセルは 44px 以上

フォントサイズの調整

• 本文は clamp() が吸収する（16px → 17px）。メディアクエリで書き直さない
• 見出しも clamp()（h1 は 26px → 40px）。固定 px に置き換えないこと
• 字間・行間だけはメディアクエリで明示的に落とす（→ 3.5）

9. Agent Prompt Guide

クイックリファレンス

Primary Color:     #1a63bc   （--kx-primary）
Primary Dark:      #0f3d75   （hover）
Heading Color:     #111111
Text Color:        #333333
Background:        #e4e4e4   ← 白ではない
Surface (card):    #ffffff
Border:            #dddddd
Danger/Success/Info: #dc3545 / #198754 / #0dcaf0
Font (body):    "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system,
                BlinkMacSystemFont, "Segoe UI", "BIZ UDPGothic",
                "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif
Font (heading): 上の 5 番目を "Noto Sans JP" に差し替えたもの
Body Size:   clamp(1rem, 0.975rem + 0.15vw, 1.0625rem)  = 16px → 17px
Line Height: 1.8 / 1.75 (tablet) / 1.7 (mobile)
Letter Spacing: 0.04em / 0.035em (tablet) / 0.03em (mobile)
Heading: weight 700 (h1,h2) / 600 (h3–h6), line-height 1.4,
         letter-spacing 0.02em, font-feature-settings "palt" 1
Card: #ffffff / radius 12px / 0 2px 12px rgba(0,0,0,0.06)

プロンプト例

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

- ページの地色は #e4e4e4、カードは白 + border-radius 12px +
  box-shadow 0 2px 12px rgba(0,0,0,0.06)（枠線は付けない）
- 本文フォント: "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system,
  BlinkMacSystemFont, "Segoe UI", "BIZ UDPGothic", "Yu Gothic Medium",
  "Yu Gothic", Meiryo, sans-serif
  （見出しは 5 番目を "Noto Sans JP" に差し替える）
- 本文: font-size: clamp(1rem, 0.975rem + 0.15vw, 1.0625rem) /
  line-height 1.8 / letter-spacing 0.04em / color #333333
- 768〜1024px では line-height 1.75 / letter-spacing 0.035em、
  767.98px 以下では 1.7 / 0.03em に落とす
- 見出しは color #111111、line-height 1.4、letter-spacing 0.02em、
  font-feature-settings: "palt" 1。h1/h2 は font-weight 700、h3〜h6 は 600
  （700 はヒラギノで合成太字になるので、小見出しには使わない）
- リンクは #1a63bc、hover で #0f3d75。#0d6efd は使わない
- カテゴリバッジは radius 4px / 11.4px / weight 700、
  お知らせ=#dc3545 / イベント=#198754 / 関係者=#0dcaf0（文字は黒）
- コンテナ 1320px。prefers-reduced-motion に対応する