シチズンウオッチ (CITIZEN Watch) DESIGN.md

シチズンウオッチ（https://citizen.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 1918年創業の日本を代表する時計メーカーによる、製品中心のECサイト。ゴシック体ベースのモダンで清潔な構成で、Poppins（幾何学的サンセリフ）と Noto Sans JP のデュアルフォントで欧文・和文を使い分ける。グランドセイコーのような装飾性はなく、実用と正確さを重視した設計
• 密度: 商品カード・フィルター・カテゴリナビが密に並ぶEC型レイアウト。余白は適度だが情報量は多い
• キーワード: プロダクト・ファースト、ダークネイビー、モダンゴシック、精密、実用美、グローバル palt
• 特徴: font-feature-settings "palt" を body レベルでグローバル適用している点が最大の特徴。プロポーショナル字詰めが全テキストに効いており、約物の不自然な空きが解消されている。CTA は border-radius: 2px のほぼ矩形で、pill は検索バーのみ。ブランドアクセントのダークネイビー #27455c が随所に配され、精密機器メーカーとしての信頼感を演出。フッターは純黒 #000000 でラグジュアリー感を加える

2. Color Palette & Roles

Primary（ブランドカラー）

シチズンは ダークネイビー #27455c をブランドの基軸色とする。紺碧に近い青みのある暗色で、精密さ・信頼性・クラフツマンシップを想起させる。CTA には #222222 のニアブラックを採用し、製品写真を邪魔しない抑制的なトーン。

