熊本市現代美術館（CAMK） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地に黒の文字、アクセントは緑 1 色。 展覧会のビジュアルを主役にし、UI は徹底して引く。見出しは大きく細く（weight 300）、本文は行間 2.00 でゆったり流す
• 密度: 中。トップは展覧会・イベント・コレクションの定義リストを積む構成。可視テキスト 154 要素のうち 117 要素が同じ字間で組まれている
• キーワード: 10px ルート、細い大見出し、CAMK グリーン、不透明度で作る階層、角丸 4px

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

1. html { font-size: 10px }。 rem は ×10 で読む。1.45rem = 14.5px、1.575rem = 15.75px のように 0.5px / 0.25px 刻みの半端なサイズが並ぶのはこのため。px 換算を 16px 基準でやると全部ずれる
2. 字間は rem 宣言の 5 段階。 既定は 0.01rem（= 0.1px）で可視 356 / 117 要素。詰めるのは ヘッダーナビ -0.03rem（-0.3px、37 要素） と 展覧会の会期表示 -0.05rem（-0.5px、128 要素） だけ。px に読み替えず rem のまま書く
3. 大見出しが weight 300（Light）。 h2 32px / 300、h3 28px / 300。太字で強くするのではなく、大きく細くして静かにする。逆に小さいラベルほど 500 / 600 と太くする
4. 黒は 1 色だが、不透明度で 7 段階に割っている。 rgba(0,0,0,.9) → .85 → .8 → .75 → .65 → .55 → .5。グレーの hex を増やさず alpha で階層を作る

font-feature-settings: "palt" は 0 要素（CSS 全文でも 0 回）。CSS Custom Properties も 0 個（customPropertiesSummary.own = 0）。設計トークンは持たず、CSS に直値で書く実装。

2. Color Palette & Roles

Primary（ブランドカラー）

緑は「開いている／今やっている」を示す色。 日付・会期・カテゴリ・リンク誘導がすべて緑で、それ以外の文字は黒。装飾として緑を撒かない。

Neutral（ニュートラル）

このサイトのグレーは hex ではなく rgba(0,0,0,α)。

3. Typography Rules

3.1 和文フォント

• ゴシック体（サイト唯一の和文書体）: Noto Sans JP（Web フォント。300 / 400 / 500 / 600 を loaded 済み）
• 明朝体は使わない。 サイト全体で 1 要素も無い
• フォールバックは sans-serif のみ。ヒラギノや游ゴシックを書かない割り切った 2 段スタック

3.2 欧文フォント

• Lato（Web フォント。300 / 400 を loaded 済み）。日付・時刻・MENU など数字と英字だけに使う
• 和文より先に置く（Lato, "Noto Sans JP", sans-serif）。Lato に無いグリフは Noto Sans JP が受ける

3.3 font-family 指定

css/* 本文・見出し・UI（サイト既定） */
font-family: "Noto Sans JP", sans-serif;

/* 日付・時刻・英字ラベル */
font-family: Lato, "Noto Sans JP", sans-serif;

/* ルート。rem はすべて ×10 で読む */
html { font-size: 10px; }

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

• 和文は 2 段だけ。 "Noto Sans JP", sans-serif 以上は書かない
• 欧文を混ぜたい箇所だけ Lato を先頭に足す。 和文は必ず後ろに残す（Lato, "Noto Sans JP", sans-serif）
• html { font-size: 10px } を先に決める。 これを 16px のまま 1.45rem と書くと 23.2px になり、設計が崩れる

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

rem 宣言（×10）と px 実測を併記する。

3.5 行間・字間

• 本文の行間: 2.00（15px / 30px）。トップ・下層とも最多（75 要素）。日本語の読み物として標準〜広い
• 一覧の行間: 1.60（134 要素）／ナビ 1.80（69 要素）
• 見出しの行間: 1.20〜1.30（32px の展覧会名で 1.20）。サイズが大きいほど詰める
• 字間は rem で 5 段階:

