WACOAL (wacoal.jp) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 抽出日: 2026-05-09 / 出典: https://www.wacoal.jp/

1. Visual Theme & Atmosphere

• デザイン方針: 1946年創業の日本を代表するインナーウェアブランド。エレガントかつフェミニンなトーンに、ローズピンクのCTAで華やかさを添えた、商品を引き立てる上品な設計
• 密度: 中密度のブランド型EC。ニュース・コラム・商品カテゴリが整然と並ぶ、ブランドの信頼感を重視したレイアウト
• キーワード: エレガント、フェミニン、ローズピンク、シャープ、上品

設計上のポイント:

• CTAボタンは角丸なし（border-radius: 0px）でシャープな印象を保つ
• 唯一 HOME ピルナビ（border-radius: 30px）で柔らかいアクセント
• テキストカラーは純黒ではなくダークグレー（#323334）で、品のある落ち着きを演出
• 全テキストで一貫した line-height: 1.7 を採用し、日本語の可読性を徹底
• body の font-weight が 500 で、やや太めの安定感のある書体表現
• リンクカラーにブランドバーガンディ（#920b3b）を使用し、ローズピンクCTAとの二層構造でブランドカラーを表現

2. Color Palette & Roles

Brand（ブランドカラー）

• Wacoal Rose (#e67f95): メインのブランドカラー。ログインボタン、主要CTAに使用。温かみのあるローズピンク
• Wacoal Burgundy (#920b3b): リンクテキストカラー。深みのあるワインレッドでブランドの格を表現

Neutral（ニュートラル）

• Text Primary (#323334): 本文テキスト、ナビゲーション、見出し（rgb(50, 51, 52)）。純黒を避けたダークグレー
• Text Inverse (#ffffff): CTA上の白テキスト、フッター内テキスト
• Border (#e0e0e0): 区切り線、ディバイダー
• Input Border (#323334): 入力欄の枠線（テキスト色と同色）
• Background (#ffffff): ページ全体の基本背景
• Surface (#f6f6f6): カード面、入力欄背景、セクション背景（91件出現、最頻出面色）
• Surface Alt (#f7f7f7): 控えめなセクション背景
• Section BG (#ededed): 見出しセクション背景
• Header (rgba(255,255,255,0.95)): 半透明ヘッダー背景
• Footer BG (#323334): ダークフッター背景（テキスト色と同色）

Quick Swatch

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体, YuGothic, 游ゴシック, Yu Gothic, ヒラギノ角ゴ ProN, ヒラギノ角ゴ Pro, ヒラギノ角ゴシック, メイリオ, sans-serif
• 明朝体: 使用なし（全体をゴシック体で統一）

3.2 欧文フォント

• サンセリフ: 和文フォントの内蔵グリフに依存（欧文専用フォント指定なし）
• 等幅: 未定義

Web配信に関する注記:

• 游ゴシック体 / Yu Gothic は Web フォントとして配信されていない。OS インストール済みフォントにフォールバック
• 環境を問わず確実に和文を表示したい場合は、Noto Sans JP（Google Fonts）を Web フォントとしてフォールバックチェーンに追加するのが安全
• 英語専用のディスプレイフォントは使用していない。和文フォントの欧文グリフで統一

3.3 font-family 指定

css/* 全要素共通 */
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
             "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
             "Hiragino Sans", Meiryo, "メイリオ", sans-serif;

フォールバックの考え方:

• 和文フォント（游ゴシック系）を軸に、ヒラギノ角ゴ ProN / Pro をmacOS保険、メイリオをWindows保険として配置
• ヒラギノは ProN（JIS X 0213:2004 字形）と Pro（JIS X 0208 字形）の両方を指定
• Hiragino Sans も併記し、macOS 10.11 以降の新名称に対応
• 欧文専用フォントを先頭に置かない構成（和文フォント内蔵の欧文グリフを使用）

3.4 文字サイズ・ウェイト階層

実測値に基づく主要階層（wacoal.jp トップページ計測）:

3.5 行間・字間

• 本文の行間 (line-height): 1.7（全テキスト要素で統一。日本語の可読性を重視した広めの設定）
• 見出しの行間: 1.7（本文と同じ比率を維持）
• 本文の字間 (letter-spacing): normal（明示的な指定なし）
• 見出しの字間: normal

ガイドライン:

• 全テキスト要素で line-height: 1.7 を統一している点がワコールの特徴。見出しも本文もリズムが揃う
• letter-spacing は全体で normal。意図的に字間を広げていない
• 日本語本文の 1.7 は可読性の高い設定で、インナーウェアブランドの丁寧な印象に合致

3.6 禁則処理・改行ルール

css/* 推奨設定（実測ではグローバルな指定なし、ブラウザデフォルト） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt 等の指定なし */

• palt: 使用していない（実測値はすべて normal）。和文は等幅組版のまま
• kern: ブラウザの自動カーニングのみ
• インナーウェアブランドとして装飾的なフォント機能を抑制し、可読性と清潔感を優先

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（ローズピンク）

• Background: #e67f95
• Text: #ffffff
• Padding: 7.2px 18px
• Border Radius: 0px
• Font Size: 18px
• Font Weight: 500
• 「ログイン」「新規会員登録」等のメインアクション

Secondary（アウトライン）

• Background: transparent
• Text: #323334
• Border: 1px solid #323334
• Padding: 10px 24px
• Border Radius: 0px
• Font Size: 14px
• Font Weight: 500
• 「WEB STORE」等の副次的アクション

HOME Pill

• Background: transparent
• Text: #ffffff
• Border Radius: 30px
• Font Size: 14px
• 唯一の pill 形状。ナビゲーション内で使用

Category Badge

• Background: #ffffff
• Text: #323334
• Padding: 0 8px
• Border Radius: 0px
• Font Size: 16px
• Font Weight: 500
• カテゴリラベル表示

Inputs

• Background: #f6f6f6
• Border: 1px solid #323334
• Border (focus): 1px solid #920b3b（推奨: バーガンディで強調）
• Border Radius: 3px
• Padding: 10px 12px
• Font Size: 16px
• Font Weight: 400
• Height: 44px（タッチターゲット基準）

Cards（ニュース・コンテンツカード）

• Background: #f6f6f6
• Border: なし
• Border Radius: 0px
• Padding: 16px
• Shadow: なし（フラット）

5. Layout Principles

Spacing Scale（推定・8px ベース）

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 16px（モバイル）〜 40px（デスクトップ）

Grid

• Columns: 可変（ニュースカード 3列、商品カテゴリ 4列等）
• Gutter: 16px〜24px

6. Depth & Elevation

実装方針: 基本はフラット。面色（#f6f6f6）でカードを区切る手法が主体。ホバー時に Level 1 程度の影を足すのみ。

7. Do's and Don'ts

Do（推奨）

• CTA ボタンには #e67f95（Wacoal Rose）を使い、border-radius: 0px を維持する
• テキスト色は #323334 を使い、純黒 #000000 を避ける
• リンクテキストには #920b3b（Wacoal Burgundy）を使い、CTA のローズピンクと差別化する
• line-height は全テキスト要素で 1.7 を維持し、統一されたリズムを保つ
• body の font-weight は 500 を使い、安定感のある文字表現にする
• 面背景には #f6f6f6 のライトグレーを使い、セクション・カードを区切る
• 入力欄の border-radius は 3px にし、CTAのシャープさとわずかに区別する
• フッターは #323334 の暗い背景に #ffffff テキストで締める

Don't（禁止）

• CTA ボタンに角丸を加えない（pill は HOME ナビ専用）
• 本文テキストに純黒 #000000 を使わない（ブランドの柔らかさが消える）
• Wacoal Rose #e67f95 を本文テキストに使わない（コントラスト不足）
• リンク色に #e67f95 を使わない（#920b3b バーガンディと使い分ける）
• font-feature-settings: "palt" 1 を適用しない（normal のまま）
• line-height を要素ごとに変えない（全体で 1.7 を統一）
• 装飾的なグラデーションやドロップシャドウを多用しない
• ヘッダーナビの font-size を 24px 以外にしない（実測値に準拠）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは本文 16px をそのまま維持
• セクション見出し（32px）はデスクトップの 70〜80% に縮小（32px -> 24px 程度）
• line-height: 1.7 はレスポンシブでも維持

9. Agent Prompt Guide

クイックリファレンス

Brand Color:     #e67f95 (Wacoal Rose)
Link Color:      #920b3b (Wacoal Burgundy)
Text Color:      #323334 (dark gray, NOT pure black)
Background:      #ffffff
Surface:         #f6f6f6
Border:          #e0e0e0
Input Border:    #323334
Footer BG:       #323334
Header BG:       rgba(255,255,255,0.95)

Body Font:       "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
                 "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
                 "Hiragino Sans", Meiryo, "メイリオ", sans-serif
Body Size:       16px
Body Weight:     500
Body Line Height: 1.7
Letter Spacing:  normal (all elements)
Border Radius:   0px (CTA) / 3px (input) / 30px (HOME pill only)
font-feature-settings: normal (no palt)
Shadow:          none (flat)

プロンプト例

WACOAL（wacoal.jp）のデザインシステムに従って、商品カテゴリページを作成してください。

- プライマリCTA: 背景 #e67f95（Wacoal Rose）、テキスト白、border-radius: 0px、18px / weight 500
- リンクテキスト: #920b3b（Wacoal Burgundy）
- テキスト色: #323334（純黒は使わない）
- フォント: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, "メイリオ", sans-serif / 16px / weight 500
- line-height: 全要素で 1.7 を統一
- カード面: #f6f6f6、border-radius: 0px
- 入力欄: bg #f6f6f6、border 1px solid #323334、radius 3px
- font-feature-settings: normal（palt は使わない）
- box-shadow: none（フラット。ホバー時のみ控えめな影を許容）
- フッター: bg #323334、テキスト #ffffff