---
version: alpha
name: Luminous Lavender Prestige Skincare LP
description: 淡いラベンダー〜ピンクのグラデーション地に、濃紺の明朝見出しと細い線で上品にまとめた大手化粧品ブランドの商品LP。中盤は深い紺の夜空と光る球体CGで技術を語り、後半は白地の明快な購入導線で締めている。
colors:
  primary: '#192234'
  dark-section: '#010D2E'
  on-dark: '#FFFFFF'
  background: '#FCFBFC'
  background-alt: '#F5F5F5'
  surface: '#FEFFFE'
  tint-1: '#EED4D7'
  accent-1: '#8695CB'
  accent-2: '#C9A2BC'
  secondary: '#BFB2C4'
  cta: '#16203F'
  on-cta: '#FFFFFF'
  line: '#605D79'
  accent-3: '#2C0B01'
  text-muted: '#6E6E78'
  accent-1-accessible: '#5F73BA'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.06em
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Montserrat
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.12em
rounded:
  sm: 2px
  md: 6px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  product-offer-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 200px
  badge-limited:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 22px
  button-outline-pill:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  accordion-line:
    textColor: '{colors.primary}'
    height: 64px
  anchor-nav-grid:
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 170px
  type-label-band:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 200px
  stat-card:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.sm}'
    height: 140px
  ingredient-block:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 600px
  video-tabs:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 330px
---

# DESIGN.md — 藤色グラデと濃紺の光透明感スキンケアLP（Luminous Lavender Prestige Skincare LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、清潔・爽やか、信頼・誠実
- **キーワード**: 光の透明感・藤色グラデーション・濃紺の明朝・細線とアコーディオン・光る球体CG
- **地の質感**: 霧がかったようなパステルグラデーションと、虹色に光るガラス質のCG。紙っぽさはなく、なめらかで発光感がある。
- **形**: 角は小さめ（2〜8px）の長方形カード。サブボタンは細線のピル型。丸は成分写真と要素バッジにだけ使う。
- **温度感**: やや寒色寄りの柔らかいトーン。藤色・薄桃色・濃紺で落ち着いた大人の印象。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#192234` | 見出し文字・アイコン・CTAアイコンに使う濃紺 | 3% | 画素の実測 |
| `dark-section` | `#010D2E` | 技術を語る夜空色の面 | 6% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 暗い面の上の白文字 | 1% | 画素の主要色に補正 |
| `background` | `#FCFBFC` | 藤色グラデーションの基調地 | 35% | 画素の実測 |
| `background-alt` | `#F5F5F5` | 購入導線・関連商品のグレー地 | 8% | 画素の実測 |
| `surface` | `#FEFFFE` | 商品カード・説明カードの白面 | 9% | 画素の実測 |
| `tint-1` | `#EED4D7` | タイプ名の帯・ステップ図の薄桃色 | 6% | 画素の実測 |
| `accent-1` | `#8695CB` | 成分ブロックの青紫グラデ | 6% | 画素の実測 |
| `accent-2` | `#C9A2BC` | クイズ区画の藤ピンク地 | 5% | 画素の実測 |
| `secondary` | `#BFB2C4` | 成分区画の間を埋めるくすんだ藤グレー | 7% | 画素の実測 |
| `cta` | `#16203F` | 購入リンクのアイコン円（濃紺） | 0% | 画素の主要色に補正 |
| `on-cta` | `#FFFFFF` | CTAアイコン上の白 | 0% | 画素の主要色に補正 |
| `line` | `#605D79` | 区切り線・ピルボタンの枠線 | 0% | 画素の主要色に補正 |
| `accent-3` | `#2C0B01` | 外部ストア用ボタンの焦げ茶 | 0% | 画素の実測 |
| `text-muted` | `#6E6E78` | 注釈・小さな補足文字 | 1% | 推定 |
| `accent-1-accessible` | `#5F73BA` | AA を満たす補正値（計算） |  | 計算 |

