10/7
10F 愛知県美術館 Closed
8F ギャラリー Open 10:00 – 18:00
展覧会ポスター(画像)
開催予定企画展
没後100年記念

ビゲロー 幻のコレクションと近代日本画の夜明け──日本美術に魅せられたボストン人──

Allure of Japan and the Dawn of Modern Japanese Painting: 100 Years After William Bigelow's Death
2026年10月30日(金) - 12月13日(日)
01 / Colors

アクセントは空色ひとつ

ブランド色は #009FE8 だけ。面の切り替えは #FAF9ED(ヒーロー)、#F6F5F1(お知らせ)、#E8F2F5(イベント)という 3 つの地色で行う。CSS Custom Properties は 56 個すべて自社トークンで、プラットフォーム由来はゼロ。

Sky Blue
#009FE8
★唯一のアクセント。可視 3 要素の面 + 文字 3〜4 要素
Ink
#1A1A1A
★本文。可視 82 要素。純黒は使わない
Dark Gray
#404040
お知らせタグの面(可視 6 要素・白抜き文字)
Gray
#707070
補助テキスト・欧文サブタイトル(可視 4 要素)
Light Gray
#D6D6D6
タグの面・枠線 CTA の罫線(可視 4 要素)
Image BG
#EDEDED
★画像プレースホルダ。実測で最多(可視 14 要素)
Slider Cream
#FAF9ED
★ヒーローの地色(606,893 px²)。heroCover が true を返す面
Beige
#F6F5F1
お知らせセクションの面(602,708 px²)
Pale Blue
#E8F2F5
イベントセクション/下層のページヘッダー
Gradient Blue
#EBEFF1 → #D8E9EF
フッター直前のリンク帯

