京都市京セラ美術館（Kyoto City KYOCERA Museum of Art） DESIGN.md

京都市京セラ美術館（https://kyotocity-kyocera.museum/）のデザイン仕様書。 1933 年開館、日本で現存する最古の公立美術館建築。2020 年に青木淳・西澤徹夫の設計でリニューアルオープンした。 最大の特徴は、和文をモリサワの写植由来ゴシック 2 書体だけで組むこと。UI・本文は「中ゴシック BBB」、大見出しは「太ゴ B101」で、この 2 つ以外の書体を一切使わない。欧文専用スタックも持たない。 色は白地に朱 #c83c1e（チケット導線）と墨 #333333``**（それ以外すべて）。加えて、**金茶 #917d43/#b69f59/#cec093 の三段の金**が、開館情報・カレンダー帯・見出しに現れ、美術館らしい落ち着いた華を作る。 **box-shadow` は 1 つも使わない。奥行きは面色と 1px の罫だけで作る。 実サイトの computed style 実測（2026-08-11 取得。トップ＋「自主・共催の展覧会」ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地・角丸ゼロ・影ゼロ。展覧会のポスター画像が主役で、UI は完全に脇役に徹する。画像の色数が多いぶん、UI 側は墨と朱と金だけに絞る
• 京都市京セラ美術館について: 1933 年開館の公立美術館。帝冠様式の本館に現代的なガラスリボンを差し込んだ建築で知られる。サイトも「古い器に新しい中身」を踏襲し、書体は写植時代のモリサワ、レイアウトはフラットな現代 UI という組み合わせ
• 密度: 中〜高密度。トップは展覧会カルーセル → カレンダー → お知らせ の積層。展覧会カードは画像・バッジ・タイトル・会期・会場の 5 要素を詰めて並べる
• キーワード: 白地、中ゴシック BBB、太ゴ B101、朱 #c83c1e、墨 #333333、三段の金、radius 0 の矩形バッジ、影なし
• 特徴:
  • 和文はモリサワの 2 書体のみ。a-otf-gothic-bbb-pr6n（中ゴシック BBB）が UI・本文、a-otf-futo-go-b101-pr6n（太ゴ B101）が大見出し。どちらも写植時代からの基幹ゴシックで、ふところが狭く縦画が締まった古典的な骨格
  • 欧文専用のスタックを持たない。"Exhibitions" "Calendar" も同じ和文書体の欧文グリフで組まれる
  • letter-spacing が全要素 0.625px の固定値。em ではなく px で body に置き、そのまま継承させている。10px では 0.0625em、32px では 0.0195em と、サイズが上がるほど相対的に締まる
  • 例外は太ゴ B101 の見出しだけが 0.1em（32px → 3.2px / 28px → 2.8px）に開くこと。書体の切り替えと字間の開きが同時に起きる
  • line-height の基準は 1.8（10px → 18px / 16px → 28.8px）。大見出しだけ 1.5 に締める
  • box-shadow は 1 つも使わない（実測 0 件）
  • 主要 CTA だけが朱 #c83c1e。それ以外のボタン・バッジはすべて墨 #333333 の塗りか枠
  • palt は掛けない（font-feature-settings: normal）
  • CMS は WordPress だが、テーマの CSS 変数はほぼ既定値のまま。色は変数化されておらず、実測値がすべて

2. Color Palette & Roles

実測値。地は純白 #ffffff（pageBackground.resolved = rgb(255,255,255)）、テキストは墨 #333333。彩度を持つのは朱 #c83c1e と三段の金だけ。

Brand（ブランド）

