沖縄県立博物館・美術館（おきみゅー） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 公立博物館のアクセシビリティ設計。文字サイズ切替と背景色4スキーム切替をヘッダーに常設し、それが成立するようにサイズをすべて % で組んでいる
• 密度: 中。砂（#e6cdb8 系）と白の地に、博物館＝青 / 美術館＝赤 の2館を色で分ける
• キーワード: 博物館の青・美術館の赤、%組版、背景色4スキーム、Webフォント和文ゼロ、縦組みの見出し

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

1. 文字サイズ切替のために、サイズを px ではなく % で組んでいる。 CSS 全文で font-size: % が 226 箇所、px は 87 箇所。66.66% / 73.33% / 80% / 86.66% / 93.33% / 100% / 106.66% / 113.33% / 120% / 126.66% / 133.33% / 140% という1px 刻みを % に換算した梯子が並ぶ。ラッパー <div style="font-size: 100%"> の 1 箇所を JS が書き換えると（拡大 で 17px）、ページ全体が連動して拡大する。実測サイズに 14.08px 14.9328px 21.3328px 29.8656px といった端数が並ぶのはこのため
2. 背景色は4スキームを <body> のクラスで切り替える。 colors_rset（白）/ colors_black / colors_yellow / colors_blue。ハイコントラストの3スキームでは、面塗りを全部やめて罫線に置き換える（background: none; border: 1px solid; color: inherit）。CSS Custom Properties は 0 個で、この4スキームは数十本のクラス前置きルールを手書きして実現している
3. 和文 Web フォントは 1 本も読み込んでいない。 フォント要求は 3 件で、内訳は Open Sans の 2 サブセットと slick.woff（カルーセルのアイコン）だけ。和文は OS ローカルの游ゴシック。font-family はサイト全体でただ 1 本のスタック（実測 170/170 要素・113/113 要素）

letter-spacing は全要素 normal（トップ 170/170、下層 113/113）。font-feature-settings は 0 件。

2. Color Palette & Roles

Primary（2館を分ける色）

青と赤は「館の別」を表す。 博物館と美術館が同居する施設なので、色が機能ラベルになっている。装飾として使わない。

Accent（砂・琉球の土色）

