本日は開館しております(10:00−18:00)
TOKYO PHOTOGRAPHIC ART MUSEUM
language
ご来館のお客様は、こちらをご確認ください。

COLORSカラーパレット

地は白、文字は純黒。トップページの UI に有彩色は存在しない。--c1〜--c6 は下層のカテゴリ分類用に予約されたトークンで、ここに持ち込むとアクセシビリティ配色切替(青 / 黒 / 黄)が破綻する。

Ink
#000000
文字・罫・囲みのすべて
Paper
#ffffff
ページ地色・全ての面
Gray 1
#f5f5f5
--g1 ホバー・非活性
Gray 2
#ededed
--g2 区切りの面
Calendar Closed
#d9d9d9
カレンダーの休館日セル
Toolbar Active
#5c5c5c
a11y ボタンのアクティブ
Gray 3
#cccccc
--g3 一般の罫
Gray 5
#777777
--g5 補助テキスト
Caution
#e20c0c
唯一の意味を持つ有彩色

下層用の予約トークン(トップレベルの UI には出さない)

--c1 #1678bf
--c2 #66caf2
--c3 #d8695d
--c4 #50cc85
--c5 #b277e0
--c6 #e0c332

TYPOGRAPHYタイポグラフィ

和文は游ゴシック体 Pr6N(M / D)、欧文は Univers Next W04。letter-spacing は全域 −0.05em で、実測値がすべて基準サイズ × −0.05 で揃う。例外は 36px のセクション見出しの +1px だけ。太さは font-weight ではなくファミリ(M ↔ D)の切り替えで作る。

CURRENT
開催中の展覧会・上映
Section Heading · Univers 36px · ls +1px(唯一の正の字間) · lh 1.0 + 游ゴ D 18px · ls −0.05em
本日は開館しております(10:00−18:00)
Status · 游ゴ D · 24px · weight 400 · lh 1.2 (28.8px) · ls −0.05em
2026.6.18 — 2026.9.21
Date Display · Univers · 22px · lh 1.0 · ls −0.032em
ご来館のお客様は、こちらをご確認ください。
Lead · 游ゴ M · 18px · lh 1.6 (28.8px) · ls −0.05em
本文(既定)— 東京都写真美術館は、「写真・映像」を専門とする世界でも数少ない総合的な美術館です。収蔵作品は 3 万 7 千点を超えます。
Body · 游ゴ M · --fz 1.6rem (16px) · --lh 1.8 · ls −0.05em
ゆったり組む場合 — 東京都写真美術館は、「写真・映像」を専門とする世界でも数少ない総合的な美術館です。展示・収集・保存・研究、そして教育普及を柱としています。
Body (--lhL) · 16px · lh 2.4 — 解説文など特に読ませたい箇所に使う
ご利用案内 展覧会と上映 教育普及 コレクション
Nav Item · 游ゴ M · 15px · ls −0.05em · padding 0 20px
字間 normal ― 写真と映像を専門とする美術館
字間 −0.05em ― 写真と映像を専門とする美術館
Letter Spacing 比較 · 上が normal、下が原典の −0.05em。palt と重ねて掛けるのが TOP MUSEUM の組み方。ただし 10〜12px の小さい文字は −0.03em に緩めること

EXHIBITION組版サンプル

2026.6.18 — 2026.9.21

出光真子 おんなのさくひん ―ある映像作家の自伝

展覧会について

1970 年代から映像による表現を続けてきた出光真子の、国内では初となる大規模な回顧展です。初期の 8mm 作品から近年の映像インスタレーションまで、約 40 点を一堂に展示します。

作家は、家庭という私的な場に置かれた女性の時間を主題に据え、既存の映画文法から離れた語り口を選び取ってきました。本展では、上映プログラムとあわせて、制作ノートや絵コンテもご覧いただけます。開館時間・観覧料はこちら

関連イベント

会期中の毎週土曜日、担当学芸員によるギャラリートークを行います。申込は不要です。所要時間は約 45 分です。


COMPONENTSボタンと囲み

囲みは黒 2px の罫。ボタンは黒 1px アウトラインで角丸 0px。一覧リンクはボタン化せず、下線付きの黒文字リンクで並べる。実際に角丸が付くのは a11y ボタンの 2px だけ。

お知らせ囲み — border: 2px solid #000000 / border-radius: 0px / padding: 10px

CARDS & CALENDARカードとカレンダー

ポスター画像 → 展覧会名 → 会期(Univers 22px)の順に積む。角丸 0px、影なし、罫なし。カレンダーの休館日は面色 #d9d9d9 で示し、凡例を必ず併記する。

出光真子 おんなのさくひん
2026.6.18 —
コレクション展 光と時間
2026.7.4 —
恵比寿映像祭
2027.2.5 —
123456
78910111213
14151617181920
21222324252627
開館日休館日(毎週月曜)

FORMSフォーム

デフォルト / フォーカス / エラーの3状態。角丸 0px、枠は #cccccc、フォーカスは純黒。エラーは --cCaution を文字と 1px 罫に使い、面では塗らない。入力欄は font-feature-settings を normal に戻す。

正しい電話番号を入力してください。
送信する

ELEVATION奥行き

実測ではほぼ全要素が box-shadow: none。--bxs1 等のトークンは定義されているが使われていない。奥行きは「罫の太さ」で表現し、1px → 2px の 2 段しかない。

Level 0
none(既定)
Level 1
1px solid #cccccc(一般の罫)
Level 2
2px solid #000000(囲み)
Level 3
--bxs1(ドロップダウン等の例外用)

LAYOUTスペーシング

--s0 〜 --s19 = calc(0.5em * n)。em 基準なので、文字サイズ切替(大 / 小)で余白も一緒に伸縮する。任意の px 値を書かず、必ずトークンから選ぶ。コンテナは 1130px、左右パディング 15px(--spa)。

--s1 0.5em
--s2 1em
--s3 1.5em
--s4 2em
--s6 3em
--s8 4em
--s13 6.5em