- 地の色は藤色〜薄桃色のごく淡いグラデーション。セクションごとに傾きを少しずつ変えて変化をつける。
- 文字・アイコン・線は濃紺に揃え、真っ黒は使わない。
- 技術や成分の説明だけは夜空の紺〜青紫グラデに切り替え、白文字にする。
- 強調ラベルは濃紺の帯に白文字か、薄桃色の帯に濃紺文字の2種類だけ。
- 購入まわりは白とライトグレーの地に戻し、情報を読みやすくする。
- 鮮やかな色は写真（花・果物）とCGの虹色だけに任せる。
- `ingredient-block` は文字 `#FFFFFF` × 背景 `#8695CB` のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#5F73BA`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | メインコピー・受賞数字 | 明朝 | Shippori Mincho | 500 | 30px | 1.4 | 0.06em |
| `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 400 | 24px | 1.45 | 0.05em |
| `headline-md` | 暗い面・カード内の見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.04em |
| `headline-sm` | タイプ名の帯・商品名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.04em |
| `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em |
| `note` | 成分注釈・調査条件 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 満足度の大きな%数字 | 欧文サンセリフ | Montserrat | 400 | 44px | 1.1 | 0.0em |
| `label-button` | ピルボタン・購入リンクの文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.12em |

- 感情に訴える見出しは明朝、機能説明の見出しは太ゴシックと使い分ける。
- 見出しは2〜3行に改行し、行頭を左揃えにする。
- ボタン文字は字間を広め（0.1em以上）にして上品に見せる。
- 数字は細い欧文で大きく、単位の%は小さく添える。
- 注釈は10px前後のグレー文字で、該当ブロックの直下に置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。成分や商品は横2列の小グリッドも使う
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
- 左右の余白は約28px。カード型の区画は約10pxまで外側に広げる。
- 見出し→リード→ビジュアル→補足ボタンの順に縦に積む。
- 詳細情報は＋アイコン付きアコーディオンやピルボタンにしまう。
- 満足度の数値カードは横スクロールのカルーセルにし、ドットインジケーターを付ける。
- 購入導線はページの最上部（ファーストビュー直後）と最下部の2カ所に置く。

## Elevation & Depth

- 影はほぼ使わず、面の色差と細い線で階層を作る。
- 商品カードは白面に、ごく薄い影か地との色差だけで浮かせる。
- CGや光の表現で奥行きを出し、UIパーツ自体は平面のままにする。

## Shapes

- **角丸**: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
- **写真の切り抜き**: 人物と商品は四角の全幅写真。成分は円形に切り抜き、テクスチャは白地に置いた液だまりにする。
- **セクション境界**: 直線で切り替え、グラデーションでなめらかにつなぐ。
- ピルボタンは白地に濃紺の細線（1px）、右端に＋または矢印を付ける。
- ラベル帯は角丸なしか、片側だけ角丸にする。
- 要素バッジ（透明感など）は角丸6pxで、虹色がかった淡いグラデにする。
- タブは上側だけ角丸にしたフォルダ型。

## Components

- **数量限定セットカード**（`product-offer-card`）: 左に商品写真、右に濃紺のラベル帯・商品名・価格を置く。下段は白帯に購入リンクと濃紺の丸いカートアイコン。
- **濃紺ラベル帯**（`badge-limited`）: 数量限定などを示す小さな長方形の帯。濃紺地に白の太文字。
- **細線ピルボタン**（`button-outline-pill`）: 白地に濃紺1pxの枠線を付けたピル型ボタン。文字は中央で字間を広くとり、右端に＋か外部リンクのアイコン。
- **線区切りアコーディオン**（`accordion-line`）: 上下を細線で区切った行。左に項目名、右に＋アイコン。
- **目次ナビ（3×2）**（`anchor-nav-grid`）: 縦線で区切った3列×2段のリンク。短い項目名の下に小さな下向き矢印を付ける。
- **タイプ名の帯＋説明カード**（`type-label-band`）: 薄桃色の帯にタイプ名、その下の白いカードに太字の小見出しと説明文。続けてチェックボックス付きのリストを並べる。
- **満足度の数値カード**（`stat-card`）: 淡い藤色グラデのカード。上に2行の評価項目、下に大きな%数字。横スクロールで並べる。
- **成分ブロック**（`ingredient-block`）: 青紫グラデの区画。左上に薄桃色のタグを置き、半透明の白カードに円形の成分画像と成分名を並べる。
- **動画タブ**（`video-tabs`）: フォルダ型の4つのタブ。選択中は薄桃色で、その下の枠内に動画サムネイルと話数のタイトル。

## Do's and Don'ts

