DESIGN.md — パール白×モカ金の透明感美容液 LP（Pearl Beige Luxury Skincare Preorder LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: 透明感・パール・水滴・明朝体・POINT番号・先行予約
• 地の質感: 光沢のある乳白色、金色の液体、泡や水滴のぼかし写真を全面に敷く
• 形: 円形の写真切り抜きと楕円の製品、帯状の全幅セクション
• 温度感: 暖色寄りのニュートラル。悩みパートだけ暗いグレーで冷たくする

Colors

• 地はパール白とベージュを基本に、茶系の写真で上品さを保つ
• POINTセクションは白地と茶地を交互にする
• 悩みパートだけ暗いグレーにして気分を切り替える
• オレンジは予約ブロックだけで使う
• 緑のCTAは申込ボタンだけに使い、ほかで緑を使わない
• 茶地の上の文字は白にする
• button-primary は文字 #FFFEFE × 背景 #4CB82E のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#378521、4.6:1）を使う。
• stat-badge は文字 #FEFEFE × 背景 #8D7561 のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#88715E、4.56:1）を使う。
• label-circle は文字 #FEFEFE × 背景 #8D7561 のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#88715E、4.56:1）を使う。

Typography

• 見出しは明朝で、1行目を小さく、2行目を大きくする
• 数字は見出しの約2倍の太い明朝にする
• POINT番号は細い欧文で、英字の上に大きな2桁の数字を置く
• 本文の先頭の1文を太字にして要点にする
• CTA・予約まわりだけ太いゴシックを使う
• ※の注釈は小さく右寄せにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: 1カラム。写真は全幅で、文字はその上に重ねる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の背景写真か色の帯で区切る
• POINTは番号→見出し→写真→本文の順で中央にそろえる
• 本文は左寄せで、画面幅の約92%にする
• 予約ブロックは白カードにして、商品・バナー・ボタン・価格・注記を縦に積む
• 注意事項は箇条書きにして、オレンジ枠で囲む

Elevation & Depth

• CTAボタンは上部に光沢ハイライトを入れ、下に影を付けて立体的にする
• 円形写真は外側を白くぼかしてにじませる
• カードは影なしの平面にし、枠線で区切る

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 人物は円形切り抜きか全幅。製品は楕円形のまま見せる
• セクション境界: 直線の全幅切り替え。茶地のPOINT帯は上辺を緩い弧にする
• CTAはピル型にし、両端にスラッシュ付きのリードを置く
• 予約バナーは角丸10pxのオレンジ帯にする
• 成分の数値は円形バッジに入れる

Components

• グロス申込ボタン（button-primary）: 緑のグラデーションのピル型ボタン。上段に小さなリード、下段に大きな白文字の2段組
• 予約受付バナー（preorder-banner）: オレンジの角丸帯に白の太文字を入れる
• 限定告知ボックス（limited-box）: オレンジのヘッダー帯に明朝白文字。下は白面に小さな説明文
• POINT番号見出し（point-heading）: 細い欧文の英字と大きな2桁数字の下に、2段の明朝見出しを置く
• 成分率の円バッジ（stat-badge）: 茶色の円に白で大きな%数字。上部に細い白線の目盛りを入れる
• 悩みワード吹き出し（worry-scribble）: 黒い円に落書き線を重ね、黄色の明朝で悩みワードを入れる
• 茶色丸ラベル（label-circle）: 茶色の円に白で2行の短いラベルを入れ、横に大きな数字を並べる
• 注意事項リスト（notice-list）: オレンジ枠の白面に、小さな箇条書きを並べる

Do's and Don'ts

Do - 水滴・泡・金色の液体の写真を背景に敷く - 見出しは明朝にし、数字だけを大きく強調する - POINTは番号付きで5つ程度並べ、白地と茶地を交互にする - 予約ブロックはページの中盤と末尾の2回置く - 説明文は先頭の1文を太字にした3行前後にする

Don't - 原色の青や赤を使わない - 見出しをゴシックの太字にしない（CTAまわりは除く） - 緑をCTA以外で使わない - 写真をフラットな単色に置き換えない - 本文を長い段落にしない

Page Structure

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

1. ファーストビュー（透明感と鮮度を一瞬で伝える）: 人物と製品を金の液体写真に合成し、右に縦書きの明朝キャッチ、下に英字の製品名を置く
2. 数値訴求（使用期限・純度の数字で差別化する）: パールの泡を背景に、茶色の丸ラベルと特大の明朝数字を並べる
3. ベネフィット（理想の肌印象を提示する）: 円形にぼかした人物写真の下に、2段の明朝見出しを置く
4. 予約CTA（先行予約へ誘導する）: 白カードに商品写真・アプリコット見出し・オレンジバナー・緑のグロスボタン・価格目安を積む
5. 限定告知・注意事項（条件の透明性を示す）: オレンジのヘッダー付きボックスと、枠線付きの箇条書き
6. 悩みの提起（肌の悩みに共感する）: 暗いグレー地に白の大きな明朝。人物写真に黒丸の落書き吹き出しで悩み3つを重ねる
7. 解決提案（商品へ橋渡しする）: 明るいパール地に問いかけ見出しを置き、製品の写真と英字名を続ける
8. 特長POINT（成分・設計の根拠を5つ示す）: POINT番号見出し・全幅イメージ写真・太字リード付き本文の順。白地と茶地を交互にする
9. クロージングCTA（再度予約を促す）: 中盤の予約ブロックと同じ構成を繰り返す

Imagery

• 人物は30代女性。白い肌を柔らかい逆光で撮り、背景は明るくぼかす
• 製品は白い楕円の個包装。金茶の水面や水滴の上に置いて撮る
• 金色の液体のスプラッシュ、泡、ボケ玉で透明感を出す
• 悩みパートはモノクロ寄りの暗いトーンで、頬に手を当てる人物
• 成分はフルーツや分子モデルの3D風画像。暖色のゴールドで統一する
• アンティーク時計など鮮度・時間を想起させる小物を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅の縦長1カラムで、PCでも中央に約450〜750px幅で表示する
• PCは左右を背景色で埋め、中央カラムを維持する
• SP 375pxでは大見出し32〜40px、本文15pxを目安にする
• CTAボタンは画面幅の約95%に広げる

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