2026年9月18日(金) 本日は開館日 10:00 - 20:00
MENU
ホーム > 展覧会 > プラカードのために
01 / Root font-size
Root10px

rem は ×10 で読む

実サイトは html { font-size: 10px }。1.45rem は 23.2px ではなく 14.5px。フォントサイズに 14.5px 13.5px 15.75px といった半端な値が並ぶのはこのため。16px 基準で換算すると設計が丸ごとずれる。

宣言実測(px)役割
3.2rem32px展覧会名(weight 300)
2.8rem28pxセクション見出し(weight 300)
2.4rem24px会期(Lato / weight 600)
1.575rem15.75pxリード文
1.5rem15px★本文
1.45rem14.5pxヘッダーナビ・引用
1.35rem13.5pxパンくず
1.3rem13pxカテゴリ見出し・キャプション
1.1rem11pxMENU(Lato / weight 600)
Color PaletteGreen & Alpha Black

アクセントは緑 1 色。グレーは作らない

色を使うのは #5bb016 だけ(CSS 全文で 27 回 / 可視 35 要素)。グレーは hex を増やさず rgba(0,0,0,α) の 7 段階で作る。

CAMK Green
#5bb016
★CSS 27 回 / 可視 35 要素。開館情報・カテゴリ見出し・詳しく見る・お知らせ帯
Dark Chip
#333333
「みどころ1」バッジの面(可視 3 要素)。緑を使わない唯一のバッジ
Black
#000000
★見出し・本文。可視 449 / 112 要素
Surface
#eeeeee
検索欄の丸い閉じるボタン
rgba(0,0,0,.90) タイトル行
rgba(0,0,0,.85) パンくず
rgba(0,0,0,.80) ナビ
rgba(0,0,0,.75) ページ内リンク
rgba(0,0,0,.70) キャプション
rgba(0,0,0,.65) 説明文
rgba(0,0,0,.55) 会期
rgba(0,0,0,.50) 英語併記(30 要素)

