Wacoal Design System

Design System Preview
WACOAL -- 美しさは、ここちよさ。

wacoal.jp のデザイントークンをカタログ化。ローズピンクのCTA、バーガンディのリンク、游ゴシック体の和文本文。computed style 実測値に基づく。

DESIGN.md を読む ブランドサイトを見る
01 / Colors

Color Palette

Brand
Wacoal Rose
#e67f95
CTA、ログインボタン、メイン強調
Wacoal Burgundy
#920b3b
リンクテキスト
Neutral
Text Primary
#323334
本文テキスト・見出し・ナビ
Background
#ffffff
ページ背景
Surface
#f6f6f6
カード面・入力欄背景（91件出現）
Surface Alt
#f7f7f7
控えめなセクション背景
Section BG
#ededed
見出しセクション背景
Border
#e0e0e0
ディバイダー・区切り線
Footer BG
#323334
フッター背景（テキスト色と共用）
02 / Typography

Typography

セクション大見出し -- Section Heading
Yu Gothic / 32px / 400 / line-height: 1.7section heading
コンテンツ見出し -- Heading 2
Yu Gothic / 24px / 400 / line-height: 1.7content h2
強調見出し -- Heading 2 Bold
Yu Gothic / 24px / 700 / line-height: 1.7h2 bold
セクション内スパン -- Span Section
Yu Gothic / 20px / 500 / line-height: 1.7span
本文テキスト -- Body。ワコールのサイトは全テキスト要素で line-height: 1.7 を統一しています。body の font-weight は 500 で、やや太めのウェイトが安定感と信頼感を与えます。letter-spacing は normal、palt は使用していません。
Yu Gothic / 16px / 500 / line-height: 1.7 / letter-spacing: normal / palt: なしbody
補足テキスト -- Small
Yu Gothic / 14px / 500 / line-height: 1.7small
ログイン -- Login CTA
Yu Gothic / 18px / 500 / bg: #e67f95 / radius: 0pxCTA
ヘッダーナビ -- Nav Header
Yu Gothic / 24px / 500 / line-height: 1.7nav header
フッターナビ / 著作権表示 -- Nav Footer / Copyright
Yu Gothic / 12px / 500 / line-height: 1.7footer
リンクテキスト（バーガンディ）-- 詳しくはこちら
Yu Gothic / 16px / 500 / color: #920b3b (Wacoal Burgundy)link

Web フォント方針: 和文は Noto Sans JP（Google Fonts）で游ゴシック体を代替。欧文専用フォントは使用せず、和文フォントの欧文グリフで統一。
特徴: 全テキスト要素で line-height: 1.7 を統一。font-weight: 500 が body 標準。
詳細は DESIGN.md §3 を参照。

03 / Article & Product

Article & Product

Wacoal Body Book

自分のからだに合うブラジャーの選び方

2026.05.09 / Wacoal Editorial / Reading time: 5 min

からだは一人ひとり異なります。同じサイズ表記でも、ブランドや型によってフィット感は変わるもの。ワコールが長年の研究で培ったのは、数値だけでは表せない「からだに寄り添うかたち」の技術です。

正しいサイズの測り方

トップバストとアンダーバストの差からカップサイズを算出するのが基本ですが、ストラップの長さや脇のホールド感も重要な要素です。店頭でのフィッティングサービスでは、専門スタッフが丁寧にアドバイスいたします。

ブラジャー ショーツ インナー スポーツ ナイトウェア 新商品
LINGERIE
WACOAL
リボンブラ 3/4カップブラ
¥6,490 （税込）
COMFORT
WING
ノンワイヤーブラ ここちいい
¥3,520 （税込）
SPORTS
CW-X
スポーツブラ HTY168
¥5,280 （税込）
NIGHTWEAR
WACOAL
シルクサテン パジャマ
¥16,500 （税込）
すべての商品を見る
04 / Buttons

Buttons

CTA ボタンは border-radius: 0px でシャープに。HOME ピルのみ border-radius: 30px。入力欄は 3px。

ログイン
Primary CTA (Rose)
18px / 500 / radius: 0
WEB STORE
Secondary (Outline)
14px / 500 / radius: 0
詳しく見る
Burgundy
14px / 500 / radius: 0
お気に入り
Outline Rose
14px / 500 / radius: 0
HOME
Pill (HOME only)
14px / 500 / radius: 30px
在庫切れ
Disabled
14px / 500 / opacity: 0.5
05 / Cards

Cards

FITTING
Service

パーソナルフィッティングサービス

専門のフィッターが、お客さま一人ひとりのからだに合った下着選びをお手伝いします。

詳しくはこちら →
BODY BOOK
Column

からだのことを知る Body Book

ワコール人間科学研究開発センターの研究成果に基づく、からだと下着の関係を解説するコラムです。

詳しくはこちら →
SUSTAINABILITY
CSR

サステナビリティへの取り組み

リサイクル素材の活用やブラジャーリサイクルキャンペーンなど、環境への配慮を大切にしています。

詳しくはこちら →
06 / Forms

Forms

入力欄は border-radius: 3px、背景 #f6f6f6、44px のタッチターゲット高さ。フォーカス時は Wacoal Burgundy、エラーは Wacoal Rose。

デフォルト -- bg: #f6f6f6 / border: 1px solid #323334 / radius: 3px / height: 44px
フォーカス -- border: 1px solid #920b3b（Wacoal Burgundy）
エラー -- border: 1px solid #e67f95（Wacoal Rose）
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1
0 2px 4px rgba(0,0,0,0.06)
Level 2
0 4px 12px rgba(0,0,0,0.08)
Level 3
0 8px 24px rgba(0,0,0,0.12)

基本はフラット。面色（#f6f6f6）でカード領域を区切る手法が主体。商品カードのホバー時に Level 1 程度の影を足すのみ。Level 2 / 3 はモーダル・ダイアログ用の推奨値。

08 / Layout

Layout

Spacing Scale
XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
64px
Container & Content Widths
Container Max 1200px
Main Content 940px
Article 680px
Breakpoints

Mobile: ≤ 767px / Tablet: 768 -- 1024px / Desktop: > 1024px
タッチターゲットは 44px × 44px 以上（WCAG 基準）。