青空と水彩の絵画調フレグランス LP

Painterly Sky Blue Fragrance Story LP

油彩・水彩風の空と雲のイラストを全面に敷き、白抜きの文字で物語を語る香水 LP。深い青と灰青の地を写真のように使い、最後に白地の商品購入ブロックへつなげる。

化粧品・スキンケア上品・高級やさしい・柔らかい清潔・爽やかシンプル・ミニマルSP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

上部は空色→深い青→灰青の水彩へと段階的に暗く落ち着かせる
文字は背景が何色でも白抜きで統一
強調色を足さず、色の変化は背景絵だけで出す
購入ブロックのみ白地に黒文字でEC標準に切り替える
CTAの鮮やかな色は購入ブロック内だけに使う

TYPOGRAPHY

書体

displayFVの縦組み風タイトル明朝／ Shippori Mincho 500 ／ 36px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg物語セクションの大見出しゴシック／ Zen Kaku Gothic New 700 ／ 26px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-md数量限定・お客様の声などの見出しゴシック／ Zen Kaku Gothic New 700 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-smFAQの質問明朝／ Noto Serif JP 500 ／ 14px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

body-md物語・回答の中央揃え本文ゴシック／ Noto Sans JP 500 ／ 11px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

accent英字のシーン番号・小さな英文キャプション欧文セリフ／ Cormorant Garamond 400 ／ 26px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

note香料名・注記ゴシック／ Noto Sans JP 400 ／ 8px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

label-button購入ボタンゴシック／ Noto Sans JP 500 ／ 12px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

本文はすべて中央揃えで短い行で改行する
見出しは太めゴシック、FAQやお客様の声は明朝で柔らかく
英字は細いセリフ体で添える
文字に影をつけず白一色で絵の上に載せる
段落間は1行分空けて詩のように区切る

PAGE STRUCTURE

セクション構成

ファーストビュー世界観と商品を一目で伝える雲海と青空の絵画に瓶と箱を配置し明朝タイトル
ブランドストーリー香りに込めた情景を語る深い青地に大見出しと詩的な短文、下部に人物と花畑の絵
香りの説明香調を伝える英字シーン番号＋説明文、白線ピラミッドに素材イラスト
数量限定希少性で購入を促す灰青の水彩地に見出しと短文
お客様の声共感と信頼かぎ括弧の短い感想を3つ中央に
よくある質問不安解消Q.明朝とA.回答を3組縦に
購入ブロック購入白地に商品画像と商品名・価格・2種のボタン
製品レビューレビュー掲載中央見出しと細い区切り線

COMPONENTS

部品

絵画調ファーストビュー hero-painting空と雲の絵に商品と箱を合成、右上に明朝タイトル
物語テキストブロック story-block深い青地に大見出しと短い詩的段落を中央揃え
英字シーン番号 scene-label細いセリフ英字を左に、右に香りの説明文
香調ピラミッド note-pyramid白線三角形を3段に分け、各段に素材イラストと名前
かぎ括弧の声 testimonial-quote二重かぎ括弧で囲んだ短い感想を中央に縦積み
Q&A faq-itemQ.の明朝質問と小さめのA.回答を中央揃え
カート追加ボタン button-secondary白地に黒枠の長方形ボタン
即購入ボタン button-primary鮮やかな紫ベタの長方形ボタン

守ること

背景は絵画調の空・花・水彩で全面を覆う
白抜き中央揃えで余白を大きくとる
香りを物語と情景で語る
英字セリフ体で小さく添える

DON'T

避けること

写真的なリアル背景やベタの原色面を使わない
文字を左揃えで詰めない
バッジや吹き出しなど販促的な装飾を足さない
暖色の強調色を多用しない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 青空と水彩の絵画調フレグランス LP（Painterly Sky Blue Fragrance Story LP）

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

Overview

