Design System Preview
Bridgestone — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。ドメイン専用カスタムフォント BridgestoneTypeTP、heading weight 400、pill 型メガメニュー(radius 40px)、一貫した line-height 1.64 など、ブリヂストンの精密かつ堅実なデザイン言語を可視化。computed style 実測値に基づく。

TOPICS一覧を見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Bridgestone Red
#e4002b
--color-bridgestone-red(ロゴ・アクセント限定)
RSS Orange
#f08a34
--color-rss
Text
Text Body
#000000
--color-text-body
Text Primary
#333333
--color-text-primary(本文)
Text Secondary
#3c3c3c
--color-text-secondary(日付等)
Text Sub
#999999
--color-text-sub(補足)
Surface & Background
Page Background
#ffffff
--color-bg
Hero BG
#ececec
--color-bg-hero
Section BG
#f5f5f5
--color-bg-section
Nav Dropdown
#eeeeee
--color-bg-nav-dropdown
Footer BG
#222222
--color-bg-footer
Frosted Glass & Overlay
backdrop-filter: blur
Frosted Nav
rgba(255,255,255,0.95)
--color-bg-overlay
Component
Category Badge
#757575
--color-category
Border
Border Default
#d1d1d1
--color-border(ドロップダウン)
Border Button
#808080
--color-border-button
Border Input
#707070
--color-border-input

02 / Typography — 実測値

タイポグラフィ階層

TOPICS — セクション大見出し
42px / weight 400 / line-height: 1.64 / font-feature-settings: normalセクション h2
ニュースリリース — サブ見出し
30px / weight 400 / line-height: 2.0サブ h2
メガメニュー見出し — Mega Menu Heading
20px / weight 600 / radius: 40px(pill 型メガメニュー項目)メガメニュー
タイヤ製品タイトル — Product Title on Dark
18px / weight 600 / line-height: 27px / letter-spacing: -0.6pxプロダクト名
ナビゲーションリンク — Nav Primary (14px, 600)
14px / weight 600 / line-height: 1.3グローバルナビ
ナビ副項目 — Nav Secondary (13px, 600)
13px / weight 600ナビ副項目
本文テキスト — ブリヂストンは世界最大のタイヤ・ゴムメーカーとして、モビリティの進化を支えています。一貫した line-height: 1.64 と palt なしのタイポグラフィは、企業としての堅実さと信頼性を伝えるデザイン判断です。ABCabc 123
14px / weight 400 / line-height: 1.64 / palt: 適用なし本文
補足テキスト — Product Sub (12px, #999999)
12px / weight 400 / color: --color-text-subプロダクト補足
2026.05.22 — 日付テキスト (10px, #3c3c3c)
10px / weight 400 / color: --color-text-secondary日付
ニュースリリース
12px / weight 400 / bg: #757575 / text: #ffffff / padding: 3px 5px / radius: 0カテゴリバッジ

記事ページの組版サンプル

ブリヂストンのタイヤテクノロジー

世界最大のタイヤ・ゴムメーカーとして、ブリヂストンは「最高の品質で社会に貢献」の理念のもと、モビリティの安全と快適性を追求し続けています。

ブリヂストンのタイヤ設計は、コンピュータシミュレーションと実走試験の膨大なデータに裏打ちされています。トレッドパターンの溝一本一本、ゴム配合の微細な調整が、ウェット路面でのグリップ力、高速走行時の安定性、そして長寿命を両立させます。

サステナブルなモビリティへ

2050年サステナブルなソリューションカンパニーとしてのビジョンを掲げ、リサイクル素材の活用、転がり抵抗の低減による燃費改善、タイヤ空気圧モニタリングシステムなど、環境負荷を低減するイノベーションに取り組んでいます。EV(電気自動車)の普及に合わせた専用タイヤの開発も加速しています。

font-feature-settings: normal(palt 適用なし)で、カスタム書体 BridgestoneTypeTP の設計意図を尊重したタイポグラフィ。見出しの weight 400 は、書体自体が持つ視覚的な太さに依拠した設計判断です。


04 / Buttons — pill (40px) + outline (0px)

ボタンバリエーション

Mega Menu Pill (radius: 40px, weight: 600)
タイヤ
Mega Menu Pill (20px)
乗用車用タイヤ
Sub Pill (14px)
Outline Buttons (radius: 0px)
お問い合わせ
Accent Red(限定使用)
Badges & Dropdown
ニュースリリース
Category Badge
お知らせ
Category Badge
全て ▾
Dropdown
English
Outline Light (on dark)

カードコンポーネント

Product Cards
TIRE IMAGE

POTENZA RE-71RS

サーキットからストリートまで。極限のグリップ性能を追求したスポーツタイヤ。

乗用車用タイヤ
詳しく見る
TIRE IMAGE

BLIZZAK VRX3

氷上性能とロングライフを両立した、次世代スタッドレスタイヤ。

スタッドレスタイヤ
詳しく見る
TIRE IMAGE

ECOPIA EP150

低燃費性能と安全性を高い次元で両立。環境配慮型タイヤの標準。

エコタイヤ
詳しく見る
News List Cards
2026.05.22 ニュースリリース ブリヂストン、次世代ランフラットタイヤ技術を発表
2026.05.15 お知らせ 2026年度 サステナビリティレポートを公開
2026.04.28 ニュースリリース モビリティソリューション事業の新拠点を東京に開設

06 / Forms — radius: 0px

フォーム要素

デフォルト — border: #707070, radius: 0px
フォーカス — border: #000000
正しい電話番号を入力してください

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。ブリヂストンのデフォルト。フラットな面でコーポレートな堅実さを表現
Surface: Hero BG
#ececec — 背景色の差で面を分ける。shadow ではなくグレー階調で奥行きを表現
Surface: Section BG
#f5f5f5 — セクション間の区切りを背景色で実現
Frosted Glass Nav
rgba(255,255,255,0.95) + backdrop-filter: blur()

ダークセクション (#222222)

ブリヂストンのフッターでは、背景色 #222222 に白テキストを使用。ブランドレッド #e4002b はロゴやアクセントに限定し、全体はモノクロのグレーパレットで構成されています。影(box-shadow)はほぼ使用せず、背景色のグレー階調で奥行きを表現するフラットなデザインアプローチです。

POTENZA RE-71RS 乗用車用タイヤ
Language selector on dark bg

08 / Layout

レイアウトグリッド

4-Column Grid (Product Gallery)
1
2
3
4
3-Column Grid
1
2
3
2-Column Grid
1
2
Spacing Scale
4px
8px
16px
24px
40px
80px