森美術館 / Mori Art Museum（モリ美術館） DESIGN.md

森美術館（Mori Art Museum）公式サイト 日本語版（https://www.mori.art.museum/jp/）のデザイン仕様書。 1997 年構想・2003 年開館の現代アート専門館。六本木ヒルズ森タワー 53 階に位置する東京の代表的なコンテンポラリーアート美術館。 国際性・実験性・教育普及を 3 つの柱とする。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 「クリムゾン #bf0d3e」を全要素のアクセントとして使い、ヒラギノサンス + 軽量カスタム英字ロゴ「MoriLogoB」で構成された美術館サイトの王道デザイン。色の禁欲性が強く、白と灰色のキャンバスにブランド色が点在する構成
• 密度: 展覧会情報・チケット情報・教育プログラム・関連イベントが並列で並ぶ密度の高いインデックス。情報量を整理するためにラベル状の小バッジ（11px / weight 700）を多用
• キーワード: クリムゾン、現代アート、ヒラギノサンス、白と濃灰、整然、ラベル、強い赤、館内案内、六本木、誌面組版
• 特徴:
  • クリムゾン #bf0d3e が全アクセント — 見出し色・リンク色・バッジ・CTA・アンダーラインまで、ブランド色をラベリングのために徹底使用
  • 本文は Hiragino Sans + Hiragino Kaku Gothic ProN + メイリオ — Apple の標準和文 + Windows フォールバックの教科書的なチェーン
  • 専用ロゴフォント MoriLogoB — 48px / weight 400 で「M」のロゴマークに使われる独自書体
  • 本文サイズ 15px / weight 400 / line-height 1.75 — 美術館らしい長文向けの読みやすい比率
  • タグ/バッジは 11px / weight 700 / クリムゾン — 「ロン・ミュエク」「展覧会関連」「シンポジウム」等の分類ラベル
  • CTA は白背景 + クリムゾン文字 + 罫線 + radius 5px — 「来館のご案内」「チケット・料金」など、控えめだが識別しやすい
  • ヘッダーは濃灰 #333333、ベースは #f8f8f8 / #f5f5f5 の中間グレー — 写真の発色を妨げない無彩色ベース
  • 黒は #252525 — 純黒は使わず、わずかに引いた濃グレーが本文色

2. Color Palette & Roles

実サイトの uniqueBackgrounds と computed style 実測値に基づく。

Brand

