P空 113 台 TICKET
POLA MUSEUMOF ART
POLA MUSEUMOF ART
OF ART
OF ART
Colorsカラーパレット
Ink
#000000
見出し・本文。純黒をそのまま使う
Ink Sub
#333333
補助テキスト
Paper
#f9f9f9
ページ地色。純白ではない
Surface
#e6e6e6
面付きナビブロック
Museum Blue
#043d8a
ブランド色。文字とアイコン専用。面を塗らない

サイト全体で使われている色は実質この 5 つだけ。彩度はすべて作品写真が担当する。セマンティック色(エラー・成功・警告)は定義されていない——必要なら #043d8a を「情報・強調」として流用し、赤や緑を新規に持ち込まない。

反転文字には #ffffff ではなく地色と同じ #f9f9f9 を使う。紙 1 枚の中で色数を増やさないため。

Typographyタイポグラフィ

letter-spacing1.5px の px 固定で、em ではない。本文(24px)では 0.0625em だが、キャプション(11px)まで落ちると 0.136em に膨らむ——小さい文字ほど字間が開くline-height40px の px 固定で、font-size 側を動かして行間比を変える。和文の font-weight は全域 400(太ゴ B101 が書体として既に太いため)。

Display (EN) / Futura PT
30px w600
lh 30px (1.0)
ls 1.4px = 0.047em
POLA MUSEUM OF ART
Section Label (EN)
24px w600
lh 24px (1.0)
ls 4px = 0.167em
EXHIBITION
Heading / 太ゴ B101
24px w400
lh 40px (1.667)
ls 1.5px = 0.0625em
モネからリヒターへ
Body / 太ゴ B101
24px w400
lh 40px (1.667)
ls 1.5px = 0.0625em
ポーラ美術館は、箱根・仙石原の森の中にあります。建物の八割は地下に埋められ、外から見えるのは森のスカイラインを越えない高さだけです。
Lead / 太ゴ B101
20px w400
lh 40px (2.0)
ls 1.5px = 0.075em
箱根の自然と美術の共生。同じ 40px の行送りに、24px と 20px の両方が乗る。
Lead(広字間)
20px w400
lh 40px (2.0)
ls 3.8px = 0.19em
見出しとして組むリード
Section Head / 中ゴ BBB
18px w400
lh 34px (1.889)
ls 1.5px = 0.083em
開館時間とアクセス
Small / 太ゴ B101
15px w400
lh 15px (1.0)
ls 0.8〜1px
ミュージアムショップ
Caption / 中ゴ BBB
11px w400
lh 20px (1.818)
ls 1.5px = 0.136em
クロード・モネ《ジヴェルニーの積みわら》1884 年 油彩・カンヴァス ポーラ美術館蔵

和文は 2 書体を役割で分ける。本文と見出しが太ゴ B101、セクション見出しとキャプションが中ゴシック BBB——太ゴが「本文」で中ゴが「小見出し」という、一般的な感覚とは逆の配分。

欧文だけ字間を 3 倍近く開ける(和文 0.0625em に対し欧文 0.167em)。和欧を同じ字間で組まない。欧文の line-height はすべて 1.0 で、字面がそのまま矩形になる——額縁レイアウトで辺に沿わせるのに都合がいい。

Rhythm縦のリズム

line-height: 40px を固定して font-size 側を動かすため、20px のリードと 24px の本文が同じベースライン上に乗る。縦の余白も 40 の倍数で取ると、2 段組にしたときに行が揃う。

同じ 40px の行送りに、20px のリードが乗る。

そして 24px の本文も、まったく同じ 40px の行送りの上に乗ります。文字の大きさが変わっても、行の位置は動きません。青い線が 40px グリッドです。

Exhibition展覧会

開館以来、ポーラ美術館は「箱根の自然と美術の共生」を掲げてきました。西洋絵画、日本の洋画、日本画、東洋磁器、化粧道具、ガラス工芸——約一万点のコレクションは、一人の実業家が四十余年をかけて集めたものです。

森の遊歩道には現代美術の作品が点在しています。展示室を出てからも、鑑賞は続きます。

睡蓮の池
クロード・モネ 1899 年
油彩・カンヴァス
森の遊歩道
仙石原・ヒメシャラの林
屋外展示
東洋磁器
コレクション展
常設展示室

カードという部品を作らない。作品は「画像の矩形」+「その下のキャプション」だけで並ぶ。画像に border-radius を付けない(額装の矩形を壊さない)。

Buttonsボタン

ボタンの形は 1 種類しかない。transparent + border 2px solid #000000 + radius 0。padding が 10px 7px 11px 10px と上下左右で不揃いなのは、和文の字面が上に寄る分を下で 1px 補正しているため。

原典の padding では 15px + 10px + 11px + 2px × 2 = 40px44px 基準にわずかに足りない。実装では上下を 12px に上げて 45px を確保する。

面付きナビブロックは #e6e6e6radius 0 / 罫なし。

Formsフォーム

原典のフォームは検索欄程度で専用の意匠を持たない。以下はこのデザインシステムの原則(角丸 0・影なし・罫で切る)に従って起こした実装案

Default

全角でご記入ください。

Focus

outline 2px solid #043d8a / offset 2px

Error

正しい日付をご記入ください。

エラーを赤で示さない(サイトに赤が存在しない)。罫を 2px に太らせ、メッセージの左に 2px solid #000000 の罫を立てて示す。入力欄の文字は 16px(iOS の自動ズーム回避)。

Elevation奥行き

影が 1 つも使われていない。全要素が box-shadow: none かつ border-radius: 0奥行きという概念を持たず、#f9f9f9(地)と #e6e6e6(面)の 2 段も「浮いている」ではなく「別の紙」として扱う。モーダルが必要な場合も、影ではなく 2px solid #000000 の罫で切る。

地(#f9f9f9)
ページの地色
面(#e6e6e6)
別の紙。浮いているのではない
罫(2px)
影の代わりに切る
Layoutレイアウト

寸法トークンは存在しない。縦のリズムの単位は 40px(本文の行送りと一致)

7px — ボタン右 padding
10px — ボタン上・左 padding
11px — ボタン下 padding(和文の字面補正)
35px — 見出しの下マージン
40px — 縦のリズムの基準(行送りと一致)
80px — 40 × 2

角丸は 全要素 0px。作品画像にも付けない。

コンテナは 850px(CSS 中 2795 箇所で使われる実質唯一の基準幅)。ブレークポイントは max-width: 850px が主分岐で、以下 700 / 640 / 379 / 370px。特徴的なのは min-width: 1590pxmin-width: 2120px のワイド拡張が 2 段あること——大画面でコンテナを固定して余白だけ増やすのではなく、文字と画像を積極的に大きくする