---
version: alpha
name: Violet Gradient K-Beauty Device Cream LP
description: 深い紫から淡いラベンダーへ移るグラデーション地に、光沢のある製品 3D 画像と透明感のあるモデル写真を大きく置いた、韓国コスメらしい縦長の画像主体 LP。POINT 番号のピル型バッジと太めのゴシック見出しで特長を順に見せ、後半は白カードで試験結果・おすすめ・使い方を整理する。
colors:
  primary: '#8314CB'
  dark-section: '#551C9F'
  on-dark: '#FFFDFE'
  background: '#FFFFFF'
  background-alt: '#F5F1FF'
  tint-1: '#8C81C4'
  tint-2: '#FEE4FF'
  surface: '#FFFFFF'
  text: '#010107'
  text-body: '#333333'
  text-muted: '#8F8F8F'
  accent-1: '#8A2BD6'
  line: '#E4DFE7'
  secondary: '#D9D9D9'
  text-muted-accessible: '#757575'
typography:
  display:
    fontFamily: Noto Sans JP
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.3
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.35
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  label-button:
    fontFamily: Montserrat
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.02em
rounded:
  sm: 8px
  md: 14px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  badge-point:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 24px
  worry-pill:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 28px
  ingredient-chip:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 28px
  before-after:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 230px
  callout-zoom:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 150px
  test-table:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 160px
  recommend-list:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 200px
  step-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 110px
  sheet-header:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    rounded: '{rounded.lg}'
    height: 40px
---

# DESIGN.md — 紫グラデと光沢の韓国コスメ機能クリーム LP（Violet Gradient K-Beauty Device Cream LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、クール・先進的、清潔・爽やか
- **キーワード**: 紫グラデーション・光沢パッケージ・透明感のある肌・POINT 構成・韓国コスメ・成分訴求
- **地の質感**: パールのような光沢と、柔らかなグロー・光線エフェクト。後半は白とラベンダーのフラットな面。
- **形**: ピル型バッジ、角丸 12〜20px のカード、上部だけ角丸のシート状セクション。
- **温度感**: やや冷たい紫系。肌写真の暖色で人らしさを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#8314CB` | ブランド紫（バッジ・強調） | 6% | 画素の実測 |
| `dark-section` | `#551C9F` | ファーストビューの深い紫地 | 8% | 画素の実測 |
| `on-dark` | `#FFFDFE` | 紫地の上の白文字 | 1% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 14% | 画素の実測 |
| `background-alt` | `#F5F1FF` | 淡いラベンダー地（後半） | 12% | 画素の実測 |
| `tint-1` | `#8C81C4` | POINT セクションのくすみ紫グラデ上端 | 7% | 画素の実測 |
| `tint-2` | `#FEE4FF` | ステップバッジの淡紫 | 1% | 画素の実測 |
| `surface` | `#FFFFFF` | 白カード | 8% | 画素の実測 |
| `text` | `#010107` | 見出し文字 | 2% | 画素の実測 |
| `text-body` | `#333333` | 本文 | 2% | 推定 |
| `text-muted` | `#8F8F8F` | 注釈・試験情報 | 1% | 画素の実測 |
| `accent-1` | `#8A2BD6` | 強調見出しの紫文字 | 1% | 推定 |
| `line` | `#E4DFE7` | 表の区切り線 | 1% | 画素の主要色に補正 |
| `secondary` | `#D9D9D9` | 比較の「前」ラベル灰 | 1% | 画素の実測 |
| `text-muted-accessible` | `#757575` | AA を満たす補正値（計算） |  | 計算 |

- 冒頭は濃紫→明るい紫のグラデ地に白文字でまとめる。
- 各 POINT 冒頭はくすみ紫から白へ縦グラデで切り替える。
- 強調は紫 1 色。バッジ・キーワード・チェック記号に限定する。
- 後半の情報パートは淡ラベンダー地に白カードを置く。
- 見出しはほぼ黒、注釈は灰で小さく。
- 暖色は肌やクリームの写真だけで使い、UI には入れない。
- `sheet-header` は文字 `#8F8F8F` × 背景 `#FFFFFF` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#757575`、4.61:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの大見出し | ゴシック | Noto Sans JP | 700 | 34px | 1.3 | 0.0em |
| `headline-lg` | POINT・セクション見出し | ゴシック | Noto Sans JP | 700 | 27px | 1.35 | 0.0em |
| `headline-md` | カード内見出し・強調数字 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.0em |
| `headline-sm` | 紫の小見出し・機能名 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.0em |
| `body-md` | 本文（中央揃え） | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.0em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em |
| `accent` | 英字の見出し・小ラベル | 欧文サンセリフ | Montserrat | 600 | 26px | 1.2 | -0.02em |
| `label-button` | POINT/STEP バッジ | 欧文サンセリフ | Montserrat | 700 | 12px | 1.0 | 0.02em |

- 見出しは太字ゴシックで 2 行に分け、中央揃えにする。
- 見出しは 1 行目を小さく、2 行目を大きくする段差を付けてもよい。
- 成分名などの語には※番号を上付きで付け、セクション下に注釈をまとめる。
- 本文は短い行で 3 行程度に改行し、中央揃えにする。
- 英字はラベルと英語見出しだけに使う。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。比較写真は 2 列、使用シーン写真は 3 列。
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
- 製品画像やモデル写真は全幅で大きく配置する。
- バッジ→見出し→本文→画像の順で縦に積む。
- 情報カードは左右に 6% の余白を取った白い角丸ボックスにする。
- テキストブロックは中央揃え。リストと表だけ左揃えにする。

