東京都庭園美術館（Tokyo Metropolitan Teien Art Museum） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-01 / 対象: https://www.teien-art-museum.ne.jp/, /exhibition/

1. Visual Theme & Atmosphere

旧朝香宮邸というアール・デコ建築そのものが収蔵品である美術館。サイトもその性格を引き継ぎ、 白ではなく温かみのあるグレージュ（#ede8e2）をページ地色に敷き、写真をアーチ（半円）で 切り抜いて建物の開口部を思わせる構図をつくる。彩度は徹底して低く、差し色は「庭園」を想起させる 深緑と、展示種別を見分けるためのパステルの札だけ。

• デザイン方針: 静謐・端正。地色で品位をつくり、装飾ではなく余白と字間で格を出す
• 密度: 低〜中。カード間の余白が広く、1画面あたりの情報量を抑えたメディア型
• キーワード: アール・デコ、グレージュ、深緑、アーチ、字間の広い端正な組版

この美術館UIの特徴的な癖（他サイトと違う点）

1. ページ地色が白ではない。#ffffff はカード面にだけ使う。地に白を敷くと別サイトになる
2. letter-spacing が全要素 0.07em で統一されている（後述 3.5）。1箇所だけ 0.12em の例外がある
3. 角丸が 5px / 3px / 50px の3値しかない。中間の 8px・12px は使わない
4. ボタンの左端だけ丸い特殊形状（50px 2px 2px 50px）をヘッダーのユーティリティに使う

2. Color Palette & Roles

Brand（ブランド）

