Bridgestone (ブリヂストン) DESIGN.md

Bridgestone（https://www.bridgestone.co.jp/）のデザイン仕様書。 実サイトの CSS computed style に基づく。 自社カスタム書体 BridgestoneTypeTP-Regular を全面採用し、游ゴシック体ファーストのフォールバック、統一的な 1.64 行間比率、フラットで構造的なグレーパレットで「信頼・堅実なグローバル製造業」の印象を表現している。

1. Visual Theme & Atmosphere

• デザイン方針: コーポレート・ソリッド。世界最大のタイヤメーカーとしての信頼感と堅実さを、シンプルな構造と抑制的な色使いで表現
• 密度: ゆったりとした余白と大きなヒーロービジュアル。タイヤ・モビリティ製品の存在感を引き立てるレイアウト
• キーワード: 堅実、構造的、フラット、グレースケール、信頼
• 特徴:
  • カスタム Web フォント BridgestoneTypeTP-Regular を全面使用。コーポレートアイデンティティを書体レベルで統一
  • 游ゴシック体（YuGothic）をフォールバック最優先に配置 — メイリオではなく游ゴシックを選んでいる点が、モダンで上品な印象を意図している
  • line-height 1.64 を見出し・本文で一貫使用 — サイト全体で統一された行間比率が、視覚的なリズムの安定感を生む
  • 見出しも weight 400 — カスタム書体自体が視覚的なウェイトを持つため、CSS の font-weight に頼らない設計
  • ナビゲーション・インタラクティブ要素のみ weight 600 で明確に差別化
  • font-feature-settings: "normal"（palt なし）— プロポーショナル字詰めを使わない、ベタ組みの設計
  • 構造的なグレーパレット: #333333 → #3c3c3c → #757575 → #999999 の 4 段階で情報の優先度を表現

2. Color Palette & Roles

Primary（ブランドカラー）

• Bridgestone Red: ロゴマークに使用。サイト上の UI 要素にはほとんど展開されず、ロゴ専用のブランドカラーとして厳格に管理されている

注意: Bridgestone のコーポレートサイトはブランドカラーの赤を UI に多用しない設計方針。アクセントカラーの役割は構造的なグレー濃淡とタイポグラフィのウェイト差が担っている

Accent

