ENEOS DESIGN.md

ENEOS（https://www.eneos.co.jp/）のデザイン仕様書。 実サイトの CSS computed style に基づく。CSS Custom Properties は使用されていない（OneTrust Cookie バナーを除く）。

1. Visual Theme & Atmosphere

• デザイン方針: 日本最大級のエネルギー企業にふさわしい、信頼感と堅実さを重視したコーポレートサイト。装飾を抑え、情報を明快に伝えるデザイン
• 密度: 適度な余白を持つコーポレート型。トップページはタブ切替で個人・法人・企業情報を分離し、情報整理を重視
• キーワード: 信頼、堅実、コーポレート、整然、エネルギー
• 特徴: トップページ（メイリオベース）と企業情報ページ（Noto Sans JP ベース）で異なるフォントスタックを使い分けている。ブランドカラーのティール #00ada9 はタブのアクティブ状態やアクセントに限定使用し、主張しすぎないバランス

2. Color Palette & Roles

Primary（ブランドカラー）

• ENEOS Teal (#00ada9): ブランドのアクセントカラー。タブのアクティブ状態、カルーセルのアクティブドット、Cookie設定ボタンに使用
• ENEOS Teal 70% (rgba(0,173,169,0.7)): タブのアクティブ背景（半透明）
• ENEOS Orange (#e94709): 企業情報ページの見出し・アクセント色。ナビゲーションのアクティブ状態にも使用
• ENEOS Orange Dark (#bf340a): 企業情報ページの経営戦略セクション背景（ダーク系）

Semantic（意味的な色）

• Danger / Attention (#cc0000): 注意喚起アイコン（エクスクラメーションマーク）
• Energy Orange (#fe6230): 石油・ガス・石油化学カテゴリのアクセント
• Environment Green (#8db501): 環境カテゴリのアクセント
• Corporate Navy (#27455c): 企業情報系の装飾背景
• Statistics Blue (#3b609a): 「数字で見るENEOS」セクション背景
• Energy Gold (#e3b102): エネルギーシステムカテゴリのアクセント

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト
• Text Secondary (#696969): Cookie バナー等のセカンダリテキスト
• Text Placeholder (#bbbbbb): 入力プレースホルダー
• Border (#cccccc): ボタン・リンクの枠線
• Border Light (#aaaaaa): 企業情報ページのボタン枠線
• Background (#ffffff): ページ背景
• Background Secondary (#f4f4f4): PICK UP セクション等の背景
• Background Warm (#f4f4f0): 企業情報ページの統計セクション背景
• Surface Gray (#e4e4e4): カルーセルの非アクティブドット
• Assist Menu (#666666): フローティングアシストメニュー背景
• Footer (#000000): フッター背景

3. Typography Rules

3.1 和文フォント

ゴシック体（トップページ・共通ヘッダー/フッター）:

• メイリオ（Windows）
• ヒラギノ角ゴ Pro W3（macOS）
• Osaka（macOS レガシー）
• MS PGothic（Windows レガシー）

ゴシック体（企業情報ページ本文）:

• Noto Sans JP（Google Fonts / Web フォント）

3.2 欧文フォント

• 和文フォント内蔵の欧文グリフをそのまま使用（欧文専用フォントの指定なし）

3.3 font-family 指定

css/* トップページ・共通ヘッダー/フッター */
font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 企業情報ページ（見出し・本文） */
font-family: "Noto Sans JP", sans-serif;

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

• トップページはメイリオを最優先に指定。Windows 環境を主なターゲットとした企業サイト向けの典型的な構成
• 企業情報ページのコンテンツ部分は Noto Sans JP 単独指定で統一感を重視
• 欧文専用フォント（Helvetica Neue 等）は指定されておらず、和文フォントの欧文グリフで表示
• preview.html では Noto Sans JP を Google Fonts から読み込み、メイリオの代替として使用する（メイリオは Windows 専用のため）

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

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

トップページ

企業情報ページ

3.5 行間・字間

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

• body グローバル: 25.6px (16px x 1.6)
• 企業情報 h1: 75.6px (63px x 1.2)
• 企業情報 h2: 51.6px (43px x 1.2)
• 企業情報 リード: 40.5px (27px x 1.5)
• 企業情報 本文: 24px (16px x 1.5)
• ニュースタイトル: 22.4px (16px x 1.4)

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

• 全要素: normal（明示的な letter-spacing 設定なし）

ガイドライン:

• ENEOS のサイトは letter-spacing を一切使用していない。和文テキストのデフォルト字送りで表示
• line-height はページによって異なる: トップページは 1.6、企業情報ページの見出しは 1.2、本文は 1.5

3.6 禁則処理・改行ルール

css/* 特別な指定なし — ブラウザのデフォルト禁則処理 */

• 明示的な word-break や overflow-wrap の指定は確認されなかった

3.7 OpenType 機能

css/* 全要素で明示的な palt / kern の指定なし */
font-feature-settings: normal;

• palt（プロポーショナル字詰め）は使用していない
• メイリオはもともとプロポーショナルメトリクスを持つため、palt なしでも自然な字送りになる

3.8 縦書き

• 該当なし。ENEOS は横書きのみ

4. Component Stylings

Buttons

Standard CTA（白背景・枠線）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #cccccc
• Padding: 12px 40px 12px 30px
• Border Radius: 0px
• Font Size: 16px
• Font Weight: 400
• Line Height: 22.4px (1.4)

Tab（アクティブ状態）

• Background: rgba(0,173,169,0.7) (ENEOS Teal 70%)
• Text: #ffffff
• Border Radius: 0px
• Font Size: 18px
• Font Weight: 400

Tab（非アクティブ状態）

• Background: #ffffff
• Text: #333333
• Border Radius: 0px
• Font Size: 18px
• Font Weight: 400
• Padding Top: 10px

Cookie / Accent Button

• Background: #00ada9
• Text: #ffffff
• Border: 1px solid #ffffff
• Border Radius: 2px
• Padding: 12px 10px
• Font Size: 13px
• Font Weight: 600

Outline Button（企業情報ページ）

• Background: transparent
• Text: #000000
• Border: 1px solid #aaaaaa
• Padding: 19px 30px
• Border Radius: 0px
• Font Size: 16px (Noto Sans JP)
• Font Weight: 400

Active Nav Link（企業情報ページ）

• Background: #e94709
• Text: #ffffff
• Padding: 0px 20px
• Border Radius: 0px

MORE Button

• Background: #ffffff
• Text: #333333
• Border: 1px solid #cccccc
• Padding: 8px 40px 8px 30px
• Font Size: 16px

Carousel Dots

Active

• Background: #00ada9 (ENEOS Teal)
• Border Radius: 50%

Inactive

• Background: #e4e4e4
• Border Radius: 50%

Floating Assist Menu

• Background: #666666
• Text: #ffffff
• Font Size: 9px
• Padding: 36px 0px 0px（アイコンスペース込み）
• 位置: 画面右端に固定

Inputs

• Background: transparent
• Border: 0px（枠なし、ボーダーボトムスタイル）
• Font Size: 16px
• Font Weight: 400
• Placeholder Color: #bbbbbb

Cards（企業情報ページ）

• Background: #ffffff
• Border: なし（影で分離）
• Border Radius: 0px
• Font: Noto Sans JP
• Description Font Size: 16px
• Description Line Height: 25.6px (1.6)

Attention Badge

• Background: #cc0000
• Text: #ffffff
• Border Radius: 28px（pill）
• Font Size: 24px
• Font Weight: 700
• Padding: 6px 3px 5px

5. Layout Principles

Container

• Max Width: 約 1100px（トップページメインコンテンツ）
• Padding (horizontal): 可変

Spacing

• ENEOS のサイトは Tailwind 等のユーティリティフレームワークを使用しておらず、コンポーネント単位で余白を設定

Grid

• トップページ: タブ切替によるコンテンツ切替（個人／法人／企業情報）
• 企業情報: 2カラム構成（カードグリッド）

6. Depth & Elevation

• ENEOS のサイトは box-shadow をほとんど使用しない、フラットなデザイン
• 深度の表現は背景色の透明度で代替（画像上のオーバーレイ等）

7. Do's and Don'ts

Do（推奨）

• フォントはメイリオを第一候補とし、ヒラギノ角ゴ、Osaka、MS PGothic のフォールバックを含める
• テキスト色は #333333 を使用する（純粋な #000000 はフッター背景にのみ使用）
• ブランドカラー #00ada9 はアクセント用途に限定する（タブ、ドット、ボタンのハイライト）
• ボタンは角丸なし（border-radius: 0px）の矩形を基本とする
• ボタンの矢印（→）はテキスト右側にCSSで付加する
• 企業情報ページのコンテンツ部分では Noto Sans JP を使用する
• line-height は本文で 1.5〜1.6、見出しで 1.2 を使用する

Don't（禁止）

• ブランドカラー #00ada9 を大面積の背景に使わない（アクセント用途に限定）
• letter-spacing を追加しない（ENEOS サイトは字間設定なし）
• palt を使用しない（メイリオのデフォルトメトリクスで表示）
• ボタンに大きな border-radius を付けない（角丸なしが基本）
• フッター以外の背景に純粋な #000000 を使わない
• 企業情報ページのコンテンツにメイリオを使わない（Noto Sans JP で統一）

8. Responsive Behavior

Breakpoints

タッチターゲット

• フローティングアシストメニュー: 約 60px x 60px のタッチ領域
• タブ: 十分なパディングで操作可能なサイズ

フォントサイズの調整

• 企業情報ページの h1 (63px) はモバイルでは縮小される想定
• トップページは元々 16px ベースのため大幅な変更は不要

9. Agent Prompt Guide

クイックリファレンス

Brand Teal: #00ada9（アクセント専用）
Brand Orange: #e94709（企業情報ページ見出し）
Text Primary: #333333
Background: #ffffff
Background Secondary: #f4f4f4
Border: #cccccc
Footer: #000000
Assist Menu: #666666
Attention: #cc0000

Top Page Font: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
Company Page Font: "Noto Sans JP", sans-serif

Body: 16px / 400 / line-height: 1.6 / letter-spacing: normal
Company h1: 63px / 700 / line-height: 1.2
Company h2: 43px / 500 / line-height: 1.2
palt: 未使用

プロンプト例

ENEOS のデザインに従って、サービスステーション検索ページを作成してください。
- フォント: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
- テキスト色: #333333
- アクセントカラー: #00ada9（タブ、アクティブ状態のみ）
- 背景: #ffffff
- ボタン: 白背景、#cccccc 枠線、角丸なし、padding 12px 40px
- letter-spacing: normal（字間設定なし）
- palt: 未使用
- フラットデザイン（box-shadow ほぼなし）