東京オペラシティ アートギャラリー（Tokyo Opera City Art Gallery） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: Web フォントを 1 つも使わない。OS 標準の游ゴシック体に全面依存し、字間もいじらず、オレンジ1色で導線を引く美術館サイト
• 密度: 中程度。コンテナ 1100px の中央寄せ、白地に点線の罫を引いて区切る
• キーワード: 游ゴシック体、字間 normal、palt なし、オレンジ #e46a00、シアン #04a7c4、ボーダー 2px

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

1. Web フォントがゼロ。 document.fonts に載るのは Swiper のアイコンフォント（swiper-icons・unloaded）だけ。和文も欧文も 100% 端末のローカルフォントで描画される
2. letter-spacing は可視 300 要素中 298 要素が normal。 例外は 2 つだけ（ヘッダーのサイト名 0.28px、見出し「アクセス」1.728px）。このサイトは字を詰めも空けもしない
3. font-feature-settings は全要素 normal。palt を一切使わない。 前項と合わせて、和文組版に一切手を入れていない設計
4. ウェイトは 400 と 700 の2値だけ（可視 95 要素中 700 が 50、400 が 45）。中間ウェイトを使わない

CSS Custom Properties は 4 個しかなく、うち 2 個は Swiper 由来（--swiper-theme-color / --swiper-navigation-size）。自社トークンは --clientWidth: 1440px と --zindex-header: 10 の2つだけ。実装値そのものを仕様として扱うこと。

2. Color Palette & Roles

4色しかない。

オレンジ #e46a00 が導線、シアン #04a7c4 はヘッダー右上の2つのピル専用、紺 #001e46 は支援セクション専用。 シアンと紺を他の場所に持ち出さないこと。

点線の罫（このサイトの特徴的な区切り）

背景画像ではなく linear-gradient で描いた点線を使う（実測 3 箇所）。

