DESIGN.md — くすみローズと生成りの女性向けサプリ LP（Soft Dusty Rose Women's Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル、情報量多め・訴求型
• キーワード: くすみローズ・生成り・淡いグラデーション・角括弧の強調・縦書き帯・大きな欧文の透かし
• 地の質感: 霧がかかったような淡いピンクのグラデーションと、白いカードの柔らかい影
• 形: 角丸の写真とカード、円形バッジ、アーチ型・弧型のセクション境界
• 温度感: 暖色寄りでやさしいトーン

Colors

• 地は生成りと淡ピンクのグラデーションを交互に使い、境界はアーチや弧でつなぐ
• 見出しはグレーブラウンを基本にし、キーワードだけローズで色を変える
• こげ茶は丸バッジとコース見出し帯だけに使い、場面転換の合図にする
• CTAだけ彩度が高めのコーラルピンクにして、ほかの色とはっきり分ける
• 安心感を出したい生産地の話だけ淡いブルーグレーの地にする
• 本文の強調は太字にせず、淡ピンクのマーカーを引く
• button-primary は文字 #FFF7F1 × 背景 #E57F86 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D6333E、4.5:1）を使う。
• button-secondary は文字 #FFF7F1 × 背景 #BCBCBC のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#727272、4.54:1）を使う。
• label-vertical は文字 #FFF7F1 × 背景 #C98A8F のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B1565D、4.55:1）を使う。
• box-guarantee は文字 #C98A8F × 背景 #FBF8F3 のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B1565D、4.55:1）を使う。

Typography

• 見出しは字間を広め（0.1em前後）にして、ゆったり見せる
• キーワードは1〜2文字だけローズにして、少し大きくする
• 大事な言葉は細い線の角括弧［ ］で囲む
• 写真の上には縦書きのコピーをローズ帯の白抜きで重ねる
• 背景には薄い欧文セリフの大きな透かし文字を置く
• 数字はほかより大きく、細めの書体で目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分タグは 3 列、比較カードは 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは中央揃え、本文は左揃え
• 写真は左右に互い違いに置き、一部を画面の端で切る
• セクションの切り替わりにはこげ茶の丸バッジを置き、細い縦線でつなぐ
• 白カードは画面幅の約86%で中央に置く
• 背景の大きな透かし文字は画面の端からはみ出させてよい

Elevation & Depth

• 白カードにはぼかし大きめで薄い影（0 8px 24px rgba(150,100,100,.08)）をつける
• CTAには下側にピンクの影を落とし、少し立体的に見せる
• 写真に影はつけず、角丸だけにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形が基本。主役の人物写真は縦長のアーチ型や楕円で切り抜く
• セクション境界: アーチ型や大きな弧で、色の違う地をなめらかにつなぐ
• バッジや成分ラベルは円形にする
• 成分名は白い角丸の小さいタグにする
• 見出し下の吹き出しは細い線で描く
• 直角の切り替えや斜めの切り替えは使わない

Components

• 申込CTA（button-primary）: コーラルピンクのピル型ボタン。上に小さく特典文言、下に大きくボタン名を2段で置き、影で立体的にする
• 単品購入ボタン（button-secondary）: グレーのピル型ボタン。文字は2行
• つなぎの丸バッジ（badge-transition）: こげ茶の円に白文字を短く入れる。下に細い縦線を伸ばす
• 縦書きコピー帯（label-vertical）: 写真の端に重ねる縦書きのローズ帯。1〜2列で白文字
• お客様の声カード（card-voice）: 角丸写真の上に縦書きの見出しと年齢の大きな数字を置く。下の本文にはマーカーを引く
• 定期コースの価格カード（card-price）: 上にこげ茶の帯見出し、左上にローズの割引円バッジ、中央に商品画像と大きな価格を置く
• 成分タグ（tag-ingredient）: 白い小さな角丸タグを3列のグリッドで並べる
• 返品保証ボックス（box-guarantee）: 細いピンク枠の箱。月桂樹の飾りで囲んだ保証見出しと説明文を入れる
• 角括弧の見出し（heading-bracket）: 細い線の角括弧で見出しやキーワードを左右から囲む

Do's and Don'ts

Do - 淡いグラデーションの地とアーチ型の境界で、やさしく流れを作る - 強調は色（ローズ）・角括弧・マーカーで表し、太字に頼らない - 女性の自然な笑顔の写真を角丸で、余白を広めにとって並べる - グラフはローズと淡ピンクの2色だけで描き、出典を小さく添える - 購入ブロックはページの中盤と終盤に2回置く

Don't - 原色の赤や黄色を使わない - 黒ベタや真っ黒の文字を使わない（こげ茶にとどめる） - 直角に切り替わるセクション境界や、角の立った写真は使わない - 太く詰まった見出しや、勢いのあるセール風の装飾は使わない - CTA以外の要素にコーラルピンクを使わない

Page Structure

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

1. ファーストビュー（実績を見せ、習慣にするイメージを伝える）: こげ茶の細い帯に実績を入れる。アーチ型の背景に商品写真を置き、円形の実績バッジを2つ添える
2. 悩みの提起（日々の疲れに共感する）: 短い悩みを3つ、角丸の人物写真と左右交互に並べる。最後に夕景のグラデーションと結論のコピーを置く
3. 提案（がんばるのではなく補うという考え方を示す）: こげ茶の丸バッジから始め、大きなローズの見出しと手持ちの商品写真、成分の円バッジを置く
4. 著名人の声（共感と信頼を得る）: 白カードに人物写真、年齢の円バッジ、見出し、本文を入れる
5. CTA・価格（購入へ誘導する）: キャンペーン特典、定期コースの価格カード、単品カード、返品保証ボックス、定期の注意事項を順に置く
6. 成分の解説①（成分の豊富さを示す）: 大きな数字の見出し、泡のような球体の写真、白い成分タグのグリッド
7. 働きの解説（活動と休息の両方を支えることを示す）: 2列の白カードに角括弧の見出しと円形の成分ラベルを入れる
8. 成分の解説②（年齢による減少と吸収のよさを伝える）: 曲線グラフと棒グラフを白カードに入れ、縦書き帯つきの写真を添える
9. その他の栄養素（幅広い栄養を含むことを伝える）: 白い円を6つ花のように配置し、棒グラフで他社と比べる
10. 専門家の声（専門家の視点から信頼を補う）: 吹き出し枠の見出し、縦書きの肩書きを重ねた写真、マーカー入りの本文
11. 素材の特長（素材を丸ごと使っている価値を示す）: 縦書きの本文とカプセル写真、ローズのレーダーチャート
12. お客様の声（実感の声を数多く見せる）: 番号つきの英字ラベル、縦書き見出しの写真、年齢の数字、マーカー入りの本文を4件並べる
13. 品質へのこだわり（生産地と生産者の信頼を伝える）: ブルーグレーの空のグラデーション地に風景・生産者の写真と白カードを置く

Imagery

• 30〜50代の女性を自然光で撮り、白い服で柔らかく笑っている場面にする
• 商品写真は白い石の台や生成りの布の上に置き、明るく霞んだトーンにする
• 手のひらにカプセルをのせた接写を使う
• 成分は光る透明な球体やゼリーのような質感で抽象的に見せる
• 生産地は青空・水辺・手作業の写真で素朴さを出す
• 背景には極薄の欧文セリフの透かし文字を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP のレイアウトを中央に固定幅（約 450px）で表示する
• PC の背景は生成りに薄い欧文の透かし文字を繰り返す
• PC の右側に商品画像と CTA を縦に固定して表示する
• 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 行書くと起動時に読み込まれる。