グレージュ×モーヴの感性派スキンケア LP

Muted Greige Sensory Skincare LP

くすんだモーヴグレージュの帯見出しと白いカードを軸にした、静かで上品なエイジングケア化粧品の体験キット LP。番号付きステップ、自然風景の写真カード、データ図表、ダーク帯の悩みリストで、感性と根拠を両立させる。

化粧品・スキンケア上品・高級やさしい・柔らかいシンプル・ミニマルナチュラルSP

ダウンロード

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

COLORS

配色

地は明るいグレー、カードは白にして、トーン差だけで面を分ける
大セクション見出しはモーヴグレージュのグラデーション帯に白文字で入れる
強調色はダスティローズと深紅に絞る。使うのは数語程度にする
悩みリストだけはチャコールの帯にして、ページ全体の流れに緊張感をつける
人物の言葉やメッセージはベージュ地にして温かさを出す
原色や彩度の高い色は商品バリエーション写真の中だけで使う

TYPOGRAPHY

書体

displayファーストビューのキャッチゴシック／ Zen Kaku Gothic New 500 ／ 26px ／行間 1.6

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

headline-lg帯見出し（番号＋見出し）ゴシック／ Zen Kaku Gothic New 500 ／ 19px ／行間 1.5

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

headline-mdステップカードの主見出しゴシック／ Zen Kaku Gothic New 700 ／ 19px ／行間 1.5

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

headline-sm提案文・引用見出し明朝／ Shippori Mincho 600 ／ 20px ／行間 1.7

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

body-md本文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 2.0

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

note※注釈ゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.5

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

accent商品名の欧文ラベル・番号欧文サンセリフ／ Montserrat 500 ／ 20px ／行間 1.2

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

label-buttonボタン・小バッジゴシック／ Noto Sans JP 700 ／ 12px ／行間 1.4

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

字間を広め（0.1〜0.15em）にとって、静かな印象をつくる
見出しは小さいリード行と大きい主見出しの 2 段にする
本文の強調は太字に細い下線を組み合わせる
提案文や物語的な一文は明朝体にする
商品名は欧文の大文字にし、和名を縦書きで添える
注釈は※付きの小さいグレー文字にする

PAGE STRUCTURE

セクション構成

ファーストビュー世界観と体験キットを提示するグレーのグラデーション背景に人物と商品を置き、鏡面の映り込みを入れる。左上にキャッチ、下に短い説明とキット写真を並べる
4 ステップの流れ体験から継続までの流れを説明する帯見出しの下に、番号バッジ付きの白カードを 4 枚、シェブロンでつなげて並べる
お客様の声実感を伝えるステップ 3 のカード内に、ピンクグレージュ地と吹き出しを 3 つ入れる
専門家の解説科学的な根拠を示す明朝体の引用見出しを置き、本文と専門家の写真を並べる。下に 2 つのグラフを吹き出し見出し付きで配置する
人物ビジュアル＋オファーキットの内容と価格を提示する人物写真を挟み、光のボケ背景の上に半透明パネル、キット写真、価格ボックスを置く
バリエーション紹介5 種類の違いを伝える帯見出しの下に、風景カードを 5 枚、左右交互の配置で並べる
香りの紹介付属品の魅力を伝える帯見出しと導入文の下に、風景写真と番号名のカードを 4 枚並べる
悩みの提起共感を得るCHECK ラベルと手書き風の見出しの下に、チャコール帯を 4 本並べる。続けて横顔イラストで肌の変化を示す
解決提案ブランドの提案を示す下向き三角の下に白パネルを置き、深紅の明朝体と下線で提案文を入れる
再オファー・関連商品購入を後押しし、関連商品へ送客する価格ボックスを再掲し、おすすめラベルとマーカー見出し、サブボタンを置く
メッセージ人物の言葉で余韻を残す帯見出しの下にベージュ地の引用文を置き、続けて人物写真を入れる
フッター規約などへの導線雪の光のボケ写真の上に、小さなリンク一覧とコピーライトを置く

COMPONENTS

部品

