DESIGN.md — モーブピンク×白の透明感スキンケア診断LP（Soft Mauve Survey-Style Skincare Trial LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、シンプル・ミニマル
• キーワード: 透明感・くすみピンク・アンケート形式・白カード・筆記体アクセント・水面の光
• 地の質感: 淡い水面の反射のような光の揺らぎを、背景全体に薄く敷く
• 形: 片側だけ大きく角を丸めた白カード、ピル型バッジ、円形の吹き出しバッジ
• 温度感: やや冷たいラベンダーグレーに、温かみのあるモーブピンクを重ねた中間の温度

Colors

• 地は淡いラベンダーグレーにし、後半の結果・オファーは淡いピンク地へ切り替える
• 質問や本文は白カードに載せる。地に直接長い文章は置かない
• モーブピンクは、キーワードの帯・筆記体のQ番号・見出し文字に限って使う
• 価格と主CTAだけを一段濃いローズにして、目線を集める
• 限定条件は濃いワインレッドのピルにし、ページの中で唯一の濃色として締める
• グラフでは自分の世代をピンク、他の世代をブルーにして対比させる
• keyword-band は文字 #FFFFFF × 背景 #DC9AB2 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C24E78、4.51:1）を使う。
• condition-pill は文字 #D2487B × 背景 #FCFCFD のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CF3C72、4.51:1）を使う。
• circle-badge は文字 #DC9AB2 × 背景 #FCFCFD のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C24E78、4.57:1）を使う。
• price-block は文字 #D2487B × 背景 #F4E4EA のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CF3C72、4.54:1）を使う。
• button-primary は文字 #FFF7FF × 背景 #D7447B のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D3316E、4.51:1）を使う。

Typography

• 大見出しは明朝にし、キーワード部分だけをピンクの手書き風文字にする
• 字間は広め（0.05〜0.12em）にして、余裕のある上品さを出す
• 質問文は中央揃えで、2〜3行に改行する
• Q番号は大きな筆記体を半透明のピンクにし、カードの上端にかぶせる
• 価格の数字は極太で約70px。単位と「税込」は小さく添える
• 訴求文の下には細いピンクの下線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面幅の約88%で、片側に寄せて大きく角を丸める
• Q番号はカードの上端に重ねて配置する
• 選択肢はチェックボックスを左に置き、縦に並べる（行間は約24px）
• Yes/Noの2択は横並びにする
• 質問の下には根拠のグラフを枠付きで入れる

Elevation & Depth

• 白カードの下に、ふんわりした薄いグレーの影（blur 20px程度）をつける
• CTAボタンには、ピンクみのある柔らかいドロップシャドウをつける
• その他は影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで光沢のある白背景に置き、セット写真は角版でカードの幅いっぱいに入れる
• セクション境界: 浅いV字（山形）の面の切り替えに、細線の矢印と筆記体を添える
• カードは右上や右下など、一部の角だけを大きく丸める
• 限定条件は細い枠のピルに入れ、縦線で区切る
• 量を訴求するバッジは、細いピンク枠の円にする
• チェックボックスは角の丸くない正方形の細線にする

Components

• キーワード帯（keyword-band）: 文中の重要語を、モーブピンクの長方形の帯に白文字で入れる
• 限定条件ピル（condition-pill）: 利用条件を縦線で区切って並べる細枠のピル。濃色版もある
• 質問カード（question-card）: 白い角丸カード。上端に筆記体のQ番号を重ね、質問文・区切り線・選択肢を順に置く
• チェック選択肢（checkbox-option）: 細線の正方形チェックボックスと、2行までのテキスト
• 筆記体の区切り（script-divider）: Start・Scrollなどの筆記体と、細いV字矢印線を組み合わせる
• 円形バッジ（circle-badge）: 量や日数を3行で入れる、細いピンク枠の円
• 価格ブロック（price-block）: 左に淡ピンクの条件ラベル、右に極太ローズの価格を置く
• 主CTAボタン（button-primary）: 左から右へ、くすみピンクから濃いローズに変わるグラデーションのピル型。右端に白い三角を置く

Do's and Don'ts

Do - 余白と字間を広く取り、透明感を保つ - 質問ごとに白カードを1枚使い、Q番号は筆記体で重ねる - ピンクはくすんだトーンにそろえ、価格とCTAだけを濃くする - 根拠には簡潔なグラフと※注釈を添える - オファー部では、商品セット・おまけ・価格・CTA・安心文言の順に並べる

Don't - 原色の赤やビビッドなピンクを広い面に使わない - 太いゴシックで見出しを詰め込まない - 濃い背景のセクションを入れない - カードの角を均一な小さい角丸にしない - 装飾アイコンを多用しない

Page Structure

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

1. ファーストビュー（対象年代とアンケート形式であることを示す）: 水面の光の背景に明朝の大見出しとピンクの手書き風キーワード。商品ラインを並べ、透明な球体のバッジを添える
2. 導入・オファー予告（回答するとお得に試せることを伝える）: 白地の中央揃えテキストにピンク帯、限定条件のピル、Startの筆記体区切り
3. 質問1（認知確認）（悩みを自覚させ、根拠を示す）: 白カードにYes/Noの2択と、年代別の横棒グラフ、注釈
4. 質問2（魅力の選択）（特長を選択肢の形で読ませる）: 白カードに特長を7項目ほどチェックボックスで縦に並べる
5. 回答お礼（オファーへの橋渡し）: 淡ピンク地にScrollの区切りを置き、ピンクの明朝で2行のお礼文
6. トライアルセット（セット内容と量を見せる）: ピンクの見出し帯と濃いワインのピル、セット写真に円形バッジを重ねる
7. おまけ・価格・CTA（購入へ誘導する）: おまけをゴールド見出しで紹介し、極太の価格、グラデーションのピル型CTA
8. 安心訴求・フッター（定期縛りがないことを伝えて不安を消す）: ローズの太字に下線を引いた中央揃えの文言と、小さなコピーライト

Imagery

• 商品は白〜淡ラベンダーの光沢背景で撮り、床への映り込みを入れる
• 背景には水面やシルクのような光の揺らぎを、低コントラストで敷く
• 虹色に光る透明な球体を、コピーの入れ物として使う
• セット写真は真俯瞰に近い斜めの角度で、白い箱に並べて撮る
• グラフはフラットな横棒で、ピンクとブルーの2色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約480pxのSPレイアウトをそのまま置き、左右は背景テクスチャで埋める
• PC で広げる場合は、カードを最大幅640pxにして余白を増やす
• 質問の選択肢はPCでも1列のまま保つ
• CTAはPCで最大幅420px程度に抑える

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 行書くと起動時に読み込まれる。