DESIGN.md — 桜ピンクと水色の透明感スキンケアLP（Soft Pink Gel Skincare Offer LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型、かわいい
• キーワード: 透明感・パールピンク・ジェルの泡・縦書き帯・成分バブル・定期便オファー
• 地の質感: 光沢のあるパール・水滴・ジェルのテクスチャ。白い紙のような細かい地模様
• 形: 円形の写真とバブル、角丸カード、アーチ型の写真枠、弧を描くセクション境界
• 温度感: 暖かいピンクが主で、悩みと成分解説の部分だけ涼しい水色を入れる

Colors

• 基本は白と淡いピンクの地。オファー部分だけを濃いピンクの面にして、白いカードを載せる
• 悩み・チェックリスト・成分の構造図は、水色とくすんだ青で冷静なトーンにする
• 強調する語句・価格・番号はローズピンクの文字にする
• 購入ボタンだけを緑のグラデーションにして、ページ内で唯一の補色として目立たせる
• 縦書きの見出し帯は、濃いピンクの面に白い文字で入れる
• 注釈はグレーの小さい文字にして、本文と区別する
• button-primary は文字 #FFFFFF × 背景 #5DC325 のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3F8519、4.58:1）を使う。
• point-tab は文字 #888888 × 背景 #FFFEFE のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.51:1）を使う。
• check-card は文字 #4A80A0 × 背景 #E9F0F7 のコントラスト比が 3.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#42728F、4.53:1）を使う。

Typography

• 見出しは、強調したい語を大きくし、助詞を小さくして、サイズの差でリズムを作る
• 字間は広めにとり（0.05〜0.1em）、柔らかい印象にする
• セクションの頭には、細い英字ラベルを薄いグレーで置く
• 縦書きの帯見出しを写真の横に重ねる
• 価格の数字は特に大きくし、税込の表記を小さく添える
• 注釈番号（※）は上付きの小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。成分バブルは2〜3個の三角配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白いカードは左右に約16pxの余白をとって中央に置く
• 写真は画面の片側いっぱいまで広げ、反対側に縦書きの見出しを置く
• 価格ブロックは、割引の丸バッジを左、価格を右に置く
• お客様の声は、写真・名前と年齢の行・本文の順で3件縦に並べる
• 商品写真はカードの上端からはみ出させて重ねる

Elevation & Depth

• 白いカードには、ピンクの地の上に柔らかいドロップシャドウ（0 4px 16px rgba(0,0,0,.12)）を付ける
• CTAボタンには、下方向の影と光沢のハイライトを付ける
• 成分バブルには、内側の光沢とハイライトで立体的な球体を表現する

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 円形・角丸・上がアーチ型の写真枠。人物の写真は角丸の四角か円で切り抜く
• セクション境界: 大きな弧（円の上端）や浅いV字でセクションを切り替える
• 成分・効果は、ピンクの光沢のある球体バブルで示す
• タグは細い線で囲んだピル型の枠にする
• ポイント番号は、半円のタブに番号を入れて枠線の上に乗せる
• チェックリストは、青い四角にチェックを入れ、点線で区切る

Components

• 緑グラデのCTA（button-primary）: ピル型の緑グラデーション。上段に小さいコピー、下段に黄色の強調語、右端に白い丸の再生アイコン
• 割引の丸バッジ（badge-discount）: 濃いピンクの正円に、白い文字で割引率を入れる
• 価格カード（offer-card）: 白いカードに、商品写真・名前・特長の2タグ・価格・CTAを縦に並べる
• 成分バブル（ingredient-bubble）: 光沢のあるピンクの球体の中に、成分名を白い文字で入れる
• 縦書きの帯見出し（vertical-band）: 濃いピンクの縦長の帯に、白い縦書き文字を入れる。2本並べることもある
• ポイント番号タブ（point-tab）: 細い線の枠の上に、半円の白いタブで英字と番号を重ねる
• セルフチェックのカード（check-card）: 水色のカードに、斜めの青い見出しリボンとチェック項目を入れる
• 声の名前・年齢の行（voice-meta）: 細い線で区切った行に、英字ラベル・名前・年齢を並べる
• ハッシュタグ・成分タグ（tag-outline）: 細い線のピル型の枠に、小さい文字を入れる

Do's and Don'ts

Do - ピンクは淡い色から濃い色へのグラデーションで透明感を出す - 効果を伝える語句はローズピンクで太くし、ほかの文字は細身にする - 注釈は対象の語句の近くに、小さいグレーの文字で必ず入れる - オファーは同じ形のカードを、数量違いでくり返し並べる - 悩みの部分は、線画のイラストと水色で共感を誘う

Don't - CTAを緑以外の色にしない - 原色の赤や黒い背景を使わない - 角の尖った硬い図形を多用しない - 本文を詰めた字間・狭い行間にしない - ピンクと水色を同じ面で混ぜすぎない

Page Structure

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

1. ファーストビュー（悩みの解決と、成分を配合していることを一目で伝える）: パールピンクの光の背景に、商品の大きな写真、2段の大見出し、縦書きの添え書き、成分バブル3個を置く
2. 初回オファー（冒頭ですぐ購入できるようにする）: 濃いピンクの地に白いカード。割引バッジ・価格・緑のCTAを入れる
3. 悩みの提起（読み手の共感を得る）: 円形の線画イラストと、手書き風の文字のCaseを3つ交互に並べる
4. セルフチェック（自分ごと化させる）: 水色のカードにチェック項目を3つ並べ、縦書きのまとめ文を置く
5. 解決の方向性（必要なケアを2つの軸で示す）: 2つの円を×で並べる
6. 商品の紹介とテクスチャ（使用感を伝える）: ジェルや肌の写真を角丸・円で切り抜き、縦書きの帯見出しを付ける
7. 開発者の想い（信頼感を伝える）: イラストのアイコンと役職を置き、白いカードに長文を入れる
8. 3つのポイント（成分の根拠を示す）: 番号タブ付きの枠、月桂樹の装飾、成分バブル、構造の図解を使う
9. 定期便オファー（購入へ導く）: 濃いピンクの地に、価格カードと条件タグ、定期便の説明スライダーを置く
10. セット別オファー（数量の選択肢を出す）: 枠線の帯見出しの下に、3個・2個・1個のカードを並べる
11. お客様の声（実感を裏付ける）: 人物の写真に縦書きの帯を重ね、名前と年齢の行、強調入りの本文を入れる

Imagery

• 商品写真は、ピンクの光沢、柔らかな逆光、白い背景で撮る
• 水滴・泡・ジェルのクローズアップを背景や装飾に使う
• 肌は口元や頬のアップで、ツヤを強調する
• 悩みは、淡い色の線画で描いた女性のイラストで表現する
• 図解はパステル調の模式図にする（細胞層・水・脂）
• 円形に回り込む英字のテキストを装飾として重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はないため、推奨として示す
• PCでは幅480〜750pxの中央カラムに固定し、左右は淡いピンクのグラデーションで埋める
• 大見出しのサイズは最大1.3倍程度にとどめる
• オファーカードはPCで横並びにしてもよい
• 縦書きの帯は、PCでもそのまま維持する

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