サイト全体で使われている色は実質この 5 つだけ。彩度はすべて作品写真が担当する。セマンティック色(エラー・成功・警告)は定義されていない——必要なら #043d8a を「情報・強調」として流用し、赤や緑を新規に持ち込まない。
反転文字には #ffffff ではなく地色と同じ #f9f9f9 を使う。紙 1 枚の中で色数を増やさないため。
letter-spacing は 1.5px の px 固定で、em ではない。本文(24px)では 0.0625em だが、キャプション(11px)まで落ちると 0.136em に膨らむ——小さい文字ほど字間が開く。line-height も 40px の px 固定で、font-size 側を動かして行間比を変える。和文の font-weight は全域 400(太ゴ B101 が書体として既に太いため)。
和文は 2 書体を役割で分ける。本文と見出しが太ゴ B101、セクション見出しとキャプションが中ゴシック BBB——太ゴが「本文」で中ゴが「小見出し」という、一般的な感覚とは逆の配分。
欧文だけ字間を 3 倍近く開ける(和文 0.0625em に対し欧文 0.167em)。和欧を同じ字間で組まない。欧文の line-height はすべて 1.0 で、字面がそのまま矩形になる——額縁レイアウトで辺に沿わせるのに都合がいい。
line-height: 40px を固定して font-size 側を動かすため、20px のリードと 24px の本文が同じベースライン上に乗る。縦の余白も 40 の倍数で取ると、2 段組にしたときに行が揃う。
同じ 40px の行送りに、20px のリードが乗る。
そして 24px の本文も、まったく同じ 40px の行送りの上に乗ります。文字の大きさが変わっても、行の位置は動きません。青い線が 40px グリッドです。
開館以来、ポーラ美術館は「箱根の自然と美術の共生」を掲げてきました。西洋絵画、日本の洋画、日本画、東洋磁器、化粧道具、ガラス工芸——約一万点のコレクションは、一人の実業家が四十余年をかけて集めたものです。
森の遊歩道には現代美術の作品が点在しています。展示室を出てからも、鑑賞は続きます。
カードという部品を作らない。作品は「画像の矩形」+「その下のキャプション」だけで並ぶ。画像に border-radius を付けない(額装の矩形を壊さない)。
ボタンの形は 1 種類しかない。transparent + border 2px solid #000000 + radius 0。padding が 10px 7px 11px 10px と上下左右で不揃いなのは、和文の字面が上に寄る分を下で 1px 補正しているため。
原典の padding では 15px + 10px + 11px + 2px × 2 = 40px で 44px 基準にわずかに足りない。実装では上下を 12px に上げて 45px を確保する。
面付きナビブロックは #e6e6e6 / radius 0 / 罫なし。
原典のフォームは検索欄程度で専用の意匠を持たない。以下はこのデザインシステムの原則(角丸 0・影なし・罫で切る)に従って起こした実装案。
Default
Focus
Error
エラーを赤で示さない(サイトに赤が存在しない)。罫を 2px に太らせ、メッセージの左に 2px solid #000000 の罫を立てて示す。入力欄の文字は 16px(iOS の自動ズーム回避)。
影が 1 つも使われていない。全要素が box-shadow: none かつ border-radius: 0。奥行きという概念を持たず、#f9f9f9(地)と #e6e6e6(面)の 2 段も「浮いている」ではなく「別の紙」として扱う。モーダルが必要な場合も、影ではなく 2px solid #000000 の罫で切る。
寸法トークンは存在しない。縦のリズムの単位は 40px(本文の行送りと一致)。
角丸は 全要素 0px。作品画像にも付けない。
コンテナは 850px(CSS 中 2795 箇所で使われる実質唯一の基準幅)。ブレークポイントは max-width: 850px が主分岐で、以下 700 / 640 / 379 / 370px。特徴的なのは min-width: 1590px と min-width: 2120px のワイド拡張が 2 段あること——大画面でコンテナを固定して余白だけ増やすのではなく、文字と画像を積極的に大きくする。