Kanazawa21 DESIGN.md

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

対象サイト: https://www.kanazawa21.jp/ 金沢21世紀美術館は、SANAA（妹島和世＋西沢立衛）設計の円形の建築で知られる公立の現代美術館。 サイトも建築と同じく「白い地に、円と一色のオレンジ」で構成される。純白の面に作品写真を大きく置き、 UI の彩色はブランドオレンジ #f1832c 一色に絞る。ステータス・カテゴリーは丸ピル（border-radius: 900px）の ラベルで示し、遷移ボタンも同じピル形で統一する。円をモチーフにした形状言語がサイト全体を貫く。 実測はトップページ / 展覧会一覧に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白（#ffffff）の地に作品写真をフルブリードで敷き、UI の色はブランドオレンジ #f1832c 一色に限定する。面を分けるのは白と極薄のグレー（#f9f9f9 / #f6f6f6）だけ。彩度のある色は「オレンジのみ」という厳格な一色運用が、公立美術館らしい中立性と、企画展ごとに変わる作品写真の発色を両立させている
• 密度: 中密度。展覧会・イベント・お知らせを並列に並べるカード型の情報設計で、写真＋ピルラベル＋日付＋タイトルという最小構成のパネルを反復する
• キーワード: 白地 / ブランドオレンジ一色 / 円（ピル） / SANAA / 公共性 / 写真主役
• 形状言語: 円がモチーフ。ステータスラベル・カテゴリーラベル・遷移ボタンはすべて border-radius: 900px の完全なピル形。スライダーのページネーションは border-radius: 50% の正円。一方でヘッダーの主要 CTA（チケット購入）だけは border-radius: 0（角ゼロの帯）で、ピルの群れの中で異質な「行動の帯」として立つ
• 書体の性格: 和文は 游ゴシック体 をフォールバック先頭に置いた和文優先スタック。字間は基本 normal、palt は英字ラベル（Language / copyright）だけに限定的に適用。行間はサイト全体でほぼ 1.63 に統一されており（14px→22.82px, 16px→26.08px, 17px→27.71px, 25px→40.75px がすべて 1.63）、この一定比が誌面の均質なリズムを作っている

2. Color Palette & Roles

Base（下地）

