足立美術館（ADACHI MUSEUM OF ART） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 和文明朝で組んだ美術館。庭園の全画面映像に、細い明朝と広い字間を重ねる。角丸ゼロ・影ゼロ・罫線は 1px
• 密度: 低い。余白と行間で「間」をつくる。本文の行間は 2.0
• キーワード: しっぽり明朝、palt 全面、字間 1px/2px/4px の3段、和紙テクスチャ、角丸ゼロ

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

1. 和文の主役は明朝（Shippori Mincho）で、本文を weight 600 で組む（実測：明朝 125 要素 / Noto Sans JP 89 要素 / Libre Baskerville 14 要素）。しっぽり明朝は 400 が細いため、本文・小見出しは 600 を既定にしている。400 はヒーローの大きな惹句と展覧会名にだけ使う
2. 明朝とゴシックで「館の言葉」と「運用情報」を分けている。 見出し・本文・グローバルナビ＝明朝、日付・補足文・タグ・ドロワーナビ＝Noto Sans JP。読み物と案内板を書体で切り分ける設計
3. letter-spacing を 3 段で使い分ける（実測：normal 118 / 1px 99 / 2px 3 / 4px 7）。UI とゴシックには 1px、展覧会名には 2px、ヒーローと大見出しには 4px。青幻舎のような「palt だけで字間は足さない」型とは正反対の、空ける設計
4. font-feature-settings: "palt" は可視テキスト 228 件中 228 件に適用。字間を足したうえで、約物のアキは潰す

border-radius と box-shadow はトップページで可視 0 件（下層の丸数字だけが 50%）。

CSS Custom Properties は 49 個あるが、すべて WordPress / Gutenberg の既定値（--wp--preset--*）と Swiper の --swiper-theme-color: #007aff。足立美術館自身の設計トークンは 1 つも無い。 --swiper-theme-color の青は実サイトのどこにも出てこないので、変数を見て実装しないこと。以下はすべて computed style の実測値。

2. Color Palette & Roles

Primary（ブランドカラー）

このサイトに彩度の高いブランド色は無い。基調は墨と和紙で、金茶と緑が差し色として少量入る。

金茶が 3 値ある（#69592a / #907b3d / #927d3e）。1色に丸めない。 帯は #69592a、文字は #907b3d が実装の実態。

Neutral（ニュートラル）