業種: 化粧品・スキンケア／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル
キーワード: 絵画調の空・白抜き文字・物語仕立て・深い青・水彩の滲み・静かな余白
地の質感: 油彩・水彩の筆致やにじみを背景全面に使い、ベタ面は少ない
形: 装飾は最小限。香りのピラミッドの三角線画のみ。角は直角
温度感: 涼しく澄んだ寒色、ほんのり温かい春の光

Colors

Token	HEX	役割	値の出どころ
`primary`	`#1C6293`	物語・香調セクションの深い青地	画素の実測
`background`	`#FFFFFF`	購入ブロックの白地	画素の実測
`on-primary`	`#FFFFFF`	青地・灰青地の白抜き見出し・本文	画素の主要色に補正
`secondary`	`#83959C`	声・FAQの灰青の水彩地	画素の実測
`background-alt`	`#1581B6`	FVの明るい空色	画素の主要色に補正
`tint-1`	`#ADC2BD`	水彩の淡いにじみ	画素の主要色に補正
`cta`	`#5533EB`	即購入ボタン（決済サービス色）	画素の実測
`on-cta`	`#FDF7FE`	購入ボタンの文字	画素の実測
`text`	`#222222`	購入ブロックの商品名・価格	画素の実測
`text-muted`	`#666666`	税込・送料の注記	推定
`line`	`#FFFFFF`	レビュー見出し下の区切り線	画素の主要色に補正
`dark-section`	`#1C6293`	絵の暗部の濃紺	画素の実測
`background-alt-accessible`	`#147EB1`	AA を満たす補正値（計算）	計算
`secondary-accessible`	`#677980`	AA を満たす補正値（計算）	計算

上部は空色→深い青→灰青の水彩へと段階的に暗く落ち着かせる
文字は背景が何色でも白抜きで統一
強調色を足さず、色の変化は背景絵だけで出す
購入ブロックのみ白地に黒文字でEC標準に切り替える
CTAの鮮やかな色は購入ブロック内だけに使う
hero-painting は文字 #FFFFFF × 背景 #1581B6 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#147EB1、4.52:1）を使う。
testimonial-quote は文字 #FFFFFF × 背景 #83959C のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#677980、4.54:1）を使う。
faq-item は文字 #FFFFFF × 背景 #83959C のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#677980、4.54:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの縦組み風タイトル	明朝	Shippori Mincho	500	36px	1.3	0.05em
`headline-lg`	物語セクションの大見出し	ゴシック	Zen Kaku Gothic New	700	26px	1.5	0.08em
`headline-md`	数量限定・お客様の声などの見出し	ゴシック	Zen Kaku Gothic New	700	20px	1.4	0.08em
`headline-sm`	FAQの質問	明朝	Noto Serif JP	500	14px	1.6	0.05em
`body-md`	物語・回答の中央揃え本文	ゴシック	Noto Sans JP	500	11px	1.8	0.04em
`accent`	英字のシーン番号・小さな英文キャプション	欧文セリフ	Cormorant Garamond	400	26px	1.0	0.02em
`note`	香料名・注記	ゴシック	Noto Sans JP	400	8px	1.4	0.02em
`label-button`	購入ボタン	ゴシック	Noto Sans JP	500	12px	1.2	0.04em

本文はすべて中央揃えで短い行で改行する
見出しは太めゴシック、FAQやお客様の声は明朝で柔らかく
英字は細いセリフ体で添える
文字に影をつけず白一色で絵の上に載せる
段落間は1行分空けて詩のように区切る
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム中央揃え、購入ブロックのみ画像＋情報の2カラム
本文ブロックの幅: 画面幅の約 80%
余白: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算）
セクションは背景絵の切り替えで区切る
見出し上下に広い余白をとる
カードや枠を使わずテキストを直接背景に置く
香調はピラミッド図で3段に図解
FAQは質問と回答を中央に縦積み

Elevation & Depth

影は使わずフラット
奥行きは背景の絵画表現だけで出す
購入ボタンも影なし

Shapes

角丸: 小 0px ／中 4px ／大 4px。ボタンは角丸の長方形。
写真の切り抜き: 全幅の四角い絵画、商品写真は正方形
セクション境界: 直線で背景絵が切り替わる
装飾枠を足さない
図解は細い白線の三角形
ボタンは長方形でわずかな角丸

