ARTGALLERYTOKYO OPERA CITY 東京オペラシティ アートギャラリー Arts 友の会 ご支援のお願い お問い合わせ English
本日休館日 開館スケジュール
01 / Colors

黒・オレンジ・白と、用途が決まった2色

本文は純黒 #000000(可視 247 要素)。導線はすべてオレンジ #e46a00(文字 24 / 面 2 要素)。 シアン #04a7c4 はヘッダー右上の2つのピル専用、紺 #001e46 は支援セクション専用で、 どちらも他の場所に出てこない。

Ink
#000000
★本文・見出し。可視 247 要素。純黒を使う
Brand Orange
#e46a00
★導線のすべて。サイト名・リンク・CTA の枠と文字
Cyan
#04a7c4
ヘッダー右上のピル 2 つだけ。他に持ち出さない
Navy
#001e46
支援セクションの帯だけ。他に持ち出さない
Dark Band
#272727
「本日休館日」の黒帯
Surface
#f7f7f7
セクションの下地・フッター
Border
#cccccc
会場バッジの枠
Dotted Rule
#707070 / linear-gradient
★border-style: dotted ではなくグラデーションで描く

点線は linear-gradient(to right, #707070, #707070 2px, transparent 2px, transparent 4px) を background-size: 4px 1px / repeat-x で敷く。2px の点 + 2px の空きで、ブラウザ差の出ない均一な線になる。

Web フォントゼロ、字間ゼロ、palt なし

このサイトは Web フォントを 1 つも読み込まない。document.fonts に載るのは Swiper のアイコンフォント(unloaded)だけ。 letter-spacing は可視 300 要素中 298 要素が normal、font-feature-settings は全要素 normal。 和文組版に一切手を入れないのがこのサイトの仕様。

font-family — スタック順で游ゴシック問題を解く

位置名前当たる環境
1–2游ゴシック体 / YuGothicmacOS(Regular)
3–4"游ゴシック Medium" / "Yu Gothic Medium"Windows(Regular が細すぎるのを回避)
5–6游ゴシック / "Yu Gothic"Windows の保険
7–8"ヒラギノ角ゴ Pro W3" / "Hiragino Kaku Gothic Pro"游ゴシック非搭載の macOS
9–12Osaka / メイリオ / Meiryo / "MS Pゴシック"旧 Windows(現行ではまず到達しない)

@font-face を書かずに Windows の游ゴシック問題を回避する4つ目の流儀 (SmartHR の別名 AdjustedYuGothic、白鶴酒造の MyYuGothicM、カリモク家具の Yu Gothic 上書きに続く)。 CSS が 1 行で済む代わりに、macOS は Regular・Windows は Medium で太さが揃わない。

h2 / Section
38px · 700 · 1.0
letter-spacing normal
開催中の展覧会
h1 / Page
34px · 500 · 1.71
開催中の展覧会
h2
32px · 700 · 1.67
アートギャラリーについて
h2 / small
24px · 700 · 1.67
トピックス
展覧会タイトル / ナビ
18px · 700 · 1.67
種と根っこ ─ 都市の耕し方
Body
16px · 400 · 1.67
letter-spacing normal
開館時間:11:00 ─ 19:00(入場は 18:30 まで)。会期中の金曜・土曜は 20:00 まで開館しています。
Caption
14px · 400 · 1.71
最頻サイズ(28 要素)
浅野友理子《綯い交ぜの庭》2021 撮影:嵯峨倫寛
Label
13px · 700 · 1.67
これまでのトピックス
Footer
12px · 400 · 1.67
〒163-1403 東京都新宿区西新宿 3-20-2
★このサイトの仕様 — letter-spacing: normal / font-feature-settings: normal
「ほぼ、空」青木淳 + リチャード・タトル(2026年)
よくある和文の作法(palt + 字間)— このサイトでは使わない
「ほぼ、空」青木淳 + リチャード・タトル(2026年)

「和文だから字間を開ける」という一般則をこのサイトに持ち込まないこと。 ウェイトも 400 と 700 の2値だけ(可視 95 要素中 700 が 50、400 が 45)。500 / 600 を使わない。

03 / Exhibition

日付は [土]、期間は ─ でつなぐ

日付表記は 2026.07.18[土] のように全角の白抜き角括弧で曜日を囲む。 期間の区切りと展覧会名の区切りには ─(U+2500 罫線素片)を使う。

《Your Movement》2025 撮影:斉藤新
2026.07.18[土] ─ 09.23[水]
ほぼ、空:青木淳 + リチャード・タトル
会場:ギャラリー 1, 2 会場:ギャラリー 3, 4

建築家とアーティストが、ひとつの空間をめぐって応答を重ねる。 「ほぼ、空」という題のとおり、置かれるものより置かれない余白のほうが多い展示になります。

オンラインチケット

トピックス

2026.06.08[月] 10月からの企画展「種と根っこ ─ 都市の耕し方」開催
2026.03.25[水] 東京オペラシティ アートギャラリー「コレクションハイライト」公開
2025.12.11[木] アートギャラリー 2026年度展覧会ラインナップ
これまでのトピックス

枠は 2px、角丸は 0

塗りボタンにも面色と同じ色の 2px 枠を併せて指定する(ホバーで反転させるための実装)。 角丸が付くのはピル(12px / 25px)と会場バッジ(6px)だけで、可視 300 要素のうち 290 要素が border-radius: 0。

Arts 友の会 東京オペラシティへのご支援 プレスリリース 会場:ギャラリー 1, 2
東京オペラシティ メールニュース登録 最新情報などをeメールでお届けします(不定期) ›
東京オペラシティ文化財団を支える
Arts友の会 東京オペラシティへのご支援
05 / Forms

入力欄も矩形、フォーカスは 2px のオレンジ

既定・フォーカス・エラーの3状態。ボタンと同じく枠の太さで状態を示す。

全角でご記入ください
電話番号の形式が正しくありません

影は 1 要素だけ、コンテナは 1100px

可視 300 要素のうち 299 要素が box-shadow: none。階層は 2px のオレンジ枠、点線の罫、 #f7f7f7 の面、黒帯 #272727 と紺帯 #001e46 で表す。

100% — 黒帯・紺帯・フッター
1100px — 本文コンテンツ(最頻・6 箇所)
780px / 765px — 文章ブロック
ブレークポイント出現位置づけ
(min-width: 835px)30主ブレークポイント(PC 表示の開始)
(min-width: 768px)26タブレット
not all and (min-width: 835px)25835px 未満(スマホ)専用の打ち消し
not all and (min-width: 1080px)81080px 未満
screen and (min-width: 1025px) and (max-width: 1100px)4コンテナ幅の調整帯
screen and (max-width: 640px)3小型スマホ

PC / スマホの境界は 835px。768px でも 1024px でもない点に注意。 なお実サイトのボタン高さは padding ではなく line-height(31px / 34px / 70px)で作られている。 line-height: 31px のピルは 44px に届かないので、新規実装では padding でタッチターゲットを確保すること。