## Elevation & Depth

- 影はほとんど使わず、面の色差で区切る。
- 製品画像にはグローと光のにじみで浮遊感を出す。
- シート状セクションは上端を角丸にして、写真に重なって見えるようにする。

## Shapes

- **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 全幅の切り抜き製品画像と角版写真。手順写真は円形、比較写真は角丸。
- **セクション境界**: グラデーションの切り替え、または上部が角丸のシートを重ねる。
- バッジはすべてピル型にする。
- カードは角丸 14px 程度にする。
- シート上端にはつまみ風の短いグレー線と小さな英字ラベルを置く。

## Components

- **POINT 番号バッジ**（`badge-point`）: 紫のピル型に白い英字と番号を入れる。
- **悩みピル**（`worry-pill`）: 紫地に置く半透明の白枠ピル。左右にずらして 4 つ並べる。
- **成分チップ**（`ingredient-chip`）: 淡紫の地に紫枠のピル。間を＋でつないで成分を並べる。
- **使用前後比較**（`before-after`）: 写真 2 枚を並べ、下に灰と紫のラベル帯を付ける。使用後側だけ紫枠にする。
- **拡大吹き出し**（`callout-zoom`）: 紫枠のボックスに紫ラベルと拡大写真を入れ、細線とドットで本体とつなぐ。
- **試験結果リスト**（`test-table`）: チェック記号付きの太字見出しの下に、細線で区切った行を並べる。
- **おすすめリスト**（`recommend-list`）: 白カードの中に、紫の＋記号から始まる行を罫線で区切って並べる。
- **使い方ステップ**（`step-item`）: 左に円形写真と点線のつなぎ、右に淡紫の STEP ピルと説明文を置く。
- **シート見出し**（`sheet-header`）: 上部が角丸の白シートに、短いつまみ線と小さな英字ラベルを入れる。

## Do's and Don'ts

**Do**
- 紫は 1 系統に絞り、濃淡だけで変化を付ける。
- 製品は光沢のある 3D 風ビジュアルで大きく見せる。
- POINT ごとにバッジ・2 行見出し・短い本文の型をそろえる。
- 効果を表す表現には※注釈を必ず付ける。
- 後半の情報はラベンダー地に白カードで読みやすくする。

**Don't**
- 赤や黄色などの暖色を UI に使わない。
- 見出しを明朝体や手書き風にしない。
- カードに強い影を付けない。
- 本文を長い段落で詰め込まない。
- 写真をくすませたり、ざらついた質感を加えたりしない。

## Page Structure

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

1. **ファーストビュー**（悩みを提示し、商品の型を伝える）: 濃紫のグラデ地。上部に悩みピルを 4 つ、中央に白の大見出し、下に光線をまとった製品 3D 画像。
2. **手軽さの訴求**（短い使用時間を印象づける）: 淡紫の地に、大きな太字の数字コピーとモデルの使用写真を全幅で置く。
3. **特長 POINT1**（一体型の利便性を示す）: くすみ紫から白へのグラデ地に、バッジと見出し。製品とクリームテクスチャ、モデル写真を重ねる。
4. **使用前後**（変化を視覚で見せる）: 白シートに紫強調の見出しと、2 列の比較写真を置く。
5. **特長 POINT2**（成分を訴求する）: 紫グラデ地に製品写真と拡大吹き出しを置く。成分チップ、分子の 3D イラスト、肌断面図のカードを続ける。
6. **特長 POINT3**（形状の設計を説明する）: 白から淡紫の地にヘッドの拡大写真を置き、紫の点線矢印と線画の図面で機能を注釈する。
7. **使用部位**（対象部位の広さを示す）: 横顔のモデル写真に、白い曲線矢印と部位ラベルを重ねる。
8. **使用シーン**（使い方のイメージを補う）: 白シートの中に、角丸の写真を 3 列で並べる。
9. **安全性・試験**（信頼性を補強する）: ラベンダー地に白カード。円形の紫認証バッジと試験結果リストを 3 件並べる。
10. **おすすめの方**（ターゲットとの合致を示す）: 白カードに、＋記号付きのリストを 4 行置く。
11. **使い方**（手順を理解させる）: 英字見出しの下に動画風の写真、続けて STEP 1〜4 を縦に並べたカード。
12. **保管方法**（使用後の扱いを案内する）: 角丸写真を 2 列並べ、下に中央揃えの説明文を置く。

## Imagery

- 製品はパール調の光沢で、斜めに浮かせた 3D レンダー風にする。
- 背景に紫の光線・ボケ・グローを入れて先進感を出す。
- モデルは白背景・ひっつめ髪で、ツヤ肌のアップを撮る。
- クリームは大きなスワイプ状のテクスチャで、カプセル粒を見せる。
- 成分は紫の分子模型や金色の雫、肌断面の 3D イラストで表す。
- 顔の上に白い光の曲線や矢印を重ねて効果を表現する。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に 750px 前後の SP 幅カラムを置き、左右をラベンダー地で埋める構成を推奨する。
- PC では比較写真や使用シーンの列数はそのままにして、余白を広げる。
- ファーストビューは PC で横長にし、見出しを左、製品画像を右に分けてもよい。
- 見出しは PC で 1.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-f7a209a3`（元 LP の URL から採番）
- **元 LP**: https://anuashop.jp/products/collagen_retinol_refining_cua_sha_cream
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。