Components

絵画調ファーストビュー（hero-painting）: 空と雲の絵に商品と箱を合成、右上に明朝タイトル
物語テキストブロック（story-block）: 深い青地に大見出しと短い詩的段落を中央揃え
英字シーン番号（scene-label）: 細いセリフ英字を左に、右に香りの説明文
香調ピラミッド（note-pyramid）: 白線三角形を3段に分け、各段に素材イラストと名前
かぎ括弧の声（testimonial-quote）: 二重かぎ括弧で囲んだ短い感想を中央に縦積み
Q&A（faq-item）: Q.の明朝質問と小さめのA.回答を中央揃え
カート追加ボタン（button-secondary）: 白地に黒枠の長方形ボタン
即購入ボタン（button-primary）: 鮮やかな紫ベタの長方形ボタン

Do's and Don'ts

Do - 背景は絵画調の空・花・水彩で全面を覆う - 白抜き中央揃えで余白を大きくとる - 香りを物語と情景で語る - 英字セリフ体で小さく添える

Don't - 写真的なリアル背景やベタの原色面を使わない - 文字を左揃えで詰めない - バッジや吹き出しなど販促的な装飾を足さない - 暖色の強調色を多用しない

Page Structure

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

ファーストビュー（世界観と商品を一目で伝える）: 雲海と青空の絵画に瓶と箱を配置し明朝タイトル
ブランドストーリー（香りに込めた情景を語る）: 深い青地に大見出しと詩的な短文、下部に人物と花畑の絵
香りの説明（香調を伝える）: 英字シーン番号＋説明文、白線ピラミッドに素材イラスト
数量限定（希少性で購入を促す）: 灰青の水彩地に見出しと短文
お客様の声（共感と信頼）: かぎ括弧の短い感想を3つ中央に
よくある質問（不安解消）: Q.明朝とA.回答を3組縦に
購入ブロック（購入）: 白地に商品画像と商品名・価格・2種のボタン
製品レビュー（レビュー掲載）: 中央見出しと細い区切り線

Imagery

油彩風の青空・積雲・舞う白い羽根
後ろ姿の人物と春の花畑を絵本調に描く
商品は乳白のすりガラス瓶と淡い灰青の箱
香料素材は水彩タッチの単体イラスト
灰青のにじんだ水彩テクスチャを背景に
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は背景絵を全幅に広げ本文は中央 600px 程度に収める
ファーストビューは横長にし商品を中央寄せ
ピラミッド図は最大幅を固定し拡大しすぎない
購入ブロックは画像左・情報右の2カラムを維持

Agent Prompt Guide

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

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

---
version: alpha
name: Painterly Sky Blue Fragrance Story LP
description: 油彩・水彩風の空と雲のイラストを全面に敷き、白抜きの文字で物語を語る香水 LP。深い青と灰青の地を写真のように使い、最後に白地の商品購入ブロックへつなげる。
colors:
  primary: '#1C6293'
  background: '#FFFFFF'
  on-primary: '#FFFFFF'
  secondary: '#83959C'
  background-alt: '#1581B6'
  tint-1: '#ADC2BD'
  cta: '#5533EB'
  on-cta: '#FDF7FE'
  text: '#222222'
  text-muted: '#666666'
  line: '#FFFFFF'
  dark-section: '#1C6293'
  background-alt-accessible: '#147EB1'
  secondary-accessible: '#677980'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.04em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 0px
  md: 4px
  lg: 4px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-painting:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 560px
  story-block:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    height: 560px
  scene-label:
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    height: 60px
  note-pyramid:
    textColor: '{colors.on-primary}'
    typography: '{typography.note}'
    height: 360px
  testimonial-quote:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 40px
  faq-item:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 90px
  button-secondary:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 30px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 30px
---