• Dark Navy (#27455c): ブランドアクセント。セクション背景・ヘッダー等に 8 箇所以上出現（rgb 39, 69, 92）
• Deep Navy (#041e41): 最も深いネイビー。限定的なアクセント使用（rgb 4, 30, 65）
• CTA Black (#222222): Primary CTA ボタンの bg + border（rgb 34, 34, 34）
• Filter Blue (#3860be): トグルスイッチ・フィルター要素のアクセント（rgb 56, 96, 190）

Neutral

• Text Primary (#000000): 見出し・強調テキスト
• Text Body (#444444): 本文・コンテンツテキスト（rgb 68, 68, 68）
• Text Nav (#292c2d): ヘッダーナビ・インタラクティブ要素（rgb 41, 44, 45）
• Text Price (#a6acb1): 価格表示・ミュートテキスト（rgb 166, 172, 177）
• Text Cookie (#91999f): クッキーバナー内テキスト（rgb 145, 153, 159）
• Text Footer Muted (#d2d2d2): フッター内の薄いテキスト（rgb 210, 210, 210）
• Border (#707070): セカンダリボタン・入力欄の枠線
• Background (#ffffff): ページ背景
• Surface (#f9f9f9): セクション背景・カード面（rgb 249, 249, 249）
• Divider (#e5e5e5): セクション区切り・境界線（rgb 229, 229, 229）
• Footer (#000000): フッター背景（純黒）

Accent

• Light Pink (#fbebee): プロモーション・キャンペーン系のアクセント面（rgb 251, 235, 238）
• 全体として装飾色は極めて控えめ。ダークネイビーとニュートラルグレーで構成する

3. Typography Rules

3.1 和文フォント

• Noto Sans JP: Google Fonts。本文・見出し・UI すべてに使用
• sans-serif: 最終フォールバック

3.2 欧文フォント

• Poppins: Google Fonts の幾何学的サンセリフ。ラテン文字に優先適用
• Arial: 一部のボタン・クッキー UI でのフォールバック
• sans-serif: 最終フォールバック

3.3 font-family 指定

css/* メイン（全要素共通） */
font-family: Poppins, "Noto Sans JP", sans-serif;

/* 一部ボタン・クッキー UI */
font-family: Arial, sans-serif;

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

• 欧文 Poppins を先頭に置き、ラテン文字は Poppins で描画。日本語グリフは Noto Sans JP に自動フォールバック
• Poppins の幾何学的な直線と Noto Sans JP のニュートラルなゴシックが、精密機器ブランドらしいクリーンさを作る
• 両方とも Google Fonts のため、ライセンス制約なくどの環境でも再現可能

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

3.5 行間・字間

• 本文の行間: line-height: 1.5（24px / 16px）。ゴシック体の標準的な行送り
• 詳細文の行間: line-height: 1.6（25.6px / 16px）。長文の説明にやや広めの行送り
• 見出しの行間: h2 は 1.3〜1.5、h3 は 1.2。見出しは詰め気味
• 字間: letter-spacing: normal。palt のグローバル適用に委ね、明示的な letter-spacing は設定しないのがシチズンの特徴

ガイドライン:

• 字間の調整は OpenType の palt が担う。手動で letter-spacing を追加すると palt との二重効果で詰まりすぎる
• ナビゲーション要素は weight 500（semi-bold 的）で、本文 400 との差を出す
• 価格・バッジ・ラベル系は weight 600 で情報の重要度を示す

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: break-all;
overflow-wrap: break-word;

禁則対象:

• 行頭禁止: ）」』】〕〉》」】、。，．・：；？！
• 行末禁止: （「『【〔〈《「【
• 価格表記（"¥159,500（税込）"）は途中改行を避ける

3.7 OpenType 機能

css/* body レベルでグローバル適用 */
font-feature-settings: "palt" 1;

• palt をグローバル適用: シチズンの最大の組版特徴。body 要素に font-feature-settings: "palt" を設定し、すべてのテキストにプロポーショナル字詰めを適用している
• 見出しだけでなく本文・ナビ・ボタン・価格表示のすべてで palt が効いている
• これにより、括弧・句読点の不自然な全角空きが解消され、和欧混植時の文字間バランスが均一になる
• 注意: palt 適用済みのため、追加の letter-spacing は原則不要。指定する場合は palt との複合効果を考慮すること

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（"カートに入れる" "購入する" 等の主要動作）

• Background: #222222
• Text: #ffffff
• Border: 1px solid #222222
• Border Radius: 2px（ほぼ矩形だがわずかに角を丸める）
• Padding: 12px 30px
• Font Family: Poppins, "Noto Sans JP", sans-serif
• Font Size: 14–16px
• Font Weight: 500–600

Secondary Outline（補助動作）

• Background: transparent
• Text: #444444
• Border: 1px solid #707070
• Border Radius: 3px
• Padding: 12px 30px
• Font Size: 14–16px

Cookie Settings（クッキー設定パネル）

• Background: #ffffff
• Text: #222222
• Border: 1px solid #222222
• Border Radius: 2px
• Padding: 12px 10px

Inputs

Search（検索バー）

• Background: #ffffff
• Border: 1px solid #707070
• Border Radius: 50px（pill 形状 — 唯一の大きな角丸）
• Padding: 6px 35px 6px 15px（右側に検索アイコン領域）
• Font Size: 14–16px

Standard Input

• Background: #ffffff
• Border: 1px solid #707070
• Border Radius: 2–3px
• Padding: 8px 12px

Cards

• Background: #ffffff
• Border: なし（写真ベースのカード）
• Border Radius: 0px
• Shadow: なし
• 構成: 商品写真 + ブランドラベル（14px/600）+ 商品名 + 価格（12px/600）+ "NEW" バッジ（11px/600）

Toggle Switch

• Background (ON): #3860be（Filter Blue）
• Background (OFF): #e5e5e5
• Border Radius: 17px
• サイズ: 34px × 20px 程度

5. Layout Principles

Spacing Scale（実測ベース）

Container

• Max Width: 1200–1440px（推定）
• Padding (horizontal): 16–24px

Grid

• 商品一覧: 3〜4 カラム（デスクトップ）
• ブランドカテゴリ: 2〜3 カラム
• フッター: 4〜5 カラム（リンク群）
• ヒーロー: 全幅 1 カラム

6. Depth & Elevation

シチズンはフラットデザインを基調とし、シャドウの使用は最小限。面の差異は背景色の切り替え（#ffffff → #f9f9f9 → #e5e5e5）で表現する。

7. Do's and Don'ts

Do（推奨）

• font-feature-settings: "palt" 1 を body に必ず指定する。シチズンの組版の核心
• フォントは Poppins（欧文先頭）+ Noto Sans JP の順で指定する
• 本文の line-height は 1.5 以上を確保する
• CTA は border-radius: 2px のほぼ矩形にする。pill にしない（検索バーのみ例外）
• Primary CTA は #222222 のニアブラックで、ブランドカラー #27455c と使い分ける
• ナビゲーション要素は weight 500、ラベル・価格は weight 600 で情報階層を作る
• フッターは #000000 背景 + 白・薄グレーテキストのラグジュアリー構成にする
• 色のコントラスト比は WCAG AA 以上を確保する

Don't（禁止）

• letter-spacing を大きく指定しない。palt が字詰めを担うため、追加すると二重効果になる
• 明朝体・セリフフォントを使わない。シチズンはゴシック/サンセリフのみ
• CTA に大きな角丸（radius 8px 以上）を使わない。pill は検索バーのみ
• 鮮やかな装飾色を多用しない。ダークネイビー + ニュートラルグレーの世界を保つ
• フッターに白背景を使わない。純黒 #000000 がシチズンのフッターの特徴
• ブランドアクセント #27455c を CTA ボタンに使わない。CTA は #222222、アクセント面に #27455c と役割を分ける
• 見出しの font-weight を 400 にしない。シチズンの見出しは 700（グランドセイコーとの明確な差異）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• h2 26px → 20px 程度に縮小
• 商品グリッドは 1〜2 カラムに折り返す
• 検索バー（pill）は全幅に拡大
• ハンバーガーメニュー化（展開時 18px/500 のリンク）
• CTA の padding 12px 30px → 12px 20px

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• Primary CTA は padding 12px により最小 40px 高を確保
• ナビリンクは padding で十分なタップ領域を確保

フォントサイズの調整

• モバイルでは本文 14–16px を維持
• 見出しはデスクトップの 70–80% 程度に縮小
• 価格表示の 12px は変更しない（情報密度の維持）

9. Agent Prompt Guide

クイックリファレンス

Brand: シチズンウオッチ (CITIZEN Watch)
Brand Accent: #27455c (Dark Navy)
CTA Color: #222222 (Near Black)
Filter Accent: #3860be (Blue)
Text Primary: #000000
Text Body: #444444
Background: #ffffff
Surface: #f9f9f9
Divider: #e5e5e5
Footer: #000000
Font: Poppins, "Noto Sans JP", sans-serif
Body Size: 16px / 400 / line-height 1.5
Heading Weight: 700
Nav Weight: 500
Label/Price Weight: 600
CTA Border Radius: 2px
Search Radius: 50px (pill)
palt: グローバル適用（body レベル）
Letter Spacing: normal（palt に委任）

プロンプト例

シチズンウオッチのデザインシステムに従って、新作時計の商品一覧ページを作成してください。
- フォント: Poppins, "Noto Sans JP", sans-serif
- body に font-feature-settings: "palt" 1 を必ず指定
- 本文 color は #444444、line-height: 1.5
- セクション見出し h2 は 26px / 700 / line-height 1.5 / color #000000
- ブランドラベル "シリーズエイト" は 14px / 600
- 価格 "¥159,500（税込）" は 12px / 600 / color #a6acb1
- "NEW" バッジは 11px / 600
- Primary CTA「カートに入れる」は #222222 bg + #ffffff text + 1px solid #222222 + radius 2px + padding 12px 30px
- Secondary CTA「お気に入り」は transparent bg + #444444 text + 1px solid #707070 + radius 3px
- 検索バーは border-radius: 50px の pill 形状 + border 1px solid #707070
- セクション背景は #ffffff と #f9f9f9 を交互に
- フッターは #000000 背景
- ブランドストーリーセクションは #27455c 背景 + #ffffff テキスト

字詰め・組版の重要ポイント

1. palt グローバル適用: font-feature-settings: "palt" 1 を body に指定。シチズン最大の組版特徴。括弧・句読点の不自然な全角空きが解消される
2. letter-spacing は normal: palt が字詰めを担うため、追加の letter-spacing は不要
3. Poppins + Noto Sans JP のデュアルフォント: 欧文を先頭に置き、ラテン文字は幾何学的サンセリフで描画
4. weight の 3 段階使い分け: 本文 400 / ナビ 500 / ラベル・価格・見出し 600–700
5. CTA は radius 2px: pill ではなくほぼ矩形。検索バーだけが radius 50px の例外
6. #222222 と #27455c の使い分け: CTA はニアブラック、ブランドセクションはダークネイビー

取得日: 2026-05-09 出典: https://citizen.jp/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測