• Background (#ffffff): ページ全体の下地。body の実測背景。純白。html は透明で、見える地色はこの純白
• Surface Tint (#f9f9f9): パネルの画像枠（.panel__img）の下地。写真が読み込まれる前の受け皿、および画像の余白を埋める極薄グレー
• Surface Sunken (#f6f6f6): フッター（.footer）およびスライダーのスロット下地。ページ末尾を一段沈める極薄グレー
• Overlay (rgba(255,255,255,0.9)): モーダル／トースト（休館のお知らせ）の面。白の半透明で、背後の作品写真をうっすら透かす

Brand（ブランドカラー）

• Brand Orange (#f1832c): rgb(241,131,44)。サイト唯一の彩度ある色。ロゴ「21」、主要 CTA「チケット購入はこちら」の帯背景、「開催中」ステータスラベルの面、カテゴリーラベルの罫と文字、スライダーの現在位置ドット、重要なお知らせの見出し、フッターのコピーライトまで、色が必要な場所はすべてこの一色で担う
• Brand Orange（面）: 背景 #f1832c × 文字 #ffffff
• Brand Orange（罫・文字）: 背景 #ffffff × 文字 #f1832c × 罫 1px solid #f1832c

Semantic（意味的な色）

このサイトは「エラー／警告／成功」の三色体系を持たず、ステータスをオレンジとグレーの2値で表現する。

• Active / Important (#f1832c): 「開催中」「重要なお知らせ」「有料」など、いま注意を向けるべき状態
• Inactive / Upcoming (#969696): rgb(150,150,150)。「開催予定」「無料」など、まだ始まっていない・強調しない状態。グレーの面塗り（#969696 × #ffffff）または罫（1px solid #969696 × 文字 #969696）で示す
• Danger: 専用色を持たない。フォームのエラー等が必要な場合は #d0021b 相当を最小限で足し、ブランドオレンジと混同させない

Neutral（ニュートラル）

• Text Primary (#323232): rgb(50,50,50)。見出し・本文の基調色。純黒ではなくわずかに退けた墨
• Text Base (#000000): body の継承色。ナビ等の一部リンクに残る
• Text on Dark (#ffffff): 作品写真の上に重ねるヒーローのタイトル・日付
• Text Muted (#969696): 補助テキスト、非強調ステータス
• Border (#a9a9a9): rgb(169,169,169)。遷移ボタン（.warrow-btn）の外周罫
• Border Light (#e8e8e8): スライダーのページネーション（非アクティブ）の罫

色に関する設計思想

• 基調は「純白 #ffffff」「墨 #323232」「ブランドオレンジ #f1832c」の3色。ここに極薄グレー2色（#f9f9f9 / #f6f6f6）とグレー2色（#969696 / #a9a9a9）が加わるだけ
• 彩度のある色はオレンジ1色に限る。展覧会ごとの作品写真が強い色を持つため、UI 側は徹底して無彩色＋オレンジに退く
• ステータスは「オレンジ＝いま起きていること」「グレー＝これから／補足」の2値で運用する
• 面塗り（#f1832c 背景）と罫（#f1832c 罫＋文字）を使い分け、同じオレンジで強度の階層を作る

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体（游ゴシック体 → YuGothic → 游ゴシック → "Yu Gothic" → "Hiragino Kaku Gothic ProN" → Meiryo）。Mac の游ゴシック（游ゴシック体 / YuGothic）を最優先し、Windows の游ゴシック（游ゴシック / Yu Gothic）、ヒラギノ角ゴ ProN、Meiryo と続く和文優先スタック。Web フォントは使っていない
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ: 和文スタック内の欧文グリフ（游ゴシックの Latin）をそのまま使う。欧文専用の指定を先頭に置かない
• Roboto: フッターのコピーライト（.copyright）のみ font-family: Roboto を単独指定。10px / font-feature-settings: "palt" で最小に置く
• セリフ / 等幅: 使用しない

代替フォントの注記: 游ゴシックは macOS / Windows にバンドルされる OS フォントで、Google Fonts には存在しない。Linux やフォント未搭載環境では表示できないため、preview.html では次のように扱う。

• 実スタックをそのまま先頭に置き、末尾に Google Fonts の Zen Kaku Gothic New を追加する（游ゴシックと同じく低コントラストで骨格の素直なヒューマニスト系ゴシックのため、印象が近い）
• Roboto は Google Fonts でそのまま利用可
• preview.html のインラインスタイル側のフォント指定も同じスタックに揃える
• Windows の游ゴシック問題: Windows の Yu Gothic は Regular が細すぎるため、font-weight: 400 の本文が痩せて見える。@font-face で Yu Gothic Medium を Regular にマッピングするか、本文を font-weight: 500 相当で組むことを検討する

3.3 font-family 指定

css/* 本文・UI（和文優先スタック） */
font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", YuGothic,
             "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

/* コピーライト等の最小欧文ラベル */
font-family: Roboto, sans-serif;

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

• 和文を先頭に置き、日本語の表示品質を最優先する（欧文グリフも游ゴシックの Latin をそのまま使う）
• Mac 名（游ゴシック体 / YuGothic）→ Windows 名（游ゴシック / Yu Gothic）→ ヒラギノ → Meiryo の順で、両 OS を確実にカバーする
• ウェイトは 400 と 700 の2段が基本。中間の 500 は英字ラベル（Language）にのみ現れる。階層はサイズとウェイトの2軸で作る

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

3.5 行間・字間

• 本文の行間 (line-height): 1.63。このサイトの決定的な特徴で、14px / 15px / 16px / 17px / 18px / 25px のいずれも 1.63 倍の行間で組まれる（22.82 / 24.45 / 26.08 / 27.71 / 29.34 / 40.75px）。日本語として十分な余裕を持ちつつ、情報量の多い美術館サイトが間延びしない絶妙な値
• 強調本文の行間: 2.0（16px で 32px）。お知らせ・コンセプト文など読ませる段落だけ広げる
• セクション見出しの行間: 1.2（26px で 31.2px）。見出しだけは詰める
• ナビ・ピルラベルの行間: 1.0。1行に収まる UI 要素は行間ゼロ相当にして高さを揃える
• 字間 (letter-spacing): 原則 normal。例外は 13px / 16px の一部テキストで 0.26px（= 0.02em）

ガイドライン:

• 本文・見出しを問わず line-height: 1.63 を既定にすれば、このサイトのリズムはほぼ再現できる
• 字間は開かない。階層はサイズ（12〜26px）とウェイト（400 / 700）で作る
• ピルラベル・ナビは line-height: 1.0 にし、高さは padding で制御する

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 展覧会タイトルは固有名詞・記号（「アペルト21」「路上、お邪魔ですか？」等）を含むため、word-break: break-all は使わず語のまとまりを保つ

3.7 OpenType 機能

css/* 既定 */
font-feature-settings: normal;

/* 英字の小ラベル・コピーライトのみ */
font-feature-settings: "palt";

• 本文・見出しは palt を使わない（font-feature-settings: normal）。和文の字送りはベタ組みのまま
• palt を当てるのは「Language」ラベル（12〜14px / weight 500 / オレンジ）と、フッターの Roboto コピーライト（10px）のみ。極小の欧文ラベルを詰めるためだけの限定運用
• この使い分け（本文ベタ組み／極小ラベルのみ palt）を守ると、公共施設らしい素直な読み味になる

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

形状の原則: ステータス／カテゴリーのラベルと遷移ボタンは border-radius: 900px の完全なピル。スライダーのドットは border-radius: 50% の正円。ヘッダーの主要 CTA だけ border-radius: 0 の角ゼロ帯。

Buttons

Primary CTA（チケット購入 / 角ゼロの帯）

• Background: #f1832c
• Text: #ffffff
• Border: なし
• Border Radius: 0px（ピルではない。ヘッダー右下に貼り付く帯として置く）
• Padding: 0 20px（高さは行ボックスで確保。実装上は 48px 前後）
• Font Size: 14px / Weight 700 / line-height 1.63
• 右端に >（シェブロン）を白で置く
• 例: 「チケット購入はこちら」

Secondary CTA（予約導線 / 反転）

• Background: #ffffff
• Text: #f1832c
• Border: なし
• Border Radius: 0px
• Padding: 0 20px
• Font Size: 14px / Weight 700
• 右端に > をオレンジで置く
• 例: 「スイミング・プール鑑賞の予約」。Primary の直下に積み、2段の帯として一体で見せる

Ghost Pill（一覧への遷移 / .warrow-btn）

• Background: #ffffff
• Text: #323232
• Border: 1px solid #a9a9a9
• Border Radius: 900px（完全なピル）
• Padding: 10px 55px 8px 33px（右に大きく振った非対称パディング。右端に置くシェブロンの分を空ける。上下も 10px / 8px と非対称で、游ゴシックの文字の光学的中心を合わせている）
• Font Size: 14px / Weight 700 / line-height 1.5
• 例: 「展覧会ページへ」「イベントページへ」「出版刊行物ページへ」。セクション末尾に必ず1つ置く

Labels / Badges（ピルラベル）

すべて共通で border-radius: 900px / padding: 5px 11px 4px / font-size: 13px / font-weight: 700。4バリアントで状態とカテゴリーを表す。

• padding が 5px 11px 4px と上下非対称なのは、和文の文字面をピルの視覚的中心に置くための調整
• 1枚のカードに「状態ラベル1つ＋カテゴリーラベル1〜2つ」を並べるのが基本

Pagination Dots

• Shape: border-radius: 50%（正円）
• 非アクティブ: Background #ffffff / Border 1px solid #e8e8e8
• アクティブ: Background #f1832c / Border 1px solid #e8e8e8
• ヒーロースライダーの現在位置表示。円の建築モチーフをそのまま UI に持ち込んだ要素

Inputs

• Background: transparent（下地の白をそのまま見せる）
• Border: なし（罫を持たず、アイコンとプレースホルダだけで入力欄を示す）
• Border Radius: 0px
• Padding: 0 0 0 30px（左に虫眼鏡アイコン分を空ける）
• Font Size: 20px（検索フィールド）/ Weight 400 / line-height 1.5
• Color: #000000
• フォーム用途では罫を足す場合、1px solid #a9a9a9、フォーカス時 1px solid #f1832c とし、ボタンの罫色に揃える

Cards（パネル）

• Background: #ffffff
• 画像枠: #f9f9f9（写真読み込み前・余白の受け皿）
• Border: なし
• Border Radius: 0px（カードは角ゼロ。丸いのはピルと円だけ）
• Shadow: なし（フラット）
• 構成: 画像 → ピルラベル群（状態＋カテゴリー）→ 日付（16px / 400）→ タイトル（17px / 700 / #323232）の順に上から積む

Toast / Modal

• Background: rgba(255,255,255,0.9)（背後の作品写真を透かす半透明の白）
• Border Radius: 0px
• 見出し: 16px / 700 / letter-spacing 0.02em
• 本文: 13px / 400 / line-height 1.6 / letter-spacing 0.02em
• 閉じるボタン: オレンジ #f1832c の ×
• 左上にオレンジのアクセント罫を短く置く

5. Layout Principles

Spacing Philosophy

純白の余白を広く取り、作品写真をフルブリードで見せる。セクションは罫ではなく余白と見出しで区切り、末尾に必ずピル形の遷移ボタン（.warrow-btn）を1つ置いて閉じる。フッターだけ #f6f6f6 に沈めてページの終端を示す。

Spacing Scale（推定）

（ピルラベルの 5px 11px、CTA の 0 20px、.warrow-btn の 33px / 55px から導いた実測ベースのスケール）

Container

• Max Width: 1280px（ヒーロースライダー・作品写真はフルブリード）
• Padding (horizontal): 20〜40px

Grid

• Columns: 12
• Gutter: 20〜30px
• 展覧会・イベントのパネルは 3〜4 カラム。関連施設（.tomonokai-panel）は 4 カラム
• ヘッダーは左にロゴ（円のシンボル）、右に「本日の美術館」カレンダーウィジェット（白い浮きカード）、右下に CTA の帯2段という非対称配置

6. Depth & Elevation

• 影はほぼ使わない。奥行きは「白の面」「極薄グレーの面（#f9f9f9 / #f6f6f6）」「作品写真の上の半透明白」で表現する
• 作品写真の上に置く要素は、影ではなく半透明の白（rgba(255,255,255,0.9)）で持ち上げる

7. Do's and Don'ts

Do（推奨）

• 下地は純白 #ffffff、文字は墨 #323232、彩色はブランドオレンジ #f1832c の1色だけにする
• ステータス・カテゴリーのラベルは border-radius: 900px の完全なピルにし、padding: 5px 11px 4px / 13px / 700 で統一する
• ラベルは4バリアント（面オレンジ＝開催中 / 罫オレンジ＝カテゴリー・有料 / 面グレー＝開催予定 / 罫グレー＝無料）で運用する
• 一覧への遷移は .warrow-btn（白地・1px solid #a9a9a9 の罫・ピル・右に振った非対称パディング 10px 55px 8px 33px）で統一し、セクション末尾に1つ置く
• ヘッダーの主要 CTA だけは border-radius: 0 の角ゼロ帯（#f1832c × #ffffff）にして、ピルの群れから際立たせる
• 行間は 1.63 を既定にする（14px→22.82px, 16px→26.08px, 17px→27.71px, 25px→40.75px）。読ませる段落だけ 2.0 に広げる
• 字間は normal。palt は極小の欧文ラベル（Language / copyright）にのみ限定して当てる
• カード・モーダル・入力欄は border-radius: 0 の角ゼロ・影なしにする
• 和文フォントは Mac 名 → Windows 名 → ヒラギノ → Meiryo の順で必ずフォールバックチェーンを書く

Don't（禁止）

• オレンジ以外の彩度ある色を UI に足さない（作品写真の発色を殺す）
• ステータスに赤・緑・青の三色信号を使わない（オレンジとグレーの2値で表す）
• カード・モーダルに角丸や影を付けない（丸いのはピルラベルと正円ドットだけ）
• ピルラベルを半端な角丸（4px や 8px）にしない（900px の完全なピルを守る）
• 本文・見出しに palt を当てない（ベタ組みが基調）
• 字間を開けない（normal。例外は 13px 前後の注釈の 0.02em のみ）
• 和文本文の line-height を 1.5 未満に詰めない（1.63 が基準）
• テキストに純黒 #000000 を多用しない（本文は #323232）
• 和文フォントを1つだけ指定しない（游ゴシックは Mac 名と Windows 名の両方が必要）

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

• 最小サイズ: 44px × 44px
• ピルラベルは 13px / padding 5px 11px 4px と小さいため、タップ対象にはしない（表示専用）。タップ領域はカード全体で取る

フォントサイズの調整

• 本文は 16px 基調。モバイルでも 14px 未満に落とさず、line-height: 1.63 を保つ
• ヒーローのタイトル（25px）はモバイルで 18〜20px に縮小。会期表示（25px / 400）は 14〜16px に
• セクション見出し（26px / 700）はモバイルで 20px 程度に
• ピルラベル（13px）はモバイルでも縮小しない（可読性の下限）

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff（純白）
Surface Tint:    #f9f9f9（画像枠）
Surface Sunken:  #f6f6f6（フッター）
Brand Orange:    #f1832c（サイト唯一の彩色）
Text Primary:    #323232
Text Muted:      #969696
Border:          #a9a9a9
Border Light:    #e8e8e8
Font:            游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", YuGothic,
                 "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
                 （→ Zen Kaku Gothic New 代替）
Font (label):    Roboto（10px コピーライトのみ）
Body Size:       16px
Line Height:     1.63（全体の既定）/ 2.0（読ませる段落）/ 1.2（セクション見出し）
Letter Spacing:  normal（例外: 13px 注釈の 0.02em）
palt:            off（例外: 極小欧文ラベルのみ on）
Radius:          900px（ピルラベル・遷移ボタン）/ 50%（ドット）/ 0（カード・CTA帯・入力欄）
CTA(帯):         #f1832c / #ffffff / radius 0 / padding 0 20px / 14px 700 / 右にシェブロン
CTA(反転帯):     #ffffff / #f1832c / radius 0 / padding 0 20px / 14px 700
Ghost Pill:      #ffffff / #323232 / 1px solid #a9a9a9 / radius 900px / padding 10px 55px 8px 33px
Label 開催中:    #f1832c / #ffffff / 1px solid #f1832c / radius 900px / padding 5px 11px 4px / 13px 700
Label カテゴリー: #ffffff / #f1832c / 1px solid #f1832c / 同上
Label 開催予定:  #969696 / #ffffff / 1px solid #969696 / 同上
Label 無料:      #ffffff / #969696 / 1px solid #969696 / 同上
Card:            radius 0 / shadow なし / 画像枠 #f9f9f9

プロンプト例

金沢21世紀美術館のデザインシステムに従って、展覧会一覧セクションを作成してください。
- 下地: #ffffff（純白）、画像枠: #f9f9f9、文字: #323232
- 彩色はブランドオレンジ #f1832c の1色のみ。他の彩度ある色は使わない
- フォント: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
- 本文 16px / line-height 1.63、字間 normal、palt off
- 各カードは「画像 → ピルラベル群 → 日付 16px/400 → タイトル 17px/700」の順で積む
- ピルラベルは border-radius 900px / padding 5px 11px 4px / 13px / 700 で統一
  - 開催中 = #f1832c 面 × #ffffff 文字
  - 開催予定 = #969696 面 × #ffffff 文字
  - カテゴリー（イベント・トーク等）= #ffffff 面 × #f1832c 文字 × 1px solid #f1832c
  - 無料 = #ffffff 面 × #969696 文字 × 1px solid #969696
- カード自体は border-radius 0・影なし・罫なしのフラット
- セクション末尾に「展覧会ページへ」の Ghost Pill（白地 / 1px solid #a9a9a9 / radius 900px /
  padding 10px 55px 8px 33px / 14px 700 / 右端にシェブロン）を1つ置く

OS フォントが使えない環境での代替指針

• 游ゴシック（游ゴシック体 / Yu Gothic）は macOS / Windows の OS フォントで、Google Fonts には存在しない
• 代替は Zen Kaku Gothic New（低コントラストで骨格の素直なヒューマニスト系ゴシック。游ゴシックに印象が近い）
• Roboto は Google Fonts でそのまま利用可
• 代替フォントでも「純白の地・オレンジ一色の彩色・完全なピル形のラベル・角ゼロのカード・影なし・行間 1.63・字間 normal」を守れば世界観は再現できる