ベネッセアートサイト直島（Benesse Art Site Naoshima） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-17 / 対象: https://benesse-artsite.jp/, /art/chichu.html

1. Visual Theme & Atmosphere

• デザイン方針: サイト全体を明朝 1 書体で組む。 角丸ゼロ、影ほぼゼロ、面は白とごく薄いグレーだけ。文字は小さく（本文 14px・ラベル 12px）、写真を大きく置く
• 密度: 中〜高。トップの可視テキストは 230 要素、施設ページは 328 要素。文字を小さく詰め、行間 1.5 で整える
• キーワード: I-OTF-UD明朝、ウェイト1本、角丸ゼロ、瀬戸内ブルー、px 直書き

このサイトの核心は 5 つある。

1. 和文も欧文も "I-OTF-UD明朝Pro R" だけ。 font-family の宣言がこの 1 語だけでフォールバックが無い（可視 217/230 要素）。ナビも本文もボタンも日付も、すべて同じ明朝。例外はカルーセルの数字 13 要素の Arial と、施設ページの定義リスト 20 要素だけ
2. ウェイトが実質 1 本しかない。 @font-face は I-OTF-UD明朝Pro R（R＝Regular の書体名なのに font-weight: bold で宣言されている）1 つだけ。トップの実測は 400 が 220 要素 / 500 が 10 要素で、700 は 0 要素。太さで階層を作らない設計
3. CSS Custom Properties が 0 個。 トップも施設ページも own: 0 / platform: 0。すべて px の直書き
4. ページの地色は白ではない。 pageBackground.resolved は body 由来の rgb(255,255,255) だが、ビューポート面積で最大なのは main.g-main の #f5f5f5（1,296,000px²）。コンテンツの地色は #f5f5f5
5. letter-spacing は normal が既定（185/230 要素）。字間を空けるのは見出しだけ（1.4px / 1.6px / 1.8px / 縦組み 6px）

font-feature-settings は 1 要素も使っていない（palt 0 件）。UD明朝の素の字送りをそのまま使う。

2. Color Palette & Roles

Primary（ブランドカラー）

青が 2 つある。 #3799cc（面）と #3d9fd2（文字・枠）で rgb(55,153,204) と rgb(61,159,210) ——数値がわずかに違うだけで役割が分かれている。実装の実態としてそうなっているので、既存ページに合わせるなら 2 色を使い分ける。新規に組むなら #3799cc に寄せてよい。

Neutral（ニュートラル）

Semantic