ガイドライン:

• 字間は rem で書く。 html { font-size: 10px } があるので 0.01rem = 0.1px。em にも px にも読み替えない
• 既定は 0.01rem。 「字間を触らない」ではなく「ごく僅かに開ける」が既定値
• 詰めるのはナビと日付だけ。 本文を詰めない
• 見出しは太くせず、大きく細く（32px / 300）。700 を使わない（サイト全体で 0 要素）

3.6 禁則処理・改行ルール

• 展覧会名は折り返す前提（32px / line-height 1.20）
• 会期は 2026.9.19（土）〜 11.29（日） を 1 行で保つ（-0.05rem で詰めるのはこのため）
• word-break: break-all は使わない

3.7 OpenType 機能

このサイトは font-feature-settings を一切使っていない（実測 0 要素 / CSS 全文で palt 0 回）。

• palt を足さないこと。 括弧の多い会期表記（2026.9.19（土））は letter-spacing: -0.05rem で詰めている。同じ場所に palt を重ねると詰まりすぎる

3.8 縦書き

該当なし（typography.verticalWriting = 0 件）。展覧会のメインビジュアルは画像。

4. Component Stylings

border-radius は 4px が既定（可視 36 / 19 要素）。バッジは 2〜3px、丸ボタンは 50px。

Buttons

Notice Bar（お知らせ）

• Background: #5bb016 / Text: #ffffff
• Padding: 8px 15px
• Border Radius: 2px
• Font: 18px / weight 500 / line-height 1.00 / letter-spacing 0.01rem

Status Ribbon（開催中／入場無料）

• Background: #5bb016 / Text: #ffffff
• Padding: 6px 10px
• Border Radius: 0px 0px 4px 4px（画像の下端に貼り付く形）
• Font: 15px / weight 400

Card Link（開催予定 … ギャラリー）

• Background: transparent / Text: #000000
• Border: 1px solid transparent（枠は持つが透明。ホバーで出す設計）
• Padding: 10px 10px 20px / Border Radius: 0px
• Font: 15px / weight 400

Close Button（検索）

• Background: #eeeeee / Text: #000000
• Border Radius: 50px / Font: 16px

Carousel Arrow

• Background: rgba(0, 0, 0, 0.2) / Border Radius: 50% / Padding: 12px 14px
• 非選択のものは rgba(0, 0, 0, 0.15) / border-radius: 50px

Badges / Chips

Point Badge（みどころ１）

• Background: #333333 / Text: #ffffff
• Padding: 8px 10px
• Border Radius: 3px
• Font: 12px / weight 500 / letter-spacing 0.01rem

Cards

• Background: #ffffff / Border Radius: 4px
• Shadow: none（サイト全体で影は 0 種）
• カードの区別は画像と余白。罫線も影も使わない

5. Layout Principles

Spacing Scale

Container

• Max Width: 1290px（CSS 全文で 3 回。最頻）
• 本文カラム: 700px / 中カラム: 652px / 狭カラム: 528px
• サイドの画像枠: 344px / 400px

Grid

• トップは「カテゴリ見出し（緑・13px）／タイトル（15px）／説明（13px）」の定義リストを縦に積む
• 展覧会ページは「作家名の縦リスト（左）／メインビジュアル（右）」＋ページ内アンカー 4 本

6. Depth & Elevation

影を使わないサイト。 階層は文字の不透明度（rgba(0,0,0,.9) 〜 .5）と緑か黒かで作る。カードに box-shadow を足さない。

7. Do's and Don'ts

Do（推奨）

