Calbee（カルビー） DESIGN.md

Calbee 公式サイト（https://www.calbee.co.jp/）のデザイン仕様書。 「かっぱえびせん」「ポテトチップス」「じゃがりこ」など日本を代表するスナック菓子メーカー。 実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 親しみやすく明るい「食」のコーポレートサイト。強いブランドレッド (#eb0100) を軸に、温かみのあるベージュ面 (#f1eee9) と柔らかいダークグレー文字 (#3c3c3c) で構成。楽しさとクリーンさのバランスが取れた FMCG らしいデザイン
• 密度: 中程度。製品情報・ニュース・企業情報が整理されたコーポレートサイト型。ヒーローは画像カルーセル、各セクションはカード型で整列
• キーワード: 元気、親しみやすい、カルビーレッド、温かベージュ、食品コーポレート
• 特徴: 見出しに Google Fonts の「Sawarabi Gothic（さわらびゴシック）」を採用。やや丸みを帯びた柔らかいゴシック体で、食品ブランドらしい親しみやすさを演出。本文は游ゴシック体で Windows Medium 対応のフォールバックチェーンを含む。カテゴリ見出し (h3) にブランドレッドを直接適用するのが特徴的。CTA は 角丸 6.4px の標準ボタンと 角丸 48px の pill ボタンを使い分け、いずれも #eb0100 の塗り。テキスト色に純黒は使わず #3c3c3c / #2f2f2f のダークグレーで柔らかさを保つ

2. Color Palette & Roles

Primary（ブランドカラー）

