GLICO DESIGN.md

GLICO（https://www.glico.com/jp/）のデザイン仕様書。 2026-05-21 取得の computed style に基づく。 江崎グリコのコーポレートサイト。ポッキー・プリッツ・ビスコ等を擁する日本を代表する菓子メーカー。

1. Visual Theme & Atmosphere

• デザイン方針: 日本を代表する菓子メーカーのコーポレートサイト。Glico Red（#f44336） をブランドカラーとして全面に展開し、pill 型ボタンとウォームクリーム背景（#faf3f0）で親しみやすく温かみのある印象を構成。お菓子ブランドらしい遊び心と、コーポレートサイトとしての信頼感を両立
• 密度: 商品情報・キャンペーン・企業情報を含むポータル型。セクションごとに背景色を切り替えてリズムを作る
• キーワード: Glico Red、pill CTA、ウォームクリーム、游ゴシック、菓子ブランド、親しみやすさ
• 特徴: 游ゴシック（YuGothic） を先頭に配したシステムフォントスタック。Web フォントを使わず、OS 標準フォントのみで構成する軽量設計。ボタンは border-radius 17.5〜20px の pill 型 で統一。2つの赤 #f44336（Glico Red） と #dd3326（Deep Red） を使い分ける。palt 非適用、letter-spacing も normal で、装飾を排したシンプルな日本語タイポグラフィ

2. Color Palette & Roles

Primary（ブランドカラー）

Glico のカラーパレットはお菓子ブランドらしい鮮やかな赤と温かみのあるクリーム背景を軸にした、親しみやすく楽しい構成。

