BAUM (バウム) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

対象サイト: https://www.baumjapan.com/ BAUM（バウム）は資生堂の「樹木との共生」を掲げるボタニカル スキンケアブランド。 木のぬくもりを思わせるパーチメント色の下地に、黒のテキストと角ゼロの罫でエディトリアルに組む。 実測はブランドサイト トップ / products / philosophy に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 樹皮や再生木材を思わせる温かいオフホワイト（パーチメント）を下地に、純黒のテキストと極細の罫だけで組む静かなエディトリアル。写真とゆとりある余白が主役で、UI は角丸ゼロ・装飾ゼロに徹する
• 密度: 低〜中密度。小さめの文字（13〜14px 基調）を広い行間で置き、面ではなく余白と罫で領域を分ける
• キーワード: ボタニカル / パーチメント / エディトリアル / ミニマル / 温かみ
• 形状言語: すべての面・ボタン・入力欄が border-radius: 0。CTA は 1px の黒罫で囲むアウトライン型が基本で、面塗りは黒のみに限定する。丸みや影で飾らず、直線と罫で端正に見せる
• 書体の性格: 欧文はニュートラルなグロテスク（"Basel"）を、ナビ・見出しに 字間 0.08em ほど開いて据える。和文は Noto Sans JP。全体に文字を小さく・字間を少し開いて、静けさと余白感を演出する

2. Color Palette & Roles

Base（下地）

