奈良国立博物館（NARA NATIONAL MUSEUM） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 密度を「太さ」で作る。 字間は normal、palt も無し。代わりに**本文を含むほぼ全要素が font-weight: 500（Medium）**で、行間は 1.80 に固定されている。字送りをいじらずにウェイトだけ1段上げる、という珍しい設計
• 密度: 中庸。行間 1.80 が全ページで揃っていて、見出しから注記まで同じリズムで流れる
• キーワード: 深緑、Medium 基調、行間 1.80 の一様さ、片側だけ大きく丸める角、マーカー風の見出し

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

1. ルートが 10px。 html { font-size: 10px }、body { font-size: 16px }。rem は 16px 基準ではない（1rem = 10px、1.4rem = 14px）。この前提を外すと全サイズが 1.6 倍ずれる
2. 本文ウェイトが 500。 可視 194 要素のうち 167 要素が font-weight: 500（下層 /about/greeting/ では 60/67）。400 はわずか 10 要素。Noto Sans JP の Regular ではなく Medium が既定
3. 行間 1.80 が全ページで一様。 トップで 165/194、下層では 67/67 要素すべてが line-height: 1.8。見出しも本文も注記も同じ
4. 字間は normal が既定（実測 170/194）。例外は 2px / 4px / 1px / 3px の px 直書きが計 24 要素だけで、いずれも装飾的な見出し・数字ブロック

font-feature-settings: "palt" は 1 要素も無い（実測 0 件）。CSS Custom Properties は 自社トークン 0 個（60 個はすべて WordPress / Gutenberg 由来：WordPress admin 11・WordPress / Gutenberg 49）。--wp--preset--* を設計トークンと読み違えないこと。

2. Color Palette & Roles

Primary（ブランドカラー）

ブランド緑は CMP にも使われている。 Cookie バナー（STRIGHT by IIJ）の すべて拒否する すべてのCookieを受け入れる が #198479 / border-radius: 18px。ただし同じ緑がロゴパネル・SEARCH / MENU ボタン・タブ・展覧会バッジにも出ているので、CMP 由来ではなくサイトの色と判定してよい。18px の角丸だけは CMP のものなので採用しない。

Accent（数字・データを読ませるための色）

奈良博を数字で知る ブロックでだけ使われる。通常の UI には出さない。

