アートと暮らす島々へ。
白とグレーと、二つの青
面は白とごく薄いグレーだけ。青は #3799cc（面）と #3d9fd2（文字・枠）の 2 つがあり、rgb で 6 / 6 / 6 だけ違う。本文の黒は純黒 #000000（可視 182 要素）。
ページ背景は白、コンテンツの地色は #f5f5f5。pageBackground.resolved は body 由来の白だが、ビューポート面積で最大なのは main.g-main の #f5f5f5（1,296,000px²）。地色を白だと思って組むと印象が変わる。
明朝ひと書体、ウェイトは一本
可視 217/230 要素が "I-OTF-UD明朝Pro R"。ナビもボタンも日付も同じ明朝で組む。@font-face は Regular の書体名を font-weight: bold で宣言しているため、700 を指定しても太くならない。太さではなくサイズと字間で階層を作る。
font-size: 12px が 94 要素で最多。日本語 UI としてかなり小さく、明朝のフトコロが小さいぶん読みづらくなりやすい。このサイトの印象を再現するなら 12px のまま、可読性を優先するなら 13〜14px へ上げる判断も妥当。
行間は「読ませる箇所だけ開く」。UI は 1.50、作品解説は 1.72、営業情報は 2.09、読み物は 2.20、ボタンは 1.00。
角丸ゼロ、影は三箇所
border-radius はサイト全体で 0px。例外はカルーセルのドット（50%）だけ。影はトップに 3 要素のみで、色は rgba(23, 73, 77, 0.15)（深い青緑）。
予約ボタンの padding は 14px 20px 14px 45px。左の 45px はアイコンを絶対配置する分のアキ。均等な padding にするとアイコンが文字に重なる。btn-outline は font-weight: 700 を持つが、実サイトでは書体が Regular 1 本しかないため太さは変わらない。
カルーセルのページ番号は font-size: 0px で視覚的に消し、border-radius: 50% のドットに置き換えている（スクリーンリーダー用にテキストは残す実装）。非選択 #bababa / 選択 #000000。
初めてご来島の方へ
島へのアクセス、島内の移動、鑑賞の予約方法をまとめています。
地中美術館
安藤忠雄の設計による、地中に埋設された美術館。
ベネッセハウス
「自然・建築・アートの共生」をコンセプトにした宿泊施設。
写真の上に見出しを載せるときは linear-gradient(to right bottom, rgba(255,255,255,.8) .05%, rgba(255,255,255,.4) 99.95%) の白いベールを重ねる（実測 8 要素）。影は rgba(23,73,77,.15) ——黒ではなく青緑。rgba(0,0,0,.15) に置き換えないこと。
地色で塗り分ける2カラム
施設ページは div.left（#eeeeee）と div.right（#dddddd）の 2 カラムを地色の差だけで分ける。罫線も影も使わない。
地中美術館
「自然と人間との関係を考える場所」として2004年に設立。建物の大半が地下にありながら、自然光が作品の表情を刻々と変えていきます。
- 開催日
- 通年（月曜休館、祝日の場合は翌日）
- 所要時間
- 約90分
- 定員
- 各回30名
クロード・モネ
1840年パリに生まれた印象派を代表する画家。「睡蓮の池」（c.1915-26年）は直径2.2mを超える大作で、自然光だけの空間に展示されています。
- 営業時間
- 10:30〜16:45（ラストオーダー16:30）
- 定休日
- 月曜日
ある日、島の桟橋に大きなかぼちゃがあらわれた。どこにもあるような桟橋が、どこにもない風景に生まれ変わった。遠い街から、遠い国からたくさんの人々が訪れるようになった。
浜辺や桟橋、小高い丘から、町の中心まで。島のさまざまな場所に作品が置かれ、朝の光とともに目覚め、心ゆくまでアートや自然、島の暮らしにふれる時間がはじまる。
読み物の行間は 2.20、字間は 1.4px（可視 23 要素）。字間を空けるのは見出しと読み物だけで、UI は normal（185/230 要素）。実サイトは px 直書きなので、em に読み替えず px のまま写すこと。
やること・やらないこと
Do
- サイト全体を 1 書体（UD明朝）で組む。ナビもボタンも日付も明朝
- フォールバックを必ず書く（実サイトは 1 語だけだが、明朝に落ちることが設計上不可欠）
font-weightは 400 を既定にする。太字で階層を作らないborder-radius: 0を貫く（ドットのみ 50%）- 本文色は純黒
#000000、コンテンツの地色は#f5f5f5 letter-spacingはnormalを既定に、見出しだけ px で空ける- 縦組みの見出しは
letter-spacing: 6px（0.2em） - 予約 CTA の padding は
14px 20px 14px 45px - 影は
rgba(23, 73, 77, 0.15)（青緑）を数箇所だけ - ルビは本文のちょうど半分（14px → 7px）
Don't
- 見出しをゴシックにしない（ゴシックは定義リスト 20 要素だけ）
font-weight: 700で太さを期待しないfont-feature-settings: "palt"を足さない（実測 0 要素）- 本文に
letter-spacingを足さない border-radiusを 4px や 8px にしない- CSS Custom Properties を前提にしない（実サイトは 0 個）
- 影を
rgba(0,0,0,…)にしない "Hiragino Kaku ProN"と書かない（存在しない名前。正しくは"Hiragino Kaku Gothic ProN"）- 游ゴシックに
font-weight: 900を指定しない（合成ボールドになる） - 赤
#ff0000を汎用のアクセントに使わない