Nissin (日清食品グループ) DESIGN.md

日清食品グループ 商品情報サイト（https://www.nissin.com/jp/）のデザイン仕様書。 実サイトの CSS（Tailwind CSS ベース + CSS Custom Properties デザイントークン）および TypeSquare カスタムフォントに基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ダーク基調のイマーシブなフードブランドサイト。CM動画や商品写真を大胆に打ち出し、メディアファーストの体験を提供。ダークチャコール背景に白テキスト・赤アクセントの力強いコントラスト
• 密度: ゆったりとした大型ビジュアル主体。セクション間の余白は広く、商品・映像コンテンツが主役
• キーワード: ダーク、ボールド、イマーシブ、メディアファースト、プレミアムフード
• 特徴: TypeSquare の「アオトゴシック」カスタムフォントを使用。ページ背景は #1a1a1a（ダークチャコール）で、純黒ではなくわずかに温かみを持たせている。ブランドレッド #ff0000 をアクセントに使用

2. Color Palette & Roles

Primary（ブランドカラー）

• Nissin Red (#ff0000): ブランドアイデンティティカラー。チップ（WEB限定等）、「もっと見る」リンク、Cookieバナー等に使用

Semantic（意味的な色）

• Danger / Accent (#ff0000): エラー、強調、ブランドアクセント（ブランドレッドと兼用）

Neutral（ニュートラル）

• Text Primary (#ffffff): 本文テキスト（ダーク背景上）
• Text Secondary (#999999): 日付、再生回数等の補足テキスト
• Text Tertiary (#7f7f7f): フッターコピーライト等の最も薄いテキスト
• Background Primary (#1a1a1a): ページ背景（ダークチャコール）
• Background Surface (#4d4d4d): ミッドグレーのセクション背景
• Overlay (rgba(0,0,0,0.8)): モーダル・オーバーレイ
• Border Default (#e5e7eb): Tailwind 由来のデフォルトボーダー（ライトセクション用）
• Border Dark (rgba(255,255,255,0.2)): ダーク背景上のボーダー

Surface（CTA・カード）

• CTA Surface (#ffffff): 白ボタン（ダーク背景上の主要CTA）
• CTA Text (#000000): 白ボタン上の黒テキスト
• Secondary CTA Surface (transparent): 透明ボタン（白ボーダー付き）
• Secondary CTA Text (#ffffff): 透明ボタン上の白テキスト
• Card Surface (#ffffff): 商品カード背景
• Card Text (#000000): 商品カード上のテキスト
• Chip Surface (#ff0000): チップ・バッジ背景
• Chip Text (#ffffff): チップ上の白テキスト

3. Typography Rules

3.1 和文フォント

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

• Aoto Gothic Regular（TypeSquare カスタムフォント、weight 400）
• Aoto Gothic Bold（TypeSquare カスタムフォント、weight 700）
• sans-serif（フォールバック）

注意: Aoto Gothic は TypeSquare のドメインライセンスフォント。preview.html では Google Fonts の「Zen Kaku Gothic New」で代替している（Morisawa 系で字形が近い）

3.2 欧文フォント

• サンセリフ: Aoto Gothic 内の欧文グリフを使用
• 数字（ランキング）: Helvetica, sans-serif（64px bold、ランキング番号専用）

3.3 font-family 指定

css/* デフォルト（Regular） — CSS Custom Property */
--font-family-normal: "Aoto Gothic Regular", sans-serif;

/* ボールド — CSS Custom Property */
--font-family-bold: "Aoto Gothic Bold", sans-serif;

/* ランキング数字 */
font-family: Helvetica, sans-serif;

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

• TypeSquare のカスタムフォントが読み込まれるまでは sans-serif で表示
• .typesquare_option クラスでフォントの読み込み状態を管理
• ランキング番号はラテン数字専用に Helvetica を指定

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

以下は CSS Custom Properties のデザイントークンによる定義値

3.5 行間・字間

行間 (line-height) — CSS Custom Properties デザイントークン:

• Display / Headline: 140% (×1.4) — 見出し用、タイトで力強い印象
• Title / Label: 150% (×1.5) — 標準的なタイトル・ラベル
• Body: 160% (×1.6) — 本文用、日本語の可読性を確保

字間 (letter-spacing) — CSS Custom Properties デザイントークン:

• Display / Headline: 0.01em — 大きな文字にわずかな字間
• Title / Body / Label: 0.02em — 本文・ラベルにやや広い字間

ガイドライン:

• 全階層で letter-spacing がトークンとして定義されており、統一的に適用される
• Display/Headline は 0.01em、それ以外は 0.02em の2段階
• 行間は 1.4〜1.6 の範囲で、欧文的なタイトさを保ちつつ日本語の可読性に配慮

3.6 禁則処理・改行ルール

css/* フォントレンダリング */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

• Tailwind CSS ベースのため、word-break / overflow-wrap はユーティリティクラスで制御

3.7 OpenType 機能

css/* 全体 — 実測確認 */
font-feature-settings: normal;

• palt は未使用。全階層で font-feature-settings: normal が確認された
• Aoto Gothic 自体がプロポーショナルメトリクスを内包している可能性がある

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary（白CTA — ダーク背景上）

• Background: #ffffff
• Text: #000000
• Padding: 8px 24px
• Border Radius: 16px
• Font Size: 16px
• Font Weight: 700
• Font Family: --font-family-bold

Secondary（透明・白ボーダー）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 8px 24px
• Border Radius: 8px
• Font Weight: 700

Tab（アクティブ）

• Background: #ffffff
• Text: #000000
• Border Radius: 8px
• Font Weight: 700

Tab（非アクティブ）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Border Radius: 8px
• Font Weight: 700

Link Button（「もっと見る」）

• Background: #ffffff
• Text: #ff0000（ブランドレッド）
• Border Radius: 16px
• Font Weight: 700

Chips / Badges

• Background: #ff0000
• Text: #ffffff
• Border Radius: 0px（角丸なし）
• Padding: 0 8px
• Font Size: 12px
• Font Weight: 700

Inputs

• Background: #1a1a1a
• Border: 1px solid rgba(255,255,255,0.2)
• Border Radius: 8px
• Padding: 16px 56px（検索アイコン分の左パディング）
• Font Size: 16px
• Color: #ffffff

Cards（商品カード）

• Background: #ffffff
• Text: #000000
• Border Radius: 16px
• Padding: 0（画像 + テキストの構成）
• Shadow: なし（フラット）
• Hover: 軽微な elevation

5. Layout Principles

Spacing Scale — CSS Custom Properties

Container

• Max Width: Tailwind の max-w-screen-xl（1280px）相当
• Padding (horizontal): 32px（デスクトップ）/ 16px（モバイル）

Grid

• 商品カードグリッド: 4カラム（デスクトップ）
• CM動画グリッド: 2〜3カラム
• Gap: 16px〜24px

6. Depth & Elevation

• ダーク背景のため、shadow は高い opacity で定義する必要がある
• 主にフラットデザインで、影よりも色のコントラストで階層を表現

7. Do's and Don'ts

Do（推奨）

• ダーク背景 #1a1a1a を使い、純黒 #000000 を避ける（わずかな温かみを保つ）
• テキストは #ffffff を基本とし、補助テキストは #999999 でトーンを落とす
• ブランドレッド #ff0000 はチップ・バッジ・リンクテキストのアクセントに限定する
• CTA は白ボタン（#ffffff bg + #000000 text）でダーク背景上の視認性を確保する
• 商品カードは白背景 #ffffff にし、ダーク背景とのコントラストで商品を際立たせる
• フォントは --font-family-normal（400）と --font-family-bold（700）の2ウェイトで統一する
• letter-spacing は Display/Headline で 0.01em、それ以外で 0.02em を適用する
• スペーシングは CSS Custom Properties のトークン（4px ベースの倍数）に従う

Don't（禁止）

• ブランドレッド #ff0000 を広い面積の背景に使わない（チップ・バッジ・小面積のアクセントのみ）
• 純黒 #000000 をページ背景に使わない（#1a1a1a を使う）
• 白テキストに対して #999999 より薄いグレーを本文に使わない（コントラスト不足）
• Aoto Gothic 以外のフォントをメインに使わない（ブランドの一体感が崩れる）
• 商品カードの角丸を 16px 以外にしない（ブランドのカード radius の統一）
• CTA に角丸 16px 以外の値を使わない（Primary CTA のブランド統一）
• チップ・バッジに角丸を付けない（border-radius: 0 がブランドルール）

8. Responsive Behavior

Breakpoints

タッチターゲット

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

フォントサイズの調整

• モバイルでは Display を 36px → 24px 程度に縮小
• 商品カードグリッドは 4カラム → 2カラム → 1カラムに変化
• CM動画はスワイプ式のカルーセルに変化

9. Agent Prompt Guide

クイックリファレンス

Brand Red: #ff0000（チップ・バッジ・リンク用）
CTA Background: #ffffff（ダーク背景上）
CTA Text: #000000
Text Primary: #ffffff
Text Secondary: #999999
Text Tertiary: #7f7f7f
Background: #1a1a1a
Background Surface: #4d4d4d
Card Background: #ffffff
Card Text: #000000
Chip Background: #ff0000
Chip Text: #ffffff
Border (dark): rgba(255,255,255,0.2)

Font (Normal): "Aoto Gothic Regular", sans-serif
Font (Bold): "Aoto Gothic Bold", sans-serif
Font (Preview代替): "Zen Kaku Gothic New", sans-serif

Display: 48px / weight: 700 / line-height: 1.4 / letter-spacing: 0.01em
Headline: 32px / weight: 700 / line-height: 1.4 / letter-spacing: 0.01em
Body: 16px / weight: 400 / line-height: 1.6 / letter-spacing: 0.02em
Label: 14px / weight: 400 / line-height: 1.5 / letter-spacing: 0.02em
Card Radius: 16px
CTA Radius: 16px
Chip Radius: 0px

プロンプト例

日清食品グループのデザインに従って、商品一覧ページを作成してください。
- 背景: #1a1a1a（ダークチャコール）
- テキスト: #ffffff
- フォント: "Aoto Gothic Regular", sans-serif（Regular）/ "Aoto Gothic Bold", sans-serif（Bold）
- 商品カード: 白背景 #ffffff、黒テキスト #000000、radius 16px
- CTA: 白ボタン #ffffff bg + #000000 text、radius 16px
- チップ（WEB限定等）: #ff0000 bg + #ffffff text、radius 0
- 補足テキスト: #999999
- 本文: 16px, line-height: 1.6, letter-spacing: 0.02em
- 見出し: 32px, weight: 700, line-height: 1.4, letter-spacing: 0.01em