cssbackground: linear-gradient(to right,
  #707070, #707070 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
background-size: 4px 1px;
background-repeat: repeat-x;

border-style: dotted ではなくグラデーションで描く。 2px の点 ＋ 2px の空きで、ブラウザ差の出ない均一な点線になる。

3. Typography Rules

3.1 和文フォント

游ゴシック体（OS ローカル）のみ。Web フォントを配信しない。

実測: 可視テキスト 95 要素のうち 95 要素すべてが同じ 1 本のスタック。

3.2 欧文フォント

専用の欧文フォントを持たない。 和文と同じスタックの先頭（游ゴシック体）でラテン文字も描画される。数字（2026.07.18［土］）も同様。

3.3 font-family 指定

このサイトのスタックは、Windows の游ゴシック問題を「フォールバック順」だけで解いている。

cssbody {
  font-family: 游ゴシック体, YuGothic,
               "游ゴシック Medium", "Yu Gothic Medium",
               游ゴシック, "Yu Gothic",
               "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
               Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

順序の意味

@font-face を使わずに Windows の游ゴシック問題を回避している。 このリポジトリに収録済みの3流儀（SmartHR の別名 AdjustedYuGothic、白鶴酒造の別名 MyYuGothicM、カリモク家具の Yu Gothic 上書き）とは別の、4つ目の流儀＝スタック順で解決する方式。 利点: CSS が1行で済み、@font-face の保守が要らない。 欠点: Windows で Medium が当たるため、macOS（Regular）と Windows（Medium）で太さが揃わない。太さを厳密に揃えたいなら @font-face 方式を選ぶこと。 末尾の メイリオ / ＭＳ Ｐゴシック は現行環境ではまず到達しない。 新規実装では落としてよい。

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

html / body ともに font-size: 16px。

サイズの分布（可視 95 要素）: 14px(28) → 16px(20) → 15px(11) → 18px(11) → 12px(9) → 13px(8)

ウェイトの分布: 700 が 50、400 が 45。中間は下層ページの h1 に 500 が 1 要素あるのみ。

見出しは 700、本文は 400 の2値で組む。 500 や 600 を使わない。

3.5 行間・字間

字間は使わない。

実測（可視 300 要素）:

letter-spacing を書かないこと。 このサイトの和文組版は「ブラウザ既定のまま」が仕様。 例外の 2 要素は狙ってというより実装上の揺れに近い。再現する必要はない。

行間は 1.67 でほぼ統一。

line-height: 1.67（= 16px に対する 26.6667px）を全体の既定にする。 和文サイトとしては標準的。 ボタンの高さは padding ではなく line-height で作られている（例: 16px の文字に line-height: 70px）。この手法をそのまま写すか、padding に置き換えるかは実装者の判断でよいが、混在させないこと。

3.6 禁則処理・改行ルール

• word-break / line-break の明示指定なし。ブラウザ既定の日本語禁則に任せる
• 日付は 2026.07.18［土］ - 09.23［水］ のように全角の白抜き角括弧 ［ ］ で曜日を囲む。ハイフンではなく ─（罫線素片）または - で期間をつなぐ
• 展覧会名の区切りに ─（U+2500） を使う（例: 種と根っこ ─ 都市の耕し方）

3.7 OpenType 機能

使わない。

実測: 可視 300 要素すべてが font-feature-settings: normal。palt も pkna も当たっていない。

このサイトは和文の字詰めを一切しない。 游ゴシック体のプロポーショナルでない約物をそのまま見せる設計で、字間 normal と一貫している。palt を足さないこと。

3.8 縦書き

使わない。 実測で writing-mode: vertical-rl の要素は 0。

展覧会ページに現れる縦組みのタイポグラフィは、展覧会側のキービジュアル画像であってサイトの実装ではない。

4. Component Stylings

Buttons

ボーダーは 2px が基本。 角丸は原則 0、ピルだけ例外。

css/* Primary（塗り）— 「オンラインチケット」「これまでのトピックス」 */
.btn-orange {
  background: #e46a00;
  color: #ffffff;
  border: 2px solid #e46a00;   /* ← 面色と同色の 2px 枠を必ず併せて指定 */
  border-radius: 0;
  font-size: 13px;             /* 大きいものは 16px */
  font-weight: 700;
}

/* Outline（白地）— 「お問い合わせフォーム」 */
.btn-orange-outline {
  background: #ffffff;
  color: #e46a00;
  border: 2px solid #e46a00;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
}

/* Ghost（オレンジ文字＋細枠）— 「アクセス」「館内マップ」 */
.btn-orange-ghost {
  background: transparent;
  color: #e46a00;
  border: 1px solid #e46a00;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
}

/* Reversed（写真の上）— 「オンラインチケット」 */
.btn-orange-rev {
  background: transparent;
  color: #ffffff;
  border: 2px solid #e46a00;   /* 枠だけオレンジ、文字は白 */
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
}

/* Navy（支援セクション）— 「Arts友の会」「東京オペラシティへのご支援」 */
.btn-navy {
  background: #ffffff;
  color: #001e46;
  border: 2px solid #ffffff;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
}

Pills

css/* ヘッダー右上の2つ — このサイトで唯一のシアン */
.pill-cyan {
  background: #04a7c4;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 400;
}

/* 写真の上の丸ボタン — 「開館スケジュール」 */
.pill-outline-white {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 400;
  line-height: 31px;
}

/* お知らせの種別 */
.pill-press {
  background: #ffffff;
  color: #e46a00;
  border: 1px solid #e46a00;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 700;
}

Badges

css/* 会場表示「会場：ギャラリー 1, 2」 */
.badge-place {
  background: #ffffff;
  color: #000000;
  border: 1px solid #cccccc;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 400;
}

角丸スケール（実測）

5. Layout Principles

Container

--clientWidth: 1440px が JS から設定される（レイアウト計算用）。

Grid

• 展覧会カードは 2〜3 カラム
• トピックスは日付＋本文の2カラム（日付列は左寄せ固定幅）で、行間を点線の罫で区切る

z-index

--zindex-header: 10（ヘッダーの固定表示）

6. Depth & Elevation

ほぼフラット。

カード・ボタンに影を足さないこと。 階層は 2px のオレンジ枠、点線の罫、#f7f7f7 の面、黒帯 #272727 / 紺帯 #001e46 で表す。

7. Do's and Don'ts

Do（推奨）

• Web フォントを読み込まない。 游ゴシック体のスタック 1 本で組む
• font-family の 3〜4 番目に "游ゴシック Medium", "Yu Gothic Medium" を置く（Windows で Regular が細すぎるのを避ける）
• letter-spacing を書かない（normal のまま）
• font-feature-settings を書かない（palt を使わない）
• ウェイトは 400 と 700 の2値で組む
• line-height: 1.67 を既定にする
• ボタンの枠は 2px。塗りボタンにも面色と同色の 2px 枠を併せて書く
• 区切り線は linear-gradient の点線（2px の点 ＋ 2px の空き）
• 日付は 2026.07.18［土］（全角白抜き角括弧）、期間の区切りは ─
• 色は黒・オレンジ・白・紺・シアンの5つに絞る

Don't（禁止）

• palt を当てない。 実サイトは 300 要素すべてが normal
• letter-spacing を足さない。 「和文だから字間を開ける」という一般則をこのサイトに持ち込まない
• Web フォント（Noto Sans JP など）を読み込まない。 ローカルフォント依存がこのサイトの設計
• font-weight に 500 / 600 を使わない（400 と 700 の2値）
• 角丸を既定にしない。 290/300 要素が 0px。丸くするのはピルとバッジだけ
• 影を足さない
• シアン #04a7c4 をヘッダーのピル以外に使わない。 紺 #001e46 を支援セクション以外に使わない
• 塗りボタンに border: none を書かない。 実サイトは面色と同色の 2px 枠を併せ持つ（ホバーで反転させるための実装）
• border-style: dotted で点線を引かない（グラデーション方式）
• スタック末尾の メイリオ / ＭＳ Ｐゴシック を必須と考えない。 新規実装では落としてよい

8. Responsive Behavior

Breakpoints

min-width と not all and (min-width) を併用する古典的な方式。 実測の出現回数順:

835px が PC / スマホの境界。 768px や 1024px ではない点に注意。

タッチターゲット

ボタンの高さは line-height（31px / 34px / 70px）で作られている。line-height: 70px の CTA は十分だが、line-height: 31px のピルは 44px に届かない。新規実装では padding で 44px 以上を確保すること。

フォントサイズの調整

html は 16px 固定。サイズは px で直接指定。

9. Agent Prompt Guide

クイックリファレンス

ブランドカラー: #e46a00（オレンジ・導線）
サブ: #04a7c4（シアン・ヘッダーのピル専用）/ #001e46（紺・支援セクション専用）
本文色: #000000（純黒）
背景: #ffffff / 面 #f7f7f7 / 黒帯 #272727
罫線: #cccccc（バッジ）/ 点線は #707070 のグラデーション

フォント: Web フォントなし。OS ローカルのみ
游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック,
"Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,
メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif

本文: 16px / line-height 1.67 / letter-spacing normal / weight 400
見出し: 38px・32px・24px・18px / weight 700 / line-height 1.67（38px のみ 1.0）
letter-spacing: 書かない
font-feature-settings: 書かない（palt なし）

ボタン枠: 2px solid
角丸: 0（既定）/ 12px・25px（ピル）/ 6px（バッジ）
影: なし
コンテナ: 1100px
ブレークポイント: 835px（PC/スマホの境界）

プロンプト例

東京オペラシティ アートギャラリーのデザインシステムで美術館サイトを作って。

- Web フォントは読み込まない。font-family は
  游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック,
  "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
  （3〜4番目に Medium を置いて Windows で細くなるのを避ける）
- letter-spacing は書かない（normal のまま）
- font-feature-settings も書かない（palt を使わない）
- font-weight は 400 と 700 の2値だけ
- line-height は 1.67 を既定に、38px の大見出しだけ 1.0
- 本文色は純黒 #000000、導線はオレンジ #e46a00
- ボタンは border: 2px solid #e46a00 を必ず併せ、border-radius は 0
  塗り = 背景 #e46a00 + 文字 #ffffff、白地 = 背景 #ffffff + 文字 #e46a00
- ヘッダー右上の2つだけシアン #04a7c4 の border-radius: 12px のピル
- 支援セクションは背景 #001e46 に白枠 2px の白ボタン
- 区切り線は linear-gradient(to right, #707070, #707070 2px, transparent 2px, transparent 4px)
  を background-size: 4px 1px / repeat-x で敷いた点線
- 影は使わない。コンテナは 1100px
- ブレークポイントは 835px を境界にする
- 日付は 2026.07.18［土］ の形式、期間の区切りは ─ を使う