カレンダー 7 / 27 10:00 – 18:00 チケット アクセス 検索 Language
THE NATIONAL
ART CENTER, TOKYO
国立新美術館
波打つガラスのカーテンウォール(建築ビジュアル)

休館日、何してる?
展示室で生まれる、まだ誰も見ていない展覧会

2026.7.31(金) - 8.6(木) 企画展示室 1E
検索 展覧会・イベントをもっと見る

当サイトはお客様の利便性の向上等のため、Cookie を使用しております。詳しくはプライバシーポリシーをご確認ください。

同意する
01 — COLORS

カラーパレット

色は実質 2 色。墨 #222222 がテキストとヘッダー黒帯を兼ね、朱赤 #d7322d が唯一のアクセントとして検索ボタンとアクティブ状態にだけ現れる。面は #eeeeee、罫は #cccccc。純黒 #000000 は使わない。

Sumi / Ink
#222222
テキスト基本色/ヘッダー黒帯の面色
NACT Red
#d7322d
唯一のアクセント。検索・アクティブ状態
Surface Gray
#eeeeee
セクション面・パンくず帯
Border
#cccccc
入力欄・アウトライン・非活性タグの枠
Divider
#dddddd
区切り線
Sub Text
#666666
日付・注釈・カードのメタ情報
Calendar Navy
#000019
カレンダーパネルの面色
Pale Red Tint
#fceaea
選択状態・ハイライト行の面
Background
#ffffff
ページ地色(純白)

02 — TYPOGRAPHY

タイポグラフィ

和文は「ヒラギノ角ゴ Pro W3 → Noto Sans JP」(ProN ではなく Pro)。UI 欧文だけ Roboto。行間 1.7 が見出しにも本文にも一律で効き、letter-spacing と font-feature-settings はともに normal。ウェイトは 400 / 700 の二極。

国立新美術館
Site Title · 32px · weight 700 · lh 1.7 · ls normal
休館日、何してる? 展示室で生まれる展覧会
Page Title · 30.4px(1.9rem) · weight 700 · lh 1.26 ※唯一 1.7 でない見出し
展覧会・イベント
Heading 1 · 28.8px(1.8rem) · weight 700 · lh 1.7
開催中の企画展
Heading 2 · 24px(1.5rem) · weight 700 · lh 1.7
アートライブラリーのご案内
Heading 3 · 22.4px(1.4rem) · weight 700 · lh 1.7
10:00 – 18:00
Header Nav (EN) · Roboto · 19.2px(1.2rem) · weight 400 · lh 1.7
本文 — 国立新美術館は、コレクションを持たず、国内最大級の展示スペースを生かして多彩な展覧会を開催する「アートセンター」です。黒川紀章が設計した波打つガラスのカーテンウォールが、六本木の緑に溶けています。
Body · 16px · weight 400 · lh 1.7(27.2px) · ls normal
2026.7.31(金) - 8.6(木) 企画展示室 1E
Caption · 14.4px(0.9rem) · weight 400 · lh 1.7 · #666666
#開催中#開催予定#すべて#終了
Tag Chip · 12.8px(0.8rem) · padding 3.2px 8px · border-radius: 5px 0

03 — ARTICLE

組版サンプル

建築のヒミツは CONIC に聞く。

2026.7.27 コラム

逆円錐(コーン)の上にレストランが載っている——館内でいちばん写真を撮られている場所は、たぶんここです。展示室でも、ロビーでもなく、天井の高いガラスの内側にそびえる 2 つの巨大な円錐。

波打つガラスと、光のこと

黒川紀章が設計したカーテンウォールは、朝と夕方で表情がまったく違います。晴れた日の午前は外の緑が映り込み、日が傾くとガラス自体が発光しているように見える。建築を見にくるだけでも十分に価値がある、と言われるゆえんです。

休館日には、展示室の照明を落として次の展覧会の設営が進んでいます。展覧会・イベントをもっと見る


04 — BUTTONS

ボタン

赤ソリッド(radius 5px)/グレーアウトライン(radius 8px)/赤のテキストボタン/赤の太枠クローズ。右パディングが広いのはアイコン用の余白。タグは border-radius: 5px 0 の左右非対称角丸で、単純な角丸やピルに置き換えないこと。

検索 もっと見る クリア 閉じる
#開催中 #開催予定 #すべて #終了

05 — CARDS

展覧会カード

カードは border-radius: 20px 0 の非対称角丸。padding 16px、タイトル 16px / lh 1.7、日付は 14.4px の #666666。

ライブラリーで新たな一冊と出会う。
2026.1.15 コラム
森の中の美術館を体感する。
2026.4.21 コラム
昼夜を彩る、光を楽しむ。
2026.8.21 コラム

06 — FORMS

フォーム

デフォルト / フォーカス / エラーの3状態。radius 5px、フォーカスとエラーはともに #d7322d。ブランド色と警告色が同一のため、エラーは文言でも明示する。入力欄は 16px を下回らない。

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

07 — ELEVATION

奥行き

サイト本体は実質フラット。奥行きは白 × 薄グレー #eeeeee × 黒帯 #222222 の面の差と 1px の罫で表現し、影を足すより非対称角丸で領域を切る。

Level 0
none(既定・ほぼ全要素)
Level 1
0 1px 1px rgba(0,0,0,.1)
Level 2
0 4px 12px rgba(0,0,0,.12)

08 — LAYOUT

スペーシング

16px 基準の rem 刻み。3.2 / 8 / 16 / 24 / 40 / 64px。コンテナは最大 1400px、サイドナビ列は 192px。

XS 3.2
S 8
M 16
L 24
XL 40
XXL 64