2121 DESIGN SIGHT DESIGN.md

21_21 DESIGN SIGHT 公式サイト（https://www.2121designsight.jp/）のデザイン仕様書。 三宅一生・佐藤卓・深澤直人の3ディレクターによる、東京ミッドタウン内のデザインミュージアム。 安藤忠雄設計、2007 年開館。実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白 #ffffff ベースに、シアンブルー #0090df をブランド主色として大胆に配する美術館的編集 UI。安藤忠雄建築の打ちっぱなしコンクリートの白さと、三宅一生のブランドカラーを思わせるブルーの対比
• 密度: 情報密度は中〜高め。展覧会情報・ニュース・スケジュール等のテキスト要素を 太字 weight 600 で組み、見出しの存在感を強く打ち出す
• キーワード: ピュアホワイト × シアンブルー #0090df、アクセント橙 #ff9900 の "NEW" バッジ、Noto Sans Japanese の weight 600 見出し + weight 400 本文の対比、letter-spacing は基本 normal、palt は使わない、円形（radius 50%）の言語切替ピル
• 特徴:
  • ブランド主色 = シアンブルー #0090df — リンク色・アクティブ言語ピル・ボーダー・h4 見出しに大胆使用。「青を恐れず使う」美術館的アイデンティティ
  • font-family は Noto Sans Japanese 単独 — 欧文も和文も同じ Noto Sans に統一する潔いシングルフォント設計（meiryo / MS PGothic フォールバック）
  • 見出しは weight 600（semi-bold） で太字に組む — KINTO や ACTUS の "全要素 400" とは正反対の、太字でヒエラルキーを作る方針
  • 本文は 14px / line-height 24px (1.71) — 一般的な日本語サイトと同等
  • letter-spacing は基本 normal — 字間を広げない、字間を詰めない。Noto Sans のメトリクスをそのまま使う
  • font-feature-settings は normal（palt を使わない） — 等幅の自然な約物処理
  • border-radius は 5px と 50% の二種類のみ — 通常 UI は 5px の小さい角丸、言語切替や丸ボタンは円形
  • アクセント橙 #ff9900 は "NEW" バッジに限定使用 — 4 件出現
  • 明色テキストは #333333 — 純黒ではなくダークグレー。シアンブルーとの対比を保つ
  • 薄いグレー面 #f3f3f3 をローディング画面・カテゴリナビ背景に使用

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• 21_21 Cyan Blue (#0090df): リンク・アクティブ言語ピル・h4 見出し・border 2px CTA に使用（rgb(0, 144, 223)、出現 3 回）。ブランドの主色
• Page White (#ffffff): ページ背景の純白
• Text Black (#000000): 強調見出し・h2 タイトル

Accent

• NEW Orange (#ff9900): "NEW" バッジ専用（rgb(255, 153, 0)、出現 4 回）。展覧会情報の新着訴求にのみ使用

Surface（背景）

• Page Background (#ffffff): 純白
• Light Gray Surface (#f3f3f3): カテゴリナビ・ローディング画面（rgb(243, 243, 243)）
• Mid Gray (#cccccc): 補助面・区切り（rgb(204, 204, 204)）

Text / Foreground

• Text Strong (#000000): h2 / h3 強調見出し
• Text Body (#333333): 本文・h3 small（rgb(51, 51, 51)）
• Text Inverse (#ffffff): 暗色帯・シアンブルー面上のテキスト
• Brand Link (#0090df): リンク・h4 ご利用案内見出し

3. Typography Rules

3.1 和文フォント

21_21 DESIGN SIGHT は Noto Sans Japanese 単独で運用。和文・欧文の区別なく同じフォントで組む。

• 第1候補: Noto Sans Japanese（Google Fonts）
• 第2候補: meiryo（Windows）
• 第3候補: MS PGothic（旧 Windows）
• 最終フォールバック: sans-serif

注意: ヒラギノ・游ゴシックを 置かない。Web フォントが優先で、最終的には OS の Meiryo / MS PGothic に着地する。

3.2 欧文フォント

専用の欧文フォントなし。Noto Sans Japanese が Latin 字形も内蔵しているため、英字・数字も同じ書体で組まれる。

• "JPN / ENG / CHN" の言語切替ラベル
• "21_21 DESIGN SIGHT" のサイトロゴテキスト
• "NEW" バッジ
• すべて Noto Sans Japanese で組む

3.3 font-family 指定

実サイトの実測値（body / h1 / h2 / h3 / h4 / a / p 共通）:

cssfont-family: "Noto Sans Japanese", meiryo, "MS PGothic", sans-serif;

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

• Web フォント Noto Sans Japanese を最優先
• 読み込み失敗時は Windows の Meiryo / MS PGothic に直接落ちる
• Mac の Hiragino を意図的に飛ばしている — Web フォント前提で OS 差を消す姿勢

3.4 font-size

実測のサイズスケール（PC 1440px ビュー）：

3.5 line-height

実測値：

• 本文 14px: 24px / 14px = 1.71
• h4 16px: 24px / 16px = 1.50
• h3 大 16px: 16px / 16px = 1.00（ボタン的に詰める）
• h3 small 12px: 12px / 12px = 1.00
• 本文 p sml 12px: 20px / 12px = 1.67
• 言語ピル 10px: normal（≈1.2）

3.6 letter-spacing

ほぼ全要素 normal。21_21 は字間を広げず、Noto Sans のデフォルトメトリクスをそのまま使う。

• これは KINTO（小さい文字ほど 0.12em）や ACTUS（一律 0.07em）と対照的
• 美術館サイトの情報密度を保つ選択

3.7 font-feature-settings

cssfont-feature-settings: normal;

• palt は使わない
• 等幅の約物（句読点・括弧）が自然に空く
• 展覧会タイトル等の固有名詞・引用符の正確な表示を優先

3.8 ウェイト戦略

21_21 は weight 400（regular）と 600（semi-bold）の2段階でヒエラルキーを作る。

KINTO・ACTUS と正反対の方針: 美術館サイトとして太字を恐れず使い、情報の優先度を視覚的にはっきり分ける。

4. Component Stylings

4.1 言語切替ピル（円形）

cssfont-family: "Noto Sans Japanese", meiryo, "MS PGothic", sans-serif;
font-size: 10px;
font-weight: 400;
line-height: normal;
letter-spacing: normal;
border-radius: 50%;  /* 完全な円 */
padding: 0;
width: ~28px;
height: ~28px;
display: inline-flex;
align-items: center;
justify-content: center;

• アクティブ: bg #0090df / color #ffffff（"JPN" 現在選択）
• 非アクティブ: bg #ffffff / color #333333（"ENG" "CHN"）
• 円形 radius 50% — 21_21 の象徴的な UI 要素

4.2 メイン CTA（border 線ボタン）

cssfont-family: "Noto Sans Japanese", meiryo, "MS PGothic", sans-serif;
font-size: 10px;
font-weight: 400;
color: #0090df;
background-color: #ffffff;
border: 2px solid #0090df;
border-radius: 5px;
padding: 20px 15px;

• 2px の太い枠線で存在感を出す
• 角丸 5px（小さく）
• シアンブルーの線と文字色で構成 — 塗りつぶしではなく線で訴求

4.3 NEW バッジ

cssbackground-color: #ff9900;  /* オレンジ */
color: #ffffff;
font-size: 10px;
font-weight: 400;
padding: 2px 6px;
border-radius: 0;

• 展覧会カード左上に表示する 新着告知バッジ
• 4 件出現（複数の展覧会で並行使用）

4.4 見出し

css/* h4 ご利用案内 */
font-family: "Noto Sans Japanese", meiryo, "MS PGothic", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #0090df;  /* シアンブルー */
padding: 0 0 15px;

/* h3 lrg 21_21 DESIGN SIGHT */
font-size: 16px;
font-weight: 600;
color: #0090df;

/* h3 reg 本文小見出し */
font-size: 14px;
font-weight: 600;
color: #000000;

• h3 / h4 の見出しはシアンブルー #0090df で組む — リンクと同じ色で「探索可能感」を出す
• ボディ内 h3 reg は黒
• すべて weight 600

4.5 本文 p

cssfont-family: "Noto Sans Japanese", meiryo, "MS PGothic", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: #333333;
letter-spacing: normal;

• ダークグレー #333333 で本文を組む
• 暗色帯上では color: #ffffff

4.6 サイトロゴ（テキスト）

cssfont-family: "Noto Sans Japanese", meiryo, "MS PGothic", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 16px;
color: #0090df;

• "21_21 DESIGN SIGHT" のロゴはテキストでも表現可能
• シアンブルー weight 600 で組む

4.7 カードレイアウト

• 展覧会カード: 写真 + タイトル + 期間
• NEW バッジ（オレンジ）を左上に配置
• 写真比率は 16:9 または 4:3
• カードに影なし、角丸なし

5. Layout Principles

• コンテナ最大幅: 1200〜1280px（美術館サイトとしてはコンパクト）
• グリッド: 展覧会カードは 3 列が主流
• セクション間余白: 60〜80px（情報密度を保つため、KINTO・ACTUS より詰める）
• 見出しは左揃えが基本
• 言語切替は右上ヘッダーに 3 つの円形ピルで横並び
• カテゴリナビは灰色帯 #f3f3f3 で本文と分離

6. Depth & Elevation

• 影は使わない（box-shadow: none）
• 階層は 面色 #ffffff → #f3f3f3 → #cccccc の段階で表現
• 太い border 2px が「ボタンらしさ」を作る要素
• 円形 radius 50% が言語切替の特殊性を表現
• ホバー状態は色の反転（白地→ブルー塗り）

7. Do's and Don'ts

✅ Do

• Noto Sans Japanese 単独 で和文・欧文を組む
• 見出しは weight 600 で太字、本文は 400 — 太字を恐れず使う
• リンク色 = h4 見出し色 = シアンブルー #0090df
• "NEW" バッジは オレンジ #ff9900 で限定使用（展覧会の新着のみ）
• 言語切替は 円形ピル radius 50%（アクティブはシアン塗り）
• メイン CTA は 2px solid #0090df / radius 5px の白地・線ボタン
• 本文テキストは #333333（純黒ではない）
• letter-spacing は normal で詰めも広げもしない

❌ Don't

• ヒラギノ・游ゴシックをフォールバックに置かない（Meiryo / MS PGothic 直行）
• 全要素 weight 400 にしない（太字でヒエラルキーを作る）
• letter-spacing を広げない（normal を維持）
• palt を使わない（font-feature-settings: normal）
• ボタンを塗りつぶさない（白地・線ボタンが基本）
• 角丸を大きく取らない（5px か 50% の二択）
• "NEW" 以外でオレンジを使わない
• リンク以外の本文を #0090df で組まない（青はブランドの専用色）

8. Responsive Behavior

• PC 1440px をベース幅とする
• タブレット（〜1024px）: 3 列 → 2 列、ナビをハンバーガー化
• モバイル（〜768px）: 1 列、本文 13px に微縮小、言語切替を画面右下に配置
• 円形ピル radius 50% は全ブレークポイントで維持
• weight 600 / 400 の対比は維持

9. Agent Prompt Guide

AI エージェントに 21_21 DESIGN SIGHT 風 UI を生成させる際のプロンプト。

Generate a Japanese design museum / cultural institution UI in the 21_21 DESIGN SIGHT visual style.

Visual:
- Pure white background (#ffffff)
- Cyan blue (#0090df) as bold brand color — used liberally for links, headings, CTAs
- Orange (#ff9900) for "NEW" badge ONLY (exhibition new arrival)
- Light gray surface (#f3f3f3) for category nav / loading
- Body text in #333333 (NOT pure black)
- Editorial density — sections 60-80px apart (tighter than retail brands)

Typography:
- font-family: "Noto Sans Japanese", meiryo, "MS PGothic", sans-serif (NO Hiragino fallback)
- 和文 / 欧文 / 数字すべて Noto Sans Japanese で統一
- Headings (h1/h2/h3/h4): weight 600 — bold confidently
- Body / captions: weight 400
- Body: 14px / line-height 24px (1.71) / letter-spacing normal
- Caption / nav small: 12px / line-height 20px / letter-spacing normal
- Pill labels: 10px / line-height normal
- letter-spacing: ALWAYS normal (do not widen or tighten)
- font-feature-settings: normal (NO palt — preserve natural punctuation spacing)

Components:
- Language pills: circular (border-radius: 50%), 28×28px, active = bg #0090df + color white, inactive = bg white + color #333
- Main CTA: bg white, color #0090df, border 2px solid #0090df, radius 5px, padding 20px 15px
- "NEW" badge: bg #ff9900, color white, font-size 10px, padding 2px 6px, no radius
- h4 headings: color #0090df, weight 600, font-size 16px, line-height 24px
- Logo text "21_21 DESIGN SIGHT": Noto Sans, weight 600, color #0090df

Color Strategy:
- Brand: cyan blue #0090df (primary), orange #ff9900 (only for "NEW")
- Surfaces: white #ffffff (page), #f3f3f3 (light gray), #cccccc (border/divider)
- Text: #000 (strong heading), #333 (body), #0090df (link / h4), #fff (inverse)

Avoid:
- Bold for everything (use 600 only for headings)
- Treating cyan blue as decorative — it's the brand voice
- Hiragino font fallback (skip to Meiryo)
- letter-spacing widening or palt feature
- Filled buttons in default UI (use 2px outline ones)
- Large border-radius (use 5px or 50% only)
- Orange beyond the "NEW" badge
- Pure black for body (use #333)