BALMUDA（バルミューダ） DESIGN.md

BALMUDA 公式サイト（https://www.balmuda.com/jp/）のデザイン仕様書。 「The Toaster」「The GreenFan」など、家電を超えたプロダクトデザインで知られるバルミューダのコーポレート / EC サイト。 実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 製品写真を主役にした、徹底した余白と静けさのプロダクト・ジャーナリズム。テキストは脇役、画像が空気をつくる
• 密度: 情報密度は低め。1 セクション 1 製品で大きなビジュアルを切り替える「展示型」レイアウト
• キーワード: ミニマル、写真主役、余白、英語タイトル、湿度のあるグレー
• 特徴: 英語の章タイトルに Adobe Fonts の bodoni-pt-variable（細身のモダン Bodoni）を使用。和文には游ゴシックを最優先する珍しい構成（YuGothic_Family というカスタム名で macOS 内蔵フォントを呼び出す）。CTA はすべて 角丸 60–100px の pill / outline ボタンで、塗り CTA は使わず、ガラスのような rgba(255,255,255,0.8) の半透明白で写真の上に浮かべる。文字色は純黒ではなく #333333、補助テキストは #999999 / #bbbbbb と灰色階調を多用

2. Color Palette & Roles

Primary（ブランドカラー）

• BALMUDA Green (#4ba53a): CSS Custom Property --color-brand として定義された唯一のブランドアクセント。製品ロゴ「The GreenFan」のグリーン。実サイト UI ではほぼ使わず、写真の中の製品色（ファンの羽根）として現れる

Text

• Text Primary (#333333): 本文・見出しの基本色。純黒は使わない
• Text Header (#222222): a タグのナビゲーション・タイトルなど一段濃い表現
• Text Muted Strong (#999999): 製品キャプション・サブテキスト
• Text Muted Light (#bbbbbb): タグライン・引用に使う薄いグレー（59.625px の大きなコピー文字「私たちがプロダクトを作る理由は…」もこの色）
• Text Sub Caption (#9a9a9a): SNS 紹介文など最小キャプション
• Text on Dark (#cccccc): フッターのナビ・コピーライト

Surface（面色 — 微妙なグレー階調が特徴）

• Background White (#ffffff): ページ標準背景
• Surface 1 (#fbfbfb): 製品カードカルーセルの薄い背景。最頻出の面色
• Surface 2 (#f8f8f8): News セクション背景
• Surface 3 (#f3f3f3): About セクション背景。3 段階の灰色で奥行きをつくる
• Glass White (rgba(255, 255, 255, 0.8)): 写真の上に浮かべる pill ボタンの背景
• Surface Header (#383838): ヘッダー上部のダーク帯
• Surface Nav (#202020): グローバルナビゲーション本体
• Surface Cart (#3a3a3a): カート / メニューの引き出し背景
• Surface Footer (#333333): フッター背景
• Surface Cookie (rgba(34, 34, 34, 0.8)): Cookie バナーの半透明オーバーレイ

CTA / Button

• CTA Outline Border (#333333): outline 型 CTA の枠線（pill 60px）
• CTA Glass Background (rgba(255, 255, 255, 0.8)): hero 写真の上に重ねる白磨りガラス pill
• News CTA Background (#999999): News セクションの「最新情報とご案内」CTA（pill 100px）
• Newsletter Field (#ffffff): メール購読欄（角丸 0px / 白背景）

Note: BALMUDA の UI は 3 段階の極薄グレー（#fbfbfb / #f8f8f8 / #f3f3f3） を使い分けることで、純白の中に「層」を表現する。純黒・原色は使わない（製品グリーンの #4ba53a だけが例外）。

3. Typography Rules

3.1 和文フォント

ゴシック体（唯一）:

• 游ゴシック / YuGothic（macOS 内蔵、最優先。YuGothic_Family という独自名でフォントスタックに登場）
• ヒラギノ角ゴ ProN（macOS フォールバック）
• メイリオ（Windows フォールバック）

3.2 欧文フォント

• サンセリフ（本文用）: Open Sans（Google Fonts、和文より先に指定して欧文・数字グリフを担当）
• モダン・セリフ（章タイトル）: bodoni-pt-variable（Adobe Fonts、Variable Bodoni）。「about BALMUDA」「our products」「we make it because we want it.」などの英語見出しで使用

3.3 font-family 指定

css/* 本文・UI 全般 */
font-family: "Open Sans", YuGothic_Family, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

/* 英語の章タイトル（h2.column_title.__en-text、p.about__copy__text_en など） */
font-family: bodoni-pt-variable, sans-serif;

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

• 欧文 (Open Sans) を先頭に置き、数字・アルファベットを Open Sans で表示
• 続けて 游ゴシック → ヒラギノ → メイリオ の順で和文を優先
• bodoni-pt-variable は Adobe Fonts ライセンスのためローカル環境では表示されない。フォールバックの sans-serif に直接落ちるので、ローカルでの再現には Google Fonts の Bodoni Moda などで代替する

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

3.5 行間・字間

• 本文の行間 (line-height): 1.8（18px ÷ 32.4px）が標準。読み物としてのゆとりがある
• 見出しの行間: normal（おおよそ 1.0–1.2）
• letter-spacing: normal（0）を維持。BALMUDA は palt や letter-spacing をほぼ使わず、フォントメトリクスのデフォルトに任せる
• font-feature-settings: normal。palt は不使用

特徴: BALMUDA は欧文サイトに近い行間設計（1.8）を採用しつつ、日本語のレイアウトには字詰めを入れない。純粋なフォントの素の組版を活かしてミニマルな空気を保っている。

3.6 禁則処理・改行ルール

css/* 標準のブラウザ任せ。特別な指定は最小限 */
word-wrap: break-word;

ヒーロー大コピーは <br> を意図的に挿入し、改行位置を手動でコントロールしている。

3.7 OpenType 機能

cssfont-feature-settings: normal;

BALMUDA は palt / kern を使わず、フォントの素のメトリクスで組む。和文のプロポーショナル詰めは適用しない。

3.8 縦書き

該当なし。

4. Component Stylings

Buttons — すべて pill / outline で塗り CTA を使わない

Primary Outline (角丸 60px)

• Background: transparent
• Text: #333333
• Border: 1px solid #333333
• Border Radius: 60px
• Font Size: 15.75px
• Font Weight: 400
• Line Height: 28.35px
• 例: 「すべての製品をみる」「詳しく見る」

Glass Pill (角丸 60px、写真の上)

• Background: rgba(255, 255, 255, 0.8)
• Text: #333333
• Border: none
• Border Radius: 60px
• 例: hero スライドの「製品を見る」「ストアを見る」

News CTA (角丸 100px、塗り)

• Background: #999999
• Text: #ffffff
• Border: 1px solid #999999
• Border Radius: 100px
• 例: 「最新情報とご案内」

Newsletter Submit (フラット白)

• Background: #ffffff
• Text: #333333
• Border: none
• Border Radius: 0px
• Padding: 0px 25.6px

Don't: BALMUDA に塗りのカラー CTA は存在しない。緑（#4ba53a）はロゴ専用。CTA は常に outline か glass pill。

Inputs

• Background: #ffffff
• Border: 必要最小限（実装は薄いライン）
• Border Radius: 0px（newsletter フォーム）
• Padding: 0px 25.6px
• Font Size: 14px

Cards / Sections

• 背景: #fbfbfb / #f8f8f8 / #f3f3f3 の 3 段階
• Border: なし（陰影のみで層を作る）
• Border Radius: 0px（カード自体は四角）
• Padding: 大きめ（製品写真が主役）

5. Layout Principles

Spacing Scale

実測ベースのスペーシングスケール（推定）:

Container

• ページ全幅レイアウトが基本（製品写真は viewport ぎりぎりまで使用）
• 本文セクションのみ中央寄せ（max-width: ≈ 940px〜1200px）

Grid

• ヒーロー: 1 カラム（フルブリード写真）
• 製品ナビ: カルーセル（横スクロール）
• News: 4 カラム（デスクトップ）/ 1 カラム（モバイル）

6. Depth & Elevation

特徴: BALMUDA はドロップシャドウをほぼ使わず、グレースケールの微妙な背景差で奥行きを表現する。

7. Do's and Don'ts

Do（推奨）

• 製品写真をフルブリードで配置し、テキストは最小限にする
• CTA は outline pill (60px) または glass pill (rgba(255,255,255,0.8)) を使う
• 本文の line-height は 1.8 を守る
• 英語の章タイトルには Bodoni 系のセリフ書体を充てる
• グレー階調（#fbfbfb / #f8f8f8 / #f3f3f3）でセクションを区切る

Don't（禁止）

• 純黒 #000000 をテキストに使わない（#333333 を使う）
• 塗りのカラー CTA を作らない（緑はロゴ専用）
• letter-spacing / palt を強制しない（フォント素のままで組む）
• ドロップシャドウで強い陰影を作らない
• 章タイトルに装飾フォントを乱用しない（Bodoni は英語章タイトルのみ）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（pill ボタン高さは 28〜44px、padding を含めて確保）

フォントサイズの調整

• モバイルでは Hero コピー 59.625px → 32〜36px 程度に縮小
• 本文 18px は据え置き（line-height は維持）

9. Agent Prompt Guide

クイックリファレンス

Brand Color (Logo):  #4ba53a (BALMUDA Green / --color-brand)
Text Primary:        #333333
Text Muted:          #999999 / #bbbbbb
Background:          #ffffff
Surface (3-tone):    #fbfbfb / #f8f8f8 / #f3f3f3
Header / Nav:        #383838 / #202020
Body Font:           "Open Sans", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
Display EN Font:     bodoni-pt-variable, sans-serif
Body Size:           18px
Line Height:         1.8 (32.4px / 18px)
CTA Style:           pill 60px outline + glass pill 60px (rgba(255,255,255,0.8))

プロンプト例

このサービスのデザインシステム（バルミューダ風）に従って、
製品紹介ページのヒーローセクションを作成してください。

- 背景: 製品写真をフルブリードで配置（白背景でも可）
- メインコピー: 18px / line-height 1.8 / color #333333
- CTA: 角丸 60px の outline pill（border 1px solid #333、背景 transparent）
- もしくは写真の上に重ねる glass pill（背景 rgba(255,255,255,0.8)）
- 英語サブタイトル: bodoni-pt-variable（フォールバック: serif）/ 24.75px / 色 #bbbbbb
- 本文: "Open Sans", "YuGothic" のスタックで letter-spacing は normal
- 純黒・塗りのカラーボタンは使わない