Pocari Sweat (pocarisweat.jp) DESIGN.md

大塚製薬 ポカリスエット（https://pocarisweat.jp/）のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は使用されていない（クラシックな CSS 構成）。

1. Visual Theme & Atmosphere

• デザイン方針: 清潔感と爽やかさを重視した、日本を代表する飲料ブランドのコーポレートサイト。アイコニックな「ポカリブルー」を軸に、白と青のコントラストで清涼感を表現
• 密度: 画像主導のビジュアル構成。プロダクト写真やキャンペーンビジュアルが中心で、テキスト情報は簡潔
• キーワード: 爽やか、清潔、信頼、クラシック、ブルー＆ホワイト
• 特徴: 純粋な黒（#000000）ではなく、ブルーグレー #42515a をテキスト色に採用。飲料ブランドらしい涼しげなトーンを維持。半透明ホワイトのフロステッドグラスオーバーレイが特徴的

2. Color Palette & Roles

Primary（ブランドカラー）

• Pocari Blue (#015db2): ポカリスエットのアイコニックなブランドブルー。ロゴ背景、ナビゲーション、リンク色に使用。日本で最も認知度の高いブランドカラーのひとつ
• Pocari Blue Dark (#004a8f): ホバー時のプライマリカラー（推定）

Semantic（意味的な色）

• Danger (#cc0000): エラー、注意喚起（企業サイト標準）
• Success (#2e8b57): 完了、成功状態（企業サイト標準）

Neutral（ニュートラル）

• Text Primary (#42515a): 本文テキスト。ブルーグレーのトーンで清涼感を演出
• Text Nav (#606d75): ナビゲーションリンク。やや薄いブルーグレー
• Text Link (#015db2): リンクテキスト。ブランドブルーと同色
• Background (#ffffff): ページ背景
• Surface Light (#f6f8f9): セクション背景。ごく薄いグレー
• Footer Background (#ebebeb): フッター背景
• Dark Navy Overlay (rgba(5, 33, 92, 0.8)): ニュースセクションのオーバーレイ帯。約 #05215c の 80% 不透明度

Frosted Glass（フロステッドグラス）

• Frosted Light (rgba(255, 255, 255, 0.4)): 薄い半透明ホワイト
• Frosted Medium (rgba(255, 255, 255, 0.5)): 中間の半透明ホワイト
• Frosted Strong (rgba(255, 255, 255, 0.8)): 濃い半透明ホワイト

3. Typography Rules

3.1 和文フォント

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

• ヒラギノ角ゴ ProN W3（macOS）
• メイリオ / Meiryo（Windows）
• MS Pゴシック / MS PGothic（レガシー Windows）

3.2 欧文フォント

• サンセリフ: Helvetica, Arial
• 等幅: 該当なし（コードブロックなし）

3.3 font-family 指定

css/* グローバル（body） */
font-family: Helvetica, Arial, "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN", メイリオ, Meiryo,
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

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

• 欧文フォント（Helvetica）を先頭に配置する欧文優先型
• macOS: Helvetica → ヒラギノ角ゴ ProN W3 の順で和文を解決
• Windows: Arial → メイリオ → MS Pゴシック の順で和文を解決
• クラシックな日本語 Web フォントスタック。Web フォントは使用していない

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

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

注意: 基本フォントサイズが 12px と小さい。2000年代の日本語コーポレートサイトに典型的なサイジング

3.5 行間・字間

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

• body: 18px (12px x 1.5)
• 全要素共通で line-height: 1.5 を使用

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

• 全要素: normal（字間の調整なし）

ガイドライン:

• letter-spacing は一切調整されていない。クラシックな日本語 Web デザインの特徴
• line-height: 1.5 がグローバルに適用されている

3.6 禁則処理・改行ルール

css/* 標準的な設定。特別な禁則処理の指定なし */
word-wrap: break-word;

3.7 OpenType 機能

css/* OpenType 機能は使用されていない */
font-feature-settings: normal;

• palt（プロポーショナル字詰め）は適用されていない
• kern（カーニング）も明示的な指定なし

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary（CTA）

• Background: #015db2（Pocari Blue）
• Text: #ffffff
• Padding: 8px 24px
• Border Radius: 0px（角丸なし。クラシックなスクエアボタン）
• Font Size: 13.3px
• Font Weight: 400

Secondary（リンクスタイル）

• Background: transparent
• Text: #015db2
• Border: none
• Font Weight: 700
• Text Decoration: underline

注意: サイトは画像ベースのナビゲーションが中心で、テキストベースの CTA は少ない。リンク自体がCTA の役割を果たすことが多い

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc（推定）
• Border (focus): 1px solid #015db2
• Border Radius: 0px
• Padding: 4px 8px
• Font Size: 12px

Cards

• Background: #ffffff
• Border: 1px solid #ebebeb
• Border Radius: 0px
• Padding: 16px
• Shadow: none（フラットデザイン）

Navigation

• Background: #015db2（Pocari Blue）
• Text: #ffffff
• Height: 自動（コンテンツに依存）
• Position: ページ上部固定

5. Layout Principles

Spacing Scale

Container

• Max Width: 960px（推定）
• Padding (horizontal): 16px

Grid

• 画像ベースのグリッドレイアウト
• プロダクト一覧は 3〜4 カラム

6. Depth & Elevation

• サイト全体でフラットデザインを採用。影の使用は最小限
• フロステッドグラス（半透明ホワイトオーバーレイ）が影の代わりに深度を表現する

Frosted Glass Overlay

css/* コンテンツオーバーレイ */
background: rgba(255, 255, 255, 0.5);

/* ニュースセクション帯 */
background: rgba(5, 33, 92, 0.8);

7. Do's and Don'ts

Do（推奨）

• テキスト色は #42515a（ブルーグレー）を使い、清涼感のあるトーンを維持する
• ブランドカラー #015db2 はナビゲーション、リンク、CTA に限定して使う
• 白背景（#ffffff）をベースに、ポカリブルーとのコントラストで清潔感を出す
• フロステッドグラスオーバーレイ（rgba(255,255,255,0.5) 等）で奥行きを表現する
• 画像・ビジュアルを中心に構成し、テキストは簡潔にまとめる
• フォントは欧文優先（Helvetica 先頭）のクラシックな日本語フォントスタックを使う

Don't（禁止）

• テキストに純粋な #000000 を使わない。#42515a のブルーグレートーンを維持する
• ブランドブルー #015db2 を本文テキストに使わない（リンクと誤認される）
• 角丸を多用しない。ポカリスエットのサイトはスクエアなコンポーネントが基調
• Web フォント（Google Fonts 等）を追加しない。システムフォントスタックを維持する
• フロステッドグラスを濃くしすぎない。rgba(255,255,255,0.8) を上限とする
• 12px 未満のフォントサイズを使わない

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでも base 12px を維持（伝統的な日本語コーポレートサイトの慣例）
• 画像ベースのレイアウトがレスポンシブに縮小

9. Agent Prompt Guide

クイックリファレンス

Brand Color (Pocari Blue): #015db2
Text Primary: #42515a
Text Nav: #606d75
Text Link: #015db2
Background: #ffffff
Surface Light: #f6f8f9
Footer Background: #ebebeb
Dark Navy Overlay: rgba(5, 33, 92, 0.8)
Frosted Glass: rgba(255, 255, 255, 0.5)

Font: Helvetica, Arial, "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN", メイリオ, Meiryo,
  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif

Body Size: 12px / line-height: 1.5 / letter-spacing: normal
Button: 13.3px / weight: 400 / border-radius: 0

プロンプト例

ポカリスエットのデザインに従って、製品紹介ページを作成してください。
- ブランドカラー: #015db2（Pocari Blue）
- フォント: Helvetica, Arial, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", メイリオ, Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
- テキスト色: #42515a（ブルーグレー。純粋な黒は使わない）
- 背景: #ffffff（白ベース）
- ナビゲーション: #015db2 背景に白文字
- ボタン: スクエア（border-radius: 0）、#015db2 背景
- フロステッドグラス: rgba(255,255,255,0.5) のオーバーレイで深度表現
- 画像中心のレイアウト。テキストは簡潔に