Yakult（ヤクルト） DESIGN.md

Yakult（https://www.yakult.co.jp/）のデザイン仕様書。 乳酸菌飲料「ヤクルト」を中心に、食品・飲料・化粧品を展開する健康企業。 実サイトの computed style 実測（2026-05-31 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白背景を基調に、ヤクルトレッド #e60039 のピル CTA と ウォームクリーム #fbf6ec・ウォームピンク #fff2f5 のカテゴリ面で、健康・安心・親しみやすさを表現
• 密度: 本文の line-height は 1.5 で均一。セクション間にゆとりを持たせ、コーポレートサイトらしい落ち着いた余白感
• キーワード: ヤクルトレッド、ウォームクリーム、ウォームピンク、システムフォント Medium 体、健康ブランドの信頼感
• 特徴:
  • 和文フォントはシステムフォントスタック。-apple-system から始まる標準的な構成で、特定の Web フォントに依存しない
  • ブランドカラーは #e60039（ヤクルトレッド）。CTA ボタン・セクション見出し・ラベルバッジなど全面的に使用
  • 本文の weight は 500（Medium） を採用。通常の 400 より一段太く、画面上での可読性を重視
  • サーフェスに #fbf6ec（ウォームクリーム） と #fff2f5（ウォームピンク） を使い分け、食品/飲料と化粧品のカテゴリを視覚的に区別
  • ニュートラルサーフェス #f2f2f2 はタグ・フィルター等の汎用面に使用
  • セクション見出し（h2）に直接ブランドレッドを適用し、色で構造を伝える
  • h3 には左ボーダーアクセントを付け、サブセクションの階層を強調
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Yakult Red (#e60039): メインのブランドカラー。主要 CTA 背景、セクション見出し（h2）の文字色、ラベルバッジ背景
• Blue Accent (#3f7ac3): 補助的なアクセント色。リンクやインフォメーション要素で使用

CTA / Buttons

• Primary CTA（レッドピル）: 背景 #e60039 / 文字 #ffffff / radius 20px〜50px（pill）/ weight 700
• Ghost CTA（アウトライン）: 背景 transparent / 文字 #e60039 / border 2px solid #e60039 / radius 40px（pill）
• Tag / Category: 背景 #f2f2f2 / 文字 #333333 / radius 4px / weight 700

Category Surfaces

Neutral

Semantic（推奨補完値）

実サイトには明確なエラー／成功色は表面化していない。コーポレートサイト向けに推奨する補完値:

• Danger: #cc0033 程度のレッド（ブランドレッドに近い色相で統一）
• Success: #16a34a 程度のグリーン
• Warning: #d97706 程度のオレンジ

Overlay

• Dark Overlay: rgba(0, 0, 0, 0.8)（モーダル・メガメニュー背景）

3. Typography Rules

3.1 和文フォント

• ゴシック体: システムフォントスタックを使用。macOS では YuGothic / Yu Gothic Medium、Windows では Yu Gothic / Meiryo
• フォールバック: -apple-system → system-ui → Roboto → Segoe UI → Helvetica Neue → YuGothic → Yu Gothic Medium → Yu Gothic → Verdana → Meiryo → sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• システムフォントスタックに含まれる -apple-system（San Francisco）/ Roboto / Segoe UI / Helvetica Neue がそのまま欧文グリフを担当
• 専用の欧文書体は持たない

3.3 font-family 指定

css/* 全要素共通 */
font-family: -apple-system, "system-ui", Roboto, "Segoe UI",
  "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium",
  "Yu Gothic", Verdana, Meiryo, sans-serif;

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

• -apple-system / system-ui でプラットフォームネイティブのフォントを最優先
• 欧文フォント（Roboto / Segoe UI / Helvetica Neue）を和文フォントより先に配置し、欧文部分はシステムサンセリフで統一
• 和文は YuGothic → Yu Gothic Medium → Yu Gothic → Meiryo の順で、macOS / Windows 両対応

代替フォント注記: システムフォントスタックのため、全環境で表示可能。preview.html では表示の一貫性のために Noto Sans JP を Google Fonts から読み込み、フォールバックに追加している。

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

実測値（トップページ、2026-05-31 取得）

3.5 行間・字間

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

• 本文 (16px): 1.5（24px / 16px）-- 日本語コーポレートサイトの標準的な値
• 見出し (24〜36px): 1.5（一貫して統一）
• ナビ (14px): 2.14（30px / 14px）-- タッチターゲット確保のため広め
• ラベルバッジ (13px): 2.3（30px / 13px）-- 同上

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

• 全体: normal（明示的な letter-spacing 設定なし）
• メガメニューのみ: -1.28px（-0.067em）。カテゴリ名の密度を上げる例外的なケース

ガイドライン:

• ヤクルトは line-height 1.5 / letter-spacing normal を全面的に採用する簡潔な方針
• STORES のような本文とテキストでのトラッキング差分は設けない
• weight の使い分け（500 vs 700）で階層を表現する

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: normal;
overflow-wrap: anywhere;
line-break: strict;

• CTA ラベルは white-space: nowrap

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern の明示的有効化は確認されなかった
• システムフォントのデフォルトメトリクスに従う方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（レッドピル） -- "お問い合わせはこちら"

• Background: #e60039
• Text: #ffffff
• Padding: 12px 32px
• Border Radius: 50px（ピル）
• Font: system font, 24px, weight 700
• Border: none

Primary CTA Small（レッドピル小） -- "企業情報"

• Background: #e60039
• Text: #ffffff
• Padding: 8px 20px
• Border Radius: 20px（ピル）
• Font: system font, 15px, weight 700
• Border: none

Ghost CTA（アウトラインピル） -- "ブランドサイトはこちら"

• Background: transparent
• Text: #e60039
• Border: 2px solid #e60039
• Padding: 10px 28px
• Border Radius: 40px（ピル）
• Font: system font, 16px, weight 700

Tag / Category -- "乳製品" "飲料"

• Background: #f2f2f2
• Text: #333333
• Padding: 6px 16px
• Border Radius: 4px
• Font: system font, 16px, weight 700

Label Badge -- セクションラベル

• Background: #e60039
• Text: #ffffff
• Padding: 4px 12px
• Border Radius: 4px 4px 0 0（上角丸のみ）
• Font: system font, 13px, weight 600

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 2px solid #e60039
• Border Radius: 4px
• Padding: 12px 16px
• Font: system font, 16px, weight 500
• Height: 44px

Cards / Surfaces

• 白カード: Background #ffffff / border 1px solid #e0e0e0 / radius 8px
• クリーム面（食品）: Background #fbf6ec / radius 8px
• ピンク面（化粧品）: Background #fff2f5 / radius 8px
• ニュートラル面: Background #f2f2f2 / radius 4px

Section Heading（h2）

• Font Size: 36px
• Font Weight: 700
• Color: #e60039（ブランドレッド）
• Line Height: 1.5
• 装飾: なし（色だけで目立たせる）

Sub Heading（h3）

• Font Size: 24px
• Font Weight: 700
• Color: #000000
• Line Height: 1.5
• 装飾: border-left: 4px solid #e60039; padding-left: 12px

Footer

• Background: #ffffff
• Border Top: 1px solid #e0e0e0
• Padding: 48px 24px

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1100px
• Padding (horizontal): mobile 16px / desktop 32px

Border Radius Scale

Grid

• 記事一覧は 3〜4 カラムグリッド（CSS Grid または Flexbox）
• Gutter: 24px
• カテゴリカードは 2 カラム（PC）/ 1 カラム（SP）

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は ウォームサーフェス（#fbf6ec / #fff2f5）のカテゴリ色分けとボーダーで表現
• 影を使う場合も控えめに

7. Do's and Don'ts

Do（推奨）

• セクション見出し（h2）は #e60039 のブランドレッドで着色する
• h3 には 左ボーダー 4px solid #e60039 を付けてサブセクションを明示する
• 本文の weight は 500（Medium） を使う（400 ではない）
• 見出し・CTA の weight は 700（Bold） を使う
• 主要 CTA は #e60039 のレッドピル（radius 20〜50px）
• 食品カテゴリには #fbf6ec（ウォームクリーム） 面を使う
• 化粧品カテゴリには #fff2f5（ウォームピンク） 面を使う
• line-height は 1.5 で統一 する
• letter-spacing は normal（明示的な値を設けない）
• ゴーストボタンには border: 2px solid #e60039 + color: #e60039 を使う

Don't（禁止）

• 主要 CTA に ブルーやグリーンを使わない -- ヤクルトのアクションカラーは赤
• 本文に weight 400 を使わない（ヤクルトは全体的に太めの 500 / 700）
• セクション見出しを 黒で書かない -- ブランドレッド #e60039 が基本
• 冷たいグレー（#9ca3af、#6b7280）を使わない -- ニュートラルの #323232 / #6e6e6e / #333333 を使う
• 食品カードに ピンク面、化粧品カードに クリーム面 を使わない（用途が逆）
• CTA に 角張った直角ボタン（border-radius 0）を使わない -- ピル形状が基本
• letter-spacing を明示的に設定しない（メガメニュー以外）-- システムフォントのデフォルトメトリクスに従う
• ラベルバッジの角丸を 全角丸にしない -- 上だけ丸（4px 4px 0 0）がヤクルトのパターン

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Section H2: 36px -> 24px
• Sub H3: 24px -> 20px
• 本文サイズは 16px を維持（line-height も 1.5 維持）
• カテゴリカードグリッドは 1 カラムにスタック
• CTA のピル radius は維持

タッチターゲット

• 主要 CTA: 高さ 44px 以上
• ナビリンク: line-height 30px でタッチ領域を確保

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Yakult Red (CTA / H2): #e60039
Blue Accent: #3f7ac3
Primary Text: #323232
Secondary Text: #6e6e6e
Tertiary Text: #333333
Black (H3): #000000
Neutral Surface: #f2f2f2
Warm Cream (Food): #fbf6ec
Warm Pink (Cosmetics): #fff2f5
White: #ffffff
Overlay: rgba(0, 0, 0, 0.8)

Font: -apple-system, "system-ui", Roboto, "Segoe UI", "Helvetica Neue",
      HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana,
      Meiryo, sans-serif

Body Size: 16px / line-height 1.5 / weight 500 / letter-spacing normal
H2: 36px / line-height 1.5 / weight 700 / color #e60039
H3: 24px / line-height 1.5 / weight 700 / color #000 / left border #e60039
CTA: weight 700 / radius 20-50px (pill)
Tag: 16px / weight 700 / bg #f2f2f2 / radius 4px

Border Radius: 4px (tag) / 8px (card) / 20-50px (CTA pill)
Shadow: 基本 none。階層はウォームサーフェスとボーダーで表現

プロンプト例

ヤクルトのデザインに従って、健康飲料の商品紹介セクションを作成してください。
- フォント: -apple-system, "system-ui", Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif
- セクション見出し: 36px / weight 700 / line-height 1.5 / color #e60039（ブランドレッド）
- サブ見出し: 24px / weight 700 / line-height 1.5 / color #000 / border-left 4px solid #e60039
- 本文: 16px / weight 500 / line-height 1.5 / letter-spacing normal / color #323232
- 補助テキスト: 14px / weight 500 / color #6e6e6e
- 主要 CTA: 背景 #e60039（ヤクルトレッド）/ 白文字 / border-radius 50px / weight 700
- ゴースト CTA: 背景 transparent / 文字 #e60039 / border 2px solid #e60039 / radius 40px
- タグ: 背景 #f2f2f2 / 文字 #333 / radius 4px / weight 700
- 食品カード背景: #fbf6ec（ウォームクリーム）
- 化粧品カード背景: #fff2f5（ウォームピンク）
- box-shadow は基本 none
- 純黒 #000 は h3 のみ、本文は #323232
- CTA には必ずピル形状（radius 20〜50px）を使う
- letter-spacing は normal（メガメニュー以外）