• Glico Red (#f44336): メインのブランドカラー。CTA ボタン背景・ナビゲーション背景・アクセント要素に使用（rgb 244, 67, 54）。マテリアルデザインの Red 系に近い温かみのある赤
• Glico Red Deep (#dd3326): ホバー・プレス時のアクセント。より深みのある赤（rgb 221, 51, 38）
• Pink Tint (#f38077): ライトアクセント。タグ・バッジ等の補助的な赤系色（rgb 243, 128, 119）

Text

• Text Primary (#000000): 本文テキスト。純黒を使用
• Text Secondary (#696969): 見出し（H2〜H4）・補足テキスト（rgb 105, 105, 105）。ダークグレー
• Text on Red (#ffffff): 赤背景上の白テキスト。ナビゲーション・CTA
• Text Content (#212121): コンテンツエリアのリンク・テキスト（rgb 33, 33, 33）。ほぼ黒のダークグレー

Surface

• Background（ページ背景） (#faf3f0): ウォームクリーム。菓子ブランドらしい温かみのあるベージュ系背景（rgb 250, 243, 240）
• Body Background (#f44336): body 要素の背景は Glico Red。ページ全体を赤で包み、コンテンツ領域はクリーム背景
• Section Gray (#eeeee8): セクション区切りのグレー背景（rgb 238, 239, 232）
• Surface White (#ffffff): カード・商品ブロックの白面
• Light Gray (#f0f0f0): 補助的な背景（rgb 240, 240, 240）

Footer

• Footer Navy (#27455c): フッター背景。深いネイビーブルー（rgb 39, 69, 92）。赤系ブランドカラーとの対比で落ち着きと信頼感を演出

Border

• Border (#d0d0d0): 入力欄の枠線・区切り線。ニュートラルグレー

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック（YuGothic）--- フォールバックチェーンの先頭に配置。macOS / Windows 標準搭載のため環境非依存
• レガシーフォールバック: ヒラギノ角ゴ ProN W3（macOS）、メイリオ（Windows）

3.2 欧文フォント

• サンセリフ: 游ゴシックの内蔵欧文グリフをそのまま使用。独立した欧文フォントは指定なし
• セリフ・等幅: 使用なし

3.3 font-family 指定

css/* 全テキスト共通 --- 游ゴシックファーストのシステムフォントスタック */
font-family: 游ゴシック, YuGothic,
  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
  メイリオ, Meiryo, sans-serif;

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

• 先頭の游ゴシック / YuGothic で和欧両方をカバー。日本語サイトとして和文ファーストの設計
• ヒラギノ角ゴ ProN は macOS のフォールバック（ProN 指定で JIS X 0213 対応）
• メイリオは Windows のフォールバック
• Web フォントを使わないため、ページ読み込みが軽量。菓子メーカーサイトとして幅広いデバイスでの表示安定性を重視

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

以下は computed style 実測値（2026-05-21 取得）

ウェイトの特徴:

• 見出し（H2〜H4）とナビゲーションは weight: 700、本文は weight: 400 の二段構成
• 見出しのサイズが比較的小さめ（16px）で、ウェイトの差でコントラストを作る設計
• 見出しの色は #696969（ダークグレー） で、本文の #000000（黒） よりトーンを落とし柔らかい印象

3.5 行間・字間

• 本文の行間: line-height: 1.7（25.5px / 15px）--- 日本語として広めの行間で可読性が高い
• 見出し（H2）の行間: line-height: 1.5（24px / 16px）--- 本文よりやや詰めた行間
• 見出し（H3）の行間: line-height: 1.3（20.8px / 16px）--- 小見出しはよりコンパクト
• 本文の字間: letter-spacing: normal（0）--- カスタム字間なし
• 見出しの字間: letter-spacing: normal（0）--- こちらもカスタム字間なし

ガイドライン:

• letter-spacing は全要素 normal。palt も非適用で、游ゴシックのデフォルト字間をそのまま使う設計
• line-height は本文 1.7 / 見出し 1.3〜1.5 の段階構成
• 本文の line-height 1.7 は日本語サイトとして読みやすく、菓子メーカーサイトの親しみやすさに寄与

3.6 禁則処理・改行ルール

css/* 推奨設定 */
overflow-wrap: break-word; /* 長いURL・商品名の折り返し */

• 日本語固有の禁則処理は特別な設定なし。ブラウザデフォルトに従う
• 商品名・キャンペーン名に日本語と英語が混在するため、overflow-wrap の設定が重要

3.7 OpenType 機能

cssfont-feature-settings: normal; /* palt は非適用 */

• palt（プロポーショナル字詰め）: 非適用。游ゴシックのデフォルト字間をそのまま使用
• kern: ブラウザデフォルトに委ねる
• 装飾的な字詰めを排し、可読性を優先するシンプルな設計

3.8 縦書き

• 該当なし。Glico コーポレートサイトは横書きのみ

4. Component Stylings

Buttons

Primary CTA（pill 型・赤塗りつぶし）

Glico の CTA は Glico Red 塗りつぶし + pill 型 が基本。

• Background: #f44336
• Text: #ffffff
• Border Radius: 17.5px（pill 型）
• Padding: 8px 24px
• Font Size: 15px
• Font Weight: 700

Secondary（pill 型・白背景）

• Background: #ffffff
• Text: #212121
• Border Radius: 20px（pill 型）
• Padding: 8px 24px

Category Tab（透明背景）

• Background: transparent
• Text: #f44336
• Border Radius: 4px
• Padding: 4px 12px
• Font Size: 14px

ボタンの考え方:

• CTA は pill 型（border-radius 17.5〜20px） で統一。KIRIN ほど極端な pill 値（92〜1440px）ではないが、角丸ではなく pill 寄りの形状
• Primary CTA は #f44336 塗りつぶし + 白テキスト
• カテゴリタブのみ radius 4px の角丸で、コンテンツナビゲーションとしての控えめな存在感

Inputs

• Background: #ffffff
• Border: 1px solid #d0d0d0
• Border (focus): 2px solid #f44336
• Border Radius: 4px
• Padding: 8px 12px
• Font Size: 15px

Cards

• Background: #ffffff
• Border: none
• Border Radius: 8px
• Padding: 16px
• Shadow: 0 2px 8px rgba(0,0,0,0.1) --- 軽いシャドウでカードの浮き感を演出

Navigation

• Background: #f44336（Glico Red）
• Link Color: #ffffff
• Link Weight: 700
• Link Size: 15px

Footer

• Background: #27455c（Navy）
• Text Color: #ffffff

5. Layout Principles

Spacing Scale

実測値に基づく推定:

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 48px
• セクション間の区切り: 背景色の切り替え（クリーム → グレー → 白）で視覚的に分離

Grid

• 商品グリッド: デスクトップで 3〜4 カラム
• カードグリッド: デスクトップで 3 カラム
• セクションは全幅背景 + コンテンツ幅制約の二層構造

6. Depth & Elevation

Glico は背景色の温度差とカードシャドウで階層を構成する。

• ウォームクリーム背景（#faf3f0）の上に白カード（#ffffff）を浮かせる構成が基本
• シャドウは軽め（0 2px 8px）で、お菓子ブランドらしい柔らかい印象
• ナビゲーション（赤）とフッター（ネイビー）が最も強い面として存在

7. Do's and Don'ts

Do（推奨）

• フォントは 游ゴシック → YuGothic → ヒラギノ角ゴ ProN → メイリオ の順で完全なシステムフォントスタックを指定する
• CTA ボタンは pill 型（border-radius 17.5〜20px） にする
• Primary CTA は #f44336 塗りつぶし + 白テキスト にする
• ページ背景は #faf3f0（ウォームクリーム） にする
• カードは白背景（#ffffff）+ 軽いシャドウで、クリーム背景に対して浮かせる
• 見出し（H2〜H4）は font-weight: 700 / color: #696969 を使い、本文は 400 / #000000 を使う
• 本文の line-height は 1.7 を使う（日本語として読みやすい行間）
• フッター背景は #27455c（Navy） にする
• letter-spacing は normal にする（カスタム字間は使わない）
• ナビゲーション背景は #f44336（Glico Red） で白テキスト

Don't（禁止）

• 明朝体・セリフ系フォントを追加しない（ゴシック体構成がブランドの基本）
• ボタンに角丸（4px）やシャープエッジ（0px）を使わない。CTA は pill 型（17.5〜20px）で統一（カテゴリタブのみ 4px は許容）
• ページ背景を純白（#ffffff）にしない（ウォームクリーム #faf3f0 がブランドの基本）
• 見出しに #000000（純黒） を使わない（見出しは #696969。本文のみ #000000）
• palt（font-feature-settings: "palt"）を適用しない（normal がデフォルト設計）
• letter-spacing にカスタム値を設定しない（全要素 normal）
• フッターに赤（#f44336）を使わない（フッターは #27455c ネイビー。赤はナビゲーション・CTA 用）
• Web フォントを追加しない（システムフォントスタックで統一する設計方針）
• カードにボーダーを追加しない（シャドウで浮き感を出す設計）

8. Responsive Behavior

Breakpoints

モバイル時の調整

• ヘッダー横 padding（48px）→ 16px に縮小
• 商品グリッドは 1〜2 カラムに折り返し
• pill 型ボタンの形状はモバイルでも維持
• フッターのネイビー背景 #27455c はモバイルでも変更なし
• ナビゲーションの赤背景 #f44336 はモバイルでも変更なし

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• pill 型ボタンは padding 8px 24px + font-size 15px のため、実質的なタッチ領域は十分

フォントサイズの調整

• モバイルでは本文 14〜15px、見出しはデスクトップの 80〜90% 程度に縮小
• システムフォントスタックのため、デバイス間で OS 標準フォントにフォールバック

9. Agent Prompt Guide

クイックリファレンス

Brand: GLICO（江崎グリコ）
Origin: 江崎グリコ --- ポッキー・プリッツ・ビスコ等を擁する日本を代表する菓子メーカー
Glico Red: #f44336（ナビ・CTA・アクセント）
Glico Red Deep: #dd3326（ホバー・プレス時）
Pink Tint: #f38077（ライトアクセント）
Text Primary: #000000
Text Secondary: #696969（見出し）
Text Content: #212121（コンテンツリンク）
Background: #faf3f0（ウォームクリーム）
Section Gray: #eeeee8
Surface White: #ffffff
Footer Navy: #27455c
Border: #d0d0d0
Font: 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3",
      "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
palt: 非適用（font-feature-settings: normal）
letter-spacing: normal（全要素）
Body: 15px / 400 / line-height 1.7
H2: 16px / 700 / line-height 1.5 / color #696969
H3: 16px / 700 / line-height 1.3 / color #696969
H4: 14px / 700 / line-height 1.5 / color #696969
Nav: 15px / 700 / color #ffffff on #f44336
CTA Style: bg #f44336 / text #fff / radius 17.5px (pill) / padding 8px 24px
Secondary CTA: bg #fff / text #212121 / radius 20px (pill)
Button Shape: pill 型（17.5〜20px radius）
Shadow: 0 2px 8px rgba(0,0,0,0.1)（カード用）

プロンプト例

Glico のデザインシステムに従って、商品一覧ページを作成してください。
- フォント: 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
- font-feature-settings: normal（palt は非適用）
- letter-spacing: normal（カスタム字間なし）
- 本文: 15px / line-height: 1.7 / color: #000000
- 見出し: 16px / font-weight: 700 / color: #696969
- ページ背景: #faf3f0（ウォームクリーム）
- CTA「詳しく見る」: bg #f44336 / text #fff / border-radius: 17.5px (pill) / padding: 8px 24px
- ナビゲーション: bg #f44336 / text #fff / font-weight: 700
- フッター: bg #27455c / text #fff
- カード: bg #ffffff / box-shadow: 0 2px 8px rgba(0,0,0,0.1) / border-radius: 8px
- シャドウは軽めで柔らかい印象を維持する

字詰め・組版の重要ポイント

1. 游ゴシックファースト: システムフォントスタックの先頭に游ゴシックを配置。Web フォントを使わない軽量設計で、macOS と Windows の両方で高品質な表示を実現。Windows の游ゴシック問題（細く見える）は font-weight で対応
2. 2つの赤の使い分け: #f44336（Glico Red）はナビゲーション・CTA・アクセント用。#dd3326（Deep Red）はホバー・プレス時のフィードバック用。Pink Tint #f38077 はバッジ・タグ等の軽い強調に
3. ウォームクリーム背景: #faf3f0 はお菓子ブランドらしい温かみと親しみやすさを表現。純白 #ffffff はカード面としてクリーム背景に対して浮かせる用途
4. ネイビーフッター: #27455c は赤系ブランドカラーとの補色関係で、ページ末尾に落ち着きと信頼感を加える。赤 → クリーム → ネイビーのカラーフローがページ全体のリズム
5. 見出しのトーンダウン: 見出し色が #696969（ダークグレー）で本文の #000000 より明度が高い。ウェイト 700 との組み合わせで、柔らかいが明確な階層を構成
6. letter-spacing / palt ともに非適用: 游ゴシックのデフォルト字間をそのまま使う。字詰めの装飾を排したシンプルな組版

取得日: 2026-05-21 出典: https://www.glico.com/jp/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出