企画展
開催中
1階展示室
2026.09.19 - 11.15
スウェーデン・テキスタイル
暮らしと自然に息づく北欧デザイン
Color

館に色を持たせず、展覧会に色を割り当てる

ブランドカラーが存在しない。代わりに6色のカテゴリカラーがあり、展覧会・イベントごとに1色が割り当てられる。CSS 全文での出現回数がほぼ揃っている(12〜15 回)のは、6色が同じ役割の体系として書かれている証拠。

色の指定は CSS 変数を介さず、クラス名が color_ + hex そのもの(.color_039788)。CSS Custom Properties は実サイトに 0 個。

Blue
#3e4eb8
展覧会。可視 3 要素 / CSS 12 回
Green
#039788
展覧会。可視 3 要素 / CSS 12 回
Yellow
#fed910
展覧会。可視 3 要素 / CSS 12 回
Red
#d70000
イベント。可視 4 要素 / CSS 15 回
Pink
#ec1561
デジタルコンテンツ。可視 4 要素
Olive
#a7b809
下層の見出し専用。可視 7 要素
Text
#333333
本文。可視 43 要素 / CSS 152 回
Surface
#f5f5f5
最多の面色。可視 25 要素 / CSS 60 回
Black
#000000
ボタン・タブの塗り面(可視 26 要素)
Typography

書体は1本。差は太さとサイズでつける

可視テキストの全要素が YakuHanJP, "Noto Sans Japanese", sans-serif(トップ 168/168、下層 108/108)。見出しも本文もナビも同じ1行で組み、太さとサイズだけで階層を作る。

YakuHanJP は unicode-range で約物だけに限定したサブセットフォントで、Google Fonts に無いためこのプレビューでは再現できない。実サイトでは「、。「」()・:;?!」が詰まって出る。font-feature-settings の宣言は CSS 全文で 0 件=palt は使っていない。

2026.09.19 - 11.15
42px / 100 / line-height: 1.00 / letter-spacing: .08em会期の日付。Thin で大きく組む
展覧会
22px / 200 / line-height: 1.00 / letter-spacing: .1em下層 h1。ExtraLight + オリーブ
銅版画家・駒井哲郎
掌上にひろがる星座のような世界
20px / 400 / line-height: 2.10 / letter-spacing: normal展覧会タイトル。行間が極端に広い
新着情報
16px / 700 / line-height: 1.00 / letter-spacing: .05em
ミュージアム コレクション
15px / 700 / line-height: 1.50 / letter-spacing: .05em
世田谷ゆかりの作家の展覧会をはじめ、先史美術から現代美術まで、国内外の美術館・博物館などと協力して様々な企画展を開催します。また、ミュージアム コレクションでは、約1万点の収蔵作品をテーマにそって入替えながらご紹介しています。
15px / 400 / line-height: 1.73 / letter-spacing: normal本文。字間は触らない
利用案内 展覧会 催し物 収蔵品
15px / 400 / line-height: 1.00 / letter-spacing: .2emグローバルナビ。最も大きく空ける
向井潤吉アトリエ館 清川泰次記念ギャラリー 宮本三郎記念美術館
12px / 400 / line-height: 1.10 / letter-spacing: .1em
12px / 400 / letter-spacing: -.01emフッターリンク。負の字間
Font Weight

使えるのは 100 / 200 / 400 / 700 の4本だけ

CSS は @font-face を 100 / 200 / 300 / 400 / 500 / 700 / 900 の7本宣言しているが、document.fonts に載るのは 100 / 200 / 400 / 700 の4本だけ。CSS が当てている 500(実測 37 要素)と 900(実測 4 要素)は、指定どおりの太さで出ていない可能性が高い。

読み込まれるウェイトはページごとに違う。トップは 100 が loaded / 200 が unloaded、下層はその逆。ページに現れた字形しか読み込まれない。

世田谷美術館
100 Thin
会期の日付(42px)
世田谷美術館
200 ExtraLight
下層 h1(22px)
世田谷美術館
400 Regular
本文・ナビ(33 要素)
世田谷美術館
700 Bold
見出し・バッジ(91 要素で最多)
Components

角丸ゼロ、影なし。丸いのはバッジだけ

実測で border-radius は 3 種しかなく、box-shadow はトップの 1 要素のみ。面の区別は #f5f5f5 と #ffffff の差でつける。

開催中 次回 終了
ワークショップ
世田谷美術館×世田谷区民健康村交流ワークショップ
2026.10.18 - 10.19
デジタルコンテンツ
セタビ Podcasting/美術大学通信講座
2026.07.01
企画展
銅版画家・駒井哲郎 掌上にひろがる星座
2026.11.28 - 01.31
Layout & Responsive

950px 固定。印刷もデスクトップで刷る

コンテナは max-width: 950px 固定(CSS 全文で 11 回)。メディアクエリがすべて print, screen and (...) で書かれていて、展覧会情報を印刷する前提になっている。

NameQueryCSS 出現
Mobilescreen and (max-width: 600px)3 回
Tabletprint, screen and (min-width: 601px) and (max-width: 949px)3 回
Desktop (S)print, screen and (min-width: 950px) and (max-width: 1023px)1 回
Desktop (M)print, screen and (min-width: 1024px) and (max-width: 1279px)1 回
Desktop (L)print, screen and (min-width: 1280px)1 回

ルートの font-size は流体。 1440px で 10px、834px で 8px、375px で 4.99999px まで縮む。rem を px に読み替えて固定しないこと。グローバルナビは 375px で 16px / 500 / letter-spacing 3.2px と、サイズも太さも変わる(字間は .2em のまま)。

画面幅html の font-sizebody の font-size
1440px10px10px
1200px10px10px
834px8px8px
375px4.99999px4.99999px