番号付き帯見出し section-bandモーヴグレージュのグラデーション全幅帯。左に 2 桁番号と見出しを白文字で置く
円形ステップ番号 step-badge直径約 45px のモーヴの円に白の 2 桁数字を入れ、カード上端にまたがらせる
ステップカード step-card白いカード。2 段見出しと区切り線の下に本文を置き、右下に商品写真を溶け込ませる
お客様の声吹き出し voice-bubbleピンクグレージュ地の上に、白い吹き出しを左右にずらして 3 つ並べる
風景バリエーションカード variant-card風景写真の上に半透明の白パネルを重ね、欧文名・縦書き和名・説明を載せる
チェック付き悩み帯 worry-listチャコールの帯にチェックアイコンと白文字の悩みを入れ、4 本並べる
価格ボックス price-box白い箱に内容を■で箇条書きし、送料無料バッジと大きな価格を置く
サブ購入ボタン button-secondary白地に細枠。左にサムネイル、右に矢印を置いたリンクボタン
小ラベル label-pillダークのピル型ラベル。CHECK・おすすめなどの導入に使う

守ること

地色・カード・帯をグレー系の階調でまとめる
見出しは字間を広くとり、2 段構成にする
バリエーションは自然風景の写真と組み合わせ、感覚的に伝える
感性の訴求のあとに専門家コメントとグラフを置き、根拠を示す
注釈を必ず添え、誠実さを保つ

DON'T

避けること

鮮やかな原色のボタンや大きな赤い煽り表現を使わない
角丸の大きいポップなカードにしない
強調色を多用しない
文字を詰めた窮屈な組版にしない
影を濃くしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — グレージュ×モーヴの感性派スキンケア LP（Muted Greige Sensory Skincare LP）

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

Overview

業種: 化粧品・スキンケア／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル
キーワード: くすみモーヴ・グレージュ・静けさ・余白・自然風景・感性
地の質感: グレーのグラデーション、水面や光のボケ写真、半透明の白パネルでやわらかい空気感を出す
形: 角丸のない四角いカードと帯、円形の番号バッジ、細い下向きシェブロン
温度感: やや低めの中間色。モーヴとベージュで冷たくなりすぎない

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#AB9B9B`	セクション帯見出し・番号バッジのモーヴグレージュ	6%	画素の実測
`on-primary`	`#F6F0ED`	帯見出し上の白文字	1%	画素の実測
`background`	`#FFFFFF`	ページの地色（明るいグレー）	30%	画素の実測
`surface`	`#FDFDFD`	ステップカード・価格ボックスの白	18%	画素の実測
`background-alt`	`#E3D7D7`	お客様の声ブロックのピンクグレージュ	4%	画素の実測
`tint-1`	`#F7E6D2`	メッセージセクションのベージュ地	4%	画素の実測
`dark-section`	`#333333`	悩みリストの濃いチャコール帯	2%	画素の実測
`on-dark`	`#FFFFFF`	濃色帯上の白文字	0%	画素の主要色に補正
`text`	`#4B4B49`	見出し・本文の濃いグレー	3%	画素の主要色に補正
`text-muted`	`#938B8A`	注釈・小文字のグレー	0%	画素の主要色に補正
`accent-1`	`#B07A7A`	キーワード強調のダスティローズ	0%	推定
`accent-2`	`#B23A3A`	提案文・数値強調の深紅	0%	推定
`line`	`#C7C7C6`	カード内の区切り線・下線	0%	画素の主要色に補正
`accent-3`	`#F4D6D9`	マーカー強調のピンク	0%	推定
`primary-accessible`	`#7D6969`	AA を満たす補正値（計算）		計算

地は明るいグレー、カードは白にして、トーン差だけで面を分ける
大セクション見出しはモーヴグレージュのグラデーション帯に白文字で入れる
強調色はダスティローズと深紅に絞る。使うのは数語程度にする
悩みリストだけはチャコールの帯にして、ページ全体の流れに緊張感をつける
人物の言葉やメッセージはベージュ地にして温かさを出す
原色や彩度の高い色は商品バリエーション写真の中だけで使う
section-band は文字 #F6F0ED × 背景 #AB9B9B のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7D6969、4.54:1）を使う。
step-badge は文字 #F6F0ED × 背景 #AB9B9B のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7D6969、4.54:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューのキャッチ	ゴシック	Zen Kaku Gothic New	500	26px	1.6	0.15em
`headline-lg`	帯見出し（番号＋見出し）	ゴシック	Zen Kaku Gothic New	500	19px	1.5	0.15em
`headline-md`	ステップカードの主見出し	ゴシック	Zen Kaku Gothic New	700	19px	1.5	0.12em
`headline-sm`	提案文・引用見出し	明朝	Shippori Mincho	600	20px	1.7	0.1em
`body-md`	本文	ゴシック	Noto Sans JP	400	13px	2.0	0.05em
`note`	※注釈	ゴシック	Noto Sans JP	400	9px	1.5	0.0em
`accent`	商品名の欧文ラベル・番号	欧文サンセリフ	Montserrat	500	20px	1.2	0.05em
`label-button`	ボタン・小バッジ	ゴシック	Noto Sans JP	700	12px	1.4	0.05em

