シロカ（siroca） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 灰色の地に白い面を浮かべ、日本語を大きく空けて置く。 ページ背景が #ffffff ではなく #e4e4e4 で、カードだけが白く抜ける。文字は細く（300）、字間は広く（0.1〜0.2em）
• 密度: 低い。製品写真を大きく見せ、ラベルは 10〜14px に抑える
• キーワード: 灰色の地、字空け 0.2em、Light 基調、水色のアクセント、896px の1本境界

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

1. 日本語を詰めずに空ける。 font-feature-settings の宣言は CSS 全文で 0 件（palt を使わない）。約物サブセット（YakuHanJP 等）も入れていない。代わりに letter-spacing を 0.1em と 0.2em の2段階でほぼ全要素に当てる（CSS 全文で 0.1em が 95 回、0.2em が 50 回）。letter-spacing: normal の要素はトップで 6 / 96、下層で 4 / 174 しかなく、その中身は Previous Next Launguage English といった英語ラベルだけ。「日本語は必ず空ける、英語は触らない」という明確なルール
2. ページの地色が #e4e4e4。 body に直接書かれており、実測で 289 要素がこの色の上に乗る。白地のサイトとして実装すると別物になる
3. Noto Serif JP を4ウェイト読み込んでいるのに、1文字も使っていない。 CSS 全文に font-family: 'Noto Serif JP' が 496 回（@font-face のサブセット定義）あるが、document.fonts では 400 / 500 / 600 / 700 のすべてが unloaded、実測の可視要素も 0。明朝のサイトではない

ルートは 10px（html { font-size: 62.5% } 相当）で全幅固定。 ただし body は 896px を境に 16px → 10px に切り替わる（8章参照）。

2. Color Palette & Roles

Primary（ブランドカラー）

