キッコーマン (Kikkoman) DESIGN.md

キッコーマン（https://www.kikkoman.co.jp/）のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は Font Awesome 関連のみで、デザイントークンは直書き。

1. Visual Theme & Atmosphere

• デザイン方針: 温かみのある食品ブランドサイト。レシピ・献立を中心に、家庭的で親しみやすいデザイン。オレンジのブランドカラーが食欲を喚起し、クリーム色の面で温もりを演出
• 密度: コーポレートトップは情報量多め（ニュース・ブランドサイト・レシピ導線が並列）、レシピページはカード中心のゆったりした構成
• キーワード: 温かい、家庭的、親しみやすい、レシピ中心、食の喜び
• 特徴: ブランドオレンジ #e96600 がヘッダーCTA・検索・タブ・レシピ見出しに一貫して使われ、サイト全体の統一感を形成。レシピページでは #fdf5e2 / #fdf7e0 のクリーム色面が温かみを強調

2. Color Palette & Roles

Primary（ブランドカラー）

• Kikkoman Orange (#e96600): メインのブランドカラー。CTAボタン、検索ボタン、タブ（アクティブ）、レシピ見出し色に使用
• Kikkoman Orange (hover想定) (#d45c00): ホバー時の暗めオレンジ（推定値）

Sub Brand（サブブランドカラー）

• Del Monte Green (#008f4b): デルモンテブランド用
• Manjo Red (#fb3733): マンジョウブランド用
• Manns Wine (#922e41): マンズワインブランド用
• Kikkoman Soymilk (#a3ca0f): キッコーマン豆乳ブランド用

Semantic（意味的な色）

• Error / Notice — background: #ffe7e7（重要なお知らせ背景）

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト
• Text Placeholder (#898989): 入力欄プレースホルダー（rgb(137, 137, 137)）
• Border (#999999): ボタン・入力欄の枠線（rgb(153, 153, 153)）
• Border Dark (#333333): 検索ボタンの枠線
• Carousel Dot (#cccccc): スライダーのインジケーター（rgb(204, 204, 204)）
• Background (#ffffff): ページ背景
• Surface Light Gray (#f5f5f5): セクション背景
• Surface Warm Cream (#fdf5e2): 今日の献立エリア、レシピセクション背景（トップ）
• Surface Warm Cream Alt (#fdf7e0): レシピページの献立エリア背景
• Surface Warm Peach (#ffe4c3): レシピ検索ナビ背景
• Header Shadow (rgba(221, 221, 221, 0.004)): ヘッダーの控えめな影

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• 游ゴシック体 / YuGothic（macOS・Windows）
• ヒラギノ角ゴ Pro（macOS フォールバック）
• メイリオ（Windows フォールバック）

注: 「ヒラギノ角ゴ Pro」であり「ProN」ではない。JIS X 0213:2004 の字形差異あり

3.2 欧文フォント

• サンセリフ: Arial, Osaka
• 等幅: 特に指定なし

3.3 font-family 指定

css/* 全サイト共通（body） */
font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, Osaka, Arial,
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

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

• 和文フォントを最優先（游ゴシック体が先頭）
• 游ゴシックの表記バリエーション4種（体/英語/混在）で確実にマッチ
• ヒラギノ角ゴ Pro → メイリオ → Osaka → Arial の順でフォールバック
• 最後に MS PGothic（レガシー Windows）

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

以下は DevTools の computed style による実測値

コーポレートトップ

レシピページ（ホームクッキング）

3.5 行間・字間

行間 (line-height) — 実測値:

• body グローバル: 25.6px (16px x 1.6)
• Display (h2 40px): 56px (x 1.4)
• Heading 1 (32px): 51.2px (x 1.6)
• Heading 2 (22px): 30.8px (x 1.4)
• レシピ Heading 2 (28px): 36.4px (x 1.3)
• Tab / Sub Nav (18px): 25.2px (x 1.4)

字間 (letter-spacing) — 実測値:

• 全要素: normal（サイト全体で letter-spacing の指定なし）

ガイドライン:

• サイト全体で letter-spacing は一切使用していない
• 行間は 1.4〜1.6 の範囲で統一。読み物コンテンツは 1.6、見出しは 1.3〜1.4
• font-weight: 500 が body のデフォルト（游ゴシックの Medium に相当）

3.6 禁則処理・改行ルール

css/* 特段の指定なし（ブラウザデフォルト） */

• 明示的な word-break / overflow-wrap / line-break の指定は確認されなかった

3.7 OpenType 機能

css/* 全要素 */
font-feature-settings: normal;

• palt: 適用なし。サイト全体でプロポーショナル字詰めは使用していない
• kern: 特に指定なし

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（お問い合わせ・検索）

• Background: #e96600
• Text: #ffffff
• Border: none（お問い合わせ）/ 1px solid #333333（検索ボタン）
• Border Radius: 0px（お問い合わせ）/ 0px 5px 5px 0px（検索ボタン、右側のみ角丸）
• Font Size: 16px（お問い合わせ）/ 18px（検索ボタン）
• Font Weight: 500（お問い合わせ）/ 700（検索ボタン）
• Padding: 40px 5px 4px（お問い合わせ、縦長のアイコン型）/ 20px 22px（検索）

Tab Button（アクティブ）

• Background: #e96600
• Text: #ffffff
• Border Radius: 5px 5px 0px 0px（上辺のみ角丸）
• Font Size: 18px
• Font Weight: 700
• Padding: 13px 23.4px

Tab Button（非アクティブ）

• Background: #ffffff
• Text: #333333
• Border Radius: 5px 5px 0px 0px
• Font Size: 18px
• Font Weight: 700
• Padding: 13px 23.4px

Pill Button（ナビ・もっと見る）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #999999
• Border Radius: 50px
• Font Size: 16px（もっと見る）/ 14px（ナビ「企業・IR・採用」）
• Font Weight: 700
• Padding: 13px 22px（リンク）/ 12.8px 45px（ボタン）

Carousel Dot

• Background: #cccccc
• Border Radius: 50%
• Border: none

Inputs

検索入力

• Background: #ffffff
• Border: 枠線あり（詳細不明、1px solid と推定）
• Border Radius: 5px 0px 0px 5px（左側のみ角丸、右は検索ボタンと結合）
• Font Size: 20px
• Font Weight: 400
• Color: #898989（プレースホルダー）
• Padding: 16px 22px

Cards

• Background: #ffffff
• Border: 特段のボーダー指定なし（影で浮遊感を出す想定）
• Border Radius: 明示的な指定なし
• Shadow: 控えめ（ヘッダーの rgba(221, 221, 221, 0.004) 0px 1px 0px 0px のみ確認）

Navigation

• Background: #ffffff
• Shadow: rgba(221, 221, 221, 0.004) 0px 1px 0px 0px（控えめなボトムシャドウ）
• グローバルナビ: 20px / 700 / #333333
• サブナビ: 18px / 700 / #333333
• ユーティリティ（お問い合わせ・検索）: #e96600 背景、白文字

5. Layout Principles

Spacing Scale

Container

• Max Width: 明示的な固定値はなく、レスポンシブ
• ヘッダーナビは画面幅いっぱいに展開

Grid

• コーポレートトップ: フルカルーセル + カード型グリッド
• レシピページ: カード型グリッド（レシピカード）

6. Depth & Elevation

• サイト全体でシャドウの使用は極めて控えめ
• フラットデザインを基調とし、要素の区切りは背景色の変化（白 → クリーム → ピーチ）で表現

7. Do's and Don'ts

Do（推奨）

• ブランドオレンジ #e96600 はCTA・タブ・見出しアクセントに一貫して使う
• テキスト色は #333333 を使い、純粋な #000000 を避ける（温かみのある読書体験）
• 温かみのある面色（#fdf5e2, #fdf7e0, #ffe4c3）でレシピ・食関連セクションを包む
• font-weight: 500 を body のデフォルトにする（游ゴシックの Medium が最適バランス）
• ボタンは pill 型（radius: 50px）と角付きタブ型（radius: 5px 5px 0 0）を使い分ける
• レシピ見出し（h2, h3）にはオレンジ #e96600 を使い、食の世界観を強調する
• サブブランド色（デルモンテ緑、マンジョウ赤等）は各ブランド領域に限定して使う

Don't（禁止）

• 純粋な #000000 をテキストに使わない（コントラストが強すぎて温かみが失われる）
• ブランドオレンジ #e96600 を本文テキスト色に使わない（白背景でコントラスト不足）
• letter-spacing や palt を追加しない（サイト全体で意図的に未使用）
• レシピセクション外でクリーム色面（#fdf5e2）を多用しない（食の文脈で使う色）
• ヒラギノ角ゴ「ProN」と「Pro」を混同しない（キッコーマンは「Pro」を使用）
• サブブランド色をメインブランドのCTAに流用しない

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px

フォントサイズの調整

• モバイルでは本文 14-16px、見出しはデスクトップの 70-80% 程度に縮小

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #e96600（オレンジ — CTA・タブ・レシピ見出し）
Text Primary: #333333
Background: #ffffff
Surface Warm: #fdf5e2（レシピセクション）
Surface Peach: #ffe4c3（検索ナビ）
Surface Gray: #f5f5f5
Border: #999999
Error Surface: #ffe7e7

Font: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, Osaka, Arial,
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif

Body: 16px / weight: 500 / line-height: 1.6 / letter-spacing: normal
Heading: weight: 700 / line-height: 1.3-1.4
palt: なし（サイト全体で未使用）

プロンプト例

キッコーマンのデザインに従って、レシピ一覧ページを作成してください。
- フォント: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
    メイリオ, Meiryo, Osaka, Arial, sans-serif
- テキスト色: #333333（純粋な黒は使わない）
- ブランドカラー: #e96600（CTAボタン、タブ、見出しアクセント）
- 背景: #ffffff、レシピセクション: #fdf5e2（温かいクリーム色）
- ボタン: pill型（border-radius: 50px, border: 1px solid #999）
- CTA: #e96600 背景、白文字、角付き（border-radius: 0 or 5px）
- body font-weight: 500、見出し font-weight: 700
- line-height: 本文 1.6、見出し 1.3-1.4
- letter-spacing: normal（palt なし）