字間を広め（0.1〜0.15em）にとって、静かな印象をつくる
見出しは小さいリード行と大きい主見出しの 2 段にする
本文の強調は太字に細い下線を組み合わせる
提案文や物語的な一文は明朝体にする
商品名は欧文の大文字にし、和名を縦書きで添える
注釈は※付きの小さいグレー文字にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム
本文ブロックの幅: 画面幅の約 86%
余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
ステップカードは画面幅の約 86% で中央に置き、背景写真をカード右下に溶け込ませる
カードの間は下向きシェブロンでつなぐ
番号バッジはカードの上端にまたがるように配置する
バリエーションカードは全幅近い写真に、半透明の白パネルを重ねる
パネルと商品写真を左右交互に配置する
帯見出しは端から端まで全幅にする

Elevation & Depth

カードにはごく薄いドロップシャドウ（0 2px 8px rgba(0,0,0,.08)）をつける
写真の上のパネルは白 80% 程度の半透明にする
声の吹き出しは白地に細い枠を引き、影はつけない

Shapes

角丸: 小 4px ／中 8px ／大 0px。ボタンは角丸の長方形。
写真の切り抜き: 人物と商品は四角く切り抜き、背景グラデーションになじませる。風景は横長の矩形にする
セクション境界: 直線で区切る。悩み見出しの下だけ下向き三角の切り込みを入れる
カードと帯は角丸なしの四角にする
番号は円形バッジにする
CHECK などの小ラベルはピル型にする
吹き出しは小さな角丸にし、大きな引用符を添える

Components

番号付き帯見出し（section-band）: モーヴグレージュのグラデーション全幅帯。左に 2 桁番号と見出しを白文字で置く
円形ステップ番号（step-badge）: 直径約 45px のモーヴの円に白の 2 桁数字を入れ、カード上端にまたがらせる
ステップカード（step-card）: 白いカード。2 段見出しと区切り線の下に本文を置き、右下に商品写真を溶け込ませる
お客様の声吹き出し（voice-bubble）: ピンクグレージュ地の上に、白い吹き出しを左右にずらして 3 つ並べる
風景バリエーションカード（variant-card）: 風景写真の上に半透明の白パネルを重ね、欧文名・縦書き和名・説明を載せる
チェック付き悩み帯（worry-list）: チャコールの帯にチェックアイコンと白文字の悩みを入れ、4 本並べる
価格ボックス（price-box）: 白い箱に内容を■で箇条書きし、送料無料バッジと大きな価格を置く
サブ購入ボタン（button-secondary）: 白地に細枠。左にサムネイル、右に矢印を置いたリンクボタン
小ラベル（label-pill）: ダークのピル型ラベル。CHECK・おすすめなどの導入に使う

Do's and Don'ts

Do - 地色・カード・帯をグレー系の階調でまとめる - 見出しは字間を広くとり、2 段構成にする - バリエーションは自然風景の写真と組み合わせ、感覚的に伝える - 感性の訴求のあとに専門家コメントとグラフを置き、根拠を示す - 注釈を必ず添え、誠実さを保つ

Don't - 鮮やかな原色のボタンや大きな赤い煽り表現を使わない - 角丸の大きいポップなカードにしない - 強調色を多用しない - 文字を詰めた窮屈な組版にしない - 影を濃くしない

Page Structure

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