水色が3つある。 #11ade6（リンク・バッジ）、#0098d5（ボタンの面）、#0faee8（インジケータ）。どれも「siroca の水色」だが値が違う。 新規実装では #11ade6 を基準にしてよいが、既存ページと並べるときは3つあることを前提にする（#0098d5 に丸めるとヘッダーのボタンだけ浮く）。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出し・ナビ。可視 87 / 163 要素。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): 水色の面・写真の上のテキスト（可視 2 / 4 要素）
• Text Muted (#a5a5a5): 日付（可視 1 要素）
• Text Secondary (#707070): 補足文（可視 1 要素）
• Background (#e4e4e4): ページ背景。body 直指定。実測 289 要素。CSS 全文で 15 回
• Surface（カード） (#ffffff): 白いカード。地色との差で面を作る
• Surface（ヘッダー） (#f2f2f2): お知らせ帯・ヘッダー（可視 2 要素。CSS 全文で 7 回）
• Surface（カテゴリチップ） (#eef2f3): 製品カテゴリのチップ（可視 4 要素）
• Indicator（非選択） (#cccccc): カルーセルのドット（可視 15 要素）

body の CSS は color: #40464d（濃い灰青）と書いてあるが、実測の本文色は #000000。 CSS 全文で #40464d は 1 回しか出てこず、各要素が黒で上書きしている。#40464d を本文色として採用しないこと。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP。可視 87 / 173 要素。self-host（@font-face を unicode-range で 1017 件に分割したサブセット配信）。300 / 400 / 500 / 700 の4本すべてが loaded
• 明朝体（宣言のみ・実質未使用）: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝, YuMincho, HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif が 可視 1 要素（トップの「毎日がちょっと特別に。」28px）。OS ローカルの明朝で、Web フォントではない
• 読み込んでいるが使っていない: Noto Serif JP（400 / 500 / 600 / 700 の4本。document.fonts で 全部 unloaded、可視 0 要素）

3.2 欧文フォント

• サンセリフ（日付・年号）: Montserrat。可視 6 要素。@font-face は 300 / 400 / 500 / 600 / 700 を宣言しているが、loaded は 300 のみ
• 本文中の英数字は Noto Sans JP の欧文グリフで出る

3.3 font-family 指定

css/* 本文・見出し・ナビ すべて共通 */
font-family: "Noto Sans JP", sans-serif;

/* 日付・年号 */
font-family: "Montserrat", sans-serif;

/* トップの惹句 1 箇所のみ（OS ローカルの明朝） */
font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝,
             YuMincho, HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

• Noto Sans JP の後ろに OS フォントを積まない。 sans-serif に直接落とす割り切った書き方
• 明朝は Web フォントを使わず OS ローカルに頼る。 Noto Serif JP を読み込んでいるのに、惹句にはヒラギノ明朝を当てている（宣言と実装がすれ違っている）

新規実装での扱い: Noto Serif JP の @font-face は削ってよい（1文字も描画に使われておらず、読み込みが無駄になっている）。明朝を使うなら、OS ローカルのヒラギノ明朝スタックをそのまま使うのがこのサイトの流儀。

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

以下はデスクトップ（1440px / 1200px）の実測値。 896px 以下では別の値に切り替わる（8章参照）。

最も多いウェイトは 300（Light）（トップ 44 要素 / 下層 40 要素）。次いで 700（31 / 54）、400（20 / 79）。500 は 1 要素だけ。 300 と 700 の対比で組む。

3.5 行間・字間

字間は em を各要素に当てる。2段階しかない。

• 0.1em: CSS 全文で 95 回。製品名・お知らせ・チップ・日付など、小さい文字
• 0.2em: CSS 全文で 50 回。ナビ・セクション見出し・ページタイトルなど、見せる文字
• 例外: 0.14em（8回）、0.06em / 0.05em（各 2回）、0.15em / 0.075em / 0.01em（各 1回）
• letter-spacing: normal は英語ラベルだけ（Previous Next Launguage English Chinese (Simplified)）。実測でトップ 6 / 96 要素、下層 4 / 174 要素

行間は 1.50 が支配的（実測 87 / 103 要素）。body { line-height: 24px }（= 16px × 1.5）が絶対値として降りる。

• 製品一覧の行間は 1.60（下層 70 要素）
• リード文だけ 1.95（1 要素）

css/* body */
font-family: "Noto Sans JP", sans-serif;
font-size: 1.6rem;       /* = 16px（ルート 10px） */
line-height: 24px;       /* = 1.5 */
letter-spacing: normal;  /* 子要素で個別に当てる */
background: #e4e4e4;

/* グローバルナビ・セクション見出し */
letter-spacing: .2em;
line-height: 1.5;

/* 製品名・一覧ラベル */
font-size: 1rem;         /* = 10px */
letter-spacing: .1em;
line-height: 1.6;

body の line-height は 24px という絶対値で書かれている。 子要素で font-size を変えても行間は 24px のまま降りるので、小さいラベル（10px）には個別に line-height: 1.6 を当て直している。単位なしの 1.5 に書き換えると別物になる。

3.6 禁則処理・改行ルール

cssword-break: break-all;     /* CSS 全文で 3 回 */
word-break: break-word;    /* 4 回 */
word-break: normal;        /* 2 回 */

• word-break: auto-phrase は使っていない
• 製品名は HTML 側で改行を入れている（コーン式全自動コーヒーメーカー など長い名前がそのまま折り返す）

3.7 OpenType 機能

css/* このサイトは font-feature-settings を一切書かない */

• palt を使わない（CSS 全文で font-feature-settings の宣言 0 件 / 実測 0 要素）
• 約物サブセットフォント（YakuHanJP 等）も入れていない
• つまり約物は詰まらない。 鉤括弧や中黒の前後には全角分の空きがそのまま残る。この「詰めない」状態の上に letter-spacing: .2em を重ねるのが、このサイトの字面の作り方

palt を足さないこと。 足すと約物が詰まり、0.2em の字空けと喧嘩して字面がちぐはぐになる。

3.8 縦書き

使用しない（実測 writing-mode: vertical-rl の要素 0 件）。

3.9 ウェイトの落とし穴

• @font-face は 300 / 400 / 500 / 700 の4本（Noto Sans JP、すべて loaded）
• CTA の1つに font-weight: 900 が当たっている（ヘッダーの「法人様向けページ」16px / letter-spacing: 3.2px）。900 の @font-face は無いので、ブラウザの合成太字で出る
• Montserrat は 300 だけが loaded。 CSS が 400 / 500 / 600 / 700 を当てても、実体が無いので合成になる

新規実装での扱い: 300 / 400 / 700 の3段で組む。 900 は使わない（合成太字で字形が崩れる）。Montserrat は 300 だけを前提にする。

4. Component Stylings

Buttons

Primary（ヘッダーの水色ボタン）

• Background: #0098d5
• Text: #ffffff
• Border Radius: 0px
• Padding: 15px 10px 17px 43px（左にアイコン分の 43px）
• Font Size: 12px / Weight: 700 / Letter Spacing: 1.2px（= .1em）

Primary（強調・角丸）

• Background: #11ade6
• Text: #ffffff
• Border Radius: 8px
• Padding: 32px 10px 34px 58px
• Font Size: 16px / Weight: 900（合成太字）/ Letter Spacing: 3.2px（= .2em）

Outlined（バッジ）

• Background: transparent
• Text / Border: 1px solid #11ade6
• Border Radius: 10px
• Padding: 8px
• Font Size: 12.2px / Weight: 700 / Letter Spacing: 1.22px（= .1em）

Chips（製品カテゴリ）

• Background: #eef2f3
• Text: #11ade6
• Border Radius: 8px
• Padding: 9px 9px 12px
• Font Size: 12.2px / Weight: 700 / Letter Spacing: .1em

Cards

• Background: #ffffff（地色 #e4e4e4 との差で浮かせる）
• Border: なし
• Border Radius: 8px
• Shadow: なし
• Padding: 20px 15px 20px 20px
• 見出しは 18px / 400 / letter-spacing: 3.6px（= .2em）

Carousel Indicator

• Background: #cccccc（非選択）/ #0faee8（選択）
• Border Radius: 50%

5. Layout Principles

Container

• Max Width: 1200px（実測 5〜8 要素で最多）
• 補助的に 1320px（1 要素）/ 600px（1 要素）

Grid

• gap を使っていない（実測 gaps: []）。margin で組む
• 製品一覧は写真 ＋ 10px のラベルを格子に並べる

Spacing

• トークン化された余白スケールは無い（自社の CSS Custom Properties は 0 個。実測で検出された 3 個は WordPress admin bar 由来）
• ボタンの padding は左右非対称（15px 10px 17px 43px）。アイコンの分を左に確保する書き方

6. Depth & Elevation

影を一切使わない。 実測で box-shadow を持つ要素は 両ページとも 0 種 / 0 要素。

面の区別は地色 #e4e4e4 とカードの #ffffff の差でつける。 これがこのサイトが地色を白にしなかった理由で、影を足すと設計の意図が二重になる。

7. Do's and Don'ts

Do（推奨）

• ページ背景は #e4e4e4、カードは #ffffff。 影ではなく明度差で面を立てる
• letter-spacing は .1em（小さい文字）と .2em（見せる文字）の2段階で当てる
• 英語ラベルには letter-spacing を当てない（normal のまま）
• font-family: "Noto Sans JP", sans-serif。 OS フォントを後ろに積まない
• ウェイトは 300 / 400 / 700 の3段。 Light（300）を主役に使う
• 行間は 1.5。 小さいラベルには 1.6 を当て直す
• 角丸は 8px（バッジ 10px、インジケータ 50%、ヘッダーのボタンは 0px）
• 明朝を使うなら OS ローカルのヒラギノ明朝スタック

Don't（禁止）

• font-feature-settings: "palt" を足さない（実測 0 件。字空けと喧嘩する）
• 約物サブセットフォント（YakuHanJP 等）を足さない
• Noto Serif JP を使わない（4ウェイト読み込んでいるが実測 0 要素。むしろ @font-face を削るべき）
• font-weight: 900 を当てない（@font-face が無く合成太字になる）
• body の color: #40464d を本文色として採用しない（実測の本文は #000000）
• 影を足さない（実測 0 種）
• body の line-height: 24px を単位なしの 1.5 に書き換えない（絶対値として子へ降りる設計）
• CSS Custom Properties を前提にしない（自社トークン 0 個）

実サイトの誤記

• 言語切替のラベルが Launguage（<p class="country_select-text">Launguage</p>）。正しくは Language。サイト自身のマークアップにある誤記なので、複製するときは直すこと

8. Responsive Behavior

Breakpoints

境界は 896px の1本が主。

896px を境に body ごと切り替わる（重要）

ルート（html）は全幅 10px で固定だが、body の font-size と line-height が 896px で切り替わる。 見出しやナビはサイズだけでなくウェイトも変わる。

• 字間は em 宣言なので比率で追従する（ナビの 1.2px → 1px はどちらも .1em、h2 の 2.9px → 1.5px はどちらも .1em）。字間を px に読み替えて固定するとモバイルで崩れる
• ナビのウェイトが 400 → 300 に落ちる。 モバイルでより細くなる
• 1回の計測を「このサイトの文字サイズ」と書かないこと

タッチターゲット

• モバイルのナビは 10px / line-height: 15px と小さい。padding で 44px を確保する

9. Agent Prompt Guide

クイックリファレンス

Text Color:    #000000
Background:    #e4e4e4  ← 白ではない
Surface:       #ffffff（カード）/ #f2f2f2（ヘッダー）/ #eef2f3（チップ）
Primary:       #11ade6（リンク・バッジ）/ #0098d5（ボタンの面）
Font:          "Noto Sans JP", sans-serif
Font (日付):   "Montserrat", sans-serif（300 のみ）
Root Size:     10px（全幅固定）
Body Size:     16px / lh 24px（>896px）→ 10px / lh 15px（≤896px）
Line Height:   1.5（本文）/ 1.6（小さいラベル）
Letter Spacing: .1em（小さい文字）/ .2em（見せる文字）/ normal（英語ラベル）
Weights:       300 / 400 / 700  ← 900 は使わない
Container:     1200px
Radius:        8px（カード）/ 10px（バッジ）/ 0px（ヘッダーのボタン）
Shadow:        なし
palt:          使わない

プロンプト例

siroca のデザインシステムに従って、製品一覧セクションを作成してください。

- ページ背景は #e4e4e4（白ではない）、カードは #ffffff / border-radius: 8px / 影なし
- font-family は "Noto Sans JP", sans-serif のみ（OS フォントを後ろに積まない）
- font-feature-settings: "palt" は書かない。約物サブセットも入れない
- letter-spacing は 2段階だけ:
    見せる文字（ナビ・セクション見出し・ページタイトル）→ .2em
    小さい文字（製品名・お知らせ・チップ・日付）      → .1em
    英語ラベル（Previous / Next / English）           → normal
- セクション見出しは 20px / font-weight: 700 / line-height: 1.5 / letter-spacing: .2em
- ページタイトルは 36.5px / font-weight: 300（Light）/ line-height: 1.5 / letter-spacing: .2em
- 製品名は 10px / font-weight: 400 / line-height: 1.6 / letter-spacing: .1em
- カテゴリのチップは #eef2f3 の面に #11ade6 の文字、border-radius: 8px、
  12.2px / 700 / letter-spacing: .1em
- 本文の色は #000000（body の CSS にある #40464d は使わない）
- font-weight は 300 / 400 / 700 のみ（900 は合成太字になるので使わない）
- コンテナは max-width: 1200px、ブレークポイントは 896px
  896px 以下では body が 10px / line-height: 15px に切り替わる