DESIGN.md — 桜色×ゴールド月桂樹の妊活サプリ LP（Soft Pink Maternity Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、信頼・誠実、かわいい、情報量多め・訴求型
• キーワード: くすみピンク・金の月桂樹・専門医監修・水彩イラスト・繰り返し CTA・比較表
• 地の質感: ほぼフラットな淡色の面に、紙のような薄い方眼や紙吹雪をうっすら重ねる。金色の部分だけ箔のようなグラデーションにする。
• 形: 角丸は小さめ。顔写真は正円で切り抜く。セクションの境目に波線を入れる。吹き出しや斜めのリボン見出しも使う。
• 温度感: 暖色寄り。ピンク・ベージュ・ブラウン文字で柔らかく温かい印象にする。

Colors

• 地の色は白・薄いピンク・ベージュを交互に使い、セクションを区切る。
• ローズピンクは価格ボックスの外枠と見出し帯にだけ使う。
• CTA はオレンジのグラデーションに統一する。ほかの要素にオレンジの面は使わない。
• 実績数字と月桂樹は金色のグラデーションで描く。
• 成分の訴求は、グリーン(葉酸)とオレンジ(温活)の 2 色で意味を分ける。
• 文字は黒を避ける。ブラウンかグレーを使う。
• button-primary は文字 #FEFAEA × 背景 #F49B44 のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B15D0A、4.52:1）を使う。
• price-box は文字 #4A2D1A × 背景 #E8698A のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA7896、4.54:1）を使う。

Typography

• 見出しは字間を広めに取り、中央揃えにする。
• 強調する語は色を変えるか、薄いピンクのマーカーを引く。
• 価格は数字だけを極太の大きな文字にし、単位は小さく添える。
• 英字ラベルは淡いピンクで、見出しの上に置く。
• 注釈は 10px のグレーにし、各ブロックの直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品ラインナップは 3〜4 列の小さなカード、口コミや比較表は横幅いっぱいに使う。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 価格ボックスは 3〜4 セクションおきに繰り返し差し込む。
• 特典は細い枠のボックスを 3〜4 つ横に並べる。
• 医師のコメントは、丸い顔写真の右に肩書と本文を置く。
• 実績数字は 2 つ並べ、それぞれを月桂樹で挟む。

Elevation & Depth

• 影はほぼ使わない。
• CTA とサブボタンだけ、ごく弱い影を付ける。
• カードは影を使わず、白地を淡色の背景に置いて浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は正円に切り抜き、淡いピンクの縁を付ける。商品は切り抜き写真、風景は角の四角で使う。
• セクション境界: ゆるい波線、または直線で区切る。
• CTA は角丸 8px の横長ボタンにし、右端に丸い矢印アイコンを置く。
• 見出しには鉤括弧型のコーナー線や斜線の装飾を付ける。
• 吹き出しは細い角丸の枠で作る。

Components

• 購入ボタン（button-primary）: オレンジのグラデーション地に白い太字。右に丸い矢印を置く。
• 価格ボックス（price-box）: ローズピンクの太枠と上部の帯の中に、白いカードを置く。割引の丸バッジと大きな価格を入れる。
• 割引の丸バッジ（discount-badge）: 濃いピンクの正円に、白文字で割引率を入れる。
• 特典枠（benefit-tag）: 細いブラウン枠の小さな四角に、送料無料や返金保証などを書く。
• 月桂樹の実績（laurel-stat）: 金色の月桂樹で、セリフ体の大きな数字を挟む。
• 医師の吹き出し（doctor-bubble）: 丸い顔写真の横に、細い枠の吹き出しを置く。
• 口コミ（voice-card）: 丸い人物写真の横に大きな感想見出し、下に本文と年齢を置く。ピンク地と白地を交互にする。
• Q&A（faq-item）: ピンク帯に Q の丸アイコンと質問、下の白地に A のアイコンと回答を置く。
• もっと見るボタン（button-more）: 白地に細い枠、右端に＋を付ける。

Do's and Don'ts

Do - 価格ボックスと CTA は同じデザインで繰り返す。 - 実績には必ず※番号を付け、近くに注釈を書く。 - 人物の写真は正円に切り抜き、淡い縁を付ける。 - 成分は 2 色の重なる円やパイ図で見せる。 - 余白を広めに取り、柔らかい印象を保つ。

Don't - 黒い文字や濃い黒い面は使わない。 - 原色の青や鮮やかな赤のような強い色は持ち込まない。 - CTA の色をセクションごとに変えない。 - 角ばった極太の英字ロゴのような装飾は使わない。 - 写真に強いコントラストのフィルターをかけない。

Page Structure

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

1. ファーストビュー（商品の独自性と実績を一目で伝える）: ベージュ地に大きな見出し。キーワードは緑の円で囲む。商品写真の左右に金色の丸い実績バッジを置く。
2. 販売実績（売上 No.1 の実績で信頼を得る）: 月桂樹と金色のセリフ数字を使い、紙吹雪の装飾を添える。商品ラインナップを横に並べる。
3. SNS・話題性（第三者の評判を見せる）: 投稿を 2 列のカードで見せる。下にもっと見るボタンを置く。
4. 他商品との違い(時期別)（時期によって必要な栄養が違うことを教える）: POINT ラベルの下に、2 列のイラストと色分けした表を置く。続けて、時期ごとにピンクとイエローの帯で区切る。
5. シリーズ紹介・専門医（監修している体制を示す）: 丸い医師写真を並べ、雑誌掲載の画像や店舗のロゴも並べる。
6. 価格・CTA（購入へ誘導する）: ピンク枠の価格ボックスに、カップル向けセットの水色枠ボックスを続ける。
7. 医師の声（専門家の視点で課題を示す）: 吹き出しの見出しの下に、本文と水彩の食材イラストを置く。
8. 成分の特長（配合成分の強みを伝える）: 緑とオレンジの重なる円と、成分を並べたパイ図を使う。下に色分けしたボタンを置く。
9. お客様の声（共感と安心を与える）: 波線で区切った口コミを 4 件並べる。
10. 医療機関の声（専門家からの推薦を見せる）: 斜めのリボン見出しの下に、日本地図、顔写真、建物の写真を置く。
11. 比較表（競合より優れている点を示す）: 自社の列だけをブラウンで塗った表にし、もっと見るで続きを開く形にする。
12. まとめ・CTA（最後に訴求を繰り返す）: ファーストビューと同じ構成のあとに価格ボックスを 2 つ置く。
13. よくある質問（不安を解消する）: Q&A ラベルの下に、ピンク帯の Q と白地の A を交互に並べる。

Imagery

• 商品は白背景の切り抜き写真にし、ベリーやナッツなどの食材を散らす。
• 人物は自然光の明るい写真にし、柔らかいボケを入れる。
• 手や赤ちゃんの手など、親子のつながりを感じさせるクローズアップ写真を使う。
• 食材やポーズは、淡い水彩タッチのイラストで描く。
• 実績の装飾には、金箔のような月桂樹と王冠を使う。
• 日本地図は緑で塗り、ピンクのピンを立てる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨とする。
• PC では中央 750px 前後の 1 カラムを保ち、左右に淡いピンクの地を見せる。
• SNS 投稿と口コミは、PC では 3〜4 列に広げてもよい。
• 価格ボックスの幅は 600px までに留める。
• CTA は SP と同じ見た目で横幅 480px 程度にする。

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