ファーストビュー（世界観と体験キットを提示する）: グレーのグラデーション背景に人物と商品を置き、鏡面の映り込みを入れる。左上にキャッチ、下に短い説明とキット写真を並べる
4 ステップの流れ（体験から継続までの流れを説明する）: 帯見出しの下に、番号バッジ付きの白カードを 4 枚、シェブロンでつなげて並べる
お客様の声（実感を伝える）: ステップ 3 のカード内に、ピンクグレージュ地と吹き出しを 3 つ入れる
専門家の解説（科学的な根拠を示す）: 明朝体の引用見出しを置き、本文と専門家の写真を並べる。下に 2 つのグラフを吹き出し見出し付きで配置する
人物ビジュアル＋オファー（キットの内容と価格を提示する）: 人物写真を挟み、光のボケ背景の上に半透明パネル、キット写真、価格ボックスを置く
バリエーション紹介（5 種類の違いを伝える）: 帯見出しの下に、風景カードを 5 枚、左右交互の配置で並べる
香りの紹介（付属品の魅力を伝える）: 帯見出しと導入文の下に、風景写真と番号名のカードを 4 枚並べる
悩みの提起（共感を得る）: CHECK ラベルと手書き風の見出しの下に、チャコール帯を 4 本並べる。続けて横顔イラストで肌の変化を示す
解決提案（ブランドの提案を示す）: 下向き三角の下に白パネルを置き、深紅の明朝体と下線で提案文を入れる
再オファー・関連商品（購入を後押しし、関連商品へ送客する）: 価格ボックスを再掲し、おすすめラベルとマーカー見出し、サブボタンを置く
メッセージ（人物の言葉で余韻を残す）: 帯見出しの下にベージュ地の引用文を置き、続けて人物写真を入れる
フッター（規約などへの導線）: 雪の光のボケ写真の上に、小さなリンク一覧とコピーライトを置く

Imagery

人物は白い服で、グレーの無地背景でやわらかく微笑む。光は柔らかく、彩度は低めにする
商品はすりガラス調の白いボトル。とろみのあるテクスチャーの雫やスプーンを添える
バリエーションは空・雲・雪・浜・雨粒などの自然風景で、名前を連想させる
背景には水面や光のボケ写真を使い、白い半透明パネルを重ねる
悩みの説明は線画調の横顔イラストにし、肌悩みの位置を点線の円で示す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC 画像はないため、SP を基準にした推奨とする
PC では本文の幅を最大 960px 程度で中央寄せにし、帯見出しは全幅のままにする
ステップカードは横 2 分割にし、テキストと写真を並べる
バリエーションカードは横長比率を保ったまま、最大幅 900px に収める
グラフ 2 点と悩み帯は PC で横並びや 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: Muted Greige Sensory Skincare LP
description: くすんだモーヴグレージュの帯見出しと白いカードを軸にした、静かで上品なエイジングケア化粧品の体験キット LP。番号付きステップ、自然風景の写真カード、データ図表、ダーク帯の悩みリストで、感性と根拠を両立させる。
colors:
  primary: '#AB9B9B'
  on-primary: '#F6F0ED'
  background: '#FFFFFF'
  surface: '#FDFDFD'
  background-alt: '#E3D7D7'
  tint-1: '#F7E6D2'
  dark-section: '#333333'
  on-dark: '#FFFFFF'
  text: '#4B4B49'
  text-muted: '#938B8A'
  accent-1: '#B07A7A'
  accent-2: '#B23A3A'
  line: '#C7C7C6'
  accent-3: '#F4D6D9'
  primary-accessible: '#7D6969'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.15em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.12em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.7
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    height: 60px
  step-badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 45px
  step-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 400px
  voice-bubble:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 50px
  variant-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 200px
  worry-list:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 40px
  price-box:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 95px
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 36px
  label-pill:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 20px
---

# DESIGN.md — グレージュ×モーヴの感性派スキンケア LP（Muted Greige Sensory Skincare LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル、ナチュラル
- **キーワード**: くすみモーヴ・グレージュ・静けさ・余白・自然風景・感性
- **地の質感**: グレーのグラデーション、水面や光のボケ写真、半透明の白パネルでやわらかい空気感を出す
- **形**: 角丸のない四角いカードと帯、円形の番号バッジ、細い下向きシェブロン
- **温度感**: やや低めの中間色。モーヴとベージュで冷たくなりすぎない

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#AB9B9B` | セクション帯見出し・番号バッジのモーヴグレージュ | 6% | 画素の実測 |
| `on-primary` | `#F6F0ED` | 帯見出し上の白文字 | 1% | 画素の実測 |
| `background` | `#FFFFFF` | ページの地色（明るいグレー） | 30% | 画素の実測 |
| `surface` | `#FDFDFD` | ステップカード・価格ボックスの白 | 18% | 画素の実測 |
| `background-alt` | `#E3D7D7` | お客様の声ブロックのピンクグレージュ | 4% | 画素の実測 |
| `tint-1` | `#F7E6D2` | メッセージセクションのベージュ地 | 4% | 画素の実測 |
| `dark-section` | `#333333` | 悩みリストの濃いチャコール帯 | 2% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 濃色帯上の白文字 | 0% | 画素の主要色に補正 |
| `text` | `#4B4B49` | 見出し・本文の濃いグレー | 3% | 画素の主要色に補正 |
| `text-muted` | `#938B8A` | 注釈・小文字のグレー | 0% | 画素の主要色に補正 |
| `accent-1` | `#B07A7A` | キーワード強調のダスティローズ | 0% | 推定 |
| `accent-2` | `#B23A3A` | 提案文・数値強調の深紅 | 0% | 推定 |
| `line` | `#C7C7C6` | カード内の区切り線・下線 | 0% | 画素の主要色に補正 |
| `accent-3` | `#F4D6D9` | マーカー強調のピンク | 0% | 推定 |
| `primary-accessible` | `#7D6969` | AA を満たす補正値（計算） |  | 計算 |