• Calbee Red (#eb0100): カルビーのコーポレートカラー。CTA ボタン背景、カテゴリ見出し (h3)、アクティブナビリンクに使用。サイト全体で最も視認性の高い色。背景色として 11 箇所以上で確認
• White on Red (#ffffff): ブランドレッド背景の上のテキスト色

Neutral（ニュートラル）

• Text Primary (#3c3c3c): 本文テキスト、リード文。純黒は使わない（rgb(60,60,60)）
• Text Strong (#2f2f2f): 見出し (h1, h2)、製品名。本文より一段濃いが純黒ではない（rgb(47,47,47)）
• Text on Red (#ffffff): ブランドレッド背景上の白テキスト
• Background White (#ffffff): ページ標準背景
• Surface Warm (#f1eee9): 温かみのあるベージュ / オートミール色の面。セクション背景として 7 箇所以上で使用。カルビーらしい「食品の温もり」を演出する面色

CTA / Button

• CTA Red (#eb0100): Primary CTA・Pill CTA の背景色
• CTA Text (#ffffff): CTA 上のテキスト
• Outline White (#ffffff): ダーク / レッド背景上のアウトラインボタンの枠線・テキスト

Note: カルビーのカラーパレットは非常にシンプル。ブランドレッド (#eb0100) + 温かベージュ (#f1eee9) + ダークグレー (#3c3c3c / #2f2f2f) の 3 トーンで構成され、純黒・寒色系グレーは使わない。食品メーカーらしい暖色トーンに統一されている。

3. Typography Rules

3.1 和文フォント

ゴシック体（2 系統）:

• Sawarabi Gothic（さわらびゴシック）: Google Fonts のフリーゴシック体。見出し・ナビゲーション・CTA に使用。やや丸みのある字形で親しみやすい印象
• 游ゴシック体 / YuGothic: 本文用。Windows の游ゴシック問題に対応するため「游ゴシック Medium」「Yu Gothic Medium」を含むフォールバックチェーンを採用

3.2 欧文フォント

• サンセリフ: Sawarabi Gothic および游ゴシック内蔵の欧文グリフをそのまま使用。専用の欧文フォントは指定されていない

3.3 font-family 指定

css/* 見出し・ナビゲーション・CTA */
font-family: "Sawarabi Gothic", sans-serif;

/* 本文・製品名・一般テキスト */
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;

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

• 見出し系は Sawarabi Gothic 単独指定。Google Fonts で配信されるため環境差が少ない
• 本文の游ゴシックは Windows Medium 問題に対応。macOS では「游ゴシック体」(YuGothic) が Medium ウェイト相当で表示されるが、Windows では「游ゴシック」のデフォルトが Regular（細い）ため、「游ゴシック Medium」を先に指定して太さを揃える
• 最後に sans-serif で generic family を指定

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

3.5 行間・字間

• 本文の行間 (line-height): normal（ブラウザデフォルト、おおよそ 1.2）。游ゴシックのメトリクスに委ねる
• 見出しの行間: normal
• letter-spacing: normal（0）。Sawarabi Gothic・游ゴシックともに字間の追加指定なし
• font-feature-settings: 特段の指定なし。palt は不使用

特徴: カルビーは line-height も letter-spacing もフォントのデフォルト値に任せるシンプルな組版。意図的な字詰め・行間調整を行わず、フォントの素のメトリクスで組んでいる。

3.6 禁則処理・改行ルール

css/* 特別な指定は最小限。ブラウザデフォルトに準拠 */
word-wrap: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

Sawarabi Gothic は OpenType 機能が限定的なフリーフォントのため、palt / kern の適用はない。游ゴシックも素のメトリクスで使用。

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary CTA（角丸 6.4px、ブランドレッド塗り）

• Background: #eb0100
• Text: #ffffff
• Border: none
• Border Radius: 6.4px
• Font: Sawarabi Gothic
• Font Weight: 400
• 例: 「一覧」「もっと見る」「詳しく見る」

Pill CTA（角丸 48px、ブランドレッド塗り）

• Background: #eb0100
• Text: #ffffff
• Border: none
• Border Radius: 48px
• Font: Sawarabi Gothic
• 例: 「アレルゲン検索」など重要なアクション。pill 形状で視認性を高める

Outline Button（透明背景、白枠）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Border Radius: 5px
• 例: ダーク背景・レッド背景上のフィルター操作ボタン

Play / Pause（ユーティリティ）

• Background: transparent
• Border Radius: 5px
• 例: カルーセルのメディアコントロール

使い分け: 標準的なページ内遷移 CTA は 角丸 6.4px の塗りボタン、特に目立たせたい機能ボタン（検索等）は 角丸 48px の pill、ダーク / レッド背景上では 白アウトライン。3 段階の radius 戦略で情報の優先度を表現する。

Cards

News / Article Card

• Background: transparent または #ffffff
• Border: なし
• Border Radius: 13px
• 例: ニュース記事リンク、お知らせカード

Section Card（温かベージュ面）

• Background: #f1eee9
• Border: なし
• Border Radius: 0px（セクション単位のフルブリード背景として使用）

Inputs

• サイト上のフォーム要素は限定的（アレルゲン検索等）
• Border Radius: 標準的な角丸（CTA と揃える 5px〜6.4px）
• Font: Sawarabi Gothic（フォーム UI 統一）

5. Layout Principles

Spacing Scale

実測ベースのスペーシングスケール（推定）:

Container

• Max Width: ≈ 1200px（コンテンツエリア）
• ヒーローはフルブリード
• 本文セクションは中央寄せ

Grid

• ヒーロー: 1 カラム（フルブリード画像カルーセル）
• 製品一覧: 3〜4 カラム（デスクトップ）
• ニュース: カード型グリッド
• セクション: 温かベージュ (#f1eee9) 面で区切る

6. Depth & Elevation

特徴: カルビーはフラットデザイン基調。影ではなく背景色の切り替え（白 #ffffff ↔ ベージュ #f1eee9）とブランドレッドのアクセントでセクション間の奥行きを表現する。

7. Do's and Don'ts

Do（推奨）

• ブランドレッド #eb0100 を CTA・カテゴリ見出し・アクティブ状態に一貫して使う
• 見出しには Sawarabi Gothic を使い、本文は游ゴシックで書き分ける
• テキスト色はダークグレー (#3c3c3c / #2f2f2f) を使い、柔らかい印象を保つ
• セクション背景に温かベージュ #f1eee9 を活用し、白一色にしない
• CTA の角丸は用途で使い分ける（標準 6.4px / pill 48px / アウトライン 5px）
• 游ゴシックの font-family は Windows Medium 対応のフルチェーンで指定する

Don't（禁止）

• 純黒 #000000 をテキストに使わない（#3c3c3c を使う）
• ブランドレッドを本文テキスト色に使わない（カテゴリ見出し・アクティブリンクのみ）
• letter-spacing / palt を追加しない（フォントメトリクスのまま組む）
• 寒色系グレー（青みがかったグレー）を面色に使わない（ベージュ #f1eee9 を使う）
• 游ゴシックのフォールバックで「游ゴシック Medium」を省略しない（Windows で細くなる）
• Sawarabi Gothic を本文に使わない（見出し・ナビ・CTA 専用）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• Pill CTA は十分な padding で確保

フォントサイズの調整

• モバイルでは h1 (36px) → 24〜28px 程度に縮小
• 本文 16px は据え置き
• Sub Nav (14px) はモバイルで非表示またはドロワー内に格納

9. Agent Prompt Guide

クイックリファレンス

Brand Color:         #eb0100 (Calbee Red)
Text Primary:        #3c3c3c
Text Strong:         #2f2f2f
Background:          #ffffff
Surface Warm:        #f1eee9 (oatmeal beige)
Heading Font:        "Sawarabi Gothic", sans-serif
Body Font:           "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif
Body Size:           16px
Line Height:         normal
Letter Spacing:      normal (no palt)
CTA Style:           #eb0100 fill — radius 6.4px (standard) / 48px (pill)
Category Heading:    h3 in #eb0100 (brand red text)

プロンプト例

カルビーのデザインシステムに従って、製品一覧ページを作成してください。

- ブランドカラー: #eb0100 (Calbee Red)
- 見出しフォント: "Sawarabi Gothic", sans-serif / weight 400
- 本文フォント: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif
- 本文サイズ: 16px / color #3c3c3c
- 製品名: 18px / weight 700 / color #2f2f2f
- カテゴリ見出し (h3): 22px / color #eb0100 (ブランドレッド)
- セクション背景: 白 #ffffff と温かベージュ #f1eee9 を交互に
- CTA ボタン: bg #eb0100, text #ffffff, border-radius 6.4px
- 重要な検索 CTA: 同色で border-radius 48px (pill)
- 純黒は使わない。テキストは #3c3c3c / #2f2f2f
- letter-spacing / palt は使わない（フォントの素のメトリクスで組む）