---
version: alpha
name: Pearl Beige Luxury Cosmetics LP
description: 漆黒のセクションと、パール調の光沢がある白・ベージュのセクションを交互に並べたファンデーション LP。明朝の見出しと広い字間、細い罫線、余白の多い組版で、静かな高級感を出している。
colors:
  primary: '#E0B6A0'
  background: '#FFFFFF'
  dark-section: '#0A0907'
  on-dark: '#D7D7D9'
  background-alt: '#F3F2F5'
  tint-1: '#D9CBC3'
  cta: '#1B1513'
  on-cta: '#FFFFFF'
  text: '#232122'
  text-muted: '#9C9695'
  accent-1: '#B8957A'
  line: '#DCD4D3'
  surface: '#FEFEFE'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.12em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.12em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.08em
  accent:
    fontFamily: Montserrat
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2em
  headline-sm:
    fontFamily: Playfair Display
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 7px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.04em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 2px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 28px
  section-label:
    textColor: '{colors.text-muted}'
    typography: '{typography.accent}'
    height: 14px
  badge-new:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 44px
  pearl-bubble:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 110px
  feature-ring:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 70px
  product-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 520px
  banner-split:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 120px
  spec-tag:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 20px
---

# DESIGN.md — 黒×パール×肌色ベージュの高級化粧品 LP（Pearl Beige Luxury Cosmetics LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、シンプル・ミニマル、やさしい・柔らかい
- **キーワード**: パール光沢・黒と肌色の対比・明朝の余白組・細罫線・シアーな光
- **地の質感**: シルクやパールのような虹色の光の帯と、乳液のとろみを写したマクロ写真。地はなめらかなグラデーション。
- **形**: 四角い面と細い線が基本。円形はバブル状のバッジと特徴アイコンにだけ使う。
- **温度感**: ややあたたかい。肌色ベージュと黒が中心。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E0B6A0` | ブランドを象徴する肌色ベージュ | 9% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白地 | 22% | 画素の実測 |
| `dark-section` | `#0A0907` | 思想・世界観を語る黒セクション | 18% | 画素の実測 |
| `on-dark` | `#D7D7D9` | 黒地の上の白文字 | 1% | 画素の実測 |
| `background-alt` | `#F3F2F5` | パール調の淡いグレー地 | 15% | 画素の実測 |
| `tint-1` | `#D9CBC3` | ベージュのグラデーション地 | 6% | 画素の実測 |
| `cta` | `#1B1513` | 詳細ボタンの黒地 | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタンの白文字 | 0% | 画素の主要色に補正 |
| `text` | `#232122` | 見出しの濃いグレー | 1% | 画素の主要色に補正 |
| `text-muted` | `#9C9695` | 英字ラベル・注釈のグレー | 0% | 画素の実測 |
| `accent-1` | `#B8957A` | ゴールドベージュの強調見出し | 0% | 推定 |
| `line` | `#DCD4D3` | 細い区切り罫線・枠線 | 0% | 画素の主要色に補正 |
| `surface` | `#FEFEFE` | パール地に浮かぶ白いカード | 6% | 画素の実測 |

- 黒セクションとパール白セクションを交互に置き、リズムを作る。
- ブランド色の肌色ベージュは、写真や色見本、グラデーション地で見せる。
- ボタンは黒地に白文字の四角形。ビビッドな色は使わない。
- 強調見出しはゴールドベージュの文字で表す。
- 英字のセクションラベルは、明るい地では淡いグレー、黒地ではゴールドベージュにする。
- 線は 1px の淡いグレーだけを使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビュー直下の大コピー | 明朝 | Shippori Mincho | 500 | 26px | 1.6 | 0.12em |
| `headline-lg` | セクションの見出し | 明朝 | Shippori Mincho | 500 | 21px | 1.8 | 0.12em |
| `headline-md` | 技術解説の小見出し | 明朝 | Noto Serif JP | 500 | 16px | 1.7 | 0.08em |
| `accent` | 英字のセクションラベル | 欧文サンセリフ | Montserrat | 400 | 9px | 1.5 | 0.2em |
| `headline-sm` | 特徴バブルのイタリック英字 | 欧文セリフ | Playfair Display | 400 | 12px | 1.4 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 10px | 2.0 | 0.08em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 7px | 1.7 | 0.04em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 10px | 1.4 | 0.1em |

- 見出しは明朝で、字間を 0.1em 以上あける。
- 見出しは 2 行に改行し、短い詩のような句点止めにする。
- セクション冒頭に小さな英字ラベルを置き、字間を広くとる。
- 本文は小さめにして行間を 2.0 前後とり、短い文を段落で区切る。
- 太字は使わない。強調は色と大きさで行う。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品一覧だけ横スクロールのカルーセルにする。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
- 写真は画面幅いっぱいに置き、テキストブロックと交互に並べる。
- テキストは左揃えか中央揃え。中央揃えはコピー主体のセクションに使う。
- 見出しと本文の間は 24px 以上あける。
- パール地の上に、1px の白枠つき半透明のパネルを置く。
- 特徴の円は千鳥配置にして、動きを出す。

## Elevation & Depth

- 影はほとんど使わない。立体感は光沢のある背景で出す。
- 特徴の円は、パール調の光沢とうっすらした外光で浮かせる。
- Back to Top ボタンにだけ、ごく弱い影をつける。

## Shapes