- 地は明るいグレー、カードは白にして、トーン差だけで面を分ける
- 大セクション見出しはモーヴグレージュのグラデーション帯に白文字で入れる
- 強調色はダスティローズと深紅に絞る。使うのは数語程度にする
- 悩みリストだけはチャコールの帯にして、ページ全体の流れに緊張感をつける
- 人物の言葉やメッセージはベージュ地にして温かさを出す
- 原色や彩度の高い色は商品バリエーション写真の中だけで使う
- `section-band` は文字 `#F6F0ED` × 背景 `#AB9B9B` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7D6969`、4.54:1）を使う。
- `step-badge` は文字 `#F6F0ED` × 背景 `#AB9B9B` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7D6969`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.6 | 0.15em |
| `headline-lg` | 帯見出し（番号＋見出し） | ゴシック | Zen Kaku Gothic New | 500 | 19px | 1.5 | 0.15em |
| `headline-md` | ステップカードの主見出し | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.12em |
| `headline-sm` | 提案文・引用見出し | 明朝 | Shippori Mincho | 600 | 20px | 1.7 | 0.1em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em |
| `accent` | 商品名の欧文ラベル・番号 | 欧文サンセリフ | Montserrat | 500 | 20px | 1.2 | 0.05em |
| `label-button` | ボタン・小バッジ | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em |

- 字間を広め（0.1〜0.15em）にとって、静かな印象をつくる
- 見出しは小さいリード行と大きい主見出しの 2 段にする
- 本文の強調は太字に細い下線を組み合わせる
- 提案文や物語的な一文は明朝体にする
- 商品名は欧文の大文字にし、和名を縦書きで添える
- 注釈は※付きの小さいグレー文字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
- ステップカードは画面幅の約 86% で中央に置き、背景写真をカード右下に溶け込ませる
- カードの間は下向きシェブロンでつなぐ
- 番号バッジはカードの上端にまたがるように配置する
- バリエーションカードは全幅近い写真に、半透明の白パネルを重ねる
- パネルと商品写真を左右交互に配置する
- 帯見出しは端から端まで全幅にする

## Elevation & Depth

- カードにはごく薄いドロップシャドウ（0 2px 8px rgba(0,0,0,.08)）をつける
- 写真の上のパネルは白 80% 程度の半透明にする
- 声の吹き出しは白地に細い枠を引き、影はつけない

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物と商品は四角く切り抜き、背景グラデーションになじませる。風景は横長の矩形にする
- **セクション境界**: 直線で区切る。悩み見出しの下だけ下向き三角の切り込みを入れる
- カードと帯は角丸なしの四角にする
- 番号は円形バッジにする
- CHECK などの小ラベルはピル型にする
- 吹き出しは小さな角丸にし、大きな引用符を添える

## Components

- **番号付き帯見出し**（`section-band`）: モーヴグレージュのグラデーション全幅帯。左に 2 桁番号と見出しを白文字で置く
- **円形ステップ番号**（`step-badge`）: 直径約 45px のモーヴの円に白の 2 桁数字を入れ、カード上端にまたがらせる
- **ステップカード**（`step-card`）: 白いカード。2 段見出しと区切り線の下に本文を置き、右下に商品写真を溶け込ませる
- **お客様の声吹き出し**（`voice-bubble`）: ピンクグレージュ地の上に、白い吹き出しを左右にずらして 3 つ並べる
- **風景バリエーションカード**（`variant-card`）: 風景写真の上に半透明の白パネルを重ね、欧文名・縦書き和名・説明を載せる
- **チェック付き悩み帯**（`worry-list`）: チャコールの帯にチェックアイコンと白文字の悩みを入れ、4 本並べる
- **価格ボックス**（`price-box`）: 白い箱に内容を■で箇条書きし、送料無料バッジと大きな価格を置く
- **サブ購入ボタン**（`button-secondary`）: 白地に細枠。左にサムネイル、右に矢印を置いたリンクボタン
- **小ラベル**（`label-pill`）: ダークのピル型ラベル。CHECK・おすすめなどの導入に使う