グレーの hex(#666666 #999999)を足さないこと。この設計だと写真の上でも紙の上でも同じ比率で沈むので、面色が変わっても調整が要らない。

03 / Typography
TypographyNoto Sans JP & Lato

大見出しは weight 300。700 は使わない

和文は Noto Sans JP 1 本(可視 399 / 141 要素)、日付と英字だけ Lato を先頭に足す(164 / 13 要素)。ウェイトの最大は 600。見出しを太くするのではなく、大きく細くして静かにする。

111213 13.514.515 15.751821 24 2832
Page Title ★Noto Sans JP / 3.2rem(32px) / 300
lh 1.20 / ls 0.01rem
プラカードのために
Section Heading2.8rem(28px) / 300
lh 1.60 / ls 0.01rem
展覧会のみどころ
Event Date ★Lato / 2.4rem(24px) / 600
lh 1.00 / ls -0.05rem
2026.9.19(土)〜 11.29(日)
Sub Heading2.1rem(21px) / 500
lh 1.60
時を超える声と実践
Card Title2.0rem(20px) / 300
lh 1.30 / color rgba(0,0,0,.9)
CAMKスクリーニング Vol.4
Article Body ★1.5rem(15px) / 400
lh 2.00 / ls 0.01rem
「プラカードの為に」で言及される《プラカード》と、その後の制作を並べて展示します。美術家・田部光子を軸に、現在も制作を続ける作家たちの仕事を紹介する展覧会です。
Global Nav ★1.45rem(14.5px) / 400
lh 1.80 / ls -0.03rem
アートワーク・コレクション
Today BarLato / 1.4rem(14px) / 500
lh 1.00 / color #5bb016
2026年9月18日(金) 本日は開館日 10:00 - 20:00
Category Label1.3rem(13px) / 400
lh 1.40 / color #5bb016
ギャラリーⅠ・Ⅱ 開催予定の展覧会
Menu LabelLato / 1.1rem(11px) / 600
lh 1.00 / ls 0.1rem
MENU
03-b / Letter spacing

既定は「詰めない」ではなく「0.01rem 空ける」

既定 — 0.01rem(0.1px)/可視 356 要素熊本市現代美術館のコレクションと企画展示
ヘッダーナビ — -0.03rem(-0.3px)/37 要素熊本市現代美術館のコレクションと企画展示
会期・日付 — -0.05rem(-0.5px)/128 要素熊本市現代美術館のコレクションと企画展示
英字ラベル — 0.08rem(0.8px)Contemporary Art Museum, Kumamoto

字間は rem のまま書く。html が 10px なので 0.01rem = 0.1px。em にも px にも読み替えない。詰めるのはナビと日付だけで、本文は詰めない。

font-feature-settings: "palt" は 1 要素も使っていない(CSS 全文でも 0 回)。括弧の多い会期表記(2026.9.19(土))は letter-spacing: -0.05rem で詰めている。同じ場所に palt を重ねない。

ExhibitionDefinition list

カテゴリ(緑)/タイトル/会期/説明

開催中/入場無料
ギャラリーⅠ・Ⅱ 開催予定の展覧会
プラカードのために
2026.9.19(土)〜 11.29(日)
2024年に死去した美術家・田部光子を軸に、九州の戦後美術を問い直す。
― 詳しく見る →
開催予定
井手宣通記念ギャラリー
文化的処方
2026.8.5(水)〜 10.31(土)
地域に根ざしたアート・文化で、心身ともに健やかな暮らしを考える。
― 詳しく見る →
天井照明のアートワーク
MILK RUN SKY 2002
常設
毎夜19:30〜15分間、光の色が変化します。
― 詳しく見る →

カードに影も枠線も付けない。実サイトの box-shadow は 0 種。階層は文字の不透明度(緑 → rgba(0,0,0,.9) → .65)で作る。

05 / Article
Exhibition DetailBody 1.5rem / 2.00

プラカードのために

2026.9.19(土)〜 11.29(日)

美術家・田部光子(1933-2024)は、1961年に《プラカード》を発表した。本展覧会では、物故作家の田部に加え、近年特に注目される作家たちの仕事を並べて展示する。

一流労組のカンパニヤの為のプラカードは何故こうも美しくないのか。
―田部光子「プラカードの為に」『九州派』より

みどころ1

時を超える声と実践

「プラカードの為に」で言及される《プラカード》と、その後の制作を並べて見ることで、60年を隔てた二つの時間が重なる。

田部光子《プラカード》1961年、東京都現代美術館蔵

ComponentsRadius 4px

角丸は 4px が既定

お知らせ アートロフト等のLED移行工事に伴う利用中止期間について

Notice Bar

お知らせ
bg #5bb016 / color #fff
padding 8px 15px / radius 2px
18px / weight 500 / lh 1.00

Status Ribbon

開催中/入場無料
bg #5bb016 / color #fff
padding 6px 10px
radius 0 0 4px 4px(画像の下端に貼る)

Point Badge

みどころ1
bg #333333 / color #fff
padding 8px 10px / radius 3px
12px / weight 500

Card Link

開催予定 / ギャラリーⅠ・Ⅱ
border 1px solid transparent
padding 10px 10px 20px / radius 0
枠は持つが透明(ホバーで出す)

Close Button

bg #eeeeee / radius 50px
16px / ls 0.01rem

Carousel Arrow

bg rgba(0,0,0,.2) / radius 50%
padding 12px 14px

Focus(キーボード操作)

― 詳しく見る →
outline 2px solid #5bb016 / offset 3px

Radius Scale

2px
3px
4px ★
既定は 4px(可視 36 / 19 要素)
07 / Layout & Depth
Layout1290px / mobile first

余白・コンテナ・ブレークポイント

6
10
15
20
40

コンテナは 1290px(CSS 全文で 3 回・最頻)。本文カラム 700px、中カラム 652px、狭カラム 528px。

ブレークポイントはモバイルファーストの min-width。400 / 541 / 600 / 768 / 960 / 1024 / 1100 / 1280 / 1440px。max-width で書かない。

影は 0 種。階層は文字の不透明度と「緑か黒か」で作る。カードに box-shadow を足さないこと。