CHOYA (チョーヤ梅酒) DESIGN.md

CHOYA 公式サイト (https://www.choya.co.jp/) のデザイン仕様書。 1914年創業の梅酒メーカー。「The CHOYA」「さらりとした梅酒」等で知られる日本を代表する梅酒ブランド。 明朝体見出し + ゴシック体本文の二書体構成で、老舗の品格と現代的な清潔感を両立。実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体の見出しとゴシック体の本文で、梅酒づくりの伝統と品格を表現。白背景にグレーテキスト (#666) という控えめな配色で、商品写真を主役にする洗練されたプレゼンテーション
• 密度: ゆったりとした余白を持つプロダクトショーケース型。各商品カテゴリにアクセントカラーを割り当て、視覚的な分類を助ける
• キーワード: 明朝体、伝統、グリーン、マルチカラーカテゴリ、ゴーストボタン
• 特徴: Noto Serif JP（見出し）と Noto Sans JP（本文）の二書体構成。ブランドグリーン #16ae41 をセクション見出しに使用し、商品カテゴリごとに固有のアクセントカラー（ゴールド・レッド・ブルー・オレンジ・ピンク）を持つ。CTAは枠線のみのゴーストボタンが基本で、年齢確認ゲートのみピルボタン。見出しの letter-spacing: 0.1~0.15em が広く、格式のある佇まいを作る。font-feature-settings: "palt" がグローバルに適用されている

2. Color Palette & Roles

Primary (ブランドカラー)

• CHOYA Green (#16ae41): メインのブランドカラー。セクション見出し（H2）、ブランドアイデンティティ要素に使用
• Button Green (#2dae37): 年齢確認ゲートのCTAボタン背景。ブランドグリーンのやや明るいバリエーション

Category Accent (カテゴリ別アクセントカラー)

• Gold (#ccac38): CRAFT CHOYA カテゴリ。プレミアムラインを表現
• Red (#e14141): "その他" カテゴリ
• Blue (#3d9cc8): "ノンアルコール" カテゴリ
• Orange (#ee9303): "ソフトドリンク" カテゴリ
• Pink (#fb5e82): "食品" カテゴリ

Neutral (ニュートラル)

• Text Primary (#666666): 本文テキスト、見出し。純黒ではなくミディアムグレーを採用し、上品で柔らかい印象
• Text Dark (#333333): 強調テキスト
• Border (#666666): ゴーストボタンの枠線、区切り線
• Background (#ffffff): ページ背景
• Surface Dark (#323232): CM/MOVIE セクションの暗い背景
• Surface Light (#f5f5f5): セクション背景、カード面

Note: CHOYA の配色は 白地 + グレーテキスト + グリーンアクセント が基本。商品カテゴリごとに固有のアクセントカラーを持つ多色設計だが、各色はカテゴリ見出しやラベルに限定して使い、全体の統一感を保っている。

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文）: Noto Sans JP
• 明朝体（見出し）: Noto Serif JP

3.2 欧文フォント

• サンセリフ: Noto Sans JP に内包される欧文グリフを使用
• セリフ: Noto Serif JP に内包される欧文グリフを使用

3.3 font-family 指定

css/* 本文・ナビゲーション */
font-family: "Noto Sans JP", sans-serif;

/* 見出し・CTA */
font-family: "Noto Serif JP", serif;

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

• Google Fonts の Noto Sans JP / Noto Serif JP を Web フォントとして読み込む設計
• フォールバックは generic family のみのシンプルな構成
• 見出しと本文で書体を明確に分ける二書体構成

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

Note: 見出しは 明朝体 (Noto Serif JP)、本文は ゴシック体 (Noto Sans JP) と明確に分けている。H2 の weight 600 は明朝体では太すぎない落ち着いた太さ。見出しの letter-spacing が 0.1~0.15em と広いのが特徴的。

3.5 行間・字間

• 本文の行間 (line-height): 1.3（日本語サイトとしてはやや詰まった設定）
• 見出しの行間: 1.3
• 本文の字間 (letter-spacing): normal
• 見出しの字間: 0.1~0.15em — 広めのトラッキングで格式のある印象

ガイドライン:

• line-height 1.3 は全体で統一されている。日本語サイトとしてはタイトだが、商品紹介中心のレイアウトでは情報密度を保てる
• 見出しの letter-spacing が 0.1em 以上と広く、明朝体の美しさを引き立てる
• 本文の字間は normal で、ゴシック体の自然な間隔を活かす

3.6 禁則処理・改行ルール

cssword-wrap: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: "palt" 1;  /* グローバルに適用 */

• palt: サイト全体にプロポーショナル字詰めが適用されている。見出し・本文を問わずグローバル設定
• 明朝体の見出しで palt + 広い letter-spacing の組み合わせにより、洗練された字詰めを実現

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary Ghost (メインCTA)

• Background: transparent
• Text: #666666
• Border: 1px solid #666666
• Padding: 20px
• Border Radius: 0px
• Font Family: "Noto Serif JP", serif
• Font Size: 20px
• Font Weight: 500
• Letter Spacing: 0.1em
• 装飾: テキスト末尾に矢印 (→) を伴う

Age Gate CTA (年齢確認)

• Background: #2dae37
• Text: #ffffff
• Padding: 12px 32px
• Border Radius: 36px (pill)
• Font Family: "Noto Serif JP", serif
• Font Size: 15px
• Font Weight: 500

Language Selector

• Background: transparent
• Text: #666666
• Border: 1px solid #666666
• Padding: 4px 12px
• Border Radius: 20px
• Font Family: Arial, sans-serif
• Font Size: 12px

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #16ae41
• Border Radius: 0px
• Padding: 10px 12px
• Font Size: 14px
• Font Family: "Noto Sans JP", sans-serif

Cards

• Background: #ffffff
• Border: none
• Border Radius: 0px
• Padding: 24px
• Shadow: none（フラットな設計）
• 商品カードは画像 + テキストの縦積みレイアウト

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px
• Padding (horizontal): 20px

Grid

• Product Grid: 4 columns (デスクトップ) / 2 columns (モバイル)
• Gutter: 24px
• 商品画像はアスペクト比自由（商品パッケージの形状に合わせる）

6. Depth & Elevation

Note: CHOYA のデザインは フラット指向。影はホバー時の微細なフィードバック程度にしか使わず、基本はボーダーレスの白地設計。商品写真の美しさを阻害しないクリーンな表現。

7. Do's and Don'ts

Do (推奨)

• 見出しには必ず Noto Serif JP（明朝体）を使い、本文は Noto Sans JP（ゴシック体）で分ける
• セクション見出し (H2) にはブランドグリーン #16ae41 を使用する
• 見出しの letter-spacing は 0.1em 以上に設定し、格式のある間隔を保つ
• CTAは枠線のみのゴーストボタンを基本とする — 矢印 (→) を末尾に添える
• テキストカラーは #666666 を基本とし、柔らかく上品な印象を維持する
• font-feature-settings: "palt" をグローバルに適用する
• 各カテゴリの固有色はカテゴリ見出し・ラベルに限定して使う

Don't (禁止)

• 本文テキストに明朝体を使わない — 明朝体は見出し・CTA専用
• 純黒 #000000 をテキストに使わない — 基本は #666666
• CTAボタンを塗りつぶしにしない — ゴーストボタンが基本（年齢確認ゲートを除く）
• カテゴリ別アクセントカラーを本文やページ全体に広げない — カテゴリラベルに限定
• border-radius を大きくしない（pill ボタンは年齢確認ゲートのみ）
• 過度な影 (box-shadow) を使わない — フラットデザインが基本
• 見出しの letter-spacing を normal にしない — 広めのトラッキングがブランドの品格を支える

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px (WCAG 基準)

フォントサイズの調整

• モバイルでは H2 を 36px -> 24px 程度に縮小
• 本文 14px は維持
• 商品グリッドは 4列 -> 2列に変更
• ゴーストボタンのパディングを縮小

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #16ae41 (CHOYA Green)
Button Green: #2dae37 (Age Gate CTA)
Text Color: #666666
Background: #ffffff
Surface Dark: #323232
Heading Font: "Noto Serif JP", serif
Body Font: "Noto Sans JP", sans-serif
Body Size: 14px
Heading Letter Spacing: 0.1~0.15em
Line Height: 1.3
palt: グローバル適用
CTA Style: ゴーストボタン (border only, 矢印付き)

プロンプト例

CHOYA のデザインシステムに従って、商品一覧ページを作成してください。
- 見出しフォント: "Noto Serif JP", serif (weight 600, letter-spacing: 0.1em)
- 本文フォント: "Noto Sans JP", sans-serif (weight 400)
- プライマリカラー: #16ae41 (セクション見出しに使用)
- テキストカラー: #666666
- 背景: #ffffff
- font-feature-settings: "palt" をグローバルに適用
- CTAはゴーストボタン (border: 1px solid #666, 矢印 → 付き)
- 商品カテゴリごとにアクセントカラーを変える
  - CRAFT: #ccac38, ノンアルコール: #3d9cc8, ソフトドリンク: #ee9303, 食品: #fb5e82
- グリッド: 4列 (デスクトップ), 2列 (モバイル)