---
version: alpha
name: Pastel Spring Gradient Skincare Story LP
description: 黄・ピンク・黄緑・ラベンダーのパステルグラデーションにノイズ質感を重ね、文字はすべて深緑で統一した季節ケア訴求のスキンケアLP。人物イラストと手書き調の装飾で読み物のように流し、最後に商品カードと購入ボタンへつなぐ。
colors:
  primary: '#087617'
  background: '#F4EED4'
  background-alt: '#F9E59E'
  tint-1: '#C6D5E5'
  tint-2: '#F3CEBB'
  secondary: '#C6D5E5'
  surface: '#FEFEFE'
  cta: '#057D22'
  on-cta: '#FDFDF6'
  marker: '#FCFC05'
  accent-1: '#E8A0A8'
  accent-2: '#6FE8EA'
  accent-3: '#E5F98D'
  line: '#609C6F'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.12em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1em
  body-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 16px
    fontWeight: 500
    lineHeight: 2.4
    letterSpacing: 0.08em
  body-md:
    fontFamily: Zen Maru Gothic
    fontSize: 15px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.06em
  accent:
    fontFamily: Montserrat Alternates
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.12em
  label-button:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
rounded:
  sm: 0px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    height: 44px
  price-band:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    height: 32px
  cloud-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 240px
  pill-quote:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 34px
  highlight-pill:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.full}'
    height: 34px
  emblem-oval:
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 120px
  product-frame:
    backgroundColor: '{colors.surface}'
    height: 240px
  marker-text:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 28px
  section-nav:
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 36px
---

# DESIGN.md — 春色パステル×深緑文字のスキンケアLP（Pastel Spring Gradient Skincare Story LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: やさしい・柔らかい、かわいい、ナチュラル、清潔・爽やか
- **キーワード**: パステルグラデーション・ノイズ質感・深緑の文字・人物イラスト・波形の区切り・読み物型
- **地の質感**: 全面に細かいざらつきノイズを乗せ、紙のようなマット感。一部にドット柄やひし形の格子柄を薄く敷く
- **形**: 波線・有機的なブロブ曲線でセクションを区切る。雲形の吹き出し、楕円のエンブレム、角丸の点線吹き出し
- **温度感**: 暖かく明るい春の日差し。黄色の光の放射と黄緑のグラデーション

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#087617` | 見出し・本文・価格帯の深緑 | 4% | 画素の実測 |
| `background` | `#F4EED4` | 商品紹介エリアの生成り地 | 23% | 画素の実測 |
| `background-alt` | `#F9E59E` | データ解説セクションの淡い黄色地 | 19% | 画素の実測 |
| `tint-1` | `#C6D5E5` | 悩み提起セクションのラベンダー地 | 7% | 画素の実測 |
| `tint-2` | `#F3CEBB` | アフターケア説明のピーチ地 | 6% | 画素の主要色に補正 |
| `secondary` | `#C6D5E5` | セクション区切りの淡い青灰地 | 5% | 画素の実測 |
| `surface` | `#FEFEFE` | 吹き出し・ボタン・図版の白 | 6% | 画素の実測 |
| `cta` | `#057D22` | 購入ボタンの枠線・下線と価格帯 | 2% | 画素の実測 |
| `on-cta` | `#FDFDF6` | 価格帯上の白文字 | 0% | 画素の主要色に補正 |
| `marker` | `#FCFC05` | キーワード下の黄色マーカー・強調 | 2% | 画素の実測 |
| `accent-1` | `#E8A0A8` | 比較アイコンのピンク枠 | 0% | 推定 |
| `accent-2` | `#6FE8EA` | 比較アイコンの水色枠・英字アクセント | 0% | 推定 |
| `accent-3` | `#E5F98D` | ブロブ曲線の黄緑 | 3% | 画素の実測 |
| `line` | `#609C6F` | 区切りの点線・細罫 | 0% | 画素の主要色に補正 |

- 文字色は見出し・本文・数字までほぼ深緑1色で統一し、黒は使わない
- セクションごとに地色を黄→ラベンダー→青灰→生成り→ピーチ→黄緑と季節感のあるパステルで切り替える
- 地色は単色にせずグラデーションとノイズを重ねて柔らかく見せる
- 強調は鮮やかな黄色マーカーか、深緑地に白抜きのピル型ラベルで行う
- 商品エリアは生成り地にして落ち着かせ、深緑の価格帯とボタンを目立たせる
- ピンク・水色は比較図やイラストの差し色に限る

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVと大見出し | ゴシック | Zen Kaku Gothic New | 500 | 36px | 1.35 | 0.12em |
| `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 30px | 1.4 | 0.1em |
| `headline-md` | 商品名・小見出し | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.4 | 0.1em |
| `body-lg` | 導入の中央揃え詩的な本文 | 丸ゴシック | Zen Maru Gothic | 500 | 16px | 2.4 | 0.08em |
| `body-md` | 解説・商品説明の本文 | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 2.0 | 0.06em |
| `accent` | 円弧状の英字装飾・エンブレム | 欧文サンセリフ | Montserrat Alternates | 600 | 18px | 1.2 | 0.12em |
| `label-button` | 購入ボタン・価格帯 | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.3 | 0.2em |
| `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em |

