01 / Colors
Colors

黒とグレーの階調だけ

ブランドカラーと呼べる面色は無い。黒(#222222 / #444444)とグレーの階調だけで組み、赤 #f1503a は暦の意味づけ(日曜・休館日)にしか使わない。ページ背景は純白ではなく、わずかに温かい #fdfbfa。

Section Bar
#444444
★3 カラムの見出し帯(可視 6 要素)。構造を揃える唯一の面色
Ink(面)
#222222
ナビの現在地・フッター全面
Sunday Red
#f1503a
★カレンダーの日曜・休館日だけ(可視 6 要素)
Black
#000000
★見出し・本文(トップ 42 / 下層 36 要素)。純黒を使う
Body
#333333
補足テキスト(トップ 30 要素)
Muted / 罫線
#999999
カレンダーの枠線・休館日の文字
Surface
#eeeeee
カレンダーのヘッダ行・展示カード(可視 9 要素)
Background
#fdfbfa
★ページ背景。純白ではない生成り(根拠 body)
Typography

詰めない、空けない

letter-spacing は可視要素の全件で normal。トップ 123/123 要素、下層 87/87 要素で、例外は 1 件も無い。CSS 全文の宣言も 4 件しかなく、うち 2 件は 0px に戻すもの。font-feature-settings の宣言も 0 件で、palt も halt も YakuHan 系の約物サブセットも使っていない。約物(、。「」())は全角幅のまま出る。

91011 121314 1618 24
Page Title ★Shippori Mincho / 24px / 400
lh 1.40 / ls normal
柳宗悦と日本民藝館
NavShippori Mincho / 14px / 700
lh 1.50
日本民藝館について / 建物について / 所蔵品
Column HeadShippori Mincho / 14px / 400
白抜き・#444444 の帯
開催中 お知らせ 開館日カレンダー
Exhibition TitleShippori Mincho / 13px / 700
lh 1.50
創設90年記念 琉球王国の染織
Body ★Noto Sans JP / 13px / 400
lh 2.00 / ls normal(可視 45 要素)
柳宗悦は、無名の工人たちがつくる日用の器物のなかに健康な美を見出し、それを「民藝」と名づけました。日本民藝館は、その蒐集品を公開するために 1936 年に開設されています。
LeadNoto Sans JP / 16px / 400
lh 1.50
2026年度 日本民藝館展 ― 新作工藝公募展 ―
DateNoto Sans JP / 12px / 400・500
lh 1.30
2026年8月22日(土)― 11月3日(火・祝)
CaptionNoto Sans JP / 10px / 400
lh 1.30(可視 18 要素)
詳しくはこちら
Calendar ★Cinzel / 12px・13px / 600・700
lh 18px・19.5px
Sun Mon Tue Wed Thu Fri Sat 1 2 3 4 5

「見出しほど太い」が成り立つのは明朝と欧文だけ。可視の 700 はトップ 59 要素のうち Cinzel 31 + Shippori Mincho 25。ゴシックスタック(Noto Sans JP)の葉要素に 700 は 1 件も無く、document.fonts 上も Noto Sans JP 700 は unloaded。本文を太字にしたいときは、ウェイトを上げずに Shippori Mincho へ切り替えるのがこのサイトの流儀。

html { font-size: 100%; line-height: 1 }。ルートは 6 幅(1440 / 1200 / 834 / 768 / 767 / 375px)すべてで 16px 固定で、流体スケールもブレークポイントごとのルート切替も使っていない。一方で無単位の 1 が全要素に降りるため、行間を宣言し忘れた要素は行が潰れる(実測 比率 1.00 がトップ 28 要素 / 下層 35 要素)。

実サイトはこうだが、正しくはこう —— 本文スタックの先頭は Roboto だが、フォントファイルを 1 件も要求していない(73 件すべて Shippori Mincho / Noto Sans JP / Cinzel)。Roboto を持たない環境(macOS 既定)では素通りし、英数字も Noto Sans JP で出る。読み込むか、落とすなら削ること。
なお Barlow Semi Condensed も @font-face で宣言されているが unloaded・可視 0 要素。

03 / Calendar
Calendar

暦だけ、別の書体で

曜日と日付だけ Cinzel, serif(ローマン体の欧文)で組む。トップで 38 要素。カレンダーだけ別書体というのがこのサイトの指紋。和文と混ぜない。

« 2026 / 10 »
SunMonTueWedThuFriSat
1234
567891011
12131415161718
19202122232425

角丸は行の両端だけ。4px 0 0 4px / 0 4px 4px 0 を各 1 要素に当てている。セルの枠は 1px solid #999999、ヘッダ行は #eeeeee、休館日は #dddddd の面に #999999 の文字。

Components

罫線と面で区切る

角丸は 0 が既定。例外は TOPへ の 4px とカレンダー両端だけ。影は 2 種類・各 1 要素しかない。階層は罫線(#999999)と面(#eeeeee / #dddddd / #f6f6f6)で作る。

Cards

Inputs

実測した 2 ページに入力欄が無い。角丸 0 + 1px solid #999999 のカレンダーの罫線に合わせる。ラベルは Shippori Mincho、入力値は Noto Sans JP。

全角でご記入ください
ご予約の確認をお送りします
休館日は選択できません
05 / Elevation & Layout
Layout

1200px の 3 カラム

Level 0
none / 既定。ほぼ全要素
Level 1
rgba(0,0,0,.2) 0 1px 3px / カード 1 要素
Level 2
rgba(0,0,0,.2) 0 8px 8px -8px / 固定ヘッダ下 1 要素
max-width 1200px(実測 6 要素)
padding-left/right 40px(最多・3 要素)/ 内側 20px
3 カラム(開催中 / お知らせ / 開館日カレンダー)

ブレークポイントは実質 2 段階。CSS 全文の @media は max-width: 735px が 102 宣言と圧倒的で、ここで 3 カラムを 1 カラムへ落とす。次が 1200px の 6 宣言(max-width の折り返し)。html は全幅で 16px のまま動かない。

タッチターゲットが 44px に届いていない。カレンダーのセルは padding: 8px 0 + 行高 19.5px = 約 36px、サブナビは padding: 12px 20px + 行高 18.2px = 約 42px。新規実装では縦 padding を足して 44px を確保すること。