# DESIGN.md — 青空と水彩の絵画調フレグランス LP（Painterly Sky Blue Fragrance Story LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル
- **キーワード**: 絵画調の空・白抜き文字・物語仕立て・深い青・水彩の滲み・静かな余白
- **地の質感**: 油彩・水彩の筆致やにじみを背景全面に使い、ベタ面は少ない
- **形**: 装飾は最小限。香りのピラミッドの三角線画のみ。角は直角
- **温度感**: 涼しく澄んだ寒色、ほんのり温かい春の光

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#1C6293` | 物語・香調セクションの深い青地 |  | 画素の実測 |
| `background` | `#FFFFFF` | 購入ブロックの白地 |  | 画素の実測 |
| `on-primary` | `#FFFFFF` | 青地・灰青地の白抜き見出し・本文 |  | 画素の主要色に補正 |
| `secondary` | `#83959C` | 声・FAQの灰青の水彩地 |  | 画素の実測 |
| `background-alt` | `#1581B6` | FVの明るい空色 |  | 画素の主要色に補正 |
| `tint-1` | `#ADC2BD` | 水彩の淡いにじみ |  | 画素の主要色に補正 |
| `cta` | `#5533EB` | 即購入ボタン（決済サービス色） |  | 画素の実測 |
| `on-cta` | `#FDF7FE` | 購入ボタンの文字 |  | 画素の実測 |
| `text` | `#222222` | 購入ブロックの商品名・価格 |  | 画素の実測 |
| `text-muted` | `#666666` | 税込・送料の注記 |  | 推定 |
| `line` | `#FFFFFF` | レビュー見出し下の区切り線 |  | 画素の主要色に補正 |
| `dark-section` | `#1C6293` | 絵の暗部の濃紺 |  | 画素の実測 |
| `background-alt-accessible` | `#147EB1` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#677980` | AA を満たす補正値（計算） |  | 計算 |