**Do**
- 地の色は淡い藤色〜桃色のグラデーションにし、光が差すような明るさを保つ。
- 見出しは濃紺の明朝で、ゆったりした行間にする。
- 技術や成分の説明は暗い紺の面と光る球体CGで、世界観を切り替える。
- 細かい情報はアコーディオンや＋ボタンに収め、画面をすっきり見せる。
- 数値や効果の表現には必ず注釈を添える。

**Don't**
- 赤や黄色の派手なCTAボタンや、太い影は使わない。
- 真っ黒な文字や太すぎるゴシックで見出しを組まない。
- 角丸の大きいポップなカードや、手書き風の装飾を入れない。
- グラデーションの彩度を上げすぎない（パステルの範囲に収める）。
- 1画面に情報を詰め込まず、余白を削らない。

## Page Structure

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

1. **ファーストビュー**（人物と新商品で第一印象をつくる）: 紺から藤色へのグラデ背景に、モデルの顔と光をまとった商品ボトル。NEWの丸い線バッジを添える。
2. **キャッチと購入カード**（商品価値を伝え、すぐに購入できる入口を出す）: 中央揃えの明朝コピー＋太ゴシックの成分訴求。その下に数量限定カードを2枚並べる。
3. **受賞実績**（権威付け）: 月桂樹のイラストで大きな受賞数を挟み、商品写真と受賞一覧のアコーディオンを置く。
4. **目次ナビ**（長いページの回遊を助ける）: 縦線で区切った3×2のリンクグリッド。
5. **肌の理想要素**（訴求の軸を図にする）: 大きな要素バッジ1つと、小さなバッジ3つを横に並べる。
6. **技術コンセプト**（独自研究のストーリーを語る）: 夜空色の面に白文字。円形の要素×要素を見せ、光るモデル写真と浮遊する球体CGを配置する。
7. **成分詳細**（有効成分を具体的に説明する）: 青紫グラデの区画にタグ・見出し・成分カードを置き、メカニズムへのピルボタンを付ける。
8. **動画クイズ**（親しみと理解を深める）: 藤ピンク地にタブ付きの動画カード。
9. **お客様の声（満足度）**（使用者評価で信頼を得る）: 目を閉じたモデル写真に、%数値カードのカルーセルを重ねる。
10. **使用感・タイプ比較**（自分に合うタイプを選ばせる）: 液体のシズル写真、手に取る写真、タイプ帯カード、チェックリストの順に見せる。
11. **香り**（五感への訴求）: 三角形のピラミッド図に、花・果物・木の写真を添える。
12. **使用方法**（朝と夜の使い方を示す）: 太陽と月のアイコンから線を引いたフロー図、ステップ図をタブで切り替える。
13. **ラインナップ**（商品バリエーションの一覧）: NEWの丸バッジ付きの見出しと線区切り。左に商品写真、右に商品名を並べる。
14. **サステナビリティ・購入導線**（企業姿勢を伝え、購入へ誘導する）: 大きな%数字のカルーセル、公式ストアの枠ボタン、グレー地の外部ストアボタン、関連商品カルーセルを置く。

## Imagery

- モデルは素肌感のある30〜40代女性。柔らかい正面光で撮り、肌の艶を見せる。
- 商品はパステルピンクのボトルを淡いグラデ背景に置き、後光のような光彩を添える。
- 成分はガラス玉や虹色の液体球のCG。暗い背景に光の粒を散らす。
- テクスチャは白地にとろりとした透明な液だまりを置き、真上からやや斜めに撮る。
- 装飾は細線アイコン（太陽・月・チェック・＋）だけで、イラストは控えめにする。
- 香りは花・柑橘・木片の切り抜き写真を図に添える。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に約720pxのコンテンツ幅を取り、背景のグラデは全幅に敷く。
- PC では技術・満足度・使用感のブロックを、写真とテキストの左右2カラムにする。
- タイプ比較とラインナップは、PC で2列に並べる。
- 目次ナビは PC で横一列（6項目）にする。
- サステナビリティの数値カードは、PC では3枚を横並びで常に表示する。

## 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-5ca51cd1`（元 LP の URL から採番）
- **元 LP**: https://www.shiseido.co.jp/elixir/promotion/brightening-lotion-emulsion/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 中（10/15 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。