長崎県美術館（Nagasaki Prefectural Art Museum） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地に細い文字。字間を一切足さず、palt で約物だけ詰める。 色はロゴの赤 1 点のほかはグレー階調だけで、展示作品の色を邪魔しない
• 密度: 低い。本文は line-height: 1.8em、見出しは中央寄せで上下に大きく空ける
• キーワード: あおとゴシック L、字間 normal、palt 全面、太さを書体名で切り替える、赤 1 点

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

1. 和文は TypeSquare（モリサワ）配信の「あおとゴシック」で、L（Light）と DB（DemiBold）の 2 段しか使わない。 可視 L 131 要素 / DB 11 要素（トップ）。font-weight は 400 が 184 要素で、700 はトップの News 1 要素だけ。太さは font-weight ではなくファミリー名で切り替える設計
2. letter-spacing は normal が既定。 トップで可視 185 要素中 177 要素が normal、下層は 76 要素中 75 要素。字間を足すのはセクション見出し 3 要素と News ラベルだけ
3. それでいて font-feature-settings: "palt" はトップで 3309 要素に効いている。 「字間は足さないが、約物の空きは詰める」。字空けと字詰めを混同しないための教材のような組み方
4. line-height が em 単位で宣言されている（1.8em / 1.7em / 1.5em / 1.4em / 1.2em）。16px の親で 1.7em と書くと 27.2px という絶対値が降り、12px のフッターリンクでは実測比 2.27 になる。単位なしの 1.7 に書き換えると別物になる

CSS Custom Properties は total 132 個あるが、自社のものは 6 個しかない。 残りは WordPress / Gutenberg（49）、WordPress admin（11）、Swiper（2）、VK Blocks（--vk-* / --vk_* 39）、intl-tel-input（--iti-* 25）。設計トークンではなくプラグインの語彙。

2. Color Palette & Roles

Primary（ブランドカラー）

ブランド色は --base_color: #ff000f ひとつ。 「赤」と呼べる色はこれだけで、面として大きく使う場所は無い。ロゴの縦罫と見出しの左 5px 罫に限定する。 トップで最も多い塗り色 #80b538（可視 178 要素）はブランド色ではない。 イベントカレンダーの Events Manager プラグイン既定色なので、採用しないこと。

Neutral（ニュートラル）