• Background (#f5f3ed): ページ全体の下地。木肌を思わせる温かいオフホワイト＝パーチメント（rgb(245,243,237)）。body の実測背景で、トップ全体を支配する
• Surface (#ffffff): 商品カード・モーダルなど、下地から一段持ち上げる面。純白
• Ink Black (#000000): 見出し・本文・罫・CTA 面の基調色。純黒

Botanical Accent（植物の差し色）

• Warm Gray (#686260): 温かみのあるグレー（rgb(104,98,96)）。補足テキスト・キャプション・薄い面に
• Bark Brown (#604a23): 樹皮を思わせる深いブラウン。写真上のオーバーレイや限定的なアクセントに（実測は透過 rgba(96,74,35,0.4)）
• Sage Gray (#b2b2a6): 緑みを含むセージ／オリーブグレー。区切り面や淡い背景に（実測は透過 rgba(178,178,166,0.6)）

Text（文字色）

• Text Primary (#000000): 見出し・本文。純黒
• Text Muted (#686260): 注釈・補足・フッターの小テキスト

色に関する設計思想

• 基調は「温かいパーチメント下地 #f5f3ed」「純黒の文字と罫 #000000」「白の面 #ffffff」の3色
• 差し色はすべて植物・樹木由来の低彩度カラー（バーク／セージ／ウォームグレー）。彩度の高い色は面で使わない
• ブランドの世界観は「色」ではなく「余白・写真・角ゼロの罫」で作る。色数を絞ることで温かさと静けさを保つ

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を基本に、system-ui → -apple-system（ヒラギノ角ゴ）にフォールバック
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ（見出し・ラベル）: Basel（ニュートラルなネオグロテスク。可変ウェイトで実測 430 前後）。ロゴ・欧文見出し・ナビラベルに使う
• セリフ / 等幅: 使用しない

代替フォントの注記: Basel は Web ライセンスフォントのため、ローカル・preview.html では表示できない。

• Basel → Inter / Helvetica Neue 系（ニュートラルなグロテスクで印象が近い）
• 和文 Noto Sans JP は Google Fonts で直接読み込めるため preview はそのまま使う

3.3 font-family 指定

css/* 本文・UI（和文） */
font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;

/* 欧文見出し・ナビラベル */
font-family: "Basel", "Helvetica Neue", Arial, sans-serif;

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

• 和文 UI は Noto Sans JP を先頭に、OS のシステムフォントへフォールバック
• 欧文の見出し・ラベルは Basel を独立して指定し、Latin グリフを Basel で拾う
• 見出し・本文ともウェイトは 400/430（≒Regular）が中心。階層はサイズと字間で作る

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

3.5 行間・字間

• 本文の行間 (line-height): 1.7（13px 本文で 22px）。日本語の可読性のため広めに取る
• リードの行間: 1.5
• 欧文見出しの行間: 1.0（サイズ＝行高で詰める）
• 本文の字間 (letter-spacing): 0.48px（14px で ≒0.034em）。全体にごくわずかに開く
• 欧文ナビラベルの字間: 1.28px（16px で ≒0.08em） と大きめに開き、余白感を出す

ガイドライン:

• 和文本文は 13〜14px と小さめだが、line-height: 1.7 を確保して読ませる
• 欧文ラベル（PRODUCTS / NEWS / ALL 等）は字間 0.08em ほど開くのがこのブランドの流儀
• 全体を通してウェイトは太らせず、サイズと字間で階層を作る

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

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

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使わない */

• 実測では font-feature-settings: normal。palt は使わず、字間は letter-spacing で調整する
• 小さな文字を字間わずかに開いて置く設計のため、和文の詰め（palt）よりトラッキングを優先する

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

すべて border-radius: 0。ボタンは黒罫のアウトラインが基本、面塗りは黒のみ。

Buttons

Primary（面塗り・黒）

• Background: #000000
• Text: #ffffff
• Border: 1px solid #000000
• Border Radius: 0px
• Padding: 8px 16px
• Font: 12–14px / weight 400 / letter-spacing 0.03em
• 例: 「ログイン」

Secondary（アウトライン）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 0px
• Padding: 8px 16px（幅広リンクは 16px 0）
• Font: 14px / weight 400
• 例: 「新規メンバー登録」「商品一覧」

Inputs

• Background: #ffffff
• Border: 1px solid #000000（細い黒罫、または下線）
• Border (focus): 1px solid #000000（罫を維持し、下線を濃くする）
• Border Radius: 0px
• Padding: 12px 14px
• Font Size: 14–16px

Cards

• Background: #ffffff（または下地のパーチメントのまま）
• Border: なし、または 1px solid #000000 の細罫
• Border Radius: 0px
• Shadow: なし（フラット）
• 商品カードは大判写真＋商品名＋容量／価格の最小構成。角丸ゼロで端正に

5. Layout Principles

Spacing Philosophy

温かいパーチメントの余白を広く取り、大判の商品・樹木写真を主役に据える。要素は角丸ゼロの細罫でゆるやかに区切り、密度を上げすぎない。

Spacing Scale（推定）

Container

• Max Width: 1280px（キービジュアルはフルブリード）
• Padding (horizontal): 24–40px

Grid

• Columns: 12（商品一覧は 2〜4 カラム）
• Gutter: 24–40px
• 写真をゆったり配置し、キャプションは短く小さく添える

6. Depth & Elevation

• 影はほぼ使わない。奥行きは「余白」「写真」「細罫」で表現する

7. Do's and Don'ts

Do（推奨）

• 下地は温かいパーチメント #f5f3ed、文字と罫は純黒 #000000、面は白 #ffffff の3色に絞る
• 差し色は植物・樹木由来の低彩度カラー（バークブラウン #604a23 / セージグレー #b2b2a6 / ウォームグレー #686260）に限定する
• すべての面・ボタン・入力欄を border-radius: 0 にする
• CTA は 1px 黒罫のアウトライン型を基本にし、面塗りは黒だけに絞る
• 欧文ラベル（PRODUCTS / NEWS 等）は字間 0.08em ほど開く。和文本文は 13〜14px でも line-height 1.7 を確保する
• 欧文は Basel（→ Inter 代替）、和文は Noto Sans JP で組む

Don't（禁止）

• 彩度の高い色・原色を面で使わない（差し色は植物由来の低彩度に限定）
• 角丸・強い影を付けない（フラット・角ゼロが基調）
• 和文本文の line-height を 1.5 未満に詰めない
• 和文フォント1つだけを指定しない（必ずフォールバックチェーンを書く）
• 温かいパーチメントの静けさを、装飾や色面で壊さない

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• 本文は 13〜14px 基調だが、モバイルでも 13px 未満に落とさず line-height 1.7 を保つ
• 欧文見出し（38px）はモバイルで 24〜28px に縮小。ナビラベルの広い字間は維持する

9. Agent Prompt Guide

クイックリファレンス

Background:   #f5f3ed（温かいパーチメント）
Surface:      #ffffff
Ink / 罫/CTA: #000000
Bark Brown:   #604a23
Sage Gray:    #b2b2a6
Warm Gray:    #686260
Font(JP):     "Noto Sans JP", system-ui, -apple-system, sans-serif
Font(EN):     "Basel", "Helvetica Neue", Arial, sans-serif（→ Inter 代替）
Body Size:    13–14px
Line Height:  1.7（和文本文）
Label 字間:   0.08em（欧文ナビラベル）
palt:         off
Radius:       0（全要素）
Button(主):   #000 bg / #fff / 1px solid #000 / radius 0
Button(副):   transparent / #000 / 1px solid #000 / radius 0
Card:         radius 0 / shadow なし

プロンプト例

BAUM のデザインシステムに従って、ボタニカル スキンケアの商品一覧セクションを作成してください。
- 下地: #f5f3ed（温かいパーチメント）、面: #ffffff、文字と罫: #000000
- フォント（和文）: "Noto Sans JP", system-ui, -apple-system, sans-serif
- フォント（欧文ラベル）: "Basel"（→ Inter 代替）, "Helvetica Neue", Arial, sans-serif
- 本文 13〜14px / line-height 1.7、欧文ラベル（PRODUCTS 等）は letter-spacing 0.08em
- すべての面・ボタン・入力欄は border-radius: 0
- 主 CTA は黒面（#000 / #fff）、副 CTA は 1px 黒罫のアウトライン型、いずれも角ゼロ
- 商品カードは大判写真＋商品名＋容量／価格、影なし・角丸ゼロのフラット
- 差し色はバークブラウン #604a23・セージグレー #b2b2a6 を限定的に

Web ライセンスフォントが使えない環境での代替指針

• 欧文 Basel → Inter / Helvetica Neue 系（ニュートラルなグロテスク）
• 和文 Noto Sans JP は Google Fonts で直接利用可
• 代替でも「温かいパーチメント下地・純黒の文字と細罫・角ゼロのフラットな面・大判写真・低彩度の植物差し色」を守れば世界観は再現できる