` の 1 箇所を JS が書き換えると（`拡大` で `17px`）、**ページ全体が連動して拡大する**。実測サイズに `14.08px` `14.9328px` `21.3328px` `29.8656px` といった端数が並ぶのはこのため 2. **背景色は4スキームを `` のクラスで切り替える。** `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館を分ける色） | 役割 | 実装値 | 実測 | |------|--------|------| | **博物館ブルー** | **`#053b7b`** | **可視 11 要素**。`博物館` タブ、`博` のジャンル記号、下層の館見出し | | **美術館レッド** | **`#b23730`** | **可視 9 要素**。`美術館` タブ、`美` のジャンル記号 | | Language Maroon | `#7c2622` | 言語切替のドロップダウン（可視 4 要素） | | Event Gold | `#d9a300` | `イベント一覧` ボタンの面（1 要素） | > **青と赤は「館の別」を表す。** 博物館と美術館が同居する施設なので、**色が機能ラベルになっている**。装飾として使わない。 ### 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`): メニューカードの枠 ### 背景色スキーム（アクセシビリティ切替） | スキーム | body クラス | 背景 | 文字 | スウォッチの色 | |---|---|---|---|---| | 白（既定） | `colors_rset` | `#ffffff` | `#000000` | `#ffffff`（枠 `#cccccc`） | | 黒 | `colors_black` | `#000000` | `#ffffff` | `#000000` | | 黄 | `colors_yellow` | **`#ffbf00`** | `#000000` | `#ffbf00` | | 青 | `colors_blue` | **`#0000bb`** | `#ffffff` | **`#06438c`** | > **青だけスウォッチと実際の配色が一致していない。** 切替ボタンの面色は `#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 指定 ```css font-family: "Open Sans", 游ゴシック, YuGothic, メイリオ, Meiryo, "ＭＳＰゴシック", sans-serif; ``` ```html ``` > **欧文先頭・和文は OS まかせ**の構成。`游ゴシック` は Regular を指しており、**`游ゴシック Medium` / `Yu Gothic Medium` をスタックに入れていない**。Windows では細く出る。**新規実装では `"游ゴシック Medium", "Yu Gothic Medium"` を `游ゴシック` の前に足す。** ### 3.4 文字サイズ・ウェイト階層 **サイズは `%` で宣言されている**（CSS 全文で 226 箇所）。以下は既定（ラッパー 100% ＝ 16px）での実測値。 | 用途 | 実測サイズ | weight（宣言値） | 備考 | |------|------------|------------------|------| | 下層の大見出し | **29.8656px** | 500 | `133.33% × 140%` の入れ子 | | 縦組みの見出し（`お知らせ`） | 27.7328px | 500 | | | 下層のリード | 21.3328px | 500 | `133.33%` | | `イベント一覧` ボタン | 19.2px | 500 | `120%` | | 本文 | **16px** | 500 | ラッパー 100% | | ステータスラベル | 15px | 500 | | | ナビ・カード見出し | **14.08px / 14.9328px** | 500 | `93.33%` 系の入れ子 | | ジャンル記号（`博` `美`） | 13px / 14.4px | 500 / 700 | | | アクセシビリティ切替 | **11.7px** | 500 / 700 | | | 言語切替 | 10.08px / 12.96px | 500 | | - **実測のウェイト分布は 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` は使っていない - 見出しの改行は `
` で制御 ### 3.7 OpenType 機能 - **`font-feature-settings` は 0 件。`palt` も `halt` も使っていない** - 字間も `normal` なので、**約物まわりは一切調整していない** ### 3.8 縦書き **縦組みは 3 要素。すべて本物のテキスト**（画像でもウィジェットでもない）。 | 要素 | クラス | テキスト | 矩形 | font-size | |---|---|---|---|---| | `

` | `.ttl` | `お知らせ` | 39 × 132px | 27.7328px | | `
` | `.link` | `一覧を見る` | 26 × 80px | 16px | | `` | — | `一覧を見る` | 22 × 80px | 16px | ```css writing-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 なし - 実装: ラッパー `
` のインライン `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` - 実装: `` の 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 | Token | Value | 用途 | |-------|-------|------| | XS | 3–4px | 切替ボタン内側 | | S | 5px | ジャンル記号・タグ内側 | | M | 7–10px | ステータス・タブ内側 | | L | 15px | メニューカード内側 | | XL | 20–22px | CTA・下層タブ内側 | ### Container - Max Width: 1200px（実測 3 要素で最多・両ページ共通） - 全幅セクション: 1500px - 本文カラム: 860px - 下層の 2 カラム: `50%` × 6 要素 ### Grid - トップはヘッダー＋カルーセル＋ 5 分割のアイコン導線＋お知らせ（縦組み見出し） - 下層は 1200px のコンテナに `50%` の 2 カラム --- ## 6. Depth & Elevation - 影はサイト全体で 1 種類だけ、しかも内側影。 | 用途 | 値 | 実測 | |------|-----|------| | `イベント一覧` ボタン | `2px 2px 8px rgba(0,0,0,0.2) inset` | 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 で書く） - 背景色スキームは `` のクラスで切り替える - ハイコントラストのスキームでは面塗りをやめて罫線に置き換える（`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 | 名前 | 条件 | 実測 | |------|------|------| | Wide | `(min-width: 1280px)` | 18 ルール。主要な分岐 | | Extra Wide | `(min-width: 1500px)` | 12 ルール | | SP | `screen and (max-width: 768px)` | 1 ルール | | 旧端末 | `only screen and (min-device-width: 320px) and (max-device-width: 480px)` | 1 ルール | | — | `(min-width: 1px)` / `print` | | - `min-width` 基準（モバイルファースト）で組まれている。`max-width` の分岐はほぼ無い ### フォントサイズの調整 - `html` も `body` も 6 幅すべてで固定（1440 / 1200 / 834 / 768 / 767 / 375px で実測）: | 幅 | html | body | line-height | |---|---|---|---| | 1440 / 1200 / 834 / 768 / 767 / 375px | 10px | 16px | 25.6px | > 画面幅では文字サイズが一切変わらない。流体でもブレークポイント切替でもない。サイズを動かすのは画面幅ではなく、利用者が押す「文字サイズ」ボタン（`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%` の梯子）、ラッパー `
` の 1 箇所を書き換えるだけでページ全体が拡大するようにする。ヘッダー右上に「文字サイズ（標準/拡大）」と「背景色（白/黒/黄/青）」の切替を置き、背景色は `` のクラス（`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`。