文字サイズ 反転表示
01 / Colors

赤・墨・白と、反転表示用の赤

ブランド色は #d61d00 ひとつ。本文は純黒ではなく #222222、地色は白ではなく #F0F0F0。ヘッダーに「反転表示」があるため、高コントラスト用の赤 #AD133F が CSS 変数として対で用意されている。

科博レッド
#d61d00 / --main-color
★可視 28 要素(トップ)/ 44 要素(展示 TOP)。CTA・開催中バッジ・開館情報パネル
科博レッド(HC)
#AD133F / --main-color-hc
反転表示モード専用。通常モードでは可視 0 要素
Text / Surface Dark
#222222 / --text-color
★本文 可視 193 要素。バッジ・タブの塗り面にも使う(可視 20 要素)
Surface Gray
#666666
「予告」バッジ・非選択タブ(可視 6 要素)
Background
#F0F0F0 / --main-bg-color
★ページの地色。カード枠の色も同じ値
Surface
#ffffff / --white-color
カード・パネルの面
Link
#0034D1 / --main-link-color
カード内リンクの文字色

pageBackground.resolved は白(根拠 body)だが、見えている地色は #F0F0F0。 main.lo-globalContainer が 1,094,400px² を占めて白を覆っている。コンテンツの地色は #F0F0F0 として組むこと。

UD 書体と palt に字送りを任せる

和文はモリサワの TBUD ゴシック 3 ウェイトと UD タイポスの計 4 本。すべて CSS 変数で名指しされ、書体名とウェイトが 1 対 1 で対になっている。字間は触らず、詰めは palt に一任する。

111314 151617 182022 40 48
Gallery Display ★UDTypos510Std / 48px
w800 / lh 96px (2.00) / ls normal
日本館
Section Heading ★TBUDGoStd-ExBold / 40px
w800 / lh 64px (1.60) / ls normal
特別展・企画展
Card HeadingTBUDGoStd-Bold / 22px
w600 / lh 44px (2.00)
賛助会員・寄付会員
Lead ★TBUDGoStd-Bold / 20px
w600 / lh 50px (2.50)
「日本列島の自然と私たち」をテーマとする日本館では、日本の自然と私たちのあゆみを紹介しています。
NavTBUDGoStd-ExBold / 18px
w800 / lh 27px (1.50)
研究と標本・資料
Body ★TBUDGoStd-Regular / 17px
w400 / lh 34px (2.00) / ls normal
自然の景観と植物多様性を凝縮した約14万㎡の園内では、日本の代表的な植物を中心に、約3,000種類の植物を見ることができます。
Body (dense)TBUDGoStd-Regular / 16px
w400 / lh 32px (2.00)
常設展示室(地球館・日本館)に現在展示している標本を検索できます。
CaptionTBUDGoStd-Regular / 15px
w400 / lh 22.5px (1.50)
(リンクを新しいタブで開きます)
ButtonTBUDGoStd-Bold / 14px
w600 / lh 21px (1.50)
アクセスガイド
SmallTBUDGoStd-Regular / 13px
w400 / lh 16.25px (1.25)
検索 Language メニュー

letter-spacing は normal 一択(実測 355/355 要素・371/374 要素)。詰めは書体と font-feature-settings: "palt"(実測 1948 要素)に任せる。CSS で字間を足すと二重にかかるので書かない。

太さは font-weight ではなく書体名で切り替える。--font-sans-jp-b: "MFW-TBUDGoStd-Bold" と --font-sans-jp-b-weight: 600 が必ず対で使われる。@font-face 側が font-weight: 1 1000 を受けるため、600 / 800 を指定してもブラウザの合成太字にはならない。Regular の書体名のまま 700 を当てないこと。

Google Fonts が 10 ファミリー @font-face 宣言されているが、実測した全ページで全件 unloaded(Barlow 9 本 / M PLUS Rounded 1c / Noto Sans JP / Noto Serif JP / Shippori Mincho B1 / Yusei Magic / Zen Maru Gothic 5 本)。宣言はあるが描画には一切使われていない。このプレビューでは TBUD ゴシックの代替として同じモリサワ製の BIZ UDPGothic を使っている(実サイトの 600 / 800 はどちらも 700 で代用)。

03 / Vertical Writing

展示名だけ縦に組む

展示 TOP で 12 要素が writing-mode: vertical-rl。外部ウィジェット由来ではなく、サイト本体の展示名見出しで、UD タイポスを使う。

日本館
Japan Gallery
和文は 70px / line-height 70px(1.00)/ letter-spacing 14px(0.2em)。
欧文は 20px / line-height 40px(2.00)/ letter-spacing normal。

このサイトで letter-spacing を書く唯一の場所が縦組み見出し。横組みでは全要素 normal を守る。

面色 4 種と、用途ごとの角丸

CTA の面色は赤・墨・グレー・白+2px 枠の 4 種。角丸は 4px(ボタン)/ 10〜15px(カード)/ 1440px(pill)/ 0px(バッジ)を用途で使い分ける。影は 1 要素も使わない。

開催中 企画展 予告 その他の展示
2026 9/21
本日開館
開館時間 9:00 - 17:00
企画展2026年09月15日野口英世生誕150年記念企画展「感染症への挑戦」
開催中2026年09月11日生命を支える「pH応答」のしくみを探る革新的な研究
予告2026年09月10日私が見た湯川秀樹と朝永振一郎
筑波実験植物園
自然の景観と植物多様性を凝縮した約14万㎡の園内。
附属自然教育園
都心に残る武蔵野の面影。四季折々の自然を観察できます。
シアター36〇
全球型の映像施設で、地球のダイナミズムを体感する。

box-shadow は実測 0 件。階層は (a) 地色 #F0F0F0 と面 #ffffff の差、(b) 1px solid #F0F0F0 の枠、(c) 角丸の大きさで表す。カードを浮かせないこと。

05 / Layout

1440px と 560px、gap は 18 / 20px

項目値実測
html font-size10pxrem は ×10 で px に直る(1.7rem = 17px)
Container1440px7 要素(最大幅)
Panel560px6 要素(カード・パネル)
Article920px / 1160px4 要素 / 2 要素
Gap18px / 20px27 件 / 27 件(展示 TOP は 20px が 44 件)
Breakpoint(主)max-width: 1023px979 件(最多)。min-width: 1024px が 124 件
Breakpoint(SP)max-width: 767px40 件

1024px が主分岐。それ未満は「モバイル用の別レイアウト」として 979 件のルールが当たる。
ヘッダーに「文字サイズ 大 / 小」のトグルがあるため、rem ベースで組んで拡大に追従できるようにする。