• Gold (#c57f23): 館蔵品には 国宝 13件 など所蔵数のカウント（可視 6 要素）
• Purple (#6f3e8f): 現在の館長は 26代目 など人物のカウント（可視 5 要素）
• Cream (#f2d69a): 本日開館 の文字色（開館カレンダー上）

Neutral（ニュートラル）

• Text Primary (#323131): 本文・見出し。可視 64 要素。純黒ではなく #323131
• Text on Dark (#ffffff): 緑・チャコール面の上のテキスト（可視 91 要素）
• Text Black (#000000): 一部の見出し・リンク（可視 9 要素）。#323131 と混在している
• Link Blue (#004d8a): CMP 内のリンク（可視 2 要素）。サイト本体のリンクは黒のまま
• Border (#707070): 1px solid の枠線。カード状リンク・Language ピル
• Surface (#f5f5f5): お知らせ・展覧会カードの面（可視 4 要素）
• Surface Warm (#f9f8f4): 参加する 奈良博について のブロック（可視 2 要素）
• Surface Sand (#e8e3de): 学ぶ・調べる のブロック
• Surface Sub (#f8f8f8): 下層ページのタイトル帯
• Marker Gray (#f0f0f0): 見出しの下半分に敷く帯（下記 4. 参照）
• Stone (#7a7671): 下層の導線カード
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body。両ページとも一致）

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一の和文）: Noto Sans JP。@font-face は 400 / 500 / 700 の3本立て（可変フォントではない）。トップでは 400・500・700 が loaded、下層 /about/greeting/ では 500 と 700 だけが loaded（400 を使う要素がほぼ無い）
• 明朝は使わない。 ただしロゴタイプと下層ページ背景の透かし文字（NARA NATIONAL MUSEUM）は画像・別実装

3.2 欧文フォント

• 専用の欧文フォントを持たない。 Language SEARCH MENU HOME などの英字も Noto Sans JP の欧文グリフをそのまま使う
• Font Awesome（5/6）と slick が @font-face で宣言されているが、実測した全ページで unloaded。アイコンフォントは実質使われていない

3.3 font-family 指定

css/* 本文・UI（サイト全体で1本） */
font-family: "Noto Sans JP", sans-serif;

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

• チェーンは2段だけ。 OS フォント（ヒラギノ・游ゴシック）の指定を持たないので、Web フォントが落ちると generic sans-serif に直行する
• sans-serif 止まりを短いと感じても足さないこと。 游ゴシックやヒラギノを挟むと、Medium 基調（weight 500）の見え方が環境ごとに変わる（游ゴシックは素の指定だと Light に寄る）。Noto Sans JP で 500 を配信し切るのがこのサイトの前提
• CMP（Cookie バナー）だけ sans-serif 単独で組まれている（可視 10 要素）。サイト側の指定ではない

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

ルートは 10px。 html { font-size: 10px } / body { font-size: 16px }。rem 換算は 10px 基準（2.7rem = 27px）。

font-weight: 900 は 700 で描画される。 下層 /about/greeting/ の 館長あいさつ に 900 が当たっているが、@font-face は 400 / 500 / 700 の3本しか無い。可変フォントでもないため、ブラウザは 700 を選ぶ。意図した重さは出ていない。新規実装では 700 と書くこと。

3.5 行間・字間

• 行間は 1.80 の一択。 トップ 165/194、下層 67/67 要素。見出しも本文も注記も同じ
• 例外: 2.20（展覧会の紹介文 2 要素）、1.00（カレンダー凡例 19 要素）、1.20（数字 2 要素）
• 字間の既定は normal（実測 170/194）
• 字間を足すのは 24 要素だけ、いずれも px 直書き:
  • 2px — ページタイトル 27px（10 要素）
  • 4px — 統計ブロックの 24px（8 要素）
  • 1px — 小見出し 講座 催し物（4 要素）
  • 3px — ロゴ周辺の 国立博物館 114（2 要素）

ガイドライン:

• letter-spacing を em に読み替えないこと。 このサイトは px で直書きしており、サイズとの比も揃っていない（27px に 2px = 0.074em、24px に 4px = 0.167em）。そのまま px で書く
• 本文に字間を足さない。 密度は weight 500 と行間 1.80 で作られている
• line-height: 1.8 を見出しにも適用する。 見出しだけ 1.2〜1.3 に詰めると、このサイトの均質なリズムが崩れる

3.6 禁則処理・改行ルール

css/* 和文本文 */
line-break: strict;
overflow-wrap: break-word;
word-break: normal;

• 展覧会名は 名品展「ナラハク仏像セレクション　―受け継ぎ、未来へ―」 のように鉤括弧・ダーシ・全角スペースが混じる。break-all を使うと括弧が行頭に落ちるので使わない
• 行間 1.80 は 2〜4 行の見出しでも破綻しない。見出しの折り返しを恐れて行間を詰めない

3.7 OpenType 機能

css/* 実サイトは font-feature-settings を 1 要素も指定していない（実測 0 件） */

• palt を使わない。 鉤括弧の多い展覧会名でも詰めない。字間 normal と合わせて、Noto Sans JP の素のメトリクスをそのまま出す
• YakuHanJP のような約物サブセットも使っていない

3.8 縦書き

css/* 該当なし。writing-mode の指定は 0 要素 */

縦組みは使っていない（typography.verticalWriting = 0 件）。

4. Component Stylings

Buttons

Primary（緑のピル）

• Background: #198479
• Text: #ffffff
• Padding: 14px 26px
• Border Radius: 100px
• Font: Noto Sans JP / 15px / 500 / letter-spacing: normal

Secondary（チャコールのピル・アイコン付き）

• Background: #2e2e2e
• Text: #ffffff
• Padding: 10px 70px 10px 60px（左右非対称。左にアイコン、右に矢印の場所を空ける）
• Border Radius: 100px
• Font: Noto Sans JP / 14px / 500

Ghost（白のピル・非選択タブ）

• Background: #ffffff
• Text: #323131
• Padding: 14px 26px
• Border Radius: 100px
• Border: なし

Outline（Language ピル）

• Background: transparent
• Border: 1px solid #707070
• Border Radius: 100px
• Padding: 6px 20px 8px 35px（左に地球アイコン）
• Font: Noto Sans JP / 12px / 500

Icon Button（丸）

• Background: #198479
• Border Radius: 100%
• Font: Noto Sans JP / 7px / 500（SEARCH MENU の文字を下に入れる）

Badges

開催予定 の枠線は border ではなく box-shadow。 実測値は border: 0px solid ＋ box-shadow: rgb(231,19,55) 0 0 0 1px inset。内側 1px のリングで枠を描いているので、レイアウトが 1px もずれない。この書き方を踏襲すること。

Cards

• Background: #ffffff（記事面は #f5f5f5）
• Border: 1px solid #707070
• Border Radius: 0px
• Padding: 18px 12px（リンクカード）/ 11px 55px 11px 12px（右に矢印が入るもの）
• Shadow: なし

Section Panels — 片側だけ大きく丸める

このサイトの角丸は「全部丸める」のではなく、1〜2 隅だけ大きく落とす。

18px は採用しない。 Cookie バナー（STRIGHT）のボタン専用（4 要素）。

Heading Marker — 見出しの下半分に帯を敷く

css/* 下層ページのセクション見出し */
background: linear-gradient(rgba(0, 0, 0, 0) 60%, rgb(240, 240, 240) 60%);
color: #198479;
font-size: 27px;
font-weight: 700;   /* 実サイトは 900 だが 700 で描画される */
letter-spacing: 2px;
line-height: 1.8;

上 60% は透明、下 40% に #f0f0f0 を敷くという蛍光ペン風の処理。緑の見出し文字と組み合わせる。

5. Layout Principles

Spacing Scale

Container

• Max Width: 1080px（実測 7 要素で最多）
• 記事カラム: 1000px（2 要素）
• ヘッダー・フッター: 1120px
• 一部のワイドブロック: 1200px
• Padding (horizontal): 20px 前後

Grid

• Columns: 2〜4（展覧会カードは 2〜3、メニューは 4）
• Gutter: 10px / 12px（かなり詰める）
• ロゴパネルはグリッドの外。ページ左上に緑の矩形として固定し、右下だけ 15px 丸める

6. Depth & Elevation

このサイトは影を使わない。 区別は「緑・チャコールの塗り」「1px solid #707070 の枠」「#f5f5f5 / #f9f8f4 / #e8e3de の淡い面」で作る。

7. Do's and Don'ts

Do（推奨）

• ルートを 10px にする（html { font-size: 10px }）。rem を使うなら 10px 基準で計算する
• 本文を font-weight: 500 で組む。 これがこのサイトの既定であり、密度の作り方そのもの
• line-height: 1.8 を見出しから注記まで一様に当てる
• 字間は normal。 足すときだけ px で直書きする（2px / 4px）
• 本文の色は #323131（純黒ではない）
• 角丸は1〜2隅だけ大きく落とす（60px 0 0 / 0 0 60px）。ピルは 100px、カードは 0px
• 枠線が 1px のバッジは box-shadow: inset 0 0 0 1px で描く（レイアウトがずれない）

Don't（禁止）

• font-feature-settings: "palt" を足さない（実測 0 件）
• 本文に letter-spacing を足さない。 密度はウェイトで出している
• font-weight: 900 を書かない。 @font-face は 400 / 500 / 700 の3本だけで、900 は 700 で描画される。実サイトにこの誤りがあるが真似しないこと
• font-family に游ゴシック・ヒラギノを足さない。 Medium（500）の見え方が環境ごとに変わる
• --wp--preset--* を設計トークンとして読まない。 60 個の CSS 変数はすべて WordPress / Gutenberg 由来で、自社トークンは 0 個
• border-radius: 18px と #004d8a のリンク色を採用しない。 どちらも Cookie バナー（STRIGHT by IIJ）のもの
• box-shadow でカードを浮かせない
• 統計ブロックの金 #c57f23 / 紫 #6f3e8f を通常の UI に持ち込まない。 数字を読ませるためだけの色

8. Responsive Behavior

Breakpoints

max-width: 767px と min-width: 767px が併用されている（767px ちょうどで両方に当たる）。実装時は片方を 768px に直してよい。

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。ピルボタンは padding: 14px 26px で満たす
• 丸アイコンボタン（SEARCH / MENU）は 56px 程度

フォントサイズの調整

• ページタイトル 27px → モバイルで 20〜22px
• 本文 16px と font-weight: 500、line-height: 1.8 は据え置く
• 統計ブロックの 24px / letter-spacing: 4px はモバイルで字間を 2px に落としてよい

9. Agent Prompt Guide

クイックリファレンス

Root font-size: 10px   ← 16px ではない
Primary Color:  #198479   （Nara Green）
Panel Dark:     #2e2e2e
Alert:          #e71337
Text Color:     #323131   （純黒ではない）
Background:     #ffffff
Surface:        #f5f5f5 / #f9f8f4 / #e8e3de
Border:         #707070
Font:           "Noto Sans JP", sans-serif
Body Size:      16px
Body Weight:    500        ← 400 ではない
Line Height:    1.8        ← 見出しも本文も同じ
Letter Spacing: normal
palt:           使わない
Radius:         ピル 100px / カード 0px / パネルは 1〜2隅だけ 60px
Box Shadow:     なし
Container:      1080px

プロンプト例

奈良国立博物館のデザインシステムに従って、展覧会一覧ページを作ってください。
- html の font-size は 10px（rem は 10px 基準）
- フォントは "Noto Sans JP", sans-serif の1本。本文は 16px / font-weight: 500
- line-height は見出しから注記まで 1.8 で統一。letter-spacing は normal
- font-feature-settings: "palt" は使わない
- ブランド緑 #198479、本文色 #323131、背景 #ffffff、カード面 #f5f5f5
- 会期バッジは「開催中＝#e71337 の塗り・白文字」「開催予定＝白地に box-shadow: inset 0 0 0 1px #e71337・赤文字」、どちらも border-radius: 0
- 「もっと見る」は #2e2e2e のピル（border-radius: 100px / padding: 10px 70px 10px 60px / 14px / 500）
- セクションの面は左上だけ border-radius: 60px 0 0 で落とす
- box-shadow は使わない
- コンテナは 1080px、gap は 10〜12px