「走る歓び」そして、「生きる歓び」の創造

Mazda コーポレートサイトのデザインシステム。専有書体 MazdaType（Regular / Medium / Bold）を Noto Sans JP フォールバックで運用し、palt をグローバル ON、letter-spacing を 0.07〜0.1em と広めに取ったプレミアム自動車ブランドの組版。本文 19px・line-height 1.68・濃墨紺 #040b13 と銅色リンク #8d7057 を組み合わせる、面色と書体だけで構成されたミニマルなコーポレート UI。

詳しく見る
01 / Colors

カラーパレット

Brand
Mazda Ink
#040b13
本文・見出し（濃墨紺）
Mazda Copper
#8d7057
リンク色（銅・ブロンズ）
Page White
#ffffff
ページ背景
Surface
Nav Surface
#e6e6e6
グローバルナビ面
Soft Gray
#f5f5f5
薄い区切り背景
Footer Navy
#27455c
フッター・暗色帯
Footer Slate
#535b69
サイトマップ等
Cookie Banner
#041428
同意ダイアログ
Accent / Semantic
Sustainability Green
#468254
ESG セクション
PDF Red
#ff2115
PDF アイコン
Filter Blue
#3860be
フィルターアイコン
02 / Typography — 実測値

タイポグラフィ階層

「走る歓び」そして、「生きる歓び」の創造
46px / 500 (Medium) / line-height: 1.30 / letter-spacing: 0.10em / palt: ONヒーロー h1
HIGHLIGHTS ／ MAZDA MIRAI BASE
34px / 500 (Medium) / line-height: 1.29 / letter-spacing: 0.10emセクション h2
CREATING THE JOY OF LIVING WITH A JOY OF DRIVING
22px / 700 (Bold) / line-height: 1.45 / letter-spacing: 0.10emカード見出し h4
本文テキスト ／ マツダは、お客様の人生に寄り添い、走る歓びを通じて、心ときめく体験を提供します。本文は 19px の大きめ設定で、line-height 1.68、letter-spacing 0.07em と字間を広く取ることで、プレミアムブランドの落ち着いた読みやすさを実現します。
19px / 400 / line-height: 1.68 / letter-spacing: 0.07em / palt: ON本文 / リード p
ナビゲーション ／ マツダについて
16px / 700 / line-height: 1.50 / letter-spacing: 0.07emグローバルナビ
関連リンク → 詳細を見る
16px / 700 / 銅色 #8d7057 / 下線なしテキストリンク
03 / Feature Cards

注目のコンテンツ

サステナビリティ

2050年カーボンニュートラル

マツダは、2050年までにサプライチェーン全体でのカーボンニュートラル達成を目指しています。製造段階から走行・廃棄までを対象としたライフサイクル評価を継続実施。

詳細を見る →
テクノロジー

SKYACTIV テクノロジー

走る歓びと優れた環境・安全性能を高次元で両立する、マツダ独自の革新的なベース技術。エンジン・トランスミッション・シャシー・ボディを総合最適化。

詳細を見る →
デザイン

魂動 — Soul of Motion

「生命感」をテーマとしたマツダのデザイン哲学。鼓動や躍動感を造形に込め、所有する歓び、見るたび心ときめく一台を目指します。

詳細を見る →
04 / Buttons & Tags

UI コンポーネント

詳しく見る
Pill CTA · radius 900px
詳しく見る
Inverse Pill
サステナビリティ
Green Badge
テクノロジー
Copper Badge
デザイン
Ink Badge
05 / Forms

フォーム要素

デフォルト — border: 1px solid #040b13, radius: 0px
フォーカス — border 2px #040b13
06 / Spacing — 8px グリッド

スペーシング

XS · 4px
S · 8px
M · 16px
L · 24px
XL · 40px
XXL · 80px