青森県立美術館に行く

DESIGN.md から抽出したデザイントークンのカタログ。カラー、タイポグラフィ、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

2026.8.15(金) 本日開館

01 / COLORS

カラーパレット — 焦茶 1 色と、空色の差し色だけ

Brand
Ink Brown
#332200
主色。文字・罫線・枠・SVG の fill すべて。純黒は使わない
Sky
#91d2e5
唯一の差し色。線と文字だけ。面には塗らない
Neutral
Background
#ffffff
ページ地色。純白
Surface
#f4f4f4
定義リストの面。唯一の面色
Badge Gray
#cccccc
状態バッジの面 + 同色 2px 枠
Semantic(実装目安・実サイトには存在しない)
Danger
#8c2f14
#332200 と同じ暖色系に寄せる

02 / TYPOGRAPHY — 実測値

letter-spacing はサイズではなく役割で決まる

青森県立美術館
36px / 400 / line-height: 1.75 (63px) / letter-spacing: normalh1 — 大見出しほど細い
チケットの購入
27px / 400 / line-height: 1.75 (47.25px) / letter-spacing: normalh2
開館時間/休館日 →
26px / 700 / line-height: 1.75 (45.5px) / letter-spacing: 0.2em (5.2px)アクションリンク — このサイトの顔
青森県立美術館開館20周年 / 東日本大震災15年「志賀理江子 なぬもかぬも」展
26px / 700 / line-height: 1.8 (46.8px) / letter-spacing: 0.03em (0.78px)展覧会タイトル(詳細ページ)
展示の見どころ
20px / 700 / line-height: 1.7 (34px) / letter-spacing: 0.03em (0.6px)h3
本文テキスト — 青森県立美術館は、三内丸山遺跡に隣接する地に 2006 年に開館しました。発掘現場の土の断面を意匠の起点とする建築と、館全体を貫くアイデンティティが、地域の記憶と現代美術を接続しています。body は 18px / weight 500 / line-height 1.75 / letter-spacing normal です。
18px / 500 / line-height: 1.75 (31.5px) / letter-spacing: normalbody の基準
コレクション展2026-2 彩りとかたち
16px / 700 / line-height: 1.8 (28.8px) / letter-spacing: 0.12em (1.92px)カードタイトル — ラベル帯の字間
読み物本文 — 身体の感覚に根ざした光と色、演劇性のある写真や映像作品で国際的に評価されてきた作家の、新作を中心とする個展。同じ 16px でも、カードタイトルの 0.12em に対して読み物本文は 0.06em と、役割で字間が変わります。
16px / 500 / line-height: 1.8 (28.8px) / letter-spacing: 0.06em (0.96px)読み物本文
※棟方志功、奈良美智以外の作家作品は企画により展示していない場合があります。
13px / 500 / line-height: 1.8 (23.4px) / letter-spacing: 0.03em (0.39px)注記
開催中
13px / 700 / line-height: 1.0 (13px) / letter-spacing: 0.12em (1.56px)バッジ — 行間だけ 1.0

letter-spacing の 5 段

TIER使う場所
Wide0.2emアクションリンク(26px / 700)、日付表示
Label0.12emバッジ、カードタイトル、カード日付、項目ラベル
Reading0.06em16px の読み物本文
Fine0.03em13px の注記、20px / 26px の見出し
Normalnormalbody(18px)、h1(36px)、h2(27px)

03 / EXHIBITION — 展覧会の組版

定義リストと記念ブロック

会期
2026.10.31(土) ━ 2027.3.14(日)
休館日
毎月第2・第4月曜日
会場
青森県立美術館 企画展示室
当日券
一般 1,500円/高大生 1,000円
20TH
青森県立美術館
20062026

定義リストのラベルだけ line-height: 1.25 に締め、値は 2.0 にする。記念ブロックは 3px solid #91d2e5 の枠で囲み、中は白地のまま。空色を面に塗らない。


04 / BUTTONS & BADGES

全要素 radius 0 — 形の違いは枠の太さだけ

2026.8.15(金) 本日開館
Outline — 枠 3px。サイト内で最も太い線
一覧をみる →
Text Link — 面を持たない主 CTA

バッジは 2 種類だけ

企画展 コレクション展 一般開催 ワークショップ その他 開催中 開催予定

分類=白地 + 2px solid #332200 / 状態=面 #cccccc + 同色 2px 枠。カテゴリが何種類あっても色を増やさない。文字だけで区別する。


05 / CARDS

枠も影も無い。サムネイルとテキストの塊だけでカードに見せる

展覧会ポスター
企画展開催予定

青森県立美術館開館20周年「志賀理江子 なぬもかぬも」展

2026.10.31 - 2027.03.14
展覧会ポスター
コレクション展開催中

コレクション展2026-2 彩りとかたち

2026.06.27 - 2026.09.27
イベント写真
その他開催中

ナイトミュージアム2026

2026.07.18 - 2027.03.20
イベント写真
ワークショップ開催中

家族みんなで美術館へ!「みんなのアトリエ」

2026.05.02 - 2026.10.31

バッジは必ず「分類(枠)→ 状態(塗り)」の順に左から並べる。


06 / FORMS

フォーカスは色を変えず、枠を太くして示す

デフォルト — 2px solid #332200 / radius 0
フォーカス — 色は変えず 2px → 3px に太くする(このサイトには focus 用の色が無い)
エラー — 3px solid #8c2f14(実装目安)

07 / ELEVATION — 実測値(影は 0 段)

奥行きは枠線の太さで表す

Border 2px
バッジの枠(分類 #332200 / 状態 #cccccc)
Border 3px
主要操作の枠。サイト内で最も太い線
Border 3px / Sky
記念ブロックの枠 #91d2e5
Surface #f4f4f4
唯一の面色。定義リストにだけ使う

box-shadow はサイト内に 1 つも存在しない。WordPress の --wp--preset--shadow--* は Gutenberg の既定値で未使用。


08 / LAYOUT

スペーシングとコンテンツ幅

XS 4
S 8
M 16
L 24
XL 40
XXL 80
XXXL 120
Main Container 1128px(実測)
Article 760px 目安
当サイトでは、サイトの利便性向上の目的で Cookie を使用しています。同意する / 詳細を表示 — 暗い面(#332200)の上でだけ空色 #91d2e5 がリンク色として機能する。