• Alert Red (#ff0000): 純赤。休館のお知らせ日付など、可視 2 要素のみ。使用は極めて限定的

3. Typography Rules

3.1 和文フォント

• 明朝体（サイト唯一の書体）: I-OTF-UD明朝Pro R（イワタ UD明朝 Pro Regular、FONTPLUS 配信）。document.fonts で loaded
• ゴシック体（施設ページの定義リストのみ）: 游ゴシック（可視 20 要素）
• @font-face は 2 本だけ：fpbf_ac93d8111（FONTPLUS の難読化されたサブセット名、loaded）と I-OTF-UD明朝Pro R（font-weight: bold で宣言、loaded）

I-OTF-UD明朝Pro R は Regular の書体名なのに font-weight: bold で @font-face が宣言されている。 結果として font-weight: 400 を指定しても 700 を指定しても同じ Regular のファイルが当たり、太さが変わらない。 施設ページの CTA が font-weight: 700 を持っているが、画面上は太くならない（合成ボールドも発生しない）。太さで階層を作れないサイトと理解して組むこと。

3.2 欧文フォント

• 専用の欧文フォントは持たない。 Language MENU English などのラテン文字も UD明朝の欧文グリフをそのまま使う
• 例外：カルーセルのページ番号 13 要素だけ Arial（font-size: 0px で視覚的には隠され、ドットに置き換えられている）

3.3 font-family 指定

css/* サイト全体（本文・見出し・UI・数字すべて） */
font-family: "I-OTF-UD明朝Pro R";

/* 施設ページの定義リスト（開催日・所要時間・定員）だけゴシック */
font-family: 游ゴシック, YuGothic, "Hiragino Kaku ProN", メイリオ, sans-serif;

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

• 実サイトは本文にフォールバックを一切書いていない。 "I-OTF-UD明朝Pro R" が読み込めなければブラウザ既定の書体（多くの環境でゴシック）に落ちる
• 新規に組むなら "I-OTF-UD明朝Pro R", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", YuMincho, serif と続けること。 最低限 serif は置く。明朝を意図した面がゴシックに落ちると設計が別物になる
• 実サイトのゴシック指定には誤りがある。 定義リストの "Hiragino Kaku ProN" は存在しないフォント名で、正しくは "Hiragino Kaku Gothic ProN"。macOS では当たらず メイリオ も無いので sans-serif に落ちている。さらに font-weight: 900 は游ゴシックに存在せず合成ボールドになる。新規実装では "Hiragino Kaku Gothic ProN" と正しく書き、weight は 500〜700 に留めること

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

font-size: 12px が 94 要素で最多。 日本語 UI としてかなり小さい。明朝のフトコロが小さいぶん、12px は読みづらくなりやすい。新規に組むなら 13〜14px へ上げる判断も妥当 ——ただしこのサイトの印象を再現するなら 12px のまま。

3.5 行間・字間

• 既定の行間は 1.50（可視 143/230 要素）。明朝で 1.5 は締まっている部類
• 読み物の行間は 2.20 / 営業情報は 2.09 / 作品解説は 1.72 ——読ませる箇所だけ 1.7〜2.2 に広げる
• ボタン・ラベルは 1.00（25 要素）
• 字間は normal が既定（185/230 要素）。空けるのは見出しのみ：
  • 縦組み見出し 6px（30px に対して 0.2em）
  • ナビ見出し 1.8px（30px に対して 0.06em）
  • 読み物見出し 1.6px（20px に対して 0.08em）
  • 読み物本文 1.4px（可視 23 要素）
  • 日付 0.6px

ガイドライン:

• 本文に letter-spacing を足さない。 UD明朝の素の字送りで組む
• 見出しは px で字間を宣言する（em ではない）。実サイトは px 直書きなので、px のまま写すこと
• 太さではなくサイズと字間で階層を作る。 ウェイトは実質 1 本しか使えない

3.6 禁則処理・改行ルール

• ルビを使う。 故ふるきを温たずねて、新しきを知る のように本文 14px に対してルビ 7px（ちょうど半分）
• word-break: break-all は使わない

3.7 OpenType 機能

このサイトは font-feature-settings を一切使っていない（実測 0 要素）。

• palt を足さないこと。 UD明朝はもともと字面がやや小さめで、詰めると窮屈になる

3.8 縦書き

• writing-mode: vertical-rl は 1 要素：トップの h2.top-art__heading アートと暮らす島々へ。
  • font-size: 30px / line-height: 30px（1.00）/ letter-spacing: 6px（0.2em） / UD明朝
• 外部ウィジェット由来ではなく、サイト本体の見出し（クラス名 top-art__heading）
• 縦組みするなら字間を 0.2em 空ける。 縦組みの明朝は詰まって見えるため

4. Component Stylings

border-radius はサイト全体で 0px。 例外はカルーセルのドット（50%、14 要素）とアイコンの 100% / 20px が各 1 要素だけ。

Buttons

Primary（予約 CTA）

• Background: #3799cc / Text: #ffffff
• Border: なし
• Padding: 14px 20px 14px 45px（左が 45px ——アイコンを絶対配置する分のアキ）
• Border Radius: 0px
• Font: 14px / weight 400 / line-height 1.00 / letter-spacing: normal

Secondary（よくあるご質問）

• Background: #d8d8d8 / Text: #000000
• Padding: 14px 20px 14px 44px
• Border Radius: 0px
• Font: 12px / weight 400

Outline（施設ページのチケット CTA）

• Background: #3d9fd2 / Text: #333333
• Border: 1px solid #3d9fd2
• Padding: 7px 14px
• Border Radius: 0px
• Font: 14px / weight 700（ただし前述のとおり太さは変わらない）

Section Link（アートのご紹介 建築のご紹介）

• Background: #d8d8d8 / Text: #000000
• Padding: 30px（大きな面として置く）
• Border Radius: 0px / Font: 16px / weight 400

Text Link（詳しく見る）

• Background: なし（アイコンだけ #3799cc）
• Text: #3d9fd2
• Padding: 8px 0
• Font: 14px / weight 400

Tags / Chips

• 直島 など地域タグ: Background #f5f5f5 / Text #000000 / Padding 0 6px / 12px / weight 500
• 半日 1泊2日 など期間タグ: Background #e0e0e0 / 同上

Carousel

• ドット: border-radius: 50%。非選択 #bababa / 選択 #000000
• 数字ラベルは font-size: 0px で視覚的に消し、ドットに置き換えている（スクリーンリーダー用に残す実装）

Cards

• Background: #ffffff
• Border Radius: 0px
• Border: なし
• カード上の見出しに linear-gradient(to right bottom, rgba(255,255,255,0.8) 0.05%, rgba(255,255,255,0.4) 99.95%) を重ねる（写真の上に文字を載せるための白いベール、8 要素）

5. Layout Principles

Spacing Scale

px 直書き。トークンは存在しない。

Container

• Max Width: 1000px（実測 11 要素で最多。本文・カードグリッドの基準）
• ワイド: 1300px / 1500px（ヒーロー・全幅の写真）
• 本文カラム: 800px / 760px / 600px（読み物）

Grid

• トップは「大きな写真＋テキスト」の 2 カラムと、3〜4 列のカードグリッド
• 施設ページは div.left（#eeeeee）/ div.right（#dddddd）の2 カラムを地色で塗り分ける

6. Depth & Elevation

影は 3 要素しか使わない。 しかもその影は純黒ではなく rgba(23,73,77,…)（深い青緑）。瀬戸内の海と島の色を影にまで入れている。rgba(0,0,0,0.15) に置き換えないこと。 施設ページには影が 1 つも無い（0 種）。

7. Do's and Don'ts

Do（推奨）

• サイト全体を 1 書体（UD明朝）で組む。 ナビもボタンも日付も明朝
• フォールバックを必ず書く："I-OTF-UD明朝Pro R", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", YuMincho, serif（実サイトは書いていないが、明朝に落ちることが設計上不可欠）
• ウェイトは 400 を既定にする。 太字で階層を作らない
• border-radius: 0 を貫く（カルーセルのドットのみ 50%）
• 本文色は純黒 #000000、副次は #333333
• コンテンツの地色は #f5f5f5（body は白だが、main は薄グレー）
• letter-spacing は normal を既定に、見出しだけ px で空ける（30px 見出しに 1.8px、20px 見出しに 1.6px）
• 縦組みの見出しは letter-spacing: 6px（0.2em）
• 読ませる文章の行間は 1.72〜2.20、UI は 1.50、ボタンは 1.00
• 予約 CTA の padding は 14px 20px 14px 45px（左のアキにアイコンを置く）
• 影は rgba(23, 73, 77, 0.15)（青緑）。使うのは全ページで数箇所だけ
• ルビは本文のちょうど半分のサイズ（14px → 7px）

Don't（禁止）

• 見出しをゴシックにしない。 ゴシックは施設ページの定義リスト 20 要素だけ
• font-weight: 700 で太さを期待しない（@font-face が Regular を bold にマップしているため変化しない）
• font-feature-settings: "palt" を足さない（実サイトは 0 要素）
• 本文に letter-spacing を足さない
• border-radius を 4px や 8px にしない
• CSS Custom Properties を前提にしない（実サイトは 0 個。px 直書き）
• 影を rgba(0,0,0,…) にしない（青緑が入る）
• "Hiragino Kaku ProN" と書かない（存在しない名前。正しくは "Hiragino Kaku Gothic ProN"）
• 游ゴシックに font-weight: 900 を指定しない（存在せず合成ボールドになる）
• 赤 #ff0000 を汎用のアクセントに使わない（休館告知など 2 要素のみ）

8. Responsive Behavior

Breakpoints

min-width: 768px と max-width: 767px を 27 件ずつ対に書くのがこのサイトの流儀。どちらか片方だけ書かない。

タッチターゲット

• 予約ボタン: 高さ 42px（14+14+14）— 44px をわずかに下回る。モバイルでは padding を 15px に上げること
• 詳しく見る: 高さ 30px、タグ: 高さ 18px — いずれも大きく下回る。モバイルでは縦 padding を確保すること

フォントサイズの調整

• body 14px / 本文 16px / UI 12px はブレークポイントをまたいで固定
• 縦組み見出し 30px も固定（モバイルでは行数が増える）

9. Agent Prompt Guide

クイックリファレンス

予約ブルー（面）:   #3799cc
リンクブルー（文字）: #3d9fd2
Text:              #000000
Text Secondary:    #333333
Content BG:        #f5f5f5
Page BG:           #ffffff
Surface Gray:      #d8d8d8 / #e0e0e0
Alert:             #ff0000（限定）
Font: "I-OTF-UD明朝Pro R", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", YuMincho, serif
Weight: 400 のみ（700 を指定しても太くならない）
Body Size: 14px（body） / 16px（本文） / 12px（UI・最多）
Line Height: 1.50（既定） / 2.20（読み物） / 1.72（解説） / 1.00（ボタン）
Letter Spacing: normal（本文） / 1.8px（30px見出し） / 1.6px（20px見出し） / 6px（縦組み）
Border Radius: 0px
Container: 1000px（本文） / 1300〜1500px（ワイド） / 800px・600px（読み物）
Section Gap: 100px / Column Gap: 40px
Shadow: 0 20px 30px rgba(23, 73, 77, 0.15)（3要素のみ）
Custom Properties: なし（px 直書き）
palt: 使わない
Breakpoint: min-width 768px / max-width 767px（対で書く）

プロンプト例

ベネッセアートサイト直島のデザインシステムに従って、美術館の施設紹介ページを作成してください。
- サイト全体を1書体で組む:
  font-family: "I-OTF-UD明朝Pro R", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", YuMincho, serif
  ナビ・ボタン・日付・数字もすべてこの明朝
- font-weight は 400 のみ。太字で階層を作らず、サイズと字間で作る
- body 14px / line-height 1.60、本文 16px / line-height 1.50、作品解説は 1.72、営業情報は 2.09
- UIラベル・注記は 12px（このサイトで最多のサイズ）
- letter-spacing は normal を既定に、30px見出しだけ 1.8px、20px見出しは 1.6px（em ではなく px で書く）
- トップの縦組み見出しは writing-mode: vertical-rl / 30px / line-height 1.00 / letter-spacing 6px
- border-radius はすべて 0px（カルーセルのドットだけ 50%）
- 本文色 #000000、副次 #333333、コンテンツの地色 #f5f5f5、ページ背景 #ffffff
- 予約ボタンは背景 #3799cc / 白文字 / padding 14px 20px 14px 45px / radius 0 / 14px weight 400
  （左の45pxはアイコン用のアキ）
- 副次ボタンは背景 #d8d8d8 / 黒文字、テキストリンクは #3d9fd2
- 写真の上に見出しを載せるときは
  linear-gradient(to right bottom, rgba(255,255,255,.8) .05%, rgba(255,255,255,.4) 99.95%) を重ねる
- 影は原則なし。使う場合のみ 0 20px 30px rgba(23,73,77,.15)（黒ではなく青緑）
- CSS変数は使わず px 直書き。コンテナ 1000px、セクション間 100px、列間 40px
- font-feature-settings は書かない
- メディアクエリは min-width:768px と max-width:767px を対で書く