- **角丸**: 小 0px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 矩形で全幅または枠内に収める。円形は色見本と特徴バブルだけ。
- **セクション境界**: 直線で背景色を切り替える。境界は写真やグラデーションでつなぐ。
- ボタンとカードは角丸なしの四角にする。
- 円形は NEW バッジ・特徴の円・SNS アイコンに限る。
- 枠線は 1px の細線にする。
- 色見本は絵の具をひと塗りしたような形で描く。

## Components

- **黒の詳細ボタン**（`button-primary`）: 黒地・白文字の横長の四角いボタン。商品詳細やキャンペーンへ誘導する。
- **英字ラベル**（`section-label`）: 見出しの上に置く、字間の広い小さな英字。下に短い細線を添えることもある。
- **円形の NEW バッジ**（`badge-new`）: 黒い円に白のイタリックで NEW と発売日を入れ、商品画像の左上に重ねる。
- **パール調の特徴バブル**（`pearl-bubble`）: 虹色に光る半透明の円に、イタリックの英字と 2 行の説明を入れる。
- **細線の円形キーワード**（`feature-ring`）: 黒地の上に、細い線の円を 3 つ並べ、中に感触を表す短い語を入れる。
- **商品パネル**（`product-card`）: 白枠つき半透明のパネルに、商品画像・名称・容量と価格・スペック枠・ボタンを縦に並べる。
- **黒×写真の分割バナー**（`banner-split`）: 左が黒地に白の明朝コピー、右が商品写真。右端に細い矢印を置く。
- **細枠のスペックタグ**（`spec-tag`）: 1px のグレー枠で囲んだ小さな四角のタグ。機能を表記する。

## Do's and Don'ts

**Do**
- 黒セクションとパール白セクションを交互に配置する。
- 見出しは明朝にし、字間を広くとって 2 行に組む。
- 各セクションの冒頭に英字ラベルを置く。
- 写真には、肌のマクロやテクスチャーなど質感が伝わるものを選ぶ。
- 注釈は小さく淡いグレーで添える。
- 余白を十分にとり、情報を詰め込まない。

**Don't**
- 赤や黄色など、彩度の高い色のボタンを使わない。
- 角丸の大きいピル型ボタンや、ポップなアイコンを使わない。
- 太いゴシックの見出しや、文字の縁取りを使わない。
- 強いドロップシャドウや立体的なボタンにしない。
- 価格訴求のバッジや、派手な割引表示を置かない。

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（商品の存在感と質感を一目で伝える）: ベージュのシルク背景に商品ボトルを大きく置き、右上に短いコピーを白の明朝で添える。
2. **コンセプトコピー**（商品の新しさを宣言する）: 黒のグラデーション地に、白の明朝で 2 行の大コピーを中央揃えで置く。
3. **ブランドの思想**（背景にある哲学を語る）: 黒地にボトルを大きく写し、左揃えの見出しと短い文を段落で区切って重ねる。
4. **仕上がりの訴求**（肌の仕上がりを見せる）: 全幅のモデル顔アップの下に、白地で明朝の見出しと短い本文を置く。
5. **技術解説**（技術の裏付けを示す）: パール地の導入の後、テクスチャー写真と見出しのブロックを 2 つ交互に並べる。
6. **使用感**（塗った感触を伝える）: 黒地に光の帯を流し、指で塗る写真、円形のキーワード 3 つ、断面図を枠内に並べる。
7. **商品情報**（スペックと購入導線を示す）: パール地の半透明パネルに、商品画像・価格・黒ボタンを置く。
8. **特長まとめ**（特長を 3 点に集約する）: パール調のバブル 3 つと細枠のタグを千鳥に配置し、その下に使い方を罫線で挟んで置く。
9. **カラーバリエーション**（色選びを助ける）: 明るさ×色味の軸で色見本をマップ状に並べ、推奨色を白カードで紹介する。
10. **カラー診断への誘導**（診断ページへ送客する）: 黒地と写真を左右に分けたバナーで誘導する。
11. **キャンペーン**（購入特典を告知する）: シルバー系の光沢地に特典商品の写真、明朝の見出し、注釈、黒ボタンを置く。
12. **関連商品とフッター**（シリーズ内を回遊させる）: 黒地に白カードの商品を横スクロールで並べ、Back to Top、ロゴ、SNS アイコンで締める。

## Imagery

- 商品は鏡面の台に置き、逆光と映り込みで高級感を出す。
- 背景にはシルクの布やパールの光の帯を使い、虹色を淡くにじませる。
- 肌はマクロ撮影し、毛穴が目立たないツヤを見せる。メイクは控えめにする。
- 乳液やクリームのとろみをクローズアップで写す。
- 技術の説明は、ピンクの六角形の角層や水滴のような、柔らかい 3DCG で表す。
- 写真やイラストには、イメージである旨の小さな注記を右下に添える。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では、ファーストビューの商品を左に置き、コピーを右に配置する。
- PC では、思想や仕上がりのセクションを写真とテキストの左右 2 カラムにする。
- PC では、技術解説の写真と文章を左右交互のジグザグに並べる。
- PC では、特徴バブルを横 3 列に並べ、カラーチャートと推奨色カードも横に並べる。
- PC では、本文幅を 900px 前後に収め、背景は全幅のままにする。

## Agent Prompt Guide

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-e49fc721`（元 LP の URL から採番）
- **元 LP**: https://albion.co.jp/site/p/albion_closeup_milkfd.aspx/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。