• Beige (#e6cdb8): 講座・講演会のタグ（可視 10 要素）
• Sand (#dfceb2): 開催中 のステータスラベル（可視 4 要素）
• Sand Dark (#dad0ad): LANGUAGE ボタンの面
• Gray Sand (#a5a597): 今後開催 のステータスラベル
• Overlay (rgba(140,102,0,0.7)): 写真の上に敷く説明文の帯（可視 4 要素）

Neutral（ニュートラル）

• Background (#ffffff): ページ背景。pageBackground.resolved = rgb(255,255,255) / 根拠 body
• Text Primary (#000000): 本文（可視 76 要素）
• Text Secondary (#555555): 見出しラベル・小見出し（可視 42 要素。最多の文字色）
• Text Tertiary (#666666): パンくず（可視 9 要素）
• Text Dark Brown (#221813): グローバルナビ（可視 5 要素）
• Teal (#008c8c): 下層の Features 見出し（可視 7 要素）
• Border (#cccccc): メニューカードの枠

背景色スキーム（アクセシビリティ切替）

青だけスウォッチと実際の配色が一致していない。 切替ボタンの面色は #06438c（濃紺）だが、適用される背景は #0000bb（純青寄り）。CSS も #color_switch #colors_blue { background-color: rgb(6,67,140) } と body.colors_blue { background: rgb(0,0,187) } で別の値を持っている。実装の実態なので両方記録するが、新規実装では揃える。

3. Typography Rules

3.1 和文フォント

• OS ローカルの游ゴシックのみ。Web フォントは 1 本も無い
• フォールバックは 游ゴシック → メイリオ → ＭＳ Ｐゴシック の順（Windows の古い環境まで降りる）
• font-family はサイト全体でこの 1 本のスタックだけ（実測 170/170 要素・113/113 要素）。見出しも本文も同じ

3.2 欧文フォント

• Open Sans（Google Fonts）。css?family=Open+Sans:400,600 で 400 と 600 の 2 ウェイトだけ読み込んでいる
• slick（カルーセルのアイコンフォント）が 1 本

3.3 font-family 指定

cssfont-family: "Open Sans", 游ゴシック, YuGothic, メイリオ, Meiryo,
             "ＭＳ Ｐゴシック", sans-serif;

html<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">

欧文先頭・和文は OS まかせの構成。游ゴシック は Regular を指しており、游ゴシック Medium / Yu Gothic Medium をスタックに入れていない。Windows では細く出る。新規実装では "游ゴシック Medium", "Yu Gothic Medium" を 游ゴシック の前に足す。

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

サイズは % で宣言されている（CSS 全文で 226 箇所）。以下は既定（ラッパー 100% ＝ 16px）での実測値。

• 実測のウェイト分布は 500 が 151 要素 / 700 が 19 要素。 2 段しかない
• font-weight: 500 は Open Sans には存在しない。 読み込んでいるのは 400 と 600 だけなので、CSS フォントマッチングにより欧文は 400（Regular）で描画される。和文側は OS の游ゴシックに渡り、macOS では Medium、Windows では Regular が当たって環境差が出る

document.fonts.check('500 16px "Open Sans"') は true を返すが根拠にならない。 判定は読み込んだウェイト（wght 相当＝URL の :400,600）で行う。

3.5 行間・字間

• body の line-height は 25.6px = 16px × 1.6。実測の行間比は 1.60 が 101 要素（トップ）/ 64 要素（下層）で最多
• 他の比率: 1.40（20 要素・見出し）、1.20（10 要素・切替ボタン）、1.00（31 要素・ジャンル記号や日付の 1 文字）、1.80（14 要素・下層の本文）
• letter-spacing は全要素 normal。 トップ 170/170 要素、下層 113/113 要素。例外なし

行間を px で書かない。 % 組版と組み合わせると文字サイズ切替で行だけ追従しなくなる。比率（無単位）で書く。

3.6 禁則処理・改行ルール

• word-break: auto-phrase は使っていない
• 見出しの改行は <br> で制御

3.7 OpenType 機能

• font-feature-settings は 0 件。palt も halt も使っていない
• 字間も normal なので、約物まわりは一切調整していない

3.8 縦書き

縦組みは 3 要素。すべて本物のテキスト（画像でもウィジェットでもない）。

csswriting-mode: vertical-rl;

• トップページの「お知らせ」セクションだけ、見出しと 一覧を見る を縦組みにしている。 置き方は 39px 幅の左カラムに縦に積む（実測: 見出し left: 120px / top: 939px、一覧を見る left: 126px / top: 1091px）。一覧本体はその右に置く
• 下層ページには縦組みは無い（実測 0 要素）
• 縦組みを「横に並べる」ときだけ flex-direction: row-reverse が要る（素の flex だと DOM 順に左→右に置かれ、縦組みの読み方向と逆になる）。このサイトのように縦に積む場合は素の flex でよい

4. Component Stylings

Accessibility Switcher（このサイトの主役）

ヘッダー右上に常設。文字サイズ 2 段 ＋ 背景色 4 スキーム。

共通

• Padding: 3px 4px
• Border Radius: 4px
• Font: 11.7px

文字サイズ（標準 / 拡大）

• 標準（選択中）: Background #999999 / Text #ffffff / weight 700 / Border なし
• 拡大（非選択）: Background #dddddd / Text #000000 / weight 700 / Border なし
• 実装: ラッパー <div> の インライン font-size を JS が書き換える（100% → 17px）

背景色（白 / 黒 / 黄 / 青）

• 各ボタンはそのスキームの配色そのものを面と文字に持つ（スウォッチ兼ボタン）
• 白: #ffffff / #000000 / Border 1px solid #cccccc
• 黒: #000000 / #ffffff / Border 1px solid #000000
• 黄: #ffbf00 / #000000 / Border 1px solid #ffbf00
• 青: #06438c / #ffffff / Border 1px solid #06438c
• 実装: <body> の class を差し替える

Facility Tabs（博物館 / 美術館）

• 博物館: Background #053b7b / Text #ffffff
• 美術館: Background #b23730 / Text #ffffff
• Padding: 10px / Border Radius: 0px / Font: 14px / weight 500
• 下層では Padding 22px の大型版になる

Badges / Labels

ジャンル記号（博 / 美 / 他）

• Background: #053b7b / #b23730 / #555555
• Text: #ffffff / Padding: 5px / Border Radius: 0px / Font: 13px

カテゴリタグ（美術講座 講演会）

• Background: #e6cdb8 / Text: #000000
• Padding: 5px 10px / Border Radius: 3px / Font: 13px

ステータス（開催中 / 今後開催）

• 開催中: Background #dfceb2 / Text #000000
• 今後開催: Background #a5a597 / Text #ffffff
• Padding: 7px 10px / Border Radius: 0px / Font: 15px

Buttons

Event CTA（イベント一覧）

• Background: #d9a300 / Text: #ffffff
• Padding: 20px 30px 20px 20px
• Border Radius: 10px
• Font: 19.2px / weight 500
• Shadow: 2px 2px 8px rgba(0,0,0,0.2) inset（このサイト唯一の影・内側）

Menu Card（開館時間・休館日・観覧料金）

• Background: #ffffff / Text: #000000
• Border: 1px solid #cccccc
• Padding: 15px 14px / Border Radius: 0px / Font: 14px

Language（LANGUAGE）

• Background: #dad0ad / Text: #000000
• Padding: 5px 33px 5px 20px / Border Radius: 0px / Font: 10.08px

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（実測 3 要素で最多・両ページ共通）
• 全幅セクション: 1500px
• 本文カラム: 860px
• 下層の 2 カラム: 50% × 6 要素

Grid

• トップはヘッダー ＋ カルーセル ＋ 5 分割のアイコン導線 ＋ お知らせ（縦組み見出し）
• 下層は 1200px のコンテナに 50% の 2 カラム

6. Depth & Elevation

• 影はサイト全体で 1 種類だけ、しかも内側影。

• 下層ページには影が 0 件。 段差は罫線（1px solid #cccccc）と面色で作る
• ハイコントラストのスキームでは面色が消えるので、影に頼った設計にしない（罫線が唯一の手がかりになる）

7. Do's and Don'ts

Do（推奨）

• 文字サイズは % で宣言する。 66.66% / 73.33% / 80% / 86.66% / 93.33% / 100% / 106.66% / 113.33% / 120% / 126.66% / 133.33% / 140% の梯子（1px 刻みの % 換算）を使う
• 拡大縮小は「ラッパー 1 箇所の font-size」で効かせる（子はすべて % / em で書く）
• 背景色スキームは <body> のクラスで切り替える
• ハイコントラストのスキームでは面塗りをやめて罫線に置き換える（background: none; border: 1px solid; color: inherit）
• 博物館は #053b7b、美術館は #b23730 で統一する（色が機能ラベル）
• line-height は比率（1.6）で書く
• letter-spacing は normal のままにする

Don't（禁止）

• font-size を px で書かない。 px で書くと文字サイズ切替が効かなくなる（このサイトの設計そのものが壊れる）
• 和文 Web フォントを足さない（実測フォント要求 3 件・和文 0 本。OS ローカル依存それ自体が設計）
• font-weight: 500 が Open Sans で出ると思わない。 読み込みは 400,600 の 2 本だけなので欧文は 400 で描画される
• font-feature-settings: "palt" を足さない（実測 0 件）
• letter-spacing を em で配らない（全要素 normal）
• 影で階層を作らない（サイト全体で内側影が 1 要素だけ。背景色スキームで面色が消えるため罫線で組む）
• 縦組みを複数並べるときに素の display: flex を使わない（row-reverse にする）
• CSS Custom Properties は実測 0 個。変数があるつもりで書かない（4 スキームはクラス前置きの手書きルール）
• スウォッチの #06438c を青スキームの背景色だと思わない（実際に適用されるのは #0000bb）

8. Responsive Behavior

Breakpoints

• min-width 基準（モバイルファースト）で組まれている。max-width の分岐はほぼ無い

フォントサイズの調整

• html も body も 6 幅すべてで固定（1440 / 1200 / 834 / 768 / 767 / 375px で実測）:

画面幅では文字サイズが一切変わらない。 流体でもブレークポイント切替でもない。サイズを動かすのは画面幅ではなく、利用者が押す「文字サイズ」ボタン（100% → 17px）。これがこのサイトの設計思想。

タッチターゲット

• アクセシビリティ切替: 3px 4px + 11.7px（約 18px 角。タッチターゲットとしては小さい。新規実装では 44px 角を確保する）
• 施設タブ: 10px + 14px
• メニューカード: 15px 14px + 14px

9. Agent Prompt Guide

クイックリファレンス

和文:        OS ローカルの游ゴシック（Web フォントなし）
欧文:        "Open Sans" 400 / 600（Google Fonts）
スタック:    "Open Sans", 游ゴシック, YuGothic, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif
背景:        #ffffff
博物館:      #053b7b   美術館: #b23730
砂:          #e6cdb8 / #dfceb2 / #dad0ad / #a5a597
文字:        #000000 / 見出し #555555 / ナビ #221813
サイズ:      % で宣言（100% = 16px / 1px 刻みの % 梯子）
行間:        1.6（比率）
字間:        normal（全要素）
角丸:        4px（切替）/ 3px（タグ）/ 10px（CTA）/ 0px（タブ・記号）
影:          内側影 1 種のみ
コンテナ:    1200px
BP:          min-width 1280px / 1500px
切替:        文字サイズ=ラッパーのインライン font-size / 背景色=body のクラス
palt:        使わない

プロンプト例

沖縄県立博物館・美術館のデザインで作って。和文は Web フォントを読み込まず "Open Sans", 游ゴシック, YuGothic, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif の 1 スタックだけで全要素を組む。文字サイズは px ではなく % で宣言し（80% / 86.66% / 93.33% / 100% / 106.66% / 113.33% / 120% / 133.33% / 140% の梯子）、ラッパー <div style="font-size:100%"> の 1 箇所を書き換えるだけでページ全体が拡大するようにする。ヘッダー右上に「文字サイズ（標準/拡大）」と「背景色（白/黒/黄/青）」の切替を置き、背景色は <body> のクラス（colors_rset / colors_black / colors_yellow / colors_blue）で切り替える。ハイコントラストの3スキームでは面塗りを全部やめて background: none; border: 1px solid; color: inherit に置き換える。 博物館は #053b7b、美術館は #b23730 で色分けし、タグは砂色 #e6cdb8 / 角丸 3px。line-height は比率 1.6、letter-spacing は全要素 normal、font-feature-settings は書かない。お知らせの見出しと 一覧を見る は writing-mode: vertical-rl の縦組みにし、39px 幅の左カラムに縦に積んで一覧の左に置く。コンテナ 1200px、ブレークポイントは min-width: 1280px / 1500px。