• RSS Orange (#f08a34): RSS フィード等の機能アイコンに限定使用

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト、見出し。サイト全体の基調色
• Text Body (#000000): 段落テキスト（本文内の強調的な文脈で使用）
• Text Secondary (#3c3c3c): 日付、補足テキスト
• Text Sub (#999999): 製品サブタイトル等の薄いグレーテキスト
• Badge Gray (#757575): カテゴリバッジの背景
• Nav Label (#000000): ナビゲーション見出し、メガメニューヘッダー

Surface & Background

• Background (#ffffff): メインページ背景
• Hero BG (#ececec): ヒーローエリアの背景
• Section BG (#f5f5f5): TOPICS 等のセクション背景
• Mega Menu BG (#eeeeee): メガメニュー・検索ボタン領域の背景
• Footer Dark (#222222): フッター背景
• Nav Overlay (rgba(255, 255, 255, 0.95)): ナビゲーションオーバーレイ（フロストガラス効果）

Border

• Border Default (#d1d1d1): ドロップダウン、入力欄の枠線
• Border Outline (#808080): アウトラインボタンの枠線
• Input Border (#707070): 検索入力欄の枠線

3. Typography Rules

3.1 和文フォント

カスタム Web フォント — BridgestoneTypeTP-Regular:

• Bridgestone コーポレート専用書体。ドメインライセンスで配信されている
• weight 400 のみの単一ウェイト構成。太さのバリエーションは CSS font-weight で制御

注意: BridgestoneTypeTP-Regular は公式サイト以外では表示されない。プレビューやプロトタイプでは BIZ UDPGothic（Google Fonts）を推奨。游ゴシック系のニュートラルな印象に近く、UDフォントとしてのクリアな字形がコーポレート感に合う。Noto Sans JP も代替候補。

システムフォールバック:

• 游ゴシック体 / YuGothic（クロスプラットフォーム、最優先フォールバック）
• 游ゴシック / "Yu Gothic"（Windows 向け別名）
• Hiragino Sans（macOS）
• sans-serif（最終フォールバック）

3.2 欧文フォント

• BridgestoneTypeTP-Regular に欧文グリフが含まれているため、通常は別途指定なし
• 検索入力欄のみ Arial をフォールバックに指定

3.3 font-family 指定

css/* 本文・見出し */
font-family: BridgestoneTypeTP-Regular, 游ゴシック体, YuGothic,
  游ゴシック, "Yu Gothic", "Hiragino Sans", sans-serif;

/* 検索入力欄 */
font-family: Arial, sans-serif;

/* プレビュー代替 */
font-family: "BIZ UDPGothic", 游ゴシック体, YuGothic,
  游ゴシック, "Yu Gothic", "Hiragino Sans", sans-serif;

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

• カスタム Web フォントを最優先
• 游ゴシック体（YuGothic）を最初のフォールバックに配置 — メイリオではなく游ゴシック系を選んでいる点がモダン
• macOS は Hiragino Sans でカバー
• メイリオ（Meiryo）はフォールバックチェーンに含まれていない（意図的な省略と思われる）

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

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

3.5 行間・字間

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

• サイト共通の比率 1.64: 42px 見出し（x1.64）、15px 本文（x1.64）、14px body（x1.64）、10px 日付（x1.64）と、サイズが変わっても同一比率を維持。Bridgestone の最も特徴的なタイポグラフィ設定
• サブ見出し: 60px (30px x 2.0) — 例外的に広い行間
• ナビゲーション: 18.2px (14px x 1.3) — UI 要素はタイトめ
• バッジ・小テキスト: 15.6px (12px x 1.3)

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

• ほぼ全要素が normal — Bridgestone は字間調整を最小限に留めている
• 一部の本文テキスト: -0.28px (14px ベースで -0.02em) — ネガティブスペーシングで引き締め
• 製品タイトル: -0.6px (18px ベースで -0.03em) — ダーク背景上の製品名でネガティブスペーシング

ガイドライン:

• 基本は letter-spacing: normal を維持する。字間を広げる方向の調整は行わない
• ネガティブスペーシング（-0.02em 〜 -0.03em）は特定のコンテキスト（製品名、一部本文）に限定使用
• line-height: 1.64 を全サイズ共通の基本比率として適用する

3.6 禁則処理・改行ルール

css/* Bridgestone サイトのデフォルト設定 */
word-break: normal;
overflow-wrap: break-word;

• 日本語テキストの禁則処理はブラウザデフォルトに委ねている
• 長い URL や英単語は overflow-wrap: break-word で折り返し

3.7 OpenType 機能

css/* Bridgestone: palt なし */
font-feature-settings: normal;

• palt を使用しない — ベタ組み（等幅字詰め）のまま。Honda（palt グローバル適用）とは対照的なアプローチ
• カスタム書体 BridgestoneTypeTP のデフォルトメトリクスをそのまま活かす設計

3.8 縦書き

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

4. Component Stylings

Buttons

Outline Button（"TOPICS一覧を見る" 等） — 実測値:

• Background: transparent
• Text: #000000
• Border: 1px solid #808080
• Border Radius: 0px
• Padding: 3px 15px 0px
• Font Size: 14px
• Font Weight: 600

Mega Menu Heading（pill 型カテゴリ見出し） — 実測値:

• Background: transparent
• Text: #000000
• Border: なし
• Border Radius: 40px（pill 形状）
• Font Size: 20px
• Font Weight: 600
• Line Height: 32.8px (x1.64)

Dropdown Item — 実測値:

• Background: #ffffff
• Text: デフォルト
• Border: 1px solid #d1d1d1
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 400

Category Badge（ニュースカテゴリ） — 実測値:

• Background: #757575
• Text: #ffffff
• Border Radius: 0px
• Padding: 3px 5px
• Font Size: 12px
• Font Weight: 400

Search Button Area — 実測値:

• Background: #eeeeee
• Font Size: 12px
• Font Weight: 600

ボタンデザインの二面性: Bridgestone はアウトラインボタン・ドロップダウン・バッジは radius 0px の角形、メガメニューのカテゴリ見出しのみ radius 40px の pill 形状を使う。一般的な CTA は角形、ナビゲーションの大カテゴリのみ丸い、という明確な使い分け

Cards

ニュースカード

• Background: #ffffff / #f5f5f5（セクション背景に依存）
• Border: なし
• Border Radius: 0px
• Shadow: なし

製品カード（ダーク背景上）

• テキスト: #ffffff（タイトル）、#999999（サブタイトル）
• 画像フル幅
• テキストオーバーレイ構造

Navigation

• Desktop Header: 白背景 (#ffffff)、weight 600 のナビリンク
• Mega Menu: #eeeeee 背景、pill 型カテゴリ見出し（radius 40px）
• Nav Overlay: rgba(255, 255, 255, 0.95) — フロストガラス効果の白ベースオーバーレイ
• Global Nav: 10px の小さなグローバルリンク

Inputs

検索入力欄 — 実測値:

• Background: #ffffff
• Border: 1px solid #707070
• Border Radius: 0px（推定）
• Padding: 10px
• Font Size: 16px
• Font Family: Arial, sans-serif（入力欄のみ別フォント）

5. Layout Principles

Spacing Scale

Bridgestone は明確なデザイントークンよりも、コンテンツに応じた余白設計を採用。製品ビジュアルを大きく見せるヒーロー型レイアウトが基本。

Container

• Max Width: 全幅レイアウト（コンテンツ部分は約 1200px 内に収まる）
• Padding (horizontal): 20px〜40px

Grid

• ニュースリスト: 1 カラム（日付 + バッジ + タイトルの横並び構造）
• 製品ギャラリー: 2〜4 カラムのグリッド
• コンテンツエリア: 1 カラム中央揃え

6. Depth & Elevation

Bridgestone のデザインは徹底的にフラット。影の使用を最小限に抑え、色の濃淡とボーダーで構造を表現する。

7. Do's and Don'ts

Do（推奨）

• テキスト色は #333333 を基調に使い、グレーの濃淡（#3c3c3c / #757575 / #999999）で情報の優先度を表現する
• line-height: 1.64 をサイト共通の行間比率として一貫適用する
• 見出しは font-weight: 400 で、カスタム書体の持つ自然なウェイトを活かす
• ナビゲーション・インタラクティブ要素のみ font-weight: 600 で差別化する
• メガメニューのカテゴリ見出しは border-radius: 40px の pill 形状にする
• 一般的なボタン・バッジ・ドロップダウンは border-radius: 0px の角形にする
• 背景色はホワイト (#ffffff) と極薄グレー (#f5f5f5 / #ececec) の交互でセクションを区切る
• フォントフォールバックは游ゴシック体（YuGothic）を最優先にする

Don't（禁止）

• ブランドカラー（赤）を UI 要素に多用しない — ロゴ以外での赤の使用は Bridgestone の設計方針に反する
• font-feature-settings: "palt" を適用しない — Bridgestone はベタ組みを採用している
• letter-spacing をプラス方向に広げない — Bridgestone は normal または微量のネガティブスペーシングのみ
• フォールバックチェーンにメイリオ（Meiryo）を含めない — Bridgestone は意図的に省略している
• 装飾的な影やグラデーションを使わない — フラットで構造的な印象を維持する
• pill 形状（radius 40px）を CTA ボタンに使わない — pill はメガメニューのカテゴリ見出し専用
• ダーク背景のテキストに #999999 より暗い色を使わない — 可読性の確保

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• ナビゲーションリンクは padding で十分なタッチ領域を確保

フォントサイズの調整

• モバイルでは本文 14px
• 見出し（42px → 28–32px 程度）はデスクトップの 70% 程度に縮小
• BridgestoneTypeTP-Regular はモバイルでも同一フォントファミリーを使用
• line-height: 1.64 の比率はレスポンシブでも維持

9. Agent Prompt Guide

クイックリファレンス

Brand: Bridgestone Red（ロゴ専用、UIには展開しない）
Text Primary: #333333
Text Body: #000000
Text Secondary: #3c3c3c
Text Sub: #999999
Badge Gray: #757575
Background: #ffffff
Section BG: #f5f5f5
Hero BG: #ececec
Mega Menu BG: #eeeeee
Footer Dark: #222222

Font (All): BridgestoneTypeTP-Regular, 游ゴシック体, YuGothic,
  游ゴシック, "Yu Gothic", "Hiragino Sans", sans-serif
Font (Preview): "BIZ UDPGothic", 游ゴシック体, YuGothic,
  游ゴシック, "Yu Gothic", "Hiragino Sans", sans-serif

Body Size: 14–15px / line-height: 1.64 / letter-spacing: normal
Heading: 42px / weight: 400 / line-height: 1.64
Nav: weight: 600 / line-height: 1.3
OpenType: font-feature-settings: normal（palt なし）
Button Radius: 0px（角形）
Mega Menu Heading Radius: 40px（pill）

プロンプト例

Bridgestone のデザインに従って、ニュースリリース一覧ページを作成してください。
- フォント: BridgestoneTypeTP-Regular（代替: BIZ UDPGothic）
  フォールバック: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
    "Hiragino Sans", sans-serif
- テキスト色: #333333（メイン）、#3c3c3c（日付）、#999999（サブ）
- 背景: #ffffff、セクション背景: #f5f5f5
- フッター: #222222
- font-feature-settings: normal（palt を使わない）
- 行間: line-height: 1.64（サイト共通比率）
- 見出し: 42px, weight 400（書体のウェイトを活かす）
- ナビ: weight 600
- CTA ボタン: border: 1px solid #808080, border-radius: 0px
- カテゴリバッジ: bg #757575, text #ffffff, radius 0px
- メガメニュー見出し: radius 40px（pill — ナビ専用）
- letter-spacing: normal（ネガティブスペーシングは製品名等に限定）