## Do's and Don'ts

**Do**
- 地色・カード・帯をグレー系の階調でまとめる
- 見出しは字間を広くとり、2 段構成にする
- バリエーションは自然風景の写真と組み合わせ、感覚的に伝える
- 感性の訴求のあとに専門家コメントとグラフを置き、根拠を示す
- 注釈を必ず添え、誠実さを保つ

**Don't**
- 鮮やかな原色のボタンや大きな赤い煽り表現を使わない
- 角丸の大きいポップなカードにしない
- 強調色を多用しない
- 文字を詰めた窮屈な組版にしない
- 影を濃くしない

## Page Structure

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

1. **ファーストビュー**（世界観と体験キットを提示する）: グレーのグラデーション背景に人物と商品を置き、鏡面の映り込みを入れる。左上にキャッチ、下に短い説明とキット写真を並べる
2. **4 ステップの流れ**（体験から継続までの流れを説明する）: 帯見出しの下に、番号バッジ付きの白カードを 4 枚、シェブロンでつなげて並べる
3. **お客様の声**（実感を伝える）: ステップ 3 のカード内に、ピンクグレージュ地と吹き出しを 3 つ入れる
4. **専門家の解説**（科学的な根拠を示す）: 明朝体の引用見出しを置き、本文と専門家の写真を並べる。下に 2 つのグラフを吹き出し見出し付きで配置する
5. **人物ビジュアル＋オファー**（キットの内容と価格を提示する）: 人物写真を挟み、光のボケ背景の上に半透明パネル、キット写真、価格ボックスを置く
6. **バリエーション紹介**（5 種類の違いを伝える）: 帯見出しの下に、風景カードを 5 枚、左右交互の配置で並べる
7. **香りの紹介**（付属品の魅力を伝える）: 帯見出しと導入文の下に、風景写真と番号名のカードを 4 枚並べる
8. **悩みの提起**（共感を得る）: CHECK ラベルと手書き風の見出しの下に、チャコール帯を 4 本並べる。続けて横顔イラストで肌の変化を示す
9. **解決提案**（ブランドの提案を示す）: 下向き三角の下に白パネルを置き、深紅の明朝体と下線で提案文を入れる
10. **再オファー・関連商品**（購入を後押しし、関連商品へ送客する）: 価格ボックスを再掲し、おすすめラベルとマーカー見出し、サブボタンを置く
11. **メッセージ**（人物の言葉で余韻を残す）: 帯見出しの下にベージュ地の引用文を置き、続けて人物写真を入れる
12. **フッター**（規約などへの導線）: 雪の光のボケ写真の上に、小さなリンク一覧とコピーライトを置く

## Imagery

- 人物は白い服で、グレーの無地背景でやわらかく微笑む。光は柔らかく、彩度は低めにする
- 商品はすりガラス調の白いボトル。とろみのあるテクスチャーの雫やスプーンを添える
- バリエーションは空・雲・雪・浜・雨粒などの自然風景で、名前を連想させる
- 背景には水面や光のボケ写真を使い、白い半透明パネルを重ねる
- 悩みの説明は線画調の横顔イラストにし、肌悩みの位置を点線の円で示す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像はないため、SP を基準にした推奨とする
- PC では本文の幅を最大 960px 程度で中央寄せにし、帯見出しは全幅のままにする
- ステップカードは横 2 分割にし、テキストと写真を並べる
- バリエーションカードは横長比率を保ったまま、最大幅 900px に収める
- グラフ 2 点と悩み帯は PC で横並びや 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-4437f2b1`（元 LP の URL から採番）
- **元 LP**: https://chef-de-beaute.com/pages/lp-trylotion2604
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://chef-de-beaute.com/pages/lp-trylotion2604（公開状況により表示できない場合があります）
この 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