DESIGN.md — 藍紫×ラベンダー霧の保湿化粧品お試し LP（Lavender Mist Moisture Skincare Trial LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ラベンダーの霧・水滴・泡・藍紫の締め色・明朝見出し・白い価格カード・繰り返し CTA
• 地の質感: ぼかしたグラデーションに水滴と光のフレアを重ね、しっとりした透明感を出す
• 形: 白い角ばったカード、ピル型の濃紺ボタン、円形の STEP バッジ
• 温度感: 寒色寄り。紫に少し赤みのピンクを差して冷たくなりすぎないようにする

Colors

• 地は淡いラベンダーのグラデーションにして、白一色の面は少なくする
• 藍紫は CTA・STEP 数字・大見出しに限って使う
• 価格は青紫の大きな数字にし、白いカードに乗せる
• キャンペーン帯は青紫から紫への横グラデーションにする
• 特典の文言だけピンク紫を使い、価格まわりにアクセントとして置く
• 悩みセクションは暗い紫のグラデーションにして、ページの中で一段落ち着いた場面を作る

Typography

• 情緒的な見出しは明朝で字間を広めにとり、中央に揃える
• 価格・スペック・ボタンは太いゴシックで読みやすくする
• 英字の見出しはセリフ体の大文字で上品に見せる
• 特典の一文は左右にスラッシュを置いた形にする
• 本文は濃紺で書き、純黒は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。スタッフおすすめのカードだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 価格カードは左右 16px ほど空けて画面幅いっぱいに近く置く
• STEP の商品紹介は画像と文章を左右交互に並べる
• STEP 同士は点線の区切り線で分ける
• 比較図は白いカードの中で 2 列に並べる
• CTA ブロックは FV の直後・中盤・最後の 3 か所に置く

Elevation & Depth

• 価格カードには淡い影をつけて地から浮かせる
• CTA ボタンの下に紫寄りのぼかし影を落とす
• 比較図カードは影を弱くするか、影なしにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きにし、悩みのイラストは円形のぼかしで囲む
• セクション境界: 背景グラデーションで境目をなじませる。直線の区切りは使わない
• カードは角丸を小さくするか、角ばったままにする
• ボタンはピル型にして右端に細い矢印を置く
• STEP バッジは細い線で描いた大きな円にする

Components

• 主 CTA ボタン（button-primary）: 濃紺のピル型ボタン。白文字に右向きの細い矢印を添え、下に紫の影を落とす
• お試し価格カード（price-card）: 上部はグラデーションのキャンペーン帯と商品の箱。下部は白地に商品名、送料無料の円、大きな価格を置く
• 送料無料の円バッジ（badge-circle）: 細い線の円の中に 2 行の小さな文字を入れ、価格の左に置く
• STEP 番号の円（step-badge）: 細い線の大円の中に小さな STEP の英字と太い 2 桁の数字を入れ、商品画像に重ねる
• 比較の見出しラベル（compare-label）: 灰と青紫の帯を左右に並べ、従来品と自社品を対比する
• 淡紫の解説ボックス（info-box）: 淡い紫の面に成分の効果を 2〜3 行の小さな文字で書く
• 悩みの思考吹き出し（thought-bubble）: 暗い紫の地に白文字で悩みを書き、円弧の線と小さな丸で吹き出しにする
• 注釈リスト（note-list）: 価格カードの下に ※ 付きの小さな注意書きを並べる

Do's and Don'ts

Do - 地は淡い紫のグラデーションにして、水滴や光を重ねる - CTA は藍紫のピル型に統一する - 価格は大きな青紫の数字で見せ、送料無料の円バッジを添える - 見出しは明朝で中央に揃え、字間を広めにとる - 成分や仕組みは円・矢印・ボックスの図にして見せる

Don't - 暖色の強い色や原色の赤をメインにしない - 背景を真っ白の平面だけで構成しない - ボタンを角ばった形にしない - 見出しに丸ゴシックやポップな書体を使わない - 価格カードを派手な装飾で囲まない

Page Structure

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

1. 上部帯（公式サイト限定であることを示す）: 紫のグラデーション帯の上に白文字を中央揃えで置く
2. ファーストビュー（うるおいの世界観と商品を見せる）: 水しぶきの写真の上に明朝 3 行のキャッチを置き、左上にロゴ、中央に 3 本の商品を並べる
3. お試し価格 CTA（トライアルへの申込を促す）: グラデーションの帯と白いカードに価格を置き、ピル型ボタンと注釈を続ける
4. ブランドの成分訴求（独自成分の価値を伝える）: 明朝の中央揃えにし、キーワードだけ太字にする
5. 使用ステップ（3 品の役割と価格を示す）: 円の STEP バッジと商品画像を左右交互に置き、点線で区切る
6. 仕組みの比較図（一般的な保湿との違いを図で示す）: 白いカードに 2 列の図を置き、その下に強化ポイントのボックスを並べる
7. 中間 CTA（もう一度申込を促す）: 明朝の誘導コピーを置き、その下に価格カードを再掲する
8. 悩みの提起（乾燥の悩みに共感する）: 暗い紫の地に、イラストの左右から思考吹き出しで悩みを 2 つ出す
9. 3 因子の図解（バリア機能を支える成分を説明する）: 3 つの紫の円を三角形に配置し、成分ボックスと商品を添える
10. スタッフのおすすめ（第三者の目線で推す）: 英字セリフの大見出しの下に 2 カラムのカードを置き、各カードに詳細ボタンをつける
11. 最終 CTA（最後のひと押しをする）: 価格カードと注釈を再掲する
12. フッター（コピーライトを表示する）: 墨色の面に白い小さな文字を中央揃えで置く

Imagery

• 水しぶきと水滴を、青紫の光でクールに撮る
• ボトルは白背景で切り抜き、少し斜め上から写す
• 背景にボケた泡や光のフレアを散らす
• 人物は線画に水彩風の淡い色をつけたイラストにする
• テクスチャーの写真（とろみの塗り跡）を商品の横に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP と同じ構成を中央 480〜600px 幅で見せることを推奨する
• 背景のグラデーションは画面幅いっぱいまで広げる
• 使用ステップと比較図は PC では横に並べてもよい
• スタッフのおすすめカードは PC では 3〜4 列まで広げられる

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