• Text Primary (#121212): 本文・見出し（可視 108 要素）
• Text Secondary (#3f3f3f): 日付、補足文（可視 60 要素）。Noto Sans JP とセットで使われる
• Text on Dark (#d6d6d6): 暗い面・ドロワーナビの文字（可視 31 要素）
• Text on Fill (#ffffff): ヒーロー・タグ・縦タブ（可視 28 要素）
• Header Button (#e9e9e9): ヘッダーの チケット購入 アクセス の面。罫線は #dcdcdc
• Tag Fill (#5c5a56): 庭園 ご案内 のカテゴリタグ
• Border Light (#e1ded7): 実績バッジの枠。わずかに温かみのあるグレー
• Border (#d9d9d9) / Border on Dark (#4d4b4b)
• Overlay (rgba(255,255,255,0.5)): 写真の上に置く白半透明ボタン

Background

• ページ背景は白。html / body ともに塗り指定が無く、UA 既定のキャンバスがそのまま出る
• ヘッダーは和紙テクスチャの画像: background-image: url(.../common/background.jpg); background-repeat: repeat

抽出スクリプトの pageBackground.resolved はトップで rgb(59,58,54)、/gardens で rgb(0,0,0) を返すが、これはページ背景ではない。 どちらも上部ビューポートを覆う全画面の庭園映像／写真を拾っている（根拠が viewportTopBySample）。コンテンツ領域の地色は白で、色が付くのはヘッダーのテクスチャとヒーローだけ。この 1 点を取り違えると全体のトーンを暗く作ってしまう。

3. Typography Rules

3.1 和文フォント

• 明朝体（主役）: Shippori Mincho（しっぽり明朝、Google Fonts）。ナビ・見出し・本文
• ゴシック体（副）: Noto Sans JP（可変フォント 100–900）。日付・補足文・タグ・ドロワーナビ

ロード状況（実測 document.fonts）:

Shippori Mincho の 500 は宣言されているがロードされない（参照する要素が無い）。使えるのは 400 / 600 / 700 の3段。

3.2 欧文フォント

• セリフ: Libre Baskerville。Topics Gardens/日本庭園 などの欧文見出し専用（可視 14 要素）。和文明朝と並べても浮かない、コントラストの穏やかなセリフを選んでいる
• 本文中の数字・日付（2026.08.25）は Noto Sans JP の欧文グリフ

3.3 font-family 指定

css/* 見出し・本文・グローバルナビ（和文の主役） */
font-family: "Shippori Mincho", serif;

/* 日付・補足文・タグ・ドロワーナビ */
font-family: "Noto Sans JP", sans-serif;

/* 欧文見出し */
font-family: "Libre Baskerville", serif;

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

• 明朝には serif、ゴシックには sans-serif と generic が正しく対応している（欧文サンセリフに serif を書く誤りをこのサイトは犯していない）
• ただし Web フォントが落ちると generic 直行。ローカルの和文明朝（"Hiragino Mincho ProN", "Yu Mincho", serif）をチェーンに足しておく方が安全

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

ウェイトの分布: 400 が 121 件、600 が 98 件、700 は 9 件だけ。700 はグローバルナビのホバー・カレント表示に限る。

3.5 行間・字間

• 本文の行間は 2.00（実測 38 要素）。13px → 26px、14px → 28px、16px → 32px と比率で組まれている
• 展覧会名は 1.40（22px / 30.8px）。行間を詰めて塊に見せる
• 1行で終わるナビ・欧文見出しは 1.00
• 字間は 3 段:

字間は px の絶対値で宣言されている。 40px の惹句の 4px は 0.1em、80px の Display の 4px は 0.05em に相当し、em に読み替えると別物になる。 px のまま書くこと（森ビル・カリモク家具と同型の注意）。

3.6 禁則処理・改行ルール

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

• 展覧会名・会期は （月） ～ を含むため、行頭に括弧閉じが来ないよう line-break: strict を前提にする
• 明朝＋行間 2.0 の本文は 1 行 30〜40 字で折り返すのが実サイトの見え方

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• 可視テキスト 228 件中 228 件に適用。明朝・ゴシックの別なく全面
• palt で約物を詰めたうえで letter-spacing を足すのがこのサイトの組み方。palt だけで済ませない

3.8 縦書き

css/* サイド固定タブ「チケットの購入」 */
writing-mode: vertical-rl;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
background: #3b3a36;

• 実測 1 要素のみ（span、画面右端に固定されたチケット購入タブ）。縦組みは装飾的なアクセントとして 1 ヶ所だけ使う
• 残り 227 要素は horizontal-tb

4. Component Stylings

Buttons

Utility（ヘッダー：チケット購入 / アクセス）

• Background: #e9e9e9
• Text: #121212
• Border: 1px solid #dcdcdc
• Padding: 0 16px
• Border Radius: 0
• Font: Shippori Mincho 13px / 600

Vertical Tab（右端固定：チケットの購入）

• Background: #3b3a36
• Text: #ffffff
• Padding: 22px 0 0
• Border Radius: 0
• Font: 16px / 600、ラベルは writing-mode: vertical-rl の 14px / letter-spacing: 1px

Outline（実績バッジ：ミシュラン / 23YEARS）

• Background: transparent
• Text: #121212
• Border: 1px solid #e1ded7
• Padding: 0 24px 0 102px（左に画像分の余白）
• Border Radius: 0

Overlay（写真の上のリンク）

• Background: rgba(255, 255, 255, 0.5)
• Text: #121212
• Border: 1px solid #d9d9d9
• Font: 16px / 600

Outline on Dark（特別展リンク）

• Background: transparent / Text: #d6d6d6 / Border: 1px solid #4d4b4b / 16px / 400 / letter-spacing: 1px

Badges / Tags

カードのラベル帯は左端が透明のグラデーション。 写真の上に置いたとき、帯の始まりが硬く切れないための処理。単色の帯で代用すると印象が変わる。

Cards

• Background: 透明（白地がそのまま出る）
• Border: なし
• Border Radius: 0
• Shadow: なし
• 写真＋ラベル帯（左上に重ねる）＋展覧会名（22px / 400 / ls: 2px）＋会期（13px / 400 / ls: 1px）

5. Layout Principles

Spacing Scale

トークンは存在しない。実測から読み取れる実効スケール:

Container

• max-width: 1000px（本文ブロック）と max-width: 1280px（広いセクション）の2段
• ヒーローはビューポート全面（1440×900 実測）

Grid

• Topics は横並びのカード、庭園紹介は画像と本文の左右交互

6. Depth & Elevation

影は可視 0 件。角丸も（丸数字を除いて）0 件。 奥行きは写真と地色の明度差だけで表す。

WordPress 既定の --wp--preset--shadow--natural 等は宣言されているが1ヶ所も使われていない。

7. Do's and Don'ts

Do（推奨）

• 和文明朝（Shippori Mincho）の本文は weight 600 で組む。 400 は 22px 以上の見出し・惹句に限る
• 本文の line-height は 2.00。 13/26、14/28、16/32 と比率で揃える
• letter-spacing は px の絶対値で 1px / 2px / 4px の3段。 用途に応じて選ぶ（UI・ゴシック＝1px、展覧会名＝2px、大見出し＝4px）
• font-feature-settings: "palt" を全テキストに当てたうえで字間を足す
• 明朝とゴシックで役割を分ける。 館の言葉＝明朝、日付・補足・タグ＝Noto Sans JP
• 角丸は使わない（丸数字の 50% のみ例外）
• 写真に重ねる帯は片側を透明にする（linear-gradient(90deg, transparent, #69592a)）

Don't（禁止）

• ページ背景を暗く作らない。 抽出結果の pageBackground.resolved（rgb(59,58,54) / rgb(0,0,0)）は全画面ヒーローを拾った値で、コンテンツ領域の地色は白
• letter-spacing を em に読み替えない。 4px は 40px の見出しでは 0.1em、80px では 0.05em にあたる。px のまま宣言する
• 明朝の本文を weight 400 で組まない。 しっぽり明朝の 400 は細く、14px の本文では痩せて見える（実サイトも 600 を使っている）
• Shippori Mincho の 500 を使わない（宣言はあるが unloaded）
• 影を足さない・角丸を足さない
• 金茶を 1 色に丸めない（帯 #69592a / 文字 #907b3d）
• --swiper-theme-color: #007aff を設計色として読まない（ライブラリ既定値）
• 庭　園 のような全角スペースでの字送りを真似しない。 実サイトは 2 文字の項目を 4 文字幅に揃えるために全角スペースを文字列に入れているが、これは読み上げ・検索・コピーを壊す。同じ見た目は letter-spacing か固定幅で作ること

8. Responsive Behavior

Breakpoints

• メディアクエリはテーマ CSS に集約され、外部シートのため実測できた条件は限られる。実装上の基準は 1280px（広いセクション）/ 1000px（本文） のコンテナ幅
• ヒーローは全ビューポート追従

タッチターゲット

• ヘッダーのユーティリティボタンは高さ 約36px。44px に届いていない。 新規実装では 44px を確保すること
• 右端の縦組みタブはモバイルでも残すのがこのサイトの導線設計

フォントサイズの調整

• Display（80px）・Hero（40px）はビューポートに応じて縮める
• 本文 14px / 行間 2.0 はモバイルでも維持する（明朝の可読性がこの行間に依存している）

9. Agent Prompt Guide

クイックリファレンス

Text Primary:    #121212
Text Secondary:  #3f3f3f
Dark Fill:       #3b3a36
Gold (帯):       #69592a
Gold (文字):     #907b3d
Green (実績):    #007746
Background:      #ffffff（ヘッダーのみ和紙テクスチャ画像）
Font (和文):     "Shippori Mincho", serif  ※本文は weight 600
Font (ゴシック):  "Noto Sans JP", sans-serif
Font (欧文):     "Libre Baskerville", serif
Body Size:       14px
Line Height:     2.0
Letter Spacing:  normal（明朝本文） / 1px（ゴシック・UI） / 2px（展覧会名） / 4px（大見出し）
OpenType:        font-feature-settings: "palt"
Radius:          0
Shadow:          なし

プロンプト例

足立美術館のデザインシステムに従って、展覧会一覧ページを作成してください。
- 和文は "Shippori Mincho", serif。本文・小見出しは weight 600、展覧会名のみ 400
- 補足文・日付・タグは "Noto Sans JP", sans-serif に letter-spacing: 1px
- 全テキストに font-feature-settings: "palt"
- 本文の line-height は 2.0（14px なら 28px）
- 展覧会名は 22px / 400 / line-height 1.4 / letter-spacing 2px
- カードは写真の左上に「開催中」ラベル帯を重ねる。帯は
  linear-gradient(90deg, transparent 0%, #69592a 47%, #69592a 100%) で左端を透かす
- 角丸・影は一切使わない。地色は白、文字は #121212
- 欧文見出しは "Libre Baskerville", serif / letter-spacing 4px