• Text Primary (#101010): 本文・見出し。可視 21 要素（トップ）/ 16 要素（下層）。純黒ではなく わずかに持ち上げた黒
• Text Link / Secondary (#333333): ナビ・フッターリンク・日付。可視 106 要素（トップ）/ 53 要素（下層）で最多
• Text Alt (#2b2b2b): カレンダーの日付・お知らせ本文（可視 46 要素）
• Text Muted (#999999): ボタンの枠線色（1px solid）
• Text Field (#555555): 検索入力欄のプレースホルダ
• Surface Light Gray (#d9dbdd): お知らせ ラベルの面（可視 10 要素）
• Surface Calendar (#dee3e9): カレンダーの日付丸（可視 3 要素）
• Surface Mega Menu (#f3f3f3): グローバルナビのメガメニューの地
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 viewportTopBySample 3/3）

html / body に背景色の宣言が無い（heroCover.canvasUnpainted: true）。白は UA 既定であって指定ではない。新規実装では background: #ffffff を明示すること。

Semantic（意味的な色）

専用の semantic パレットを持たない。--vk-color-background-red: #dc3545 / --vk-color-background-orange: #ffa536 / --vk-color-background-green: #28a745 などが宣言されているが、これは VK Blocks（WordPress プラグイン）の既定で、可視 0 要素。サイトの色として採用しないこと。

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文・既定）: あおとゴシック L（モリサワ / TypeSquare 配信）
• ゴシック体（強調）: あおとゴシック DB（展覧会タイトルなど。可視 11 / 6 要素）
• 明朝体: 使用しない（可視 0 要素）

配信は TypeSquare（モリサワ）。 https://typesquare.com/3/tsst/script/ja/typesquare.js?<eid> を読み込み、JS が @font-face を動的に注入する。document.fonts で あおとゴシック L / DB の 2 つだけが loaded。

css/* TypeSquare が注入する @font-face（実測。手で書くものではない） */
@font-face { font-family: "あおとゴシック L";  font-weight: bold; src: url("//wf.typesquare.com/3/tsst/dist/ja/ts?...") }
@font-face { font-family: "あおとゴシック DB"; font-weight: bold; src: url("//wf.typesquare.com/3/tsst/dist/ja/ts?...") }

font-weight: bold は TypeSquare の仕様で、書体の太さとは無関係。 各ファミリーに実体は 1 つしか無いので、CSS が font-weight: 400 と書いても L はそのまま Light で描画される。 CSS には あおとゴシック B と あおとゴシック R も書かれているが、配信されていない（document.fonts に無く、可視 0 要素）。この 2 つを当てた要素は UA 既定書体で出る。真似しないこと。

3.2 欧文フォント

• サンセリフ: Raleway（Google Fonts）。カレンダーの曜日・日付だけ（可視 42 要素）。スタックは Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif
• セリフ: 使用しない
• 等幅: 使用しない
• フッターのコピーライトだけ Arial, Helvetica, "sans-serif"（"sans-serif" を引用符で囲っているのは誤り。generic family はクオートしない）

3.3 font-family 指定

css/* 実サイトの宣言（そのまま） */
body            { font-family: "あおとゴシック L"; }
.el_title       { font-family: "あおとゴシック DB"; }
.calendar       { font-family: Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif; }

フォールバックの考え方 — 実サイトの引っかかり:

• font-family: "あおとゴシック L"; にフォールバックが 1 つも書かれていない。 TypeSquare の JS が落ちたり読み込みに失敗すると、UA 既定（多くの環境で明朝）に落ちる
• 新規実装では必ずフォールバックを足す:

css/* 推奨（ゴシックの系統を保つ） */
font-family: "あおとゴシック L",
             "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
             "Noto Sans JP", sans-serif;

• "あおとゴシック B" / "あおとゴシック R" は配信されていないので書かない

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

html は 16px 固定（1440 / 1200 / 834 / 375px の 4 幅すべてで 16px）。rem 宣言に 1.187rem 1.437rem 0.937rem のような端数が多いため、px は 16px 基準の換算値。

ウェイトは実質 1 段（400）。 太く見える要素は あおとゴシック DB に切り替えたもの。

3.5 行間・字間

• 本文の行間: line-height: 1.8em。16px の本文で 28.8px。em なので絶対値が子へ降りる
• フッター・ナビの行間: line-height: 1.7em を 16px の親に書いており、12px の子リンクに 27.2px がそのまま降りる（比 2.27）
• 見出しの行間: 宣言なし（normal）。h1 44px・h2 30px・ナビ 18.99px はすべて normal
• 本文の字間: normal。可視 185 要素中 177 要素
• 見出しの字間: 24px の見出しだけ .1em（2.4px）、21.6px の front_title が .12em（2.592px）、News が .05em（0.8px）

CSS に現れる line-height の宣言単位: 1.8em / 1.7em / 1.5em / 1.4em / 1.2em / 1.25em / 1.1em。単位なしの値はプラグイン（Bootstrap / Swiper）側だけ。

ガイドライン:

• line-height は em で書く。 このサイトは「親で決めた行送りを子に絶対値で配る」設計。単位なしに書き換えると、12px のフッターリンクが 20px 前後に詰まって別物になる
• letter-spacing を本文に足さない。 あおとゴシックの素の字送りで組むのがこのサイト
• 字間を足すのはセクション見出しだけ（.1em 〜 .12em）

3.6 禁則処理・改行ルール

css/* 実測 */
word-break: normal;        /* 単語分割（CSS にコメント付きで明示） */
overflow-wrap: break-word; /* VK Blocks 側の既定 */

• word-break: normal を明示している（CSS に /* 単語分割 */ のコメント付き）
• 4 幅（1440 / 1200 / 834 / 375px）すべてで body の word-break は normal。モバイルでも切り替わらない
• line-break / word-break: auto-phrase は使っていない

禁則対象（ブラウザ既定に任せている）:

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

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* トップ 3309 要素 / 下層 197 要素 */

• palt を全面に効かせている。 可視テキストのほぼすべて
• letter-spacing: normal と palt の組み合わせがこのサイトの肝。 約物（「」（）・：）の空きだけ詰め、仮名・漢字の字送りは触らない
• "tnum" "halt" "kern" の宣言は無い

palt を外すと、コレクション展（常設展示室） の括弧まわりが間延びする。 逆に letter-spacing を足すと palt で詰めた分が相殺される。どちらか片方だけを真似しないこと。

3.8 縦書き

css/* 該当なし */

縦組みは使っていない（typography.verticalWriting がトップ・下層とも 0 件）。ロゴマークの縦線は SVG の図形であって文字ではない。

4. Component Stylings

Buttons

Pill（枠線ボタン — 既定）

• Background: transparent
• Text: #333333
• Font: あおとゴシック L / 12px / 400
• Border: 1px solid #999999
• Padding: 6px 18px
• Border Radius: 900px（完全なピル。9999px ではなく 900px）
• Shadow: none

Room Badge（展示室バッジ）

• Background: #0065b2（県民ギャラリーは #c8f1e9）
• Text: #ffffff / あおとゴシック L / 14px / 400
• Padding: 2.8px 0 0（中央寄せの固定幅）
• Border Radius: 900px

Text Link

• Color: #333333、ホバーで #777777（--hover_color）
• 下線なし。ホバーで色だけ変える

More（もっと見る）

• Shadow: 0 0 8px 0 rgba(0, 0, 0, .3) ← サイト唯一の影（可視 2 要素）

Inputs

• Background: #ffffff
• Text: #555555 / あおとゴシック L / 14.4px
• Border: 実測なし（プラグイン既定の細枠）
• Border Radius: 4px（検索窓）
• 送信ボタンだけ font-family が Arial 13.33px のまま（UA 既定が残っている）。新規実装では書体を揃えること

Cards

• Background: #ffffff
• Border: なし。サムネイル画像とテキストの縦積みで区切る
• Border Radius: 0px（画像は角丸なし）
• Shadow: なし
• タイトル: あおとゴシック DB / 18px / line-height 25.2px / color #333333
• 日付: あおとゴシック L / 14.992px / color #333333

Heading Rule（見出しの罫）

このサイトを特徴づける 2 つの罫:

• 赤い左罫: border-left: 5px solid #ff000f（基本理念 など h3）。4px 版も CSS に存在する
• 細い縦罫: ページタイトル直下の 1px の縦線（約 48px）。h2 の下は横罫

5. Layout Principles

Spacing Scale

自社トークンは --gb_lr_margin: 28px の 1 つだけ。残りは VK Blocks の --vk-margin-* だが可視 0 要素なので採用しない。実測から:

Container

• Padding (horizontal): 28px（--gb_lr_margin）

Grid

• 展覧会カードは 3 列
• カレンダーは 7 列 × gap: 5px
• gap は 5px / 40px / 64px の 3 値だけ

6. Depth & Elevation

影はほぼ使わない。

• border-radius は用途で 5 種: 900px（ピルボタン・バッジ）/ 50%（カレンダーの日付丸、38 要素）/ 20px（スライダーのドット、8 要素）/ 4px（検索窓）/ 8px 8px 0 0（カレンダーの見出し行）
• カードと画像には角丸を付けない

7. Do's and Don'ts

Do（推奨）

• letter-spacing は normal のまま。 字間を足すのはセクション見出しの .1em 〜 .12em だけ
• font-feature-settings: "palt" を body に書いて全体へ効かせる（実測 3309 要素）
• 太さはファミリー名で切り替える（あおとゴシック L ↔ DB）。font-weight は 400 のまま
• line-height は em で書く（本文 1.8em、ナビ・フッター 1.7em）
• background: #ffffff を明示する。 実サイトは html / body とも未指定で UA 既定に頼っている
• フォールバックを足す。 実サイトは "あおとゴシック L" 単独だが、ヒラギノ → 游ゴシック Medium → Noto Sans JP → sans-serif を続ける
• 赤 #ff000f はロゴと見出しの左罫だけに使う

Don't（禁止）

• 本文に letter-spacing を足さない。 palt と二重にかかって約物まわりが崩れる
• line-height を単位なしに書き換えない。 1.7em は 27.2px という絶対値として 12px の子に降りている（実測比 2.27）
• font-weight: 700 を使わない。 サイト全体で 1 要素しか無く、あおとゴシックに Bold は配信されていない（合成太字になる）
• "あおとゴシック B" / "あおとゴシック R" を書かない。 CSS には残っているが配信されておらず、UA 既定書体に落ちる
• #80b538（緑）を採用しない。 イベントカレンダー（Events Manager プラグイン）の既定色で、可視 178 要素あるがブランド色ではない
• --vk-* / --iti-* の変数を設計トークンとして扱わない。 VK Blocks と intl-tel-input の語彙で、ほぼすべて可視 0 要素
• generic family をクオートしない。 実サイトのフッターに Arial, Helvetica, "sans-serif" があるが、"sans-serif" は文字列扱いになり generic family として機能しない
• 見出しに line-height を足さない。実サイトは normal で、書体のメトリクスに任せている

8. Responsive Behavior

Breakpoints

自社の切り替え幅は変数で持っている: --chg_width_cmn: 769px / --chg_width_hdr: 880px。

幅ごとの実測値（body）

body は 4 幅すべてで同じ。 流体ルートもブレークポイント切替も無い。モバイルでも本文は 16px のままで、縮むのは見出しとレイアウトだけ。

タッチターゲット

• ピルボタンの実測高さは 12px + padding 6px×2 ≒ 31px。44px に届かない
• 新規実装では min-height: 44px を足すこと

フォントサイズの調整

• 本文は縮小しない（16px 固定）
• 見出しは max-width: 880px のメディアクエリで個別に縮小（h1 44px → モバイルでは 1.75rem 前後）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #ff000f   (ロゴ・見出しの左罫のみ)
Accent Blue:   #0065b2   (展示室バッジ)
Text Color:    #101010   (本文・見出し)
Link Color:    #333333   / hover #777777
Border:        #999999
Background:    #ffffff   ← 明示すること
Font: "あおとゴシック L", "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP", sans-serif
Font (強調): "あおとゴシック DB", ...同じフォールバック
Font (数字):  Raleway, "Helvetica Neue", Arial, sans-serif
Body Size: 16px (全幅で固定)
Font Weight: 400 固定（太さは書体名で切り替える）
Line Height: 1.8em  ← em 単位。単位なしにしない
Letter Spacing: normal ← 本文に足さない
font-feature-settings: "palt"
Border Radius: 900px (ピル) / 0 (カード・画像)
Container: 1280px / 本文 780px

プロンプト例

長崎県美術館のデザインシステムに従って、展覧会一覧ページを作成してください。

- body:
    background: #ffffff;
    color: #101010;
    font-family: "あおとゴシック L", "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
    font-size: 16px; font-weight: 400;
    line-height: 1.8em;        /* em 単位。単位なしにしない */
    letter-spacing: normal;    /* 本文に字間を足さない */
    font-feature-settings: "palt";
- 強調したい語・展覧会タイトルは font-weight ではなく font-family を
  "あおとゴシック DB" に切り替える（700 は使わない）
- セクション見出しだけ letter-spacing: .1em を足す
- 見出しに line-height を書かない（normal のまま）
- 小見出しの左に border-left: 5px solid #ff000f を付ける
- ボタンは背景透明・1px solid #999999・border-radius: 900px・padding 6px 18px・12px。
  ただし min-height: 44px を足す（実サイトは 31px でタッチ基準を満たしていない）
- 展示室バッジは #0065b2 の面に白 14px、border-radius: 900px
- コンテナ 1280px、本文カラム 780px、左右の外側余白 28px
- カードは枠線も影も角丸も無し