- 上部は空色→深い青→灰青の水彩へと段階的に暗く落ち着かせる
- 文字は背景が何色でも白抜きで統一
- 強調色を足さず、色の変化は背景絵だけで出す
- 購入ブロックのみ白地に黒文字でEC標準に切り替える
- CTAの鮮やかな色は購入ブロック内だけに使う
- `hero-painting` は文字 `#FFFFFF` × 背景 `#1581B6` のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-alt-accessible`（`#147EB1`、4.52:1）を使う。
- `testimonial-quote` は文字 `#FFFFFF` × 背景 `#83959C` のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#677980`、4.54:1）を使う。
- `faq-item` は文字 `#FFFFFF` × 背景 `#83959C` のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#677980`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの縦組み風タイトル | 明朝 | Shippori Mincho | 500 | 36px | 1.3 | 0.05em |
| `headline-lg` | 物語セクションの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.08em |
| `headline-md` | 数量限定・お客様の声などの見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.08em |
| `headline-sm` | FAQの質問 | 明朝 | Noto Serif JP | 500 | 14px | 1.6 | 0.05em |
| `body-md` | 物語・回答の中央揃え本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.8 | 0.04em |
| `accent` | 英字のシーン番号・小さな英文キャプション | 欧文セリフ | Cormorant Garamond | 400 | 26px | 1.0 | 0.02em |
| `note` | 香料名・注記 | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.02em |
| `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.04em |

- 本文はすべて中央揃えで短い行で改行する
- 見出しは太めゴシック、FAQやお客様の声は明朝で柔らかく
- 英字は細いセリフ体で添える
- 文字に影をつけず白一色で絵の上に載せる
- 段落間は1行分空けて詩のように区切る
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム中央揃え、購入ブロックのみ画像＋情報の2カラム
- **本文ブロックの幅**: 画面幅の約 80%
- **余白**: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算）
- セクションは背景絵の切り替えで区切る
- 見出し上下に広い余白をとる
- カードや枠を使わずテキストを直接背景に置く
- 香調はピラミッド図で3段に図解
- FAQは質問と回答を中央に縦積み

## Elevation & Depth

- 影は使わずフラット
- 奥行きは背景の絵画表現だけで出す
- 購入ボタンも影なし

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 4px。ボタンは角丸の長方形。
- **写真の切り抜き**: 全幅の四角い絵画、商品写真は正方形
- **セクション境界**: 直線で背景絵が切り替わる
- 装飾枠を足さない
- 図解は細い白線の三角形
- ボタンは長方形でわずかな角丸

## Components

- **絵画調ファーストビュー**（`hero-painting`）: 空と雲の絵に商品と箱を合成、右上に明朝タイトル
- **物語テキストブロック**（`story-block`）: 深い青地に大見出しと短い詩的段落を中央揃え
- **英字シーン番号**（`scene-label`）: 細いセリフ英字を左に、右に香りの説明文
- **香調ピラミッド**（`note-pyramid`）: 白線三角形を3段に分け、各段に素材イラストと名前
- **かぎ括弧の声**（`testimonial-quote`）: 二重かぎ括弧で囲んだ短い感想を中央に縦積み
- **Q&A**（`faq-item`）: Q.の明朝質問と小さめのA.回答を中央揃え
- **カート追加ボタン**（`button-secondary`）: 白地に黒枠の長方形ボタン
- **即購入ボタン**（`button-primary`）: 鮮やかな紫ベタの長方形ボタン

## Do's and Don'ts

**Do**
- 背景は絵画調の空・花・水彩で全面を覆う
- 白抜き中央揃えで余白を大きくとる
- 香りを物語と情景で語る
- 英字セリフ体で小さく添える

**Don't**
- 写真的なリアル背景やベタの原色面を使わない
- 文字を左揃えで詰めない
- バッジや吹き出しなど販促的な装飾を足さない
- 暖色の強調色を多用しない

## Page Structure

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

1. **ファーストビュー**（世界観と商品を一目で伝える）: 雲海と青空の絵画に瓶と箱を配置し明朝タイトル
2. **ブランドストーリー**（香りに込めた情景を語る）: 深い青地に大見出しと詩的な短文、下部に人物と花畑の絵
3. **香りの説明**（香調を伝える）: 英字シーン番号＋説明文、白線ピラミッドに素材イラスト
4. **数量限定**（希少性で購入を促す）: 灰青の水彩地に見出しと短文
5. **お客様の声**（共感と信頼）: かぎ括弧の短い感想を3つ中央に
6. **よくある質問**（不安解消）: Q.明朝とA.回答を3組縦に
7. **購入ブロック**（購入）: 白地に商品画像と商品名・価格・2種のボタン
8. **製品レビュー**（レビュー掲載）: 中央見出しと細い区切り線

## Imagery

- 油彩風の青空・積雲・舞う白い羽根
- 後ろ姿の人物と春の花畑を絵本調に描く
- 商品は乳白のすりガラス瓶と淡い灰青の箱
- 香料素材は水彩タッチの単体イラスト
- 灰青のにじんだ水彩テクスチャを背景に
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は背景絵を全幅に広げ本文は中央 600px 程度に収める
- ファーストビューは横長にし商品を中央寄せ
- ピラミッド図は最大幅を固定し拡大しすぎない
- 購入ブロックは画像左・情報右の2カラムを維持

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

SOURCE

出典と注意

元の LP: https://store.zzzgoo.net/pages/ad-e1（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

化粧品・スキンケア生成り×モカと葉・真珠の上品カラコンLPPearl Ivory Botanical Beauty Lens LP 化粧品・スキンケア朱赤×肌色ベージュの化粧下地訴求 LPCoral Red Beauty Primer Appeal LP 化粧品・スキンケア赤い有機形と白地のアスリート起用スキンケアLPRed Blob Athlete Muse Skincare LP 化粧品・スキンケアパステル市松×Y2Kステッカーのカラコン LPPastel Y2K Checker Color Contact LP 化粧品・スキンケア紫×深緑と淡いグラデの植物系スキンケアLPBotanical Purple Cleansing Skincare LP 化粧品・スキンケアくすみモーヴ×キャンディ質感のリップ LPDreamy Mauve Candy Cosmetics LP