図書館・美術館・博物館が同居するミュージアム

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

チケット購入はこちら DESIGN.md を読む
重要なお知らせ
2026.03.13角川武蔵野ミュージアムの公式チケット販売サイト変更のお知らせ
2025.06.27【ご注意】当館になりすましたSNSアカウントについて
› 一覧
トピックス
2026.07.148月の休館日【4日、18日、25日】及び8月31日までのチケット販売に関するお知らせ
2026.07.05夏休みは家族で角川武蔵野ミュージアムへ!小学生無料キャンペーンを実施します
› 一覧

01 / Colors

カラーパレット — 墨と山吹の 2 色が骨格

Brand
Sumi
#231815
主色。印刷のスミ=赤みのある黒。面・枠・帯・バッジ
Yamabuki
#ffcc00
唯一の高彩度。チケット購入導線だけ
Cream
#f7f3de
企画展セクションの地。紙の色
Black
#000000
本文テキストのみ。面や枠には使わない
Category — カテゴリ識別色(12px のバッジにのみ現れる)
Purple
#905ed3
企画展
Green
#4abf23
ライブラリー・Success に流用
Cyan
#38b9e1
イベント
Warm Gray
#766965
開催予定。墨の彩度を落とした同系色
Neutral
Background
#ffffff
ページ地色。純白
Surface
#e9e9e9
トピックス帯・言語切替メニュー
Ink Muted
#939393
写真クレジット・非活性
Warning
#d98c00
山吹は流用しない(実装目安)
Modal Scrim — rgba(0,0,0,0.8) + 45° ハッチング
背景の写真が透けつつ、7.5px / 15px 周期のハッチングが均一なテクスチャを与える

02 / Typography — 実測値

タイポグラフィ階層 — ウェイトは 100 / 400 / 700 の 3 段

フロアガイド
28px / 700 / line-height: 1.5 / letter-spacing: 0.32pxセクション見出し(横組み)
館長通信 No.18 現代に自然との共生を考える
20px / 700 / line-height: 1.5 / letter-spacing: 0.32px記事見出し
本文テキスト — 自然との共生。美しい言葉です。ふだん私たちが目にする自然は、すでに人の手が入ったものであることも多い。角川武蔵野ミュージアムは、ラノベ・マンガから現代アート・古典籍までを一つの建物のなかに収めています。
16px / 400 / line-height: 1.5 (24px) / letter-spacing: 0.32px (0.02em)body の基準
トピックス/館長挨拶/チケット/営業カレンダー
16px / 700 / line-height: 1.5 / letter-spacing: 0.32pxサブ見出し・ナビ
企画展/イベント ご利用案内 フロアガイド ミュージアムを知る レストラン・ショップ
14px / 700 / line-height: 1.5 / letter-spacing: 0.32pxグローバルナビ
営業カレンダー 本日の営業時間:10:00 〜 18:00
12px / 400 / line-height: 1.5 / letter-spacing: 0.32pxユーティリティナビ
蔵書/収蔵品 検索  2026/7/15
12px / 100(Thin) / line-height: 1.5墨地の上の白い細字と日付だけ
写真:新津保建秀
10px / 400 / line-height: 1.5 / color: #939393写真クレジット

文字サイズは 28 / 20 / 16 / 14 / 12 / 10 の 6 段。24px・18px を作らない。ウェイトは 100 / 400 / 700 の 3 段で、500・600 を使わない。


縦組みのセクション見出し(writing-mode: vertical-rl)

企画展/イベント
/ライブラリー

展覧会ポスター
開催中企画展

銀河鉄道999 THE GALAXY EXPERIENCE あの旅は、まだ続いている。

期間
2026年04月25日[土]〜2026年10月26日[月]

場所
1F グランドギャラリー
展覧会ポスター
開催中企画展

池上彰と考える現代アート Vol.1 「われわれが何をしたのか」

期間
2026年03月28日[土]〜2026年09月07日[月]

場所
4F エディット アンド アートギャラリー
展覧会ポスター
開催予定ライブラリー

ワンダーバードに憧れて 鳥に取り憑かれた人々

期間
2026年04月18日[土]〜2026年09月28日[月]

場所
4F 荒俣ワンダー秘宝館
イベント写真
開催中イベント

角川源義の時代〜荒波を越えて〜

期間
2025年10月25日[土]〜

場所
5F 武蔵野ギャラリー

本棚劇場

高さ約8メートルの巨大本棚にかこまれた空間。KADOKAWA 刊行物と、角川源義文庫、山本健吉文庫、竹内理三文庫、外間守善文庫ほかの個人蔵書が一堂に集まっています。

› くわしく見る

縦組み見出しは 28px / weight 700 / letter-spacing: 0.2em(em 指定)。折り返しは <br> で明示する。横組みの 0.32px(px 固定)とは指定方法自体が違う。モバイル(≤767px)では横組みに切り替えるが 0.2em は維持する。


04 / Buttons & Badges

枠線はすべて 3px。pill はチケット専用の形

チケット購入はこちら
Ticket CTA — #ffcc00 / radius 50px
特設ページはこちら
Filled — #231815 / radius 0
› 続きを読む
Outline — 3px solid #231815
› くわしく見る
Outline (14px)
蔵書/収蔵品 検索
Search — weight 100(Thin)

カテゴリバッジ(矩形・padding 2px 5px・12px weight 400)

開催中 開催予定 企画展 ライブラリー イベント

状態(開催中/開催予定)と分類(企画展/ライブラリー/イベント)を同じ形で並べ、色だけで区別する。バッジは pill にしない。weight は 400(ボタンの 700 と役割で分ける)。


05 / Forms

フォーム要素(実装目安)

実サイトに独立した入力欄は現れない(検索は別ドメインの蔵書検索システムへ遷移する)。このサイトの「枠は必ず 3px」に揃えた実装案。

デフォルト — border: 3px solid #231815 / radius: 0
フォーカス — border: #ffcc00(山吹)
エラー — border: #c0392b(実装目安)

06 / Elevation — 実測 0 件

Depth & Elevation — 「浮かせる」代わりに「囲む」

Level 0: Flat
すべて。box-shadow は 1 つも使わない
帯 #231815
重要なお知らせ
帯 #e9e9e9
トピックス
帯 #f7f3de
企画展セクション

奥行きは帯の面色(白 → #231815 → #e9e9e9 → #f7f3de)と 3px の枠だけで表現する。3px の太い枠が影の役割を代替している。


07 / Layout

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

XS 2
S 6
M 15
L 24
XL 48
XXL 80
XXXL 120
Main Container 1240px
Sub Container 1200px
Article 800px