寄附のお願いチケットLanguage
01 / Colors

炭黒と深緑の 2 色

CSS 変数は 0 個。構造は #2b2b2b、行動導線は #1b854d。テキストリンクだけが #2869dd で、ボタンには一切使わない。

Charcoal
#2b2b2b
基幹色。本文の文字(933要素で最多)・濃色パネル・主要ボタン
TNM Green
#1b854d
チケット購入・通知登録・「注目」バッジ・展示項目の縦罫
Black
#000000
「予告」バッジ・白ボタンの上の文字(26件)
Link Blue
#2869dd
本文中のテキストリンク(137要素)。ボタンには使わない
Calendar Night
#93278f
開館カレンダーの夜間開館日(☽)
Calendar Closed
#666666
開館カレンダーの休館日(×)
Danger
#990000
来館案内の注意書き。鮮やかな赤は使わない
Background
#ffffff
ページ背景。body に明示指定
Divider
#4d4d4d
濃色パネル内の罫線

開館カレンダー — 色だけに頼らず記号を併記する

状態は 色 + 記号(○ ☽ ▲ ×)の 2 系統で示す。色覚に依存しない設計になっている。

カレンダーから来館日を選択
日
月
火
水
木
金
土
○1
○2
○3
☽4
☽5
○6
×7
○8
○9
○10
☽11
☽12
○13
×14
○15
○16
○17
☽18
☽19
○ 開館日 / ☽ 夜間開館日(20時まで)
▲ 限定開館日 / × 休館日

palt + letter-spacing: 1px

font-family は全体で 1 本だけ。見出し用・本文用の使い分けが存在しない。階層はサイズとウェイトだけで作る。

Display
50px / 700
lh 2.0 (100px) / ls 1px
コレクション
Heading 1(写真上)
44px / 700
lh 1.5 (66px) / ls 1px
本館リニューアル
Heading 2
40px / 700
lh 2.0 (80px) / ls 1px
交通・料金・開館時間
Heading 2(トップ)
35px / 700
lh 1.5 (52.5px) / ls 1px
展示・催し物
Heading 3
24px / 700
lh 1.5 (36px) / ls 1px
名品ギャラリー
Heading 4 / th
22px / 700
lh 2.0 (44px) / ls 1px
総合文化展の観覧料金
Lead
22px / 500
lh 2.0 (44px) / ls 1px
日本と東洋の文化財を収蔵・展示する
Body(基準)
16px / 500
lh 2.0 (32px) / ls 1px
実測 152 要素で最多
当館は、日本を中心として広く東洋諸地域にわたる文化財を収集し、保管して公衆の観覧に供するとともに、これに関連する調査研究および事業を行っています。本文のウェイトは 400 ではなく 500 で、白地に対する黒の締まりを出しています。
Body(詰め)
16px / 500
lh 1.5 (24px) / ls 1px
リスト内。実測 150 要素
本館 / 東洋館 / 平成館 / 表慶館 / 法隆寺宝物館 / 黒田記念館
Nav
18px / 700
lh 1.6 (28.8px) / ls 1px
展示・催し物
Nav(小)
16px / 700
lh 1.6 (25.6px) / ls 1px
コレクション
Caption
14px / 700
lh normal / ls 1px
寄附のお願い
Text Link
16px / 500
lh 2.0 / ls 1px / #2869dd

字間が px 固定であることの意味。 16px 本文では 0.0625em、40px 見出しでは 0.025em になる。サイズが大きいほど相対的に詰まって見える設計で、大見出しが締まり、本文がゆったりする。0.06em のような em 指定に置き換えると見出しがだらしなく開くので、必ず 1px で書くこと。

palt の有無

palt あり(サイトの既定)
font-feature-settings: "palt"
「空海と真言の名宝」(特別展)、9時30分〜17時00分
palt なし(比較)
font-feature-settings: normal
「空海と真言の名宝」(特別展)、9時30分〜17時00分

palt で括弧・句読点まわりのアキを詰め、そのうえで一律 1px 開き直す。片方だけ真似ないこと。 palt だけ入れると全体が詰まりすぎ、letter-spacing だけ入れると括弧の前後が空きすぎる。

03 / Exhibition

本日の開館情報

濃色パネルの上に、左へ #1b854d の縦罫を引いた展示リストを置く。

東博コレクション展9時30分〜17時00分(入館は16時30分まで)
弘法大師生誕1250年記念 特別展「空海と真言の名宝」9時30分〜17時00分(入館は16時30分まで)

観覧料金

一般1,000円(団体 800円)
大学生500円(団体 400円)
高校生以下および満18歳未満、満70歳以上無料(入館の際に年齢のわかるものをご提示ください)
開館時間9時30分〜17時00分(総合文化展・特別展とも入館は閉館の30分前まで)

※ 展示替え等により、ご覧いただけない場合があります。最新の情報は展示スケジュールをご確認ください。

表の th は #2b2b2b の面に白文字(16px / 700)。注意書きは #990000。

角丸なし。面か枠かの 2 形式

padding の右が 56px と広いのは、右端に › シェブロンを置くため。この非対称パディングがボタンの型。

Badges

展示中 注目 予告

緑 #1b854d は汎用の success ではない。 チケット購入・通知登録・「注目」といった行動導線の専用色として使う。構造的な遷移ボタンは炭黒 #2b2b2b。

05 / Cards

Cards

角丸ゼロ、影ゼロ。1px の罫線だけで区切る。

総合文化展

本館・東洋館ほか、通年で入れ替わる常設の展示

特別展

期間限定で開催する大規模な展覧会

名品ギャラリー

代表的な収蔵品を高精細画像で公開

Forms

入力欄も角丸なし。枠は 1px solid #2b2b2b、font-size は 16px を下回らない(iOS のズーム回避)。

作品名・作者名などで検索できます

フォーカスリングは #1b854d

西暦を半角数字でご入力ください

セレクトも同じ枠・角丸なし

07 / Elevation

Depth & Elevation

可視要素の box-shadow は実測 0 件。奥行きは「白地 / 炭黒パネル / 写真」の 3 層と 1px の罫線だけで表現する。

Level 0 — なし(すべての要素)box-shadow: none

カードやモーダルに影を足すと、このサイトの平面的な整理感が崩れる。

Layout

コンテナは 1280px。トップは左「開館情報」+右「カレンダー」の 2 カラム。

max-width: 1336px(全幅ラッパー)
max-width: 1280px(サイトの基準)
開館情報 / 展示リスト
カレンダー
TokenValue用途
XS5pxインライン
S8pxバッジ内
M16px最頻。カード間・グリッドの gutter(22箇所)
L30pxセクション内
XL50pxセクション間
BreakpointWidth説明
主≤ 768px2 カラムが縦積みになる(57箇所)
Narrow≤ 1120px / 1200pxナビの折り返し調整
Desktop> 1280pxコンテナ 1280px で頭打ち
RadiusValue出現
既定0ボタン・カード・バッジ・入力欄すべて
ページネーション2px数字ボタンのみ
Language3px1 件のみ
SNS アイコン50%8 件