• Vermilion (#c83c1e, rgb 200,60,30): チケット導線専用の朱。ヘッダー右上の「オンラインチケット購入・日時指定予約」CTA と、コレクションルームの見出し帯。サイトで唯一の暖色 CTAで、他の用途には出さない
• Sumi (#333333, rgb 51,51,51): 基本テキスト色にして、ソリッドボタン・バッジの面色。純黒ではない墨

Gold（金茶の三段）

美術館の「格」を作る色。明度の違う 3 段を役割で使い分ける。

• Gold Dark (#917d43, rgb 145,125,67): カレンダーセクションの帯（見出し「カレンダー / Calendar」の背景）。最も濃く、面として使う
• Gold Mid (#b69f59, rgb 182,159,89): 開館情報の文字色（「本日開館［2026年8月11日（火）］」）。パンくずの帯にも使う
• Gold Light (#cec093, rgb 206,192,147): 罫・仕切り・薄い面。実測で 135 要素に乗る最も出現回数の多い有彩色
• Gold Text (#9f8142, rgb 159,129,66): 施設案内カードの見出し（「ミュージアムカフェ ENFUSE」等）

Neutral（面・罫・文字）

• Background (#ffffff): ページ地色。純白
• Search Dark (#2f2d2c, rgb 47,45,44): 検索ボタンの面。#333333 よりわずかに暖かい墨
• Nav Text (#4f4a46, rgb 79,74,70): グローバルナビのラベル色。墨より一段淡い
• Beige Surface (#e9e3d8, rgb 233,227,216): パンくず・下層ページ上部の薄い面
• Calendar Cell (#eaeaea, rgb 234,234,234): カレンダーの休館日・祝日セル
• Badge Border (#858585, rgb 133,133,133): カウントダウンバッジ（「終了まで 43 日」）の枠線
• Muted (#999999, rgb 153,153,153): 非選択の言語ラベル
• Divider (#cccccc, rgb 204,204,204): 区切り罫
• Scrim (rgba(33,33,33,0.9)): モーダル背後のスクリム

Accent（差し色）

• Teal (#8cc6bf, rgb 140,198,191): ごく限定的に使う淡い青緑。ラーニング系の導線

Semantic（意味的な色）

カレンダーの日付表示で実際に使われている 3 色。そのまま意味色として流用できる。

• Holiday / Success (#38a169, rgb 56,161,105): 祝日ラベル（山の日・敬老の日 等）
• Danger / Error (#e53e3e, rgb 229,62,62): 日曜・春分の日など
• Info / Muted (#4b5563, rgb 75,85,99): 休館日ラベル

3. Typography Rules

モリサワの写植由来ゴシック 2 書体だけで組む。中ゴシック BBB が UI・本文、太ゴ B101 が大見出し。letter-spacing は px の固定値 0.625px を全体に継承させ、太ゴの見出しだけ 0.1em に開く。

3.1 和文フォント

• 本文・UI: 中ゴシック BBB（a-otf-gothic-bbb-pr6n）。モリサワの写植時代からの基幹ゴシック。ふところが狭く、縦画が締まり、小さく組んでも字面が崩れない。Pr6N は Adobe-Japan1-6 / JIS2004 字形
• 大見出し: 太ゴ B101（a-otf-futo-go-b101-pr6n）。中ゴシック BBB と対になる太ゴシック。角が立ち、ふところがさらに狭いため、大きく組むほど写植らしい強さが出る
• フォールバック: sans-serif のみ。"a-otf-gothic-bbb-pr6n", sans-serif という 2 段の極端に短いチェーンで、Web フォントが当たることを前提にしている
• ヒラギノ・游ゴシックを経由しない。Adobe Fonts が読み込めない環境ではシステム既定のサンセリフに落ちる割り切った設計
• 実装時は必ず Adobe Fonts のキットを読み込むこと。フォールバック側の設計がないため、外れると印象が大きく変わる

3.2 欧文フォント

• 欧文専用のスタックを持たない。"Exhibitions" "Calendar" "HOME" などの英字も中ゴシック BBB / 太ゴ B101 の欧文グリフで組む
• そのため和欧のトーンが完全に揃う。欧文だけ浮くことがない
• 等幅フォントは使わない
• preview.html での注記: a-otf-gothic-bbb-pr6n（中ゴシック BBB）/ a-otf-futo-go-b101-pr6n（太ゴ B101）は Adobe Fonts のドメインライセンスのため、ローカルの preview.html では表示できない。プレビューでは Google Fonts の Zen Kaku Gothic New（400 / 500 / 700） を代替に用いる。Zen Kaku Gothic New はモリサワ提供の書体で、中ゴシック BBB と同じ提供元・近い骨格のため印象が最も近い。実装時は必ず Adobe Fonts を読み込むこと

3.3 font-family 指定

css/* 本文・UI（中ゴシック BBB） */
font-family: a-otf-gothic-bbb-pr6n, sans-serif;

/* 大見出し（太ゴ B101） */
font-family: a-otf-futo-go-b101-pr6n, sans-serif;

/* body の既定 */
font-size: 16px;              /* ルート。10px はフッター等の最小指定 */
font-weight: 400;
line-height: 1.8;             /* 16px → 28.8px */
letter-spacing: 0.625px;      /* em ではなく px の固定値。全体に継承させる */
color: #333333;
font-feature-settings: normal;  /* palt は使わない */

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

• チェーンを伸ばさない。sans-serif で即座に締める
• ウェイトは 400 / 500 / 700 の 3 段のみ。太ゴ B101 は 500、中ゴシック BBB の強調は 700
• 太さの切り替えと書体の切り替えを重ねる。大見出しは「太ゴ B101 + weight 500 + ls 0.1em」の 3 点セットで作る

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

• letter-spacing は原則 0.625px の固定値。em ではないので、サイズが上がるほど相対的に締まる
• 例外は 3 つだけ: 太ゴ B101 の見出し（0.1em）、施設カード見出し（0.1em）、16px の小見出し・ナビ（0.8px = 0.05em）
• line-height: 1.8 が基準。大見出し・カードタイトルだけ 1.5 に締める
• ウェイトは 400 / 500 / 700 の 3 段。500 は太ゴ B101 専用

3.5 行間・字間

• 本文の行間 (line-height): 1.8（16px → 28.8px）。日本語サイトとしても広めで、白地の余裕を作っている
• 見出しの行間: 大見出しは 1.5（32px → 48px）に締める。太ゴ B101 の 28px 見出しだけ 1.8 のまま
• バッジの行間: 1.2（10px → 12px）。極端に締めて小さな矩形に収める
• 字間 (letter-spacing): 全体に 0.625px を継承させる方式
  • 本文 16px: 0.625px（= 0.039em）
  • 最小 10px: 0.625px（= 0.0625em）— 小さいほど相対的に開く
  • 太ゴ B101 の見出し: 0.1em（32px → 3.2px / 28px → 2.8px）
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• 字間は px の固定値で通す。em に変換して「見出しほど締める」設計に変えないこと。小さい文字ほど開き、大きい文字ほど締まるのがこのサイトの手触り
• 太ゴ B101 に切り替えるときだけ 0.1em に開く。書体・ウェイト・字間の 3 つを同時に切り替える
• 本文 1.8 を下回らない。詰めると白地の余裕が消える
• バッジは 1.2 まで締めてよい（矩形の高さを抑えるため）

3.6 禁則処理・改行ルール

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

禁則対象:

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

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

• 展覧会名は『浮世絵スーパークリエイター 歌川国芳展』のように長く、括弧・中黒・全角スペースを含む。括弧の前後と会期の「-」の前後で改行させない

• 会期表記（2026年07月18日 - 2026年09月23日）は 1 行に収め、折り返す場合は - の後で折る

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt は使わない。中ゴシック BBB・太ゴ B101 の等幅の字面をそのまま使う
• 写植由来の書体は元々ふところが狭いため、palt で詰めると窮屈になる。字間は letter-spacing を開く方向でのみ調整する
• 和欧が同一書体（和文書体の欧文グリフ）なので、kern に頼らずとも混植が破綻しない

3.8 縦書き

• 現行サイトは全面横組み（writing-mode: horizontal-tb）
• 展覧会ポスターや作品キャプションで縦組みを見せる場合は以下

csswriting-mode: vertical-rl;
text-orientation: mixed;
font-family: a-otf-gothic-bbb-pr6n, sans-serif;   /* 縦組みも同じゴシックで通す */
letter-spacing: 0.1em;   /* 縦組みでは開く */

• 明朝に切り替えない。このサイトは明朝を一切使わないため、縦組みもゴシックで通す

4. Component Stylings

Buttons

Primary（朱・矩形） — チケット導線専用

• Background: #c83c1e
• Text: #ffffff
• Padding: 8px 10px
• Border Radius: 0px
• Font: 中ゴシック BBB / 12px / weight 700 / lh 1.2 / ls 0.625px
• 末尾に外部リンクの ↗ を置く
• 例: 「オンラインチケット購入・日時指定予約」
• この朱はチケット以外に使わない

Fill（墨・矩形） — 一般的な遷移

• Background: #333333
• Text: #ffffff
• Border: 1px solid #333333（面色と同色の枠を明示的に置く）
• Padding: 12.8px 24px 12.8px 20.8px（左右非対称。左にアイコン分の余白）
• Border Radius: 0px
• Font: 中ゴシック BBB / 16px / weight 400
• 例: 「日別カレンダー」

Outline（白地・矩形）

• Background: transparent
• Text: #333333
• Border: 1px solid #333333
• Padding: 10px 0（幅はブロックとして与える）
• Border Radius: 0px
• Font: 中ゴシック BBB / 16px / weight 400
• 例: 「今年度の展覧会カレンダー」
• 濃い面の上では 1px solid #ffffff / 白文字に反転する（「お問い合わせ」）

Search（墨・角丸 5px）

• Background: #2f2d2c
• Text: #ffffff
• Padding: 0 24px
• Border Radius: 5px — 矩形の原則を破る数少ない例外
• Font: 中ゴシック BBB / 15px / weight 400

Language Toggle（薄墨・角丸 5px）

• Background: rgba(0,0,0,0.05)（選択中）/ transparent（非選択）
• Text: #999999（選択中）/ #333333（非選択）
• Padding: 7px 15px
• Border Radius: 5px（非選択は 4px）
• Font: 中ゴシック BBB / 14px / weight 400

Badges

Ticket Badge（墨・矩形）

• Background: #333333
• Text: #ffffff
• Border: 1px solid #333333
• Padding: 6.5px 10px
• Border Radius: 0px
• Font: 中ゴシック BBB / 10px / weight 400 / lh 1.2 / ls 0.4px
• 例: 「チケット購入」「入場自由」

Countdown Badge（白地・矩形）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #858585
• Padding: 5px 8px
• Border Radius: 0px
• Font: 中ゴシック BBB / 11px / weight 400
• 例: 「終了まで 43 日」
• 塗りバッジ（墨）と枠バッジ（白地）を隣に並べるのが展覧会カードの定型

Calendar Label（薄墨・矩形）

• Background: #eaeaea
• Text: 祝日 #38a169 / 日曜・特定祝日 #e53e3e / 休館日 #4b5563
• Padding: 0 2px
• Border Radius: 0px
• Font: 中ゴシック BBB / 10px / weight 400

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #333333
• Border Radius: 0px
• Padding: 12px 14px
• Font: 中ゴシック BBB / 18px / weight 400（検索入力は本文より大きい）
• Text Color: #333333 / Placeholder: #999999
• ラベルは 10px / #333333 で入力欄の上に置く

Cards（展覧会カード）

• Background: #ffffff
• Border: なし。影も罫もない
• Border Radius: 0px（画像も角丸にしない）
• Padding: 0（画像の下にテキストを直接置く）
• 構成: ポスター画像 → バッジ 2 つ（枠バッジ＋塗りバッジ）→ タイトル（16px / 700 / lh 1.5）→ 会期（14px）→ 会場（14px）
• カードの区切りはガター（20px）のみ。囲いを作らない

Section Band（金茶の帯）

セクションを面で区切るときの定型。

• Background: #917d43（Gold Dark）
• 見出し（和文）: 中ゴシック BBB / 32px / lh 1.4 / #ffffff
• 見出し（英字）: 中ゴシック BBB / 16px / #ffffff。和文の下に置く 2 段組
• 例: 「カレンダー / Calendar」

Info Bar（開館情報バー）

フッター上部に固定される帯。

• Background: #333333
• 主文: 中ゴシック BBB / 18px / weight 700 / #b69f59（Gold Mid）
• 時刻: 中ゴシック BBB / 16px / weight 400 / #ffffff
• 注記: 中ゴシック BBB / 10px / weight 400 / #ffffff
• 墨面に金の文字という組み合わせがこのサイトの「格」を作る

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px（サイト全体の標準コンテナ）
• 読み物カラム: 760px
• Padding (horizontal): 20〜40px
• ヘッダーは全幅固定。朱の CTA だけがコンテナ外の右上に接地する

Grid

• Columns: 展覧会カードは 5 カラムのカルーセル（横スクロール）、展覧会一覧は 1 カラムのリスト
• Gutter: 20px
• カレンダーは横スクロールの週表示（1 日 1 列）
• KV を持たず、トップは展覧会カルーセルから始まる

6. Depth & Elevation

実測の box-shadow は 0 件。このサイトは影を一切使わない。

• 奥行きは 白 #ffffff × 墨 #333333 × 金茶 #917d43 の面と**1px の罫（#cccccc / #858585）**のコントラストだけで表現する
• 落ち影・浮き上がりを作らない。カードもボタンも完全にフラット
• 前後関係が必要なときは面色を切り替える（白 → ベージュ #e9e3d8 → 墨 #333333）

7. Do's and Don'ts

Do（推奨）

• 和文は中ゴシック BBB（UI・本文）と太ゴ B101（大見出し）の 2 書体だけで組む
• 欧文も同じ和文書体の欧文グリフで組む。欧文専用のスタックを足さない
• letter-spacing は 0.625px の px 固定値を body に置き、全体に継承させる
• 太ゴ B101 に切り替えるときだけ 0.1em に開く。書体・weight 500・字間を同時に切り替える
• 本文の行間は 1.8、大見出しは 1.5、バッジは 1.2
• 彩度は朱 #c83c1e（チケット導線）と金茶の三段に絞る
• テキストは墨 #333333（純黒ではない）
• ボタン・バッジ・カード・画像はすべて radius 0
• 影を使わない。面色と 1px の罫だけで構成する
• 展覧会カードは「枠バッジ＋塗りバッジ」の 2 つを横に並べる
• 墨面に金の文字（#333333 × #b69f59）で「格」を作る
• Adobe Fonts のキットを必ず読み込む（フォールバックが sans-serif だけのため）

Don't（禁止）

• 明朝を使わない（このサイトは全面ゴシック。縦組みでも明朝に切り替えない）
• 3 つ目の和文書体を足さない（中ゴシック BBB と太ゴ B101 だけで階層を作る）
• 欧文専用フォント（Helvetica / Futura 等）を足さない（和欧のトーンが崩れる）
• letter-spacing を em に置き換えない（見出しほど締まる px 固定の手触りが失われる）
• 朱 #c83c1e をチケット以外に使わない（唯一の暖色 CTA としての意味が薄れる）
• 角丸を使わない（radius が許されるのは検索・言語切替の 5px のみ）
• 影を作らない（box-shadow の実測は 0 件）
• palt を掛けない、字間を詰める方向に動かさない
• 純黒 #000000 を使わない（テキストは墨 #333333）
• 金茶を広い面に多用しない（#917d43 はセクション帯 1 箇所に限定する）
• 本文の行間を 1.5 以下にしない
• カードを枠線で囲まない（ガターだけで区切る）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）。10px のバッジ（padding 6.5px）は装飾なので対象外、展覧会カードはカード全体をタップ領域にする
• カレンダーのセルは 1 日あたり最低 44px 幅を確保し、横スクロールさせる
• 朱の CTA はモバイルで高さ 48px の下部固定バーにする

フォントサイズの調整

• 本文 16px は据え置く（14px を下回らない）
• 太ゴ B101 の Page Title 32px → モバイルでは 22〜24px。letter-spacing: 0.1em は維持する
• 金茶帯の Section Title 32px → 22px
• バッジ 10px・キャプション 10px は縮めない
• letter-spacing: 0.625px の固定値と行間 1.8 はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:     #ffffff   （純白）
Text:           #333333   （墨。純黒は使わない）
Vermilion:      #c83c1e   （唯一の暖色 CTA。チケット導線専用）
Search Dark:    #2f2d2c   （検索ボタン面）
Nav Text:       #4f4a46   （ナビラベル）
Gold Dark:      #917d43   （カレンダー帯の面）
Gold Mid:       #b69f59   （開館情報の文字）
Gold Light:     #cec093   （罫・薄い面。最も出現回数が多い有彩色）
Gold Text:      #9f8142   （施設カード見出し）
Beige Surface:  #e9e3d8   （パンくず・下層ページ上部）
Calendar Cell:  #eaeaea   （休館日・祝日セル）
Badge Border:   #858585   （カウントダウンバッジの枠）
Muted:          #999999   （非選択ラベル）
Divider:        #cccccc   （区切り罫）
Teal:           #8cc6bf   （限定的な差し色）
Holiday:        #38a169 / Danger: #e53e3e / Info: #4b5563
JP Gothic:      a-otf-gothic-bbb-pr6n, sans-serif        ← 中ゴシック BBB（UI・本文）
JP Gothic Bold: a-otf-futo-go-b101-pr6n, sans-serif      ← 太ゴ B101（大見出し・weight 500）
Body:           16px / weight 400 / lh 1.8 / ls 0.625px
Page Title:     太ゴ B101 32px / weight 500 / lh 1.5 / ls 0.1em
Section Title:  太ゴ B101 28px / weight 500 / lh 1.8 / ls 0.1em
Card Title:     中ゴシック BBB 16px / weight 700 / lh 1.5 / ls 0.8px
Badge:          10px / weight 400 / lh 1.2 / ls 0.4px
Letter Spacing: 0.625px の px 固定値を継承（太ゴの見出しだけ 0.1em）
Feature:        font-feature-settings: normal（palt を使わない）
Radius:         0（5px は検索・言語切替のみ）
Shadow:         none（実測 0 件。影を使わない）
Container:      1280px（読み物 760px）

プロンプト例

京都市京セラ美術館のデザインシステムに従って、展覧会の一覧ページを作成してください。
- 和文は 2 書体だけ：UI・本文は a-otf-gothic-bbb-pr6n（中ゴシック BBB、無ければ
  Zen Kaku Gothic New → sans-serif）、大見出しは a-otf-futo-go-b101-pr6n（太ゴ B101）
- 欧文専用フォントは足さない。"Exhibitions" 等の英字も同じ和文書体の欧文グリフで組む
- letter-spacing は body に 0.625px を置いて全体に継承させる（em に変換しない）
- 太ゴ B101 の見出しだけ font-weight 500 / letter-spacing 0.1em に切り替える
- 本文は 16px / line-height 1.8、大見出しは line-height 1.5、バッジは 1.2
- 地は純白 #ffffff、テキストは墨 #333333（純黒は使わない）
- チケット導線だけ朱 #c83c1e（白文字・12px・weight 700・radius 0）。それ以外の
  ボタンは墨 #333333 の塗り（1px solid #333333 の枠を明示）かアウトライン
- 展覧会カードは「画像 → 枠バッジ（白地・1px solid #858585・11px）＋塗りバッジ
  （#333333・白文字・10px・lh 1.2）→ タイトル 16px/700 → 会期 14px → 会場 14px」
- セクションを面で区切るときは #917d43 の帯に白文字の 2 段見出し（和文 32px ＋ 英字 16px）
- 開館情報バーは #333333 の面に #b69f59 の金文字（18px / weight 700）
- border-radius はすべて 0（検索ボタンと言語切替のみ 5px）
- box-shadow は一切使わない。奥行きは面色と 1px solid #cccccc の罫だけで作る
- カードは枠線で囲まず、20px のガターだけで区切る
- コンテナ幅は最大 1280px、読み物カラムは 760px
- font-feature-settings は normal（palt は掛けない）