• Mori Crimson (#bf0d3e): ブランドカラー（rgb(191, 13, 62)、出現回数 6）。見出し・リンク・バッジ・CTA 文字色で広範に使用。深紅と朱の中間の鮮やかなクリムゾン
• Inverse on Crimson (#ffffff): クリムゾン背景上の白文字（バッジ等）

Foreground

• Body Black (#252525): 本文・h1 / h2 / h3 のテキスト色（rgb(37, 37, 37)）。純黒ではない濃グレー
• Mid Gray (#4c4c4c): 補助リンク・ナビ補助（rgb(76, 76, 76)）
• Soft Gray (#7f7f7f): キャプション・date 表記（rgb(127, 127, 127)）
• Strong Black BG (#333333): ヘッダー・暗色帯の背景（rgb(51, 51, 51)、出現回数 1）

Surface

• Pure White (#ffffff): モーダル・カード・本体面
• Page Surface (#f8f8f8): セカンダリナビ背景（rgb(248, 248, 248)）
• Section Surface (#f5f5f5): セクション帯（rgb(245, 245, 245)、出現回数 3）
• Tag Surface (#ebebeb): タグ・バッジ背景（rgb(235, 235, 235)、出現回数 12 — タグの密度を象徴する）

Custom Logo Font

• MoriLogoB — 48px / weight 400 / クリムゾン文字色のカスタムロゴフォント。M の意匠は SVG ではなくフォントで実装

Note: Mori Art Museum のパレットは 「ほぼ無彩色のキャンバス + 唯一のブランド色クリムゾンを徹底使用」。アート作品の色を際立たせるため、UI が彩度を持たない設計。タグ背景 #ebebeb の出現回数 12 は、情報をラベリングする美術館サイトらしい設計の証拠。

3. Typography Rules

3.1 和文フォント

ゴシック体（メイン・本文）:

• Hiragino Sans（macOS Big Sur 以降の標準和文）
• Hiragino Kaku Gothic ProN（macOS の標準和文、ヒラギノ角ゴ ProN）
• メイリオ（Windows 標準）
• sans-serif（generic）

このチェーンは Apple のヒラギノを最優先にしつつ、Windows ではメイリオへ自然に落とすという、現在の日本語 Web デザインの教科書的な実装。

3.2 欧文フォント

• MoriLogoB（独自カスタムフォント、ロゴ専用）
• Arial（一部の汎用 span 等で使用）
• 和文フォント内蔵の欧文グリフ — Hiragino Sans には欧文も含まれているのでそのまま使う

3.3 font-family 指定

css/* 本文・見出し（ヒラギノ + メイリオ） */
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", メイリオ, sans-serif;

/* ロゴ（カスタム） */
font-family: MoriLogoB;

/* 一部 span（Arial） */
font-family: Arial;

フォールバックの考え方:

• Hiragino Sans を最優先 — Big Sur 以降の Apple 環境で表示品質が最も高い
• Hiragino Kaku Gothic ProN で旧 macOS にフォールバック
• メイリオ で Windows をカバー
• 最後に generic sans-serif
• MoriLogoB は @font-face で読み込み — Web フォントとして配信

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文 line-height: 1.75（26.25px / 15px）。美術館サイト/長文向けの広め行送り
• 見出し line-height: 1.5（22.5px / 15px）
• ヒーロー line-height: 1.5（40.5px / 27px）
• タグ line-height: 2.0 (20px / 10px) — ラベル状の余白感を作るためにあえて広く
• letter-spacing: 全要素 normal（指定なし）。字間ではなく行送りで読みやすさを作る
• 意図: 展覧会・作品キャプション・解説文の長文を読みやすくするための広い line-height。letter-spacing を使わないのはヒラギノのメトリクスをそのまま信頼

3.6 禁則処理・改行ルール

• 特別な指定なし。ブラウザのデフォルト挙動を尊重
• 美術館サイトに多い「アーティスト名・キャプション・脚注」は短いラベル単位で改行を避ける設計

3.7 OpenType機能

• 特別な指定なし
• ヒラギノのデフォルトメトリクスをそのまま使う（palt も kern も強制しない）

3.8 縦書き

• 未使用

4. Component Stylings

Buttons / Primary CTA

Standard CTA（白塗り + クリムゾン文字 + 罫線）

実例: 「来館のご案内」「チケット・料金」

• 背景: #ffffff
• 文字色: #bf0d3e（クリムゾン）
• 罫線: 1px solid #bf0d3e（推定）
• font-family: Hiragino Sans
• font-size: 16px / weight 700
• line-height: 約 1.5
• padding: 13px 11px
• border-radius: 5px
• text-transform: なし

Tags / Badges

Crimson Tag（カテゴリーラベル）

• 背景: 透明（rgba(0,0,0,0)）または #ebebeb
• 文字色: #bf0d3e
• font-size: 11px / weight 700
• line-height: 22.75px (2.07)
• padding: 5px 10px
• border-radius: 0px
• 表記例: 「ロン・ミュエク」「展覧会関連」「スクール」「シンポジウム」

Filled Crimson Badge（強調バッジ）

• 背景: #bf0d3e
• 文字色: #ffffff
• font-size: 13px / weight 700
• line-height: 13px (1.0)
• padding: 控えめ
• 表記例: 「参加受付中」

Header / Navigation

• Top Header（暗）: 背景 #333333 / 白文字 / Hiragino Sans 15px / weight 400
• Sub Nav（明）: 背景 #f8f8f8 / 文字 #252525 / Hiragino Sans 15px / weight 400
• ナビは中央揃えで、ロゴ M（MoriLogoB / 48px / クリムゾン）が中心

Inputs

• 背景: #ffffff
• 罫線: 1px の薄グレー
• 文字色: #252525
• font-family: Hiragino Sans
• font-size: 15px / weight 400
• border-radius: 推定 5px（CTA と統一）

Cards

• 背景: #ffffff または #ebebeb
• 罫線: なし
• 影: なし（フラット）
• 角丸: 0px
• 展覧会画像 + クリムゾンの日付ラベル + 黒の作品タイトル + 補助タグ

Section Banner

• 背景: #f5f5f5（セクション帯）
• 「展覧会スケジュール」「MORE PICK-UPS」等のセクション開始を示す

5. Layout Principles

Spacing Scale

実測値ベースの暗黙的なスケール：

Container

• コンテンツ最大幅は 1200px 前後
• 左右パディングは 24–40px
• セクション間は背景色（#f5f5f5 ↔ #ffffff）で区切る

Grid

• 展覧会一覧は 3 列（PC）／ 2 列（タブレット）／ 1 列（モバイル）
• カードのアスペクトレシオは 4:3〜16:9 の写真主体

6. Depth & Elevation

• 影: box-shadow: none がデフォルト。フラット
• 段階表現:
  • サーフェス色（白 → #f8f8f8 → #f5f5f5 → #ebebeb → #333333）の濃淡で領域を区別
  • クリムゾンのアクセントだけが目線を集める
• 角丸: CTA 5px、タグ・カード 0px

7. Do's and Don'ts

Do's

• 見出し・リンク・バッジに #bf0d3e（Mori Crimson） を使う — ブランドの軸
• 本文 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", メイリオ, sans-serif で OS 横断
• 本文 15px / weight 400 / line-height 1.75 を標準にする
• 見出し line-height 1.5 で読みやすさを確保
• タグは 11px / weight 700 / クリムゾン文字 で識別しやすく
• CTA は白塗り + クリムゾン文字 + radius 5px
• 影なし、フラット、サーフェス色の階層で奥行きを作る
• タグの line-height を 2.0 にしてラベル状の余白を作る
• 数値・日付はクリムゾン（13px / weight 700）で強調

Don'ts

• クリムゾン以外の彩色を増やさない — 作品の色を妨げないため
• 本文を 14px 以下に縮めない — 15px が美術館サイトの読みやすさの基準
• letter-spacing を持たせない — ヒラギノのデフォルトを信頼
• 見出しを uppercase にしない — 日本語の美術館サイトは大文字化を避ける
• 角丸を大きくしない — CTA は 5px、タグ・カードは 0px
• 影で深さを作らない — サーフェス色階層で表現
• 純黒 #000000 を本文に使わない — #252525 の濃グレーを基本に

8. Responsive Behavior

Breakpoints

タッチターゲット

• CTA padding 13px 11px → 高さ約 47px。WCAG 44px を満たす

フォントサイズの調整

• 本文 15px はモバイルでも保持
• ヒーロー 27px はモバイルで 22–24px に縮小
• タグ 11px はモバイルでも保持（情報密度を維持）

9. Agent Prompt Guide

森美術館らしい UI を生成するときは以下を伝えるとよい：

- 本文 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", メイリオ, sans-serif
- ロゴ font-family: MoriLogoB（カスタムフォント、48px / クリムゾン）
- ブランドカラー: #bf0d3e（Mori Crimson）— 見出し・リンク・バッジ・CTA 文字色
- 本文 15px / font-weight: 400 / line-height: 1.75（広め行送り）
- 見出し 15–27px / font-weight: 700 / line-height: 1.5
- 強調カラーテキスト 18px / weight 700 / クリムゾン
- タグ・バッジ: 11px / weight 700 / line-height: 2.0 / 文字色クリムゾン
- 日付ラベル: 13px / weight 700 / クリムゾン
- 本文色 #252525（純黒ではない濃グレー）
- 補助色 #4c4c4c（中グレー）/ #7f7f7f（キャプション）
- サーフェス階層: #ffffff / #f8f8f8 / #f5f5f5 / #ebebeb / #333333（暗）
- 標準 CTA: 白背景 + クリムゾン文字 + 1px クリムゾン罫線 + radius 5px
- 影なし / 影で奥行きを作らずサーフェス色階層で区切る
- 美術館サイトらしい誌面組版・分類ラベルの密度
- letter-spacing: normal（字間調整は行わない）