Design System Preview
Audio-Technica

オーディオテクニカ — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

新規会員登録 DESIGN.md を読む
01 / Colors

カラーパレット

Brand & CTA
Black
#000000
メインテキスト、ブランド
Gold
#daa521
会員登録 CTA
Promo Gold
#cc9900
キャンペーンバッジ
Info Blue
#0478c1
Cookie 同意ボタン
Text
Text Primary
#000000
本文テキスト（純粋な黒）
Text Secondary
#616161
補足テキスト
Text Footer
#ffffff
フッター内テキスト
Surface & Background
Background
#ffffff
ページ背景
Card Surface
#f0f0f0
製品カード背景
Section
#eaeaea
セクション背景
Campaign
#efefef
キャンペーン背景
Footer Dark
#404040
フッター背景
UI Elements
Border
#bfbfbf
ボタン枠線・区切り線
Border Light
#dddddd
区切り線・Swiper 非アクティブ
Swiper Active
#777777
カルーセル アクティブドット
Cookie Reject
#e9e7e8
拒否ボタン背景
Product Color Swatches
Teal
#008080
製品カラー
Warm Brown
#be8f68
製品カラー
Peru
#cd853f
製品カラーインジケーター
02 / Typography

タイポグラフィ階層

Display English — UniversNextPro-Cond
25px / 400 / line-height: 1.5 / letter-spacing: 0.01em / UniversNextPro-Cond英文ディスプレイ
Online Limited — English Label
16px / 700 / line-height: 1.0 / UniversNextPro-Cond英文ラベル
おすすめアイテム — Section Title (h2)
15px / 700 / line-height: 1.0 / FP-HiraKakuProN-W6セクション見出し
製品名タイトル — Content Title (h3)
16px / 700 / line-height: 1.5 / FP-HiraKakuProN-W6製品名
ヘッドホン・イヤホンナビ — Navi Title (h3)
16px / 700 / line-height: 1.8 / FP-HiraKakuProN-W6ナビカード見出し
個人向け製品　ビジネス向け製品　サポート — Nav Label
13px / 400 / line-height: 1.0 / letter-spacing: 0.2em / FP-ヒラギノ角ゴ ProN W6ナビラベル
本文テキスト — ホワイトカラーで統一できる公式オンラインストア限定シリーズ。世界中のスタジオエンジニアから愛されるモニターヘッドホン。
14px / 400 / line-height: 1.5 / letter-spacing: normal / FP-HiraKakuProN-W3製品説明
フッターテキスト — 12px / letter-spacing: 0.05em
12px / 400 / line-height: 1.0 / letter-spacing: 0.05em / FP-HiraKakuProN-W3フッター
03 / Product

製品紹介の組版サンプル

ATH-M50x Professional Monitor Headphones

製品概要

世界中のスタジオエンジニアやミュージシャンから支持されるプロフェッショナルモニターヘッドホン。正確な原音再生と優れた遮音性を実現し、レコーディング、ミキシング、DJ、日常のリスニングまで幅広い用途に対応します。

主な特長

45mm大口径ドライバーによる正確でフラットな音質再生。90度反転モニター機構による片耳モニタリング対応。取り外し可能なケーブルシステムにより、用途に合わせてストレートケーブルとカールコードを使い分けることができます。

Connect with Audio-Technica — Engineered for precision and crafted with care, delivering studio-quality sound for professionals and enthusiasts alike.

04 / Buttons

ボタンバリエーション

新規会員登録
Primary CTA (Gold)
radius: 4px, padding: 12px 50px
TOPに戻る
Secondary (Outline)
radius: 0px, letter-spacing: 0.1em
同意する
Cookie Accept (Blue)
radius: 0px
拒否する
Cookie Reject (Gray)
radius: 0px
Swiper Pagination
Active: #777777 / Inactive: #dddddd / radius: 2px / 20px x 3px
05 / Cards

カードコンポーネント

製品カード (Product Card)
Product Image

ATH-M50x

プロフェッショナルモニターヘッドホン

¥22,000
Product Image

AT2040 CWH

ハイパーカーディオイド ダイナミックマイクロホン

¥16,500
Product Image発売記念プレゼント

AT33xMLB

MC型ステレオカートリッジ

¥55,000
Product Image

ATH-CKS50TW2

完全ワイヤレスイヤホン SOLID BASS

¥19,800
ナビカード (Navi Card)
Headphone Earphone Navi
ヘッドホン・イヤホンナビ
Listening Record Navi
レコードナビ
Microphone Navi
マイクロホンナビ
製品カラースウォッチ (Color Swatches)
radius: 50% (例外: カラースウォッチのみ円形) / border: 2px solid #bfbfbf
06 / Forms

フォーム要素

デフォルト — border: #bfbfbf, radius: 0px, font: Arial 14px
フォーカス — border: #000000 (black)
正しいメールアドレスを入力してください。
エラー — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。ほぼすべての要素がフラット
Surface: Card
背景色 #f0f0f0 で深度を表現
Surface: Section
背景色 #eaeaea で領域を分離
Surface: Footer
背景色 #404040 で明確な分離
box-shadow の使用なし。背景色の階段で depth を表現: #ffffff > #f0f0f0 > #eaeaea > #404040
08 / Layout

レイアウト & スペーシング

Spacing Scale
8
10
16
20
40
55
60
Content Widths
Product Carousel (Full Width) 1440px
Content Area 1000px
Product Description 700px