• html { font-size: 10px } を先に書く。 rem は ×10
• 字間は rem（既定 0.01rem / ナビ -0.03rem / 会期 -0.05rem）
• 大見出しは 32px / weight 300、小さいラベルほど 500〜600 と太くする
• 本文は 15px / line-height 2.00
• 日付・時刻・英字は Lato を先頭に（Lato, "Noto Sans JP", sans-serif）
• グレーは rgba(0,0,0,α) で作る（.9 .85 .8 .75 .65 .55 .5）
• 緑 #5bb016 は**「開いている・今やっている・次に読む」**にだけ使う
• border-radius は 4px を既定、バッジは 2〜3px

Don't（禁止）

• font-feature-settings: "palt" を足さない（実サイトは 0 要素。会期は -0.05rem で詰めている）
• rem を 16px 基準で換算しない（1.45rem は 23.2px ではなく 14.5px）
• 字間を px や em に読み替えない（実サイトは全部 rem）
• 見出しに weight 700 を使わない（サイト全体で 0 要素。最大でも 600）
• 本文を詰めない（詰めるのはナビと日付だけ）
• グレーの hex（#666666 #999999）を足さない（alpha で作る）
• カードに影や枠線を足さない（実サイトは影 0 種）
• 明朝体を混ぜない（サイト全体で 0 要素）

8. Responsive Behavior

Breakpoints

モバイルファースト。min-width で積み上げる。

タッチターゲット

• 通知バー（18px + 上下 8px = 34px 高）、ステータス帯（15px + 上下 6px = 27px 高）は 44px を下回る
• モバイルではこれらを 44px まで伸ばすこと。カルーセルの丸ボタン（12px 14px の padding）も同様

フォントサイズの調整

• 本文 15px、ナビ 14.5px はブレークポイントをまたいで固定
• 展覧会名 32px はモバイルで縮む。縮めても weight 300 と line-height 1.20 は維持する

9. Agent Prompt Guide

クイックリファレンス

CAMK Green: #5bb016
Dark Chip:  #333333
Text:       #000000
Grays:      rgba(0,0,0,.9) / .85 / .8 / .75 / .65 / .55 / .5
Surface:    #eeeeee
Background: #ffffff

html { font-size: 10px }   ← rem は ×10
Font (JP): "Noto Sans JP", sans-serif
Font (EN): Lato, "Noto Sans JP", sans-serif

Body:     1.5rem (15px) / weight 400 / line-height 2.00 / letter-spacing 0.01rem
Nav:      1.45rem (14.5px) / weight 400 / line-height 1.80 / letter-spacing -0.03rem
Title:    3.2rem (32px) / weight 300 / line-height 1.20
Date:     Lato 2.4rem (24px) / weight 600 / letter-spacing -0.05rem
Border Radius: 4px（バッジ 2〜3px / 丸ボタン 50px）
Shadow: none
Container: 1290px（本文 700px）
Breakpoints: min-width 600 / 768 / 960 / 1280px
palt: 使わない / weight 700: 使わない

プロンプト例

熊本市現代美術館（CAMK）のデザインシステムに従って、展覧会詳細ページを作成してください。
- html { font-size: 10px } を先に書き、以降のサイズはすべて rem（×10）で指定する
- font-family は "Noto Sans JP", sans-serif。日付と英字だけ Lato, "Noto Sans JP", sans-serif
- 展覧会名は 3.2rem / weight 300 / line-height 1.20（太字にしない）
- 本文は 1.5rem / line-height 2.00 / letter-spacing 0.01rem
- ヘッダーナビは 1.45rem / letter-spacing -0.03rem、会期は Lato 2.4rem / weight 600 / letter-spacing -0.05rem
- font-feature-settings: "palt" は使わない
- アクセント色は #5bb016 のみ。開館情報・カテゴリ見出し・「詳しく見る」に使う
- 本文以外のグレーは rgba(0,0,0,0.9) 〜 rgba(0,0,0,0.5) の不透明度で作る（グレーの hex を足さない）
- border-radius はカード 4px、バッジ 2〜3px。box-shadow は使わない
- コンテナ 1290px、本文カラム 700px、ブレークポイントは min-width 600/768/960/1280px