- 見出しは字間を広めにとり、細めのウェイトで軽やかにする
- 導入文は中央揃えで短い行に区切り、行間を広くとる
- 解説本文は左揃えで太めの丸ゴシックにする
- 英字はジオメトリックなサンセリフで円弧や斜めに配置する
- 一部の見出しは白抜き＋緑の縁取りで書く
- 縦書きのラベルをFVや図解のアクセントに使う
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
- 中央揃えの見出しと左揃えの本文を交互に使う
- セクション間は大きく余白をとり、波線やブロブ曲線で区切る
- 商品は縦に並べ、点線の罫で区切る
- 図版は左右に余白を残した白い枠に入れる
- 番号付きの大きな数字見出しで手順を示す

## Elevation & Depth

- 影はほぼ使わずフラットにする
- 奥行きはグラデーションと光の放射で出す
- ボタンは下辺だけを太い深緑の線にして厚みを出す

## Shapes

- **角丸**: 小 0px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
- **写真の切り抜き**: 商品写真は切り抜き。ドット柄の正方形枠の中に置く
- **セクション境界**: 波線の境界・有機的なブロブ曲線・細い横罫
- 購入ボタンと価格帯は角丸なしの長方形
- 強調ラベルとキーワードの吹き出しはピル型
- 解説は点線縁の雲形吹き出しに入れる
- ブランドモチーフは楕円のエンブレムにする

## Components

- **購入ボタン**（`button-primary`）: 白地に深緑の細枠、下辺だけ太線。右端に小さな三角矢印
- **価格帯**（`price-band`）: 深緑地に白文字で入数と価格。2段で長さを変えて並べる
- **雲形吹き出し**（`cloud-bubble`）: ドット柄の地の上に白い点線縁の雲を置き、中に左揃えの本文を入れる
- **つぶやき吹き出し**（`pill-quote`）: 白いピル型の点線枠に短いひと言を入れ、左右にずらして2つ並べる
- **強調ラベル**（`highlight-pill`）: 文中のキーワードを深緑のピル型に白抜きで入れる
- **楕円エンブレム**（`emblem-oval`）: 二重線の楕円に英字を円弧状に配置し、人物イラストと組み合わせる
- **商品画像枠**（`product-frame`）: 白地に緑のドット柄、細い緑枠の正方形に切り抜いた商品を配置
- **マーカー強調**（`marker-text`）: キーワードの下半分に鮮やかな黄色のマーカーを引く
- **連番ナビ**（`section-nav`）: 上下を罫で区切った帯の中央に小さな番号ラベル、両端に細い矢印

## Do's and Don'ts

**Do**
- 文字は深緑で統一し、パステルの地とのやさしいコントラストを保つ
- 地にノイズの質感とグラデーションを入れる
- セクション境界は波線やブロブ曲線にする
- 人物イラストは手で顔を覆うなど、季節の悩みを表す仕草で描く
- 英字の円弧装飾で雑誌のようなリズムをつける

**Don't**
- 黒文字や濃い原色の大きな面は使わない
- ボタンを角丸のピルや派手なグラデーションにしない
- 強い影や立体的な装飾をつけない
- 写真の人物モデルを大きく使わない（イラストで表現する）
- 情報を詰め込まず、行間と余白を削らない

## Page Structure

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

1. **ファーストビュー**（季節の肌悩みというテーマを印象づける）: パステルの光の放射と格子柄の上に、楕円エンブレム・3行の大見出し・人物群像イラスト・商品4点を並べ、縦書きラベルを添える
2. **導入・共感**（油断しがちな心理に寄り添う）: 黄緑からピンクのグラデーション地に、中央揃えの詩的な本文とピル型のつぶやき吹き出し2つ
3. **データ提示**（季節の影響の大きさを数値で示す）: 黄色の点線放射の中央に大きな数字、四隅に人物イラスト。棒グラフ風の図版カード
4. **比較解説**（2種類の違いを図で理解させる）: 英字の帯の後、手に持ったプラカード風の円アイコン2つを点線で分けて比較し、断面図と本文を続ける
5. **悩みあるある**（よくある失敗をシリーズで紹介する）: 波線で区切ったラベンダー地。円弧文字のバッジ、番号付き見出し、ドット地に雲形吹き出し、連番ナビ
6. **ケアのポイント**（2つの課題をまとめて提示する）: 青灰地にイラストのバナー2枚を＋でつなぎ、強調ピルで締める
7. **アフターケア提案**（具体的なケアの手順を示す）: エンブレムの後、大きな&で2つの見出しを結ぶ。ピーチ・黄緑のブロブ地に大きな番号と見出し、商品画像を置く
8. **おすすめ商品**（商品を比較して購入へ誘導する）: 白抜き縁取りの見出しの後、生成り地に商品名・ドット枠の画像・本文・価格帯・購入ボタンを繰り返し、点線で区切る

## Imagery

- 人物はフラットなグラデーションイラスト。顔の細部は省き、パステルの髪色にする
- 太陽・光の放射・キラキラ・シャボン玉で春の日差しを表す
- 小さな黄色の花を、見出しの脇やページ末尾のアクセントに置く
- 商品は真正面または斜めからの切り抜きで、少し傾けて散らす
- 図解はパステルの単純な断面図に、ピル型のラベルを添える
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に SP 幅（約 380px）のカラムを固定し、そのまま見せる
- PC の左右の余白にはパステルのグラデーションと格子柄を敷く
- PC の左側にはエンブレムとテーマのラベルを固定表示する
- PC の右側には商品サムネイルの一覧ナビを固定表示する
- 中央カラム内の構成と文字サイズは SP と同じにする

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