• Teien Green (#00695b): 深い緑。ロゴ、セカンダリボタンの文字、タブの選択状態、 「募集中」タグ。面として広く使わず、文字色・線・小さな面に使うのが原則
• Teien Mint (#7fbaaa): 明るい青磁色。フッター手前の帯、区切りの面。Teien Green の対
• Ink (#000000): 主要CTAの面色。本文色も純黒

Surface（面）

• Page Background (#ede8e2): ページ地色。温かいグレージュ。最も重要な1色
• Surface White (#ffffff): カード面
• Surface Warm (#f9f7f3): 開館情報などの薄い面
• Surface Mint (#f2f7f7): トピックス系セクションの面
• Surface Pink (#f7f1f0): 展覧会系セクションの面
• Surface Gray (#c6d3d5): フッターの面

Category Chips（展示種別の札。ピル形）

Label / Status（角丸3pxの札）

Semantic（意味的な色）

• Danger (#d82112): 重要なお知らせ。面色として使う唯一の高彩度
• Attention (#b25300): 「開催中」タグの文字＋枠。線と文字だけで、面は塗らない
• Success / Open (#00695b): 「募集中」タグ。Teien Green を流用

Neutral（ニュートラル）

• Text Primary (#000000): 本文。純黒を使う
• Text Accent (#00695b): 補助操作の文字（検索、セカンダリボタン）
• Heading Gold (#9b8821): セクション見出しの金（c-heading01 _gold）
• Border (#707070): ボタン・入力の枠
• Border Light (#d9d9d9): カードの枠
• Divider (#c6c6c6): リセットボタンの面

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（唯一の和文書体。明朝は使わない）
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ（UIラベル）: Josefin Sans
  • 「Language」「Follow Us」など、欧文だけで完結するUIラベル専用
  • 和欧混植の本文には使わない（本文の欧文は Noto Sans JP の欧文グリフに任せる）

3.3 font-family 指定

css/* 本文・見出し・すべての和文 */
font-family: "Noto Sans JP", sans-serif;

/* 欧文のみのUIラベル（Language / Follow Us 等） */
font-family: "Josefin Sans", sans-serif;

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

• 和文フォント1つ ＋ generic family のみ。プラットフォーム依存フォント（游ゴシック・ヒラギノ）を チェーンに入れていない。Webフォント単独で字形を固定する方針
• 欧文を先に置かない。Noto Sans JP の欧文グリフをそのまま使う

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

3.5 行間・字間

このサイトで最も重要な規則

• letter-spacing は全要素 0.07em で統一。16px なら 1.12px、13px なら 0.91px、 10px なら 0.7px と、サイズが変わっても比率が一定。実測でこれが崩れる箇所は2つだけ:
  • 下層ページのタイトル（c-heading02）のみ 0.12em。ここだけ大きく空けて格を出す
  • Josefin Sans の欧文ラベルのみ 0.05em（欧文は詰め気味）
• line-height は 1.5 が基準。日本語サイトとしてはやや詰まった値だが、 字間 0.07em が空いているぶん行が伸びるため、密度としては釣り合っている
• 例外: 下層タイトルのみ 1.43、コピーライトのみ 1.8

css/* サイト全体の基準 */
body {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.07em;
}

/* 下層ページのタイトルだけ字間を広げる */
.page-heading {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.12em;
}

3.6 禁則処理・改行ルール

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

• 展覧会名に ―（ダーシ）や ～ が多用されるため、約物を行頭に送らない設定が要る
• 「ルーシー・リー展―東西をつなぐ優美のうつわ―」のような長い正式名称は 2行に折り返す前提でカード高さを設計する

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使わない */

• palt は全要素で無効（実測 font-feature-settings: normal）
• 字詰めは palt ではなく letter-spacing: 0.07em で「空ける」方向に統一している。 palt を足すと字間の設計が崩れるので入れてはいけない

3.8 縦書き

該当なし。全ページ横組み。

4. Component Stylings

Buttons

Primary（チケット購入などの主要CTA）

• Background: #000000
• Text: #ffffff
• Padding: 11px 30px 12px（下1px多い非対称）
• Border Radius: 5px
• Font Size: 16px / Weight: 500 / Letter Spacing: 0.07em

Secondary（一覧へ、詳細へ）

• Background: transparent
• Text: #00695b
• Border: 1px solid #707070
• Padding: 11px 30px 12px（small: 10px 23px 11px / 15px）
• Border Radius: 5px

Reset（絞り込み解除）

• Background: #c6c6c6 / Text: #000000 / Radius: 5px / Padding: 10px 23px 11px

Utility（ヘッダーの検索・言語切替）— 左端だけ丸い特殊形状

• Border Radius: 50px 2px 2px 50px
• 言語: Background #000000 / Text #ffffff / Josefin Sans 12px / Padding 3px 20px 2px 24px
• 検索: Background rgba(255,255,255,.27) / Text #00695b / Border 1px solid #707070 / Padding 2px 10px 2px 24px

Tabs

• 選択: Background #00695b / Text #ffffff / Radius 60px / Padding 7px 30px 8px / 18px 500
• 非選択: transparent / Text #000000 / Border 1px solid #707070 / Radius 60px

Tags / Labels

Category Chip（ピル）

• Border Radius: 50px / Padding: 5px 12px 6px / 12px / Weight 500 / 0.07em
• 面色は 2章の表を参照

Label（角丸の札）

• Border Radius: 3px / Padding: 2px 10px 3px / 13px / Weight 500

Status Tag（枠だけのタグ）

• Border Radius: 3px / Padding: 5px 9px 6px / 12px / Weight 400
• Background: transparent、文字色と枠色を同色にする（開催中 #b25300 / 募集中 #00695b）

Meta Chip（会期・会場のラベル）

• Background: #ede8e2（＝ページ地色をそのまま札に使う）/ Radius 50px / Padding 2px 18px / 13px / Weight 500

Link Card

• Background: transparent / Border: 1px solid #d9d9d9 / Radius: 5px
• Padding: 6px 50px 6px 6px（右に矢印アイコンぶんの余白）
• 見出し #000000 16px / 補助テキスト #00695b 16px 500

Cards

• Background: #ffffff
• Border: なし（地色 #ede8e2 とのコントラストで面を見せる）
• Border Radius: 0px（カードは角丸にしない。角丸はボタンと札だけ）
• Shadow: 0 0 12px rgba(0,0,0,.1)（浮かせるカードのみ）

5. Layout Principles

Container

• Max Width: 1248px（本文コンテンツ）
• Wide: 1366px（メインビジュアル等の広い帯）
• Padding (horizontal): 24–40px

Spacing Scale

Grid

• ニュースカード: 3カラム / Gutter 30px
• 展覧会一覧: 2カラム（画像＋テキストの横並び）

アーチ（このサイト固有の造形）

メインビジュアルは上端が半円のアーチ形にクリップされる。アール・デコ建築の開口部の引用。

cssborder-radius: 50% 50% 0 0 / 40% 40% 0 0;

6. Depth & Elevation

影はほぼ使わない。面の区別は影ではなく地色（#ede8e2）と白（#ffffff）の差でつける。

7. Do's and Don'ts

Do（推奨）

• ページ地色に #ede8e2 を敷く。白地にしない
• letter-spacing は 0.07em を全体に効かせる。サイズごとにpx値を書かず em で指定する
• 緑（#00695b）は文字・線・小さな面に使う
• 展示種別の札は 2章の面色表どおりに塗り分ける
• 角丸は 5px（ボタン）/ 3px（札）/ 50px〜60px（ピル・タブ）の3系統に限る
• 主要CTAは黒（#000000）。緑をCTAの面色にしない

Don't（禁止）

• font-feature-settings: "palt" 1 を足さない。字間設計が壊れる
• カードに角丸をつけない（角丸はボタンと札の役割）
• 影を多用しない。面の分離は地色の差で行う
• 緑 #00695b を広い面に塗らない（帯に使うのは明るい #7fbaaa のほう）
• letter-spacing を 0 に戻さない。このサイトの品位は字間で成立している
• 本文の line-height を 1.5 より大きくしない（字間が広いぶん行が離れすぎる）

8. Responsive Behavior

Breakpoints

モバイルでの変化

• グローバルナビ → ハンバーガー（c-hamburger）
• 主要CTAは _fullSP で横幅いっぱいに伸びる
• 下層ページタイトルは 32px → 24px 前後に縮小（字間 0.12em は維持）

タッチターゲット

• 最小 44px × 44px。札・タグはリンクにしない（表示専用）ため対象外

9. Agent Prompt Guide

クイックリファレンス

Page Background: #ede8e2
Surface:         #ffffff
Text Color:      #000000
Brand Green:     #00695b
Accent Mint:     #7fbaaa
Primary CTA:     bg #000000 / text #ffffff / radius 5px
Font:            "Noto Sans JP", sans-serif
Latin UI Font:   "Josefin Sans", sans-serif
Body Size:       16px
Line Height:     1.5
Letter Spacing:  0.07em（全要素共通）
palt:            off

プロンプト例

東京都庭園美術館のデザインシステムに従って、展覧会一覧ページを作成してください。
- ページ地色: #ede8e2（白地にしない）。カード面のみ #ffffff
- フォント: "Noto Sans JP", sans-serif。font-feature-settings は normal（paltを使わない）
- letter-spacing: 全体に 0.07em。ページタイトルのみ 0.12em
- line-height: 本文 1.5
- ページタイトル: 32px / weight 500 / letter-spacing 0.12em
- 展覧会名: 24px / weight 500 / line-height 1.5
- 種別の札はピル（radius 50px, padding 5px 12px 6px, 12px/500）で
  展覧会 #f0df9d、トピックス #b5cbed、重要なお知らせ #d82112（文字は白）
- 「開催中」は面を塗らず、文字と枠を #b25300 の1px線で（radius 3px）
- 主要CTA: 背景 #000000 / 文字 #ffffff / radius 5px / padding 11px 30px 12px
- セカンダリ: 透明 / 文字 #00695b / 枠 1px solid #707070 / radius 5px
- カードは角丸なし、影なし
- コンテナ幅 1248px