LUSH Japan DESIGN.md

LUSH Japan（https://www.lush.com/jp/ja）のデザイン仕様書。 英国発ハンドメイドコスメブランドの日本語サイト。 CSS Custom Properties および computed style 実測値に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ダーク＆イマーシブ。黒い背景がカラフルな商品写真を引き立てる「劇場型」レイアウト。遊び心のある手書き風ディスプレイフォントと、無機質なダークUIのコントラストが LUSH らしさを生む
• 密度: フルブリードの大きなビジュアルセクション。商品画像が主役で、テキストは最小限
• キーワード: シアトリカル、プレイフル、イマーシブ、ダーク、カラフル
• 特徴: 商品名（Rose Jam, Sleepy, Twilight 等）がそのまま CSS 変数名になっている独自の設計トークン体系。純粋な #000000 をページ背景に使用し、極めて高コントラスト。手書き風フォント「handwritten」をセクション見出しに使い、ハンドメイドの世界観を表現

2. Color Palette & Roles

Primary（ブランドカラー）

• Black (#000000 / --black): ページ背景、ブランドの基調色。LUSH のダークモードがデフォルト
• White (#ffffff / --white): 暗い背景上の主要テキスト色、CTA ボタン背景

Neutral（ニュートラル — 黒から白までの階調）

Semantic（意味的な色）

• Error (#eb0000 / --error): エラー、バリデーション失敗。ダーク面用: #ff7024
• Success (#138645 / --success): 成功、完了。ダーク面用: #0b5d45
• Warning (#ffe838 / --warning): 警告、注意喚起。ダーク面用: #9e8d10
• Focus (#535afa / --focus): フォーカスリング。代替: #7b7afa

Accent（アクセント）

• Amber (#e95708): ウォームアクセント、プロモーション等
• Club Green (#0db14b): Lush Club メンバーシップのブランド色
• Club Yellow (#ffe838): Lush Club のアクセント

Product Colors（商品名をトークン名にした独自パレット）

LUSH 独自の設計として、商品名がそのまま CSS 変数名になっている。プロモーションやキャンペーンページで対応する商品のテーマカラーとして使用する。

その他単色: Whoosh Yellow #ffff54, Ultrabland #fcf0e3, Oat #e9e4c0, Peace #d5d0b8, Porridge #bab69a

Text（テキスト色）

• Text on Dark (#ffffff): ダーク背景上のテキスト（デフォルト）
• Text on Light (#000000): ライト面上のテキスト
• Text Secondary (#8f8f8f / Stone): 補助テキスト、メタ情報
• Text Disabled (#5e5e5e / Smoke): 無効状態のテキスト

3. Typography Rules

3.1 和文フォント

LUSH Japan はグローバルサイトの統一デザインを採用しており、和文専用のフォント指定はない。Inter のフォールバック sans-serif により OS デフォルトゴシック体が適用される：

• macOS: ヒラギノ角ゴシック
• Windows: メイリオ / Yu Gothic UI

3.2 欧文フォント

• サンセリフ（本文）: Inter — Google Fonts。見出し・本文・UI すべてに使用
• ディスプレイ（手書き風）: handwritten — LUSH 独自のカスタム Web フォント。セクション見出しやキャンペーンタイトルに使用。ハンドメイドの世界観を表現する
• 等幅: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

3.3 font-family 指定

css/* 本文・UI（グローバル） */
font-family: inter, sans-serif;

/* ディスプレイ（セクション見出し・キャンペーン） */
font-family: "handwritten", sans-serif;

/* 等幅 */
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

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

• Inter を単独指定（CSS 変数 --font-inter）。フォールバックは sans-serif のみ
• handwritten は LUSH 独自の Web フォントで外部では使用不可。preview.html では Google Fonts の Caveat（または Patrick Hand）で代替する
• 和文はすべて OS デフォルトにフォールバック。Inter が和文グリフを含まないため、日本語は OS のゴシック体で表示される

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

3.5 行間・字間

• 本文の行間 (line-height): 1.5（16px / 24px）。日本語としては標準的
• 見出しの行間: 1.1（Display）〜 1.56（H3）。ディスプレイサイズはタイトに詰める
• 本文の字間 (letter-spacing): 0（指定なし）。Inter は元々字間が広めのため追加の letter-spacing は不要
• 見出しの字間: H2 Large のみ -0.5px。大きいサイズではネガティブスペーシングで引き締める
• バッジの字間: 1px（全角換算約 0.08em）。キャップスタイルのラベルで視認性を確保

ガイドライン:

• LUSH はグローバルサイトの統一デザインのため、日本語特有の letter-spacing 調整（0.04em 等）は行っていない
• 日本語本文の line-height: 1.5 はやや狭めだが、短い商品説明文が中心のため許容範囲

3.6 禁則処理・改行ルール

css/* サイトで観測される設定 */
word-break: break-all;
overflow-wrap: break-word;

特別な禁則処理の指定は観測されない。グローバルサイトの汎用設定に依存。

3.7 OpenType 機能

css/* palt / kern の適用なし */

• LUSH Japan では font-feature-settings の指定がない
• Inter は欧文フォントのため palt（プロポーショナル字詰め）は不要
• 和文は OS デフォルトフォントにフォールバックするため、OpenType 機能は適用されない

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

LUSH のボタンはすべてピル型（大きな border-radius）。角ばったボタンは使用しない。

Primary（白背景 CTA）

• Background: #ffffff
• Text: #000000
• Padding: 19px 24px
• Border Radius: 40px（ピル型）
• Font Size: 16px（推定）
• Font Weight: 600

Search Button（ピル型）

• Background: #ffffff
• Text: #000000
• Padding: 8px 20px
• Border Radius: 9999px（完全ピル型）
• Font Size: 14px
• Font Weight: 400

Category Pill（カテゴリフィルター）

• Background: #000000
• Text: #ffffff
• Border: 1px solid #757575
• Padding: 8px 20px
• Border Radius: 23px

Ghost / Cookie Button（透明ボタン）

• Background: transparent
• Text: #ffffff or #000000
• Border: 1px solid #757575
• Padding: 8px 20px
• Border Radius: 50px

Inputs

• Background: #ffffff（ライト面）/ #212121（ダーク面）
• Border: 1px solid #757575
• Border (focus): 2px solid #535afa
• Border Radius: 8px
• Padding: 12px 16px
• Font Size: 16px
• Font Family: inter, sans-serif

Cards（商品カード）

• Background: #000000（ダーク）/ #ffffff（ライト）
• Border: none
• Border Radius: 0px（商品画像はエッジトゥエッジ）
• Padding: 16px（テキストエリアのみ）
• Shadow: none — フラットデザイン。ダーク背景上では陰影不要

Badges / Tags

• Background: 商品テーマカラー（Rose Jam #fd726f, Sleepy #bd8dc8 等）
• Text: #000000 or #ffffff（背景色に応じて）
• Font Size: 12px
• Font Weight: 700
• Letter Spacing: 1px
• Border Radius: 4px
• Padding: 4px 8px
• Text Transform: uppercase（英語ラベルの場合）

5. Layout Principles

Spacing Scale

LUSH のスペーシングは 4px ベースのグリッド。

Container

• Max Width: 1920px（--site-width: 120rem）
• Padding (horizontal): 16px（モバイル）/ 24px（タブレット）/ 48px（デスクトップ）

Grid

• 商品グリッド: 2列（モバイル）→ 3列（タブレット）→ 4列（デスクトップ）
• Gutter: 16px
• フルブリードセクション: 画面幅いっぱいのヒーロー画像・プロモーションバナー

Header

• Height: 99px（--header-height: 99px）
• Background: #000000
• Position: sticky

6. Depth & Elevation

注意: ダーク背景（#000000）上では影がほぼ見えないため、elevation よりもコンテンツの色差・ボーダーで層を表現する。ライト面（Buttermilk, Cloud 等）上でのみ shadow を使用する。

Scroll Animations

• Fade: opacity: 0 → 1（CSS 変数によるスクロール連動）
• Scale: transform: scale(0.7) → scale(1)
• 商品カードやセクション見出しの出現に使用。劇場的な演出を生む

Swiper Navigation

• --swiper-navigation-size: 44px
• --swiper-theme-color: #007aff
• 商品カルーセル、キャンペーンスライダーで使用

7. Do's and Don'ts

Do（推奨）

• ページ背景は #000000 を基本とし、カラフルな商品画像を引き立てるダークステージとして使う
• ボタンは必ずピル型（border-radius 23px 以上）にする。LUSH に角ばったボタンは存在しない
• 商品テーマカラー（Rose Jam, Sleepy 等）をプロモーション素材に積極的に使い、商品の世界観を表現する
• ディスプレイ見出しには手書き風フォント（handwritten / Caveat）を使い、ハンドメイド感を出す
• フルブリードの商品画像をセクション間に配置し、没入感のあるスクロール体験をつくる
• フォーカスリングは #535afa を使い、ダーク背景上でも視認できるようにする
• Inter の font-family 指定はシンプルに inter, sans-serif とする（CSS 変数 --font-inter）

Don't（禁止）

• ボタンに border-radius: 0 や border-radius: 4px を使わない。LUSH のボタンは常にピル型
• ダーク背景上で #000000 のテキストを使わない（見えない）。ダーク面では必ず #ffffff を使う
• 商品テーマカラーをブランドカラーと混同しない。ブランドカラーは黒と白であり、商品色はキャンペーン用
• letter-spacing に palt を適用しない。Inter は欧文フォントで和文の palt は不要
• ライト面（Buttermilk #fbf9ef 等）をメイン背景に多用しない。LUSH はダーク基調のサイト
• 手書き風フォントを本文テキストに使わない。手書き風はディスプレイサイズの見出しのみ
• 商品カードに box-shadow を付けない。ダーク背景上ではフラットなカードが正しい

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準、Swiper ナビゲーションサイズと一致）
• ピル型ボタンの最小パディング: 8px 20px

フォントサイズの調整

• モバイルでは Display 見出しを 28–32px に縮小（デスクトップ 40px）
• H2 Large は 24px に縮小（デスクトップ 30px）
• 本文は 14–16px で維持
• Header height はモバイルでも 99px を維持（--header-height）

9. Agent Prompt Guide

クイックリファレンス

Background: #000000 (dark stage)
Text on Dark: #ffffff
Text on Light: #000000
Warm Surface: #fbf9ef (Buttermilk)
Font (Body): inter, sans-serif
Font (Display): "handwritten", sans-serif → Google Fonts: Caveat
Body Size: 16px
Line Height: 1.5
Button Shape: pill (border-radius: 40px+)
CTA Color: #ffffff bg, #000000 text
Focus Ring: #535afa
Site Width: 1920px (120rem)

プロンプト例

LUSH Japan のデザインシステムに従って、商品一覧ページを作成してください。
- ページ背景: #000000（純粋な黒）
- テキスト: #ffffff（白）
- フォント: inter, sans-serif（本文）/ "Caveat", cursive（セクション見出し）
- 商品カード: 黒背景、影なし、エッジトゥエッジの商品画像
- CTAボタン: 白背景、黒テキスト、border-radius: 40px（ピル型）
- カテゴリフィルター: 黒背景、白テキスト、border: 1px solid #757575、border-radius: 23px
- グリッド: 4列（デスクトップ）/ 2列（モバイル）
- スペーシング: 4px ベースのグリッド（16px, 24px, 32px を多用）

商品テーマカラーの使い方

キャンペーンページで Rose Jam をフィーチャーする場合:
- アクセントカラー: #fd726f（Rose Jam ベース）
- 背景グラデーション: #fd726f → #feeeee（Rose Jam Shade 2）
- ボタンホバー: #ff9d9d（Rose Jam Shade 1）

ただしページ背景は常に #000000 を維持し、
商品テーマカラーはアクセントとして部分的に使用する。