DESIGN.md — ローズピンク×金ボタンの化粧オイル LP（Rose Pink Gold Cosmetic Trial LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、情報量多め・訴求型
• キーワード: ローズピンク・花びら・水滴・明朝見出し・ゴールドCTA・初回限定オファー
• 地の質感: 淡いピンクのグラデーションや水面の写真背景に、白い面を重ねた透明感のある質感
• 形: 四角いオファー枠、円形の無添加バッジ、ピル型ボタン、下向き山形のセクション境界
• 温度感: 暖かく甘い。ピンク寄りで女性的

Colors

• 地は白と淡ピンクを交互にし、商品説明は白、オファーやこだわりは淡ピンク地にする
• ピンクは強調語・価格・オファー枠ヘッダーに限定し、本文は濃グレー
• 主CTAだけはゴールドのグラデーションで、ピンクと差別化する
• 口コミ帯だけベージュ×ゴールドブラウンで落ち着かせる
• 注釈は灰色の小さい文字で、各ブロック直下に置く
• button-primary は文字 #FEFCF3 × 背景 #D9C185 のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8C712C、4.53:1）を使う。
• badge-condition は文字 #FEFCF3 × 背景 #DC2A69 のコントラスト比が 4.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB2666、4.56:1）を使う。
• pill-speech は文字 #FEFCF3 × 背景 #DC2A69 のコントラスト比が 4.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DB2666、4.56:1）を使う。

Typography

• 大見出しは明朝、本文と説明はゴシックで役割を分ける
• 見出し中のキーワードだけをピンクにし、文字も少し大きくする
• 大きなダブルクォーテーションで強調語を囲む装飾を使う
• 手書き風の筆記体英字（Let's try など）を薄い灰色で添える
• 価格は細めの欧文数字を特大にし、税込と円を右下に小さく置く
• 数字や効果を書くときは必ず※の注釈を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。用途写真や無添加バッジは 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• オファー枠は左右12px程度の余白で画面幅いっぱい近くまで広げる
• 見出しは中央揃え、本文は左揃え
• 写真と縦書きコピーを左右にずらして重ねる
• 同じオファー枠＋CTAを4回ほど繰り返す
• 口コミと手順はスライダー（左右矢印付き）で見せる

Elevation & Depth

• CTAボタンだけ下に柔らかいドロップシャドウ
• カードは影なしで細線か白面で区切る
• チェックリストの白帯にごく薄い影
• 商品写真の下に台座や花の写り込みで奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き、人物・手元は四角トリミング、施設写真は角丸
• セクション境界: 下向きの山形（V字）で次セクションに流す。他は直線
• 主CTAは完全なピル型
• 無添加項目は白い正円に斜線を入れる
• オファー枠は角丸なしの四角でピンクの細線囲み
• 吹き出しは手書き線の曲線枠

Components

• ゴールドのピル型CTA（button-primary）: ゴールドのグラデーション。左に再生アイコン、白文字の大きな文言。直下に注意書き
• 初回セットのオファー枠（offer-box）: ピンクのヘッダー帯に対象者と商品名。下に白地で商品画像、価格、条件バッジ、CTA
• 条件バッジ（badge-condition）: 数量限定・送料無料などを濃ピンクの角丸四角に白文字で並べる
• 円形の訴求バッジ（badge-circle）: 白い半透明の円に金の細線。明朝で短い数値訴求を入れる
• 無添加バッジ（free-from-circle）: 白い正円に濃色ゴシックの成分名と斜めの細線。3＋2で並べる
• こだわり番号ラベル（heading-label）: 上下に細線と下向きの三角を付けた小さなラベル。丸数字入り
• 口コミスライダー（review-card）: 生成り白のカードに見出し、本文、年代タグ。左右に矢印
• 吹き出し見出し（pill-speech）: 濃ピンクのピル型に白文字、下に小さな三角の吹き出し
• チェックリスト（check-list）: 白帯に細いピンクのチェックと明朝の短い効果文

Do's and Don'ts

Do - 強調語や価格はローズピンクにし、見出しは明朝で上品に保つ - 花びら・水滴・ローズの写真を余白にちらして柔らかさを出す - オファー枠と金CTAをページ内で繰り返し配置する - 効果や数量の表記には※注釈を近くに添える - セクションごとに白と淡ピンクの地を交互にする

Don't - CTAをピンクにしてオファー枠に埋もれさせない - 黒や原色の強い背景を使わない - 見出しを太いゴシックだけで作らない - 影や立体感を多用して重くしない - 注釈を省いて効果を言い切らない

Page Structure

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

1. ファーストビュー（商品と香りの印象を伝える）: 淡い背景に花と商品写真。明朝の大キャッチ、縦書きリード、円形バッジ3つ
2. オファー（初回）（すぐ購入したい人を受け止める）: 斜線つきの限定コピー、ピンクヘッダー枠、価格、金CTA
3. お客様の声（香りの評価で共感を得る）: ベージュ帯にスライダー式口コミカード
4. 成分解説（主成分の役割を理解させる）: 水面背景に括弧装飾つき大見出し、本文、肌断面のイメージ図2点
5. 働きのリスト（効果を短く列挙する）: 細線の四角を縦に5つ並べ、中央揃えの短文
6. 限定商品の紹介（限定品の登場を告げる）: V字に切れたピンク地、円形ラベル、大きな商品写真と花びら
7. 3つのこだわり（香り・使用感・無添加を順に説明する）: 番号ラベル、引用符つき見出し、写真、イラストつきの説明枠、無添加バッジ
8. 使用手順（使い方の簡単さを示す）: STEP番号つきスライダーと、写真＋明朝の大きな動詞のステップ
9. オファー（詳細）（セット内容と価格を見せる）: 点線区切りで3商品を縦に並べ、特大価格、条件バッジ、金CTA
10. 他の用途（顔以外の使い道で価値を広げる）: POINTラベルとマーカー見出し、2列の写真に斜めコピー
11. お客様の声2（継続者の声で信頼を補う）: ローズ写真の導入と、ピンク枠の吹き出し口コミとシルエット
12. ブランド紹介（製造姿勢で安心させる）: 英字ラベル付きの細線枠、角丸の施設写真、無添加バッジ、薄い縦書き大文字
13. 最終CTA（購入を後押しする）: 女性の写真と手書き吹き出しのあと、オファー枠を再掲

Imagery

• ガラスボトルの商品を白い台座や花の上に置き、柔らかい光で撮る
• 淡ピンクのバラと花びらを手前でぼかし、画面端に散らす
• 透明な水滴・泡を半透明で背景に重ねる
• 手のひらや頬に触れる手元は明るい白背景で、肌の透明感を見せる
• 細い線の人物イラストやシルエットで説明や口コミに添える
• 背景は水面の波紋やシルクのような淡いグラデーション
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に480〜600px幅のSP構成を置き、左右は淡ピンクか白で埋める
• 見出しサイズは1.2倍程度にとどめ、明朝の余白感を保つ
• 用途写真や無添加バッジはPCで横一列に並べてもよい
• CTAはPCでも最大400px幅のピル型を維持する

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