⌕SEARCH
≡MENU
01 / Colors
深緑ひとつと、数字のための2色

ブランド色は Nara Green #198479。導線は #2e2e2e のチャコール、会期は #e71337 の赤。金 #c57f23 と紫 #6f3e8f は「奈良博を数字で知る」ブロック専用で、通常の UI には出さない。本文色は純黒ではなく #323131。

Nara Green
#198479
★塗り 26 要素 / 文字 8 要素。ロゴ・丸ボタン・タブ・展覧会バッジ
Charcoal
#2e2e2e
塗り 17 要素。導線ピル・フッター
Alert Red
#e71337
会期バッジ(開催中=塗り/開催予定=内側リング)
Text Primary
#323131
★本文(可視 64 要素)。純黒ではない
Gold
#c57f23
「数字で知る」の所蔵数(可視 6 要素)。UI には出さない
Purple
#6f3e8f
「数字で知る」の人物(可視 5 要素)。UI には出さない
Surface
#f5f5f5
お知らせ・展覧会カードの面(可視 4 要素)
Surface Warm
#f9f8f4
「参加する」「奈良博について」のブロック
Surface Sand
#e8e3de
「学ぶ・調べる」のブロック
Border
#707070
1px solid の枠線。リンクカード・Language ピル

Cookie バナー(STRIGHT by IIJ)もブランド緑を使っている。ただし同じ緑がロゴ・丸ボタン・タブ・展覧会バッジにも出ているので、サイトの色と判定してよい。border-radius: 18px と #004d8a のリンク色だけは CMP のものなので採用しない。

02 / Typography
密度を「太さ」で作る

ルートは 10px(html { font-size: 10px }、1.4rem = 14px)。字間は normal、palt も無し。代わりに可視 194 要素のうち 167 要素が font-weight: 500で、行間は 1.80 が全ページで一様(下層は 67/67 要素)。

71112 131415 16182427
Page TitleNoto Sans JP / 27px / 700
lh 1.80 / ls 2px
館長あいさつ
Stat NumberNoto Sans JP / 24px / 400
lh 1.80 / ls 4px
現在の館長は 26代目
Card TitleNoto Sans JP / 18px / 700
lh 1.80 / ls normal
名品展「ナラハク仏像セレクション ―受け継ぎ、未来へ―」
Body ★Noto Sans JP / 16px / 500
lh 1.80 / ls normal
奈良国立博物館は、東大寺、興福寺、春日大社などに囲まれた奈良公園の一角に位置しています。寺院・神社をはじめとした文化財所有者のご協力を得て、特に仏教と関わりの深い古美術品や考古遺品などの文化財の保存を図っています。
Body LeadNoto Sans JP / 16px / 500
lh 2.20
館蔵品・寄託品の中から選りすぐった仏像を通して、日本の仏教美術の流れをたどります。
UI / CaptionNoto Sans JP / 14px / 500
lh 1.80(実測 44 要素)
仏像館は改修工事のため令和10年(2028)春頃(予定)まで休館いたします。
SmallNoto Sans JP / 12px / 500
lh 1.80(実測 40 要素)
本日開館 9:30 - 17:00
Building LabelNoto Sans JP / 11px / 500
lh 1.00
仏像館 青銅器館 東新館

ウェイトは 400 / 500 / 700 の3本だけ

400 Regular可視 10 要素だけ
奈良国立博物館 仏教美術の殿堂
500 Medium ★可視 167 要素。本文の既定
奈良国立博物館 仏教美術の殿堂
700 Bold可視 17 要素。見出し・カード名
奈良国立博物館 仏教美術の殿堂
900 は存在しない実サイトは 900 を指定しているが
@font-face が 3 本なので 700 で出る
奈良国立博物館 仏教美術の殿堂

letter-spacing を em に読み替えないこと。このサイトは px で直書きしており、サイズとの比も揃っていない(27px に 2px = 0.074em、24px に 4px = 0.167em)。字間を足すのは 24 要素だけで、残り 170 要素は normal。

font-feature-settings: "palt" は 1 要素も使っていない(実測 0 件)。鉤括弧・ダーシの多い展覧会名でも詰めない。密度はウェイトで出している。

font-family に游ゴシック・ヒラギノを足さないこと。チェーンは "Noto Sans JP", sans-serif の2段だけ。OS フォントを挟むと、Medium(500)の見え方が環境ごとに変わる。

03 / Buttons & Badges
ピルは 100px、カードは 0px

導線はすべて border-radius: 100px のピル。カード状のリンクは 1px solid #707070 + 角丸なし。会期バッジの枠は border ではなく box-shadow: inset 0 0 0 1pxで描かれている(レイアウトが 1px もずれない)。

すべて トピックス 見るトップ 組織・職員紹介 会員制度
名品展 特別展 開催中 開催予定

btn-dark の padding は 10px 70px 10px 60px と左右非対称。左にアイコン、右に矢印の場所を空けている。border-radius: 18px は Cookie バナー専用なので採用しない。

04 / Panels
角は1〜2隅だけ大きく落とす

このサイトの角丸は「全部丸める」のではなく、1〜2 隅だけ 60px 落とす。ロゴパネルは右下だけ 15px。

お知らせ

border-radius: 60px 0 0
左上だけ 60px

奈良博について

border-radius: 0 0 60px
右下だけ 60px

学ぶ・調べる

border-radius: 60px 0
左上・右下

「奈良博を数字で知る」ブロック

館蔵品には
国宝 13件
現在の館長は
26代目
奈良博は日本で
2番目に古い

数字だけ font-size: 24px / font-weight: 400 / letter-spacing: 4px に落とし、金・紫で色分けする。この 2 色を通常の UI に持ち込まない。

05 / Cards
カードは面と罫線だけ

面は #f5f5f5、角丸 0px、影なし。会期バッジとカテゴリバッジを頭に並べる。

名品展開催中
ナラハク仏像セレクション ―受け継ぎ、未来へ―
館蔵品・寄託品の中から選りすぐった仏像を通して、日本の仏教美術の流れをたどります。
特別展開催予定
第78回 正倉院展
毎年秋、正倉院宝物の中から選ばれた宝物を公開します。
06 / Forms
入力欄も角丸なし

枠は 1px solid #707070、角丸 0px。フォーカスとエラーは、バッジと同じ内側リング(box-shadow: inset)で示す。

全角でご入力ください
ブランド緑の内側リングが付く
ご希望の講座をご入力ください
休館日は選択できません
07 / Elevation
影を使わない

区別は「緑・チャコールの塗り」「1px solid #707070 の枠」「#f5f5f5 / #f9f8f4 / #e8e3de の淡い面」で作る。

Level 0(既定)
none — カード・ボタン・バッジ・パネルすべて
内側リング
rgb(231,19,55) 0 0 0 1px inset(実測 2 要素)。「開催予定」バッジ。枠線の代用
除外
rgba(0,0,0,.5) 0 5px 15px 0 は Cookie バナーだけ(実測 1 要素)
08 / Layout
コンテナ 1080px、gap は 10〜12px

記事カラムは 1000px、ヘッダー・フッターは 1120px。gap をかなり詰めるのがこのサイトの型。

1120px — ヘッダー・フッター
--container: 1080px(実測 7 要素で最多)
1000px — 記事カラム
カード
0px
ピル
100px
セクション面
60px 0 0
ブロック
0 0 60px
ロゴパネル
0 0 15px 0

ブレークポイントの主役は screen and (max-width: 767px)(実測 217 回)。ほかに min-width: 767px(18 回)、max-device-width: 1024px(17 回・device-width である点に注意)、Gutenberg 既定の 600px / 782px。