Design System Preview

V-Drums 5 Series

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

Explore Now DESIGN.md を読む

Color Palette

Brand
Roland Orange
#ff5a00
CTA / ロゴ / アクセント
Orange Hover
#e65100
ホバー(推奨)
Navigation & Footer
Black
#000000
ナビ背景 / テキスト主色
Near Black
#141414
フッター背景
Text
Dark Gray
#333333
セクションラベル
Mid Gray
#454545
本文テキスト
Nav Label
#666666
ナビリンク
Muted
#808080
注釈 / フィーチャーラベル
Footer Muted
#999999
フッター補助テキスト
Footer Light
#cccccc
フッターリンク / ナビ見出し
Surface & Background
Page Background
#e5e5e5
ページ背景(白ではない)
White
#ffffff
カード面 / ヒーローテキスト
Semantic(推奨)
Danger
#cc0000
エラー / 削除
Success
#228b22
成功 / 在庫あり
Warning
#cc7700
警告 / 残りわずか

Typography

V-Drums TD-50X
Montserrat (proxima-nova alt) / 80px / weight 100 / line-height: 1.0 / letter-spacing: 0Hero Display
FANTOM
Montserrat / 105px / weight 100 / line-height: 1.0 — ultra-thin displayHero Display Alt
Pianos
Noto Sans JP (Kozuka Gothic alt) / 44px / weight 100 / line-height: 1.0 / letter-spacing: 3pxCategory H2
電子ドラム V-Drums シリーズ
Noto Sans JP / 22px / weight 600 / line-height: 1.2Subcategory H2
FEATURED PRODUCTS
14.4px / weight 400 / line-height: 1.0 / letter-spacing: 1px / color: #333Section Label H3
Discover our latest instruments
Montserrat / 16px / weight 300 / line-height: 1.0 / color: #808080Lead P
本文テキスト — Roland の製品ページで使用される標準的な本文スタイル。12px と小さめのサイズながら、line-height 1.8 と letter-spacing 1px の組み合わせで日本語の可読性を確保しています。
12px / weight 400 / line-height: 1.8 / letter-spacing: 1px / color: #454545Body P
NEW ARRIVAL
13.6px / weight 600 / letter-spacing: 1px / color: #808080Featured Label H5
Products   Support   Community
Montserrat / 13px / weight 400 / letter-spacing: -0.5px / color: #666Nav Link

Article

Digital Piano Design

Roland のデジタルピアノは、アコースティックピアノの響きと打鍵感を最新のテクノロジーで再現しています。SuperNATURAL 音源と PHA-50 鍵盤の組み合わせにより、プロフェッショナルからビギナーまで満足できる演奏体験を提供します。

音源テクノロジー

SuperNATURAL Piano Modeling は、ピアノ音色の各要素を個別にモデリングする技術です。弦の共鳴、ダンパーレゾナンス、ハンマーノイズなど、アコースティックピアノ特有の微細な音響要素を忠実に再現します。88鍵それぞれが独立した発音体として振る舞い、演奏のニュアンスに応じて無段階に音色が変化します。

鍵盤設計の哲学

PHA-50 鍵盤は、木材とABS樹脂のハイブリッド構造を採用しています。天然木の自然な打鍵感と、樹脂の耐久性・安定性を両立。エスケープメント機構により、グランドピアノ特有のクリック感を正確に再現しています。長時間の練習でも疲れにくい設計です。

Buttons

Explore Now
Primary CTA
Learn More
Secondary
Explore →
Explore Chip
Delete
Danger
Buy Now
Primary on Dark
Details
Ghost on Dark
05 / Cards

Cards

FP-90X
DIGITAL PIANOS

FP-90X ポータブル・ピアノ

SuperNATURAL Piano Modeling 音源と PHA-50 鍵盤を搭載。自宅練習からステージまで対応するフラッグシップ・ポータブルピアノ。

TD-50X
V-DRUMS

TD-50X 音源モジュール

Prismatic Sound Modeling テクノロジーにより、アコースティックドラムの倍音構造を忠実に再現。プロドラマーの表現力に応える。

FANTOM-08
SYNTHESIZERS

FANTOM-08 シンセサイザー

ZEN-Core 音源とスーパーナチュラルシンセを統合。88鍵モデルでライブパフォーマンスから楽曲制作まで幅広く対応。

Forms

デフォルト — border: #cccccc, radius: 2px
フォーカス — border: #ff5a00 (Roland Orange)
エラー — border: #cc0000 (Danger)

Elevation

Level 0: Flat
影なし。グレー背景とのコントラストで浮く
Level 1: Hover
0 2px 8px rgba(0,0,0,0.08)
Level 2: Dropdown
0 4px 16px rgba(0,0,0,0.12)
Level 3: Modal
0 8px 32px rgba(0,0,0,0.16)

Layout

Spacing Scale (8px grid)
4px
8px
16px
24px
48px
80px
Border Radius
0px — Card
2px — Button
Content Widths
Max Container 1200px
Article Content 680px
Form Width 400px