赤(#FF2800)はトークンに宣言があるが、DOM 全走査で可視 0 要素。カレンダー用の --sun-color / --sat-color も同様。「宣言されている = 使ってよい」ではない。

body の 1 行で全部決める

このサイトの組版はこの 1 宣言がすべて。palt / letter-spacing: 0.05em / line-height: 2.2 / line-break: strict を body に 1 回だけ書き、子要素では原則上書きしない。結果、palt が可視 337 要素、字間 0.8px が 113 要素中 90 要素、行間比 2.20 が 48 要素に効いている。

13.21416 182024 32
Section Heading ★32px / 600
lh 24px(比率 0.75)/ ls 0.2em
お知らせ
Exhibition Title24px / 700
lh 36px(1.50)/ ls 0.05em
ビゲロー 幻のコレクションと近代日本画の夜明け
Nav / Card Title18px / 600〜700
lh 39.6px(2.20・継承)
開催中・開催予定の展覧会
Body ★16px / 400
lh 35.2px(2.20)/ ls 0.8px
※ body から降りてくる値そのまま
愛知県美術館は、1992年に愛知芸術文化センター内に開館しました。20世紀以降の国内外の美術作品を中心に収集し、企画展とコレクション展の二本立てで紹介しています。
Nav Link14px / 400
lh 30.8px(2.20・継承)
チケット購入 メンバーシップ English
Submenu13.2px / 400
lh 29.04px(2.20・継承)
先生のためのプログラム/鑑賞学習ワーキンググループ
Light Heading18〜20px / 300
下層のナビ見出し(可視 16 要素)
美術館について 館長メッセージ ビジョン
Tag ★16px / 400 / lh 1.00
ls 0.1em(= 1.6px)
開催予定 企画展 お知らせ

字間は px で継承され、行間は比率で継承される

letter-spacing: 0.05em は body の 16px で 0.8px という絶対値になり、サイズの違う子にもそのまま降りる。一方 line-height: 2.2 は単位なしなので各要素が自分のサイズで再計算する。同じ 1 行に書いてあるのに、継承のしかたが正反対。

14px の行 — lh 30.8px(= 14 × 2.2)/ ls 0.8px(親の px 値)
16px の行 — lh 35.2px(= 16 × 2.2)/ ls 0.8px
18px の行 — lh 39.6px(= 18 × 2.2)/ ls 0.8px
24px の行 — lh 52.8px(= 24 × 2.2)/ ls 0.8px

Web フォントは Noto Sans JP の可変フォント(100 900)1 本だけ。Google Fonts から配信され、実測でフォントファイル要求 45 件(日本語サブセット分割)。明朝体もブランド欧文も持たず、英語のサブタイトルも日付も Noto Sans JP の欧文グリフで組む。
font-feature-settings に出てくる "liga"(11 要素)は Material Symbols のリガチャで、和文組版とは無関係。

03 / Components

角丸はほぼゼロ

トークンには 10px / 6px / 3px の 3 段があるが、実装に出ているのは枠線 CTA の 3px だけ。タグもカードもヒーローも border-radius: 0。

開催中・開催予定の展覧会→ 年間スケジュール→ お知らせ一覧を見る →
開催予定 企画展 移動美術館 お知らせ
展覧会画像
開催予定2026.10.30
ビゲロー 幻のコレクションと近代日本画の夜明け
イベント画像
イベント2026.10.24
移動美術館 花の時間:ちいさきうつくしきもの
コレクション画像
お知らせ2026.10.01
コレクション展 2026年度 第3期のご案内

タグの行間は line-height: 16px 固定(16px の文字で比率 1.00、14px で 1.14)。帯の高さを文字サイズで決めている。

入力欄も palt を継承する

input / select はフォント継承が効かないので、font-family / letter-spacing / font-feature-settings を明示的に当て直す。body の 1 行だけでは入力欄まで届かない。

全角でご入力ください
フォーカスリングは #009FE8
団体観覧には団体名の入力が必要です
休館日は選択できません
05 / Article

記事本文だけ行間が 1.7

--post-* という 20 個のトークンが CMS 記事のタイポグラフィを別建てで持っている。字間(0.05em)と palt は body と同じだが、行間だけ 2.2 → 1.7 に落ちる。サイト UI の 2.2 をそのまま記事に当てないこと。

愛知県美術館では、20世紀初頭から現代までの国内外の美術作品を収集しています。クリムト《人生は戦いなり(黄金の騎士)》をはじめとする代表的な所蔵品は、年に数回のコレクション展で順次公開されます。

所蔵作品の画像利用をご希望の方は、プレスルームの「所蔵作品画像利用方法」をご確認のうえ、所定の手続きをお願いいたします。

所蔵作品画像利用方法→

記事本文のボタンは --post-button-* の指定どおり 左寄せ・両端揃え・角丸 0・枠線 1px solid #707070・右だけ 52px のアキ(アイコン分)。

影で階層を作らない

サイト本体の box-shadow は メガメニューの 1 要素だけ。カード・ボタン・タグはすべてフラットで、面の区別は地色の塗り分けで行う。

Level 0(既定)
none
Level 1
0 2px 8px rgba(0,0,0,0.06)

抽出でもう 1 つ検出される rgba(0,0,0,0.3) 0 4px 12px は Cookie 同意バー(CMP)のもので、サイト本体の語彙ではない。

07 / Layout

コンテナは 1232px

実測で最多の幅は 1232px(5 要素)。全幅寄りのブロックは 1338px / 1306px / 1296px、下層の読み物は 700px。グリッドの gap は 16px が最多で、カード列は 30px、行 16 / 列 32 の組み合わせも使う。

1338px — 全幅寄りのブロック
1232px — ★コンテナ(実測 5 要素で最多)
700px — 下層の読み物カラム
0px ★既定
3px ★枠線 CTA
6px(宣言のみ)
10px(宣言のみ)

文字サイズはブレークポイントをまたいで固定。1440 / 1200 / 834 / 375px の 4 幅で測って、html も body も 16px / lh 35.2px / ls 0.8px のまま動かなかった。流体タイポグラフィ(vw / clamp)は使っていない。

学校鑑賞のお申し込み→ 刊行物→ ショップ・図録販売・レストラン→