伊藤園（ITO EN） DESIGN.md

伊藤園（https://www.itoen.co.jp/ ＋ https://www.itoen.co.jp/products/）のデザイン仕様書。 日本最大の茶飲料メーカー。企業情報サイトと商品情報サイトの2系統を持つ。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ナチュラル・日本の茶文化を反映した温かみのある企業サイト。グリーンの緑茶ブランドカラー #00a040 と 暖色系グレー（#f6f6f3, #edede3） の組み合わせで、自然・健康・伝統を表現
• 密度: 企業情報サイトは余白が広く、落ち着いたペース。商品サイトは本文 line-height 1.75 でゆったりとした読みやすさ
• キーワード: ナチュラル、暖色グレー、角張った直方体ボタン、伝統と信頼、茶の緑
• 特徴:
  • 2つのサイト系統を持つ: 企業情報（itoen.co.jp/、Noto Sans JP のみ、黒テキスト）と商品情報（itoen.co.jp/products/、拡張フォールバック、#131314 テキスト、weight 900 の太い見出し）
  • ブランドカラーは #00a040（お茶の緑）。スライダーのアクティブドット、Cookie バナーボタン、商品サイトのリンク色に使用。派手な CTA には使わず控えめに配色
  • CTA ボタンは角張ったボーダースタイル: 1px solid #000 + 透明背景 + 左パディング（矢印アイコン用）。radius 0px。ピル型ではない
  • 背景の色温度: #f6f6f3（企業）/ #fbfcfc（商品）と、純白ではなくわずかにウォームまたはグリーン寄りの白
  • フッター背景 #edede3: 暖色系のベージュグレーで、ページ本体から一段暗くなる
  • 欧文アクセントに Barlow（weight 600, letter-spacing 0.05em）を使用。コピーライト等で登場
  • font-feature-settings は normal（palt 不使用）、letter-spacing も normal（特別なトラッキングなし）
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Green (#00a040): ブランドカラー。スライダーアクティブドット、Cookie バナーの「閉じる」ボタン背景、商品サイトのリンクテキスト色。茶の自然さを表現
• Copyright Gray (#c9c9ba): コピーライトの文字色。暖色系の薄いグレーベージュ

CTA / Buttons

• Border CTA: 背景 transparent / 文字 #000000 / border 1px solid #000000 / radius 0px（角張り）/ padding 0 0 0 27px（左に矢印アイコン用の余白）/ 14.4px / weight 700
• Search Button: 背景 #131314 / 文字 #ffffff / radius 0px / padding 1px 6px / 14.4px / weight 700
• Cookie Button: 背景 #00a040 / 文字 #ffffff / radius 0px / padding 4.5px 13.5px / 12.6px / weight 400
• Tab Button（商品サイト）: 背景 #efefef / 文字 #131314 / radius 0px / padding 0 72px / 18px / weight 900

Neutral — Warm Gray Scale

Semantic（推奨補完値）

実サイトには明確なエラー／成功色は表面化していない。企業サイト向けに推奨:

• Danger: #c62828 程度の落ち着いたレッド
• Success: #00a040（ブランドグリーン兼用）
• Warning: #e6a700 程度のアンバー

Overlay

• Cookie Overlay BG: rgba(0, 0, 0, 0.7)

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を最優先。Google Fonts からの配信
• 企業サイト: "Noto Sans JP", sans-serif（シンプルなフォールバック）
• 商品サイト: 拡張フォールバック付き — Hiragino Kaku Gothic ProN → Hiragino Sans → メイリオ → ＭＳ Ｐゴシック
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• Barlow: コピーライト・英字アクセント用。weight 600、letter-spacing 0.05em
• フォールバック: sans-serif
• 本文の欧文は Noto Sans JP の欧文グリフに依存

3.3 font-family 指定

css/* 企業サイト（itoen.co.jp/） */
font-family: "Noto Sans JP", sans-serif;

/* 商品サイト（itoen.co.jp/products/） */
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
  メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;

/* 英字アクセント・コピーライト */
font-family: Barlow, sans-serif;

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

• 企業サイトは Noto Sans JP 単独 + generic。Webフォント前提のシンプルな構成
• 商品サイトは Hiragino Kaku Gothic ProN → Hiragino Sans → メイリオ の伝統的な日本語フォールバック。環境を選ばない確実な表示
• Barlow はコピーライト等の英字装飾専用。和文との混植には使わない

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

実測値（企業トップページ ＋ 商品情報ページ、2026-05-09 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 商品サイト本文 (14.4px): 1.75（25.2px / 14.4px）
• 企業サイト説明文 (14.4px): 2.25（32.4px / 14.4px）— 非常にゆったり
• 見出し (19.8〜30.6px): 1.18〜1.54
• カード見出し (16.2px): 1.5（24.3px / 16.2px）
• 補助テキスト (12.6px): 1.5（18.9px / 12.6px）
• ナビプライマリ (16.2px): 2.22（36px / 16.2px）— タッチ領域確保用

字間 (letter-spacing) — 実測:

• 全要素: normal（特別なトラッキングは適用されていない）
• 例外: Barlow（コピーライト）のみ 0.45px（≈ 0.05em）

ガイドライン:

• 伊藤園は letter-spacing を一切調整しない素朴なアプローチ。Noto Sans JP のデフォルトメトリクスに委ねる
• 本文の line-height は 1.75（商品サイト）が基準。企業説明文は 2.25 とさらに広い
• 見出しの weight は企業サイト 700、商品サイト 900 と系統が異なる

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 特別な禁則設定は確認されなかった
• ナビゲーションは white-space: nowrap 相当

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Noto Sans JP のデフォルトメトリクスに依存する方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Border CTA（角張り矢印ボタン） — "取り組みを知る"・"活動を知る"

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Padding: 0px 0px 0px 27px（左に矢印アイコン分の余白）
• Border Radius: 0px（完全な直角）
• Font: Noto Sans JP, 14.4px, weight 700
• 矢印アイコンを左に配置するデザイン

Search Button — "検索"

• Background: #131314
• Text: #ffffff
• Padding: 1px 6px
• Border Radius: 0px
• Font: Noto Sans JP, 14.4px, weight 700
• Border: none

Cookie Consent Button — "閉じる"

• Background: #00a040（ブランドグリーン）
• Text: #ffffff
• Padding: 4.5px 13.5px
• Border Radius: 0px
• Font: Noto Sans JP, 12.6px, weight 400

Tab Button（商品サイト） — "ブランドから探す"

• Background: #efefef（アクティブ時）
• Text: #131314
• Padding: 0px 72px（大きな横余白）
• Border Radius: 0px
• Font: Noto Sans JP, 18px, weight 900

Link Button（商品サイト） — "取扱店舗検索"

• Background: #f6f6f6
• Text: #131314
• Padding: 0px 45px
• Border Radius: 0px
• Font: Noto Sans JP, 16.2px, weight 900

Inputs

Search Input（企業サイト）

• Background: #dbdbd7（ウォームグレー）
• Border: 1px solid transparent
• Border Radius: 0px
• Padding: 34.2px 36px（大きめ）
• Font: Noto Sans JP, 14.4px, weight 400

Search Input（商品サイト）

• Background: transparent
• Border: none
• Border Radius: 0px
• Padding: 0px 0px 0px 27px
• Font: Noto Sans JP, 12.6〜14.4px, weight 900
• Placeholder Color: #879297

Cards / Surfaces

• Background: #ffffff
• Border: なし（画像カード中心のレイアウト）
• Border Radius: 0px（角張り基調）
• Shadow: none（基本フラット）
• ナビメガメニュー面: #f1f5f0（グリーン寄りの薄い面）

Header

• Background: #f6f6f3（企業）/ #fbfcfc（商品）
• Position: sticky / fixed
• 企業サイト: 左に 90px のロゴ領域パディング

Footer

• Background: #edede3（暖色ベージュグレー）
• Padding: 99px 0px 90px（上下に大きな余白）
• 検索バー、サイトマップ、コピーライトを含む

5. Layout Principles

Spacing Scale（推奨 9px ベース）

Container

• Max Width: 1200px 程度（推奨値）
• Padding (horizontal): mobile 16px / desktop 24〜36px

Border Radius Scale

Grid

• カラムベースのレイアウト（CSS Grid / Flexbox）
• 商品サイトはカード型のグリッド配置

6. Depth & Elevation

• 実測ではすべての要素で box-shadow: none
• 立体感は面の色の切り替えで表現: #f6f6f3 → #edede3 → #131314
• フッターの #edede3 とヘッダーの #f6f6f3 で上下の段差を作る
• Cookie バナーのオーバーレイ rgba(0, 0, 0, 0.7) のみが影的な表現
• ホバー時にもシャドウは使わない（推奨: opacity や background-color の変化でホバーを表現）

7. Do's and Don'ts

Do（推奨）

• 和文フォントは Noto Sans JP を使い、商品サイトでは Hiragino Kaku Gothic ProN → Hiragino Sans → メイリオ のフォールバックを付ける
• 本文の line-height は 1.75 を基本にする（商品サイト準拠）
• CTA ボタンは border-radius: 0px の角張りデザイン + ボーダースタイルで統一する
• 背景は ウォーム系のオフホワイト（#f6f6f3 / #fbfcfc）を使い、純白 #ffffff はカード面に限定する
• ブランドグリーン #00a040 はアクセント的に控えめに使う（スライダードット、Cookie ボタン、リンク色）
• フッターは #edede3 のベージュグレーで本体と明確に区切る
• 英字の装飾要素には Barlow weight 600 を使う
• letter-spacing は normal を維持する（特別なトラッキング不要）
• 商品サイトの見出しは weight 900、企業サイトは weight 700 と使い分ける

Don't（禁止）

• ピル型ボタン（border-radius: 9999px）を使わない — 伊藤園は完全な直角デザイン
• letter-spacing を調整しない — Noto Sans JP のデフォルトメトリクスで組む
• font-feature-settings: "palt" を使わない — 実サイトでは適用されていない
• 冷たいグレー（#f3f4f6、#e5e7eb）を背景に使わない — ウォーム寄りの #f6f6f3 / #edede3 を使う
• ブランドグリーン #00a040 を 大きな面やヒーロー背景に使わない — あくまでポイント使い
• box-shadow で立体感を出さない — 面の色で階層を作る
• 純黒 #000000 と近黒 #131314 を 混在させない — 企業サイトは #000000、商品サイトは #131314 で統一
• Barlow を和文混じりの本文に使わない — コピーライト等の英字アクセント専用

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• Page Title: 30.6px → 24px 程度に縮小
• Section H2: 23.4px → 19.8px 程度に縮小
• 本文サイズは 14.4px を維持（line-height 1.75 も維持）
• 企業サイトのナビはハンバーガーメニュー化

タッチターゲット

• ナビプライマリリンク: 高さ 36px のラインハイト（タッチ領域として十分）
• ボーダーCTA: padding の左 27px + テキストで最低 44px 幅を確保

ダークモード

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

9. Agent Prompt Guide

クイックリファレンス

Brand Green: #00a040
Black (Corporate): #000000
Near Black (Product): #131314
Muted Gray: #8e9294
Inactive Nav: #97938e
Breadcrumb Gray: #879297
Copyright: #c9c9ba
Warm Surface (Corporate): #f6f6f3
Product Surface: #fbfcfc
Footer: #edede3
Input BG: #dbdbd7
Nav Green BG: #f1f5f0
Tab BG: #f6f6f6
White: #ffffff
Cookie Overlay: rgba(0, 0, 0, 0.7)

Font (Corporate): "Noto Sans JP", sans-serif
Font (Product): "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif
Font (English accent): Barlow, sans-serif

Body Size: 14.4px / line-height 1.75 / weight 400 / letter-spacing normal
Heading (Corporate): weight 700
Heading (Product): weight 900
Caption: 12.6px / line-height 1.5
Copyright: Barlow / 9px / weight 600 / letter-spacing 0.05em

Border Radius: 0px（すべて角張り）
Shadow: none（基本フラット）
CTA Style: transparent + 1px solid #000 + radius 0px（ボーダースタイル）

プロンプト例

伊藤園のデザインに従って、お茶の商品一覧セクションを作成してください。
- フォント: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif
- セクション見出し: 23.4px / weight 900 / line-height 1.54 / color #131314
- カード見出し: 16.2px / weight 700 / line-height 1.5
- 本文: 14.4px / weight 400 / line-height 1.75 / color #131314
- CTA: 背景 transparent / 文字 #000 / border 1px solid #000 / radius 0px / padding 0 0 0 27px（左に矢印）/ 14.4px / weight 700
- 検索ボタン: 背景 #131314 / 文字 #fff / radius 0px
- ページ背景: #fbfcfc（純白ではなく、わずかに色味のあるオフホワイト）
- フッター: #edede3（暖色ベージュグレー）
- ブランドグリーン #00a040 はリンク色やアクセントにのみ使用（大面積には使わない）
- border-radius は 0px — すべて角張りで統一
- box-shadow は none — 影を使わず面の色で階層を作る
- letter-spacing は normal — トラッキング調整不要
- 英字装飾は Barlow weight 600, letter-spacing 0.05em