TICKET language
【施設情報】駐車場の利用休止について
設備メンテナンスのため、現在、駐車場はご利用いただけません。
企画展
文学を体験する
空間へ
世田谷文学館 外観
2026
10.2
OPEN 10:00 - 18:00

NEWS

  • 2026.09.25【施設情報】駐車場の利用休止について
  • 2026.10.012026年度新世田谷文学賞 募集のおしらせ
  • 2026.09.25【イベント情報更新】関連イベントを公開しました
01 / Colors
COLOR

マゼンタとシアンの2原色

CSS Custom Properties を 1 個も持たない。色はセレクタ側に直書きされ、面に使うのはマゼンタ #ff0066 とシアン #00baec の 2 色だけ。中間色を挟まず、ベタ面でブロックを分ける。マゼンタが 2 つあるのは実装の実態で、ピル型 CTA だけ #e81a79 を使う。

マゼンタ(面)
#ff0066
★塗り面 5 要素 / CSS 6 回。開館日の帯・見出し面
マゼンタ(CTA)
#e81a79
「詳しくはコチラ」ピル専用(CSS 3 回)
シアン
#00baec
★塗り面 4 要素 / CSS 11 回。文字色でも 37 要素
イエロー
#ecb319
下層の「開催中の展覧会」見出し面
ベージュ
#f0debe
ライブラリー〈ほんとわ〉ブロック(3 要素)
Ink
#1a1a1a
★本文・見出し。可視 250 要素。html で宣言し継承
Muted
#939393
カレンダーの曜日ラベル(可視 42 要素)
Black
#000000
黒ピル・矩形 CTA・カレンダー日付の面

本文の文字色は #1a1a1a。純黒 #000000 は面にだけ使い、文字には使わない。

TYPE

書体で階層をつくる

ルートは 14px。html に font-size: 14px / letter-spacing: 0.08em / font-feature-settings: "palt" 1 / line-height: 1.5 / color: #1a1a1a を 1 回だけ書き、可視 448 要素中 417 要素が字間 1.12px を継承する。h1〜h6 はリセットで 14px / weight 400 に潰してあるので、見出しの大きさはクラスが決める。

11.51314 151618 18.72428.8 57
Page Title ★見出ゴ MB31 / 57px / 600
lh 1.5 / ls 0.08em(4.56px)
代替: Zen Kaku Gothic New
展覧会情報
展覧会タイトル ★凸版文久見出しゴ / 28.8px / 900
lh 1.4 / 可視 7 要素
代替: Noto Sans JP 900
ヤマザキマリの世界
Section (EN) ★Rig Shaded / 26px / 700
lh 1.0 / 可視 293 要素で最多
代替: Archivo Black
EXHIBITION
Section (JA)見出ゴ MB31 / 24px / 600
lh 1.0 / 白地 + 2px solid #000
margin-top: -28px
展覧会情報
Local Nav見出ゴ MB31 / 20px / 600
lh 1.0
開催中の展覧会
Lead見出ゴ MB31 / 19px / 600
lh 1.4
今この瞬間を生きる ―Carpe Diem―
Nav / CTA見出ゴ MB31 / 18px / 600〜700
lh 1.11
ご利用案内 展覧会情報 イベント情報
Calendar Date ★Rig Shaded / 18.72px / 700
lh 1.0 / 可視 186 要素
2 7 14
Body ★ヒラギノ角ゴ / 14px / 400
lh 1.5(21px) / ls 1.12px
可視 417 要素が継承
世田谷文学館は、世田谷ゆかりの文学者の資料を収集・保存・展示し、文学を体験する空間として、展覧会・イベント・ライブラリーを通じてことばの楽しさを届けています。
Newsヒラギノ角ゴ / 15px / 400
lh 1.5 / 可視 32 要素
2026年度新世田谷文学賞 募集のおしらせ
Captionヒラギノ角ゴ / 13px / 400
lh 1.5 / 可視 39 要素
10:00 - 18:00(入館は17:30まで)
WeekdayRig Shaded / 11.52px / 700
lh 1.0 / color #939393
MON TUE WED THU FRI SAT SUN
Maru GothicZen Maru Gothic / 700
可視 2 要素だけ
世田谷文学館(セタブン)と、みなさまをつなぐ会員制度

ウェイトは「太さ」ではなく「書体の選択」。Adobe Fonts の 3 書体はそれぞれ単一ウェイトで配信されている(見出ゴ MB31 = 600 / Rig Shaded = 700 / 凸版文久見出しゴ = 900)。見出ゴ MB31 に 700 を当てるとブラウザの合成太字になり字形が崩れる。

Rig Shaded は欧文専用。スタックは rig-shaded-bold-face, sans-serif で和文グリフを持たないため、同じ要素に日本語が混ざると和文だけ OS 既定に落ちる。実サイトの English 簡体中文 がそれで、意図的に欧文だけ装飾している。

字間は html に 1 回だけ。子要素で letter-spacing を再宣言しないこと。14px × 0.08em = 1.12px が px のまま降りるので、サイズの違う要素でも同じ 1.12px になる。それがこの設計の意図。

Adobe Fonts が揃うまでページ全体を隠す。実サイトは html { visibility: hidden } / html.wf-active { visibility: visible; animation: fadeIn 1s }。Typekit が wf-active を付けるまで白紙になる。再現する場合は取得失敗時の保険を併せて実装すること。

03 / Components
PARTS

ピルと矩形の二本立て

CTA はマゼンタのピル(radius 40px)と黒の矩形(radius 0)の 2 系統。どちらも下パディングを上より 1.4〜1.8px 削って視覚中央に寄せている。バッジの既定 radius は 4px。

休館日 TICKET OPEN 2 ムットーニのからくり劇場

Cards

企画展
企画展
ヤマザキマリの世界
2026.10.3 — 2027.2.7
コレクション展
コレクション展
後期コレクション展
2026.9.1 — 2026.12.20
イベント
イベント
ムットーニのからくり劇場
2026.11.15

Calendar

MONTUEWEDTHUFRISATSUN
293012345
6789101112

Forms

実サイトは Google カスタム検索をそのまま使っており、サイト側のフォーム意匠を持たない。新規実装では本文書体・14px・border-radius: 4px に合わせる。

全角でご記入ください
確認用のメールをお送りします
市外局番から半角でご記入ください
LAYOUT

影ゼロ、面で奥行きを出す

可視要素の box-shadow は 0 種。CSS 全文でも 1 回(slick 由来で可視 0 要素)、filter: drop-shadow() も 0 件。奥行きは色面の重なりと 2px の黒罫で作る。

Level 0
box-shadow: none
サイトのすべて
2px 黒罫
border: 2px solid #000000
見出しの白地ボックス
ベタ面
background: #ff0066
ブロックの区切りは面の色で

Container

1450px — 最大外枠
1380px — 標準コンテンツ
1060px — 記事幅(下層の既定)
860px — 読み物幅
527px — カラム
0 — 矩形 CTA・見出し
4px — 既定(可視 10 要素)
30px — 黒ピル
40px — マゼンタのピル

ブレークポイントはすべて max-width のデスクトップファースト。768px(CSS 内 7 回で最多)/ 640px / 480px / 950px / 1060px。html は 4 幅すべてで 14px 固定で、字間・行間・palt もブレークポイントで変わらない。