DESIGN.md — 桜色×クリームの産後ママ向けヘアケア LP（Soft Pink Maternity Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: やさしい・柔らかい、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 産後ママ・桜色・手描きイラスト・丸バッジ・リボン見出し・共感ストーリー
• 地の質感: フラットな淡色面に水彩風のにじみ円や飛沫を重ねる。紙のようにやわらかい質感。
• 形: 正円バッジ、角丸の枠カード、リボン形の見出し、雲形の吹き出し、V字の区切り
• 温度感: 暖色寄りでやさしい。ピンクとクリームが中心で、水色を少しだけ差す

Colors

• 白・淡いピンク・クリームの地をセクションごとに交互に使い、話の区切りを示す。
• 見出しの強調語はローズピンク、成分名や数字の強調は水色にする。
• 丸バッジはピーチと水色の 2 系統にし、濃い色の面は使わない。
• 黒は使わない。本文はウォームグレーにする。
• CTA はローズピンクの面に白文字。強い原色は使わない。
• 深い色はフッターの深緑だけにする。
• button-primary は文字 #FFFFFF × 背景 #E57F8A のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73B4C、4.55:1）を使う。
• button-sub は文字 #FFFFFF × 背景 #E57F8A のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73B4C、4.55:1）を使う。

Typography

• 見出しは中央揃え。字間をやや広めに取り、ゆったり見せる。
• リード文は短く区切り、行間を大きくとって会話のように縦に並べる。
• 強調する語だけ文字を大きくし、ピンクか水色にする。
• 手書き書体は添え文字と Point 番号だけに使う。
• 数字はひときわ大きく、丸ゴシックで見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。バッジは 3〜5 個を横に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• すべて中央揃えの縦長ストーリーにする。
• 文章のブロック間に大きな余白を取り、間をつくる。
• コラムや使い方は角丸の枠カードに入れる。
• イラストは文章の左右に交互に置く。

Elevation & Depth

• 影はほとんど使わない。面の色の違いで区切る。
• 商品カードにだけ薄い影を付ける。
• 枠カードは影ではなく細い線で見せる。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は正円か、上を大きく丸めたアーチ形に切り抜く。イラストは背景なしで置く
• セクション境界: 下向き V 字の切り込み、ゆるい曲線、背景色の切り替え
• 特長や悩みは正円バッジで並べる。
• Point 見出しはリボン形にする。
• 吹き出しは雲形か角丸にする。
• ボタンは小さい角丸にし、右に矢印を付ける。

Components

• 丸い特長バッジ（badge-circle）: 淡いピーチの正円に、短い特長を 2〜3 行で入れる
• Point リボン見出し（ribbon-point）: リボン形の帯に、手書き風で Point と番号を書く
• 悩みの吹き出し（speech-cloud）: 白い雲形の吹き出しにイラストの人物の悩みを入れ、人物の周りに配置する
• コラムの枠カード（card-column）: 茶色の細い線の角丸枠。左上に気球と英字のラベルを付ける
• データのグラフカード（chart-card）: ピンク系の折れ線グラフや円グラフで、大きな % を強調する
• 成分のタイル（ingredient-grid）: 色付きの見出し帯、丸い成分写真、短い説明を並べたグリッド
• 使い方のステップ（step-box）: 雲形のラベルで Step と番号を示し、説明とイラストを横に並べた枠
• オンラインショップボタン（button-primary）: ローズピンクのグラデーション帯に白文字と右矢印
• 外部モールのボタン（button-sub）: やや小さいピンクのボタンを 2 つ横に並べる
• 注意書きの帯（note-bar）: 淡いピンクの角丸帯に、小さい注意書きを入れる

Do's and Don'ts

Do - 淡いピンク・クリーム・白の地を交互に使う。 - 人物は細い線で淡く塗った手描きイラストにする。 - 強調語だけピンクや水色にし、大きくする。 - 語りかけるような短い文を、余白を広くとって積む。 - 特長は丸バッジで並べて見せる。

Don't - 黒や原色を広い面に使わない。 - 角張ったカードや強い影を使わない。 - 明朝体などの硬い書体は使わない。 - 1 画面に長文を詰め込まない。 - 写真をそのまま四角で並べない。

Page Structure

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

1. ファーストビュー（対象と商品カテゴリを伝える）: ピンクの地に幕とガーランドのイラスト。親子の写真と商品ボトルを置き、丸バッジで特長を示す
2. メディア掲載の帯（信頼を示す）: 黄色の横長バナーに、誌面の写真とロゴ風の文字を並べる
3. 悩みの提起（共感を得る）: クリーム地。V 字の吹き出し見出しの下に、女性イラストと雲形の悩み吹き出しを配置する
4. 原因の解説（原因を理解してもらう）: 枠カードのコラム。グラフとアンケート結果を大きな % で見せる
5. 解決の提案（手軽なケアの必要性を伝える）: 淡いピンク地に、短い文を中央に積む。円形のイラストを 3 つ並べる
6. 処方の紹介（こだわりを示す）: 黄色いオイルのしずくが垂れる曲線と、丸く切り抜いた写真
7. 特長 Point1〜4（成分と安全性を説明する）: リボン見出し、成分タイル、丸バッジのグリッド、白いカード
8. 使い方（手軽さを伝える）: 水彩のにじみの上に手描きの人物。ステップの枠カードとガーランドを添える
9. 国内製造・メーカー紹介（安心感を与える）: ピンクの見出しに、左に文章、右に円形の工場写真
10. イメージ写真（情緒に訴える）: 手書き風のコピーと、アーチ形に切り抜いた親子写真
11. 商品情報（価格と成分を示す）: 白い角丸カードに、商品画像と価格・成分の表を並べる
12. 購入方法・CTA（購入へ誘導する）: ピンクの曲線帯の見出し、店舗のイラスト、ピンクのボタン
13. フッター（SNS とリンクを載せる）: 深緑の地に白いアイコンとリンクを並べる

Imagery

• 人物は細い線画に淡い肌色・ピンクを塗った、母親や女性のイラストにする。
• 写真は明るい白背景のハイキー。笑顔の母子を撮る。
• 成分は丸いビジュアル（しずく・植物・泡）で見せる。
• 装飾はガーランド、星、気球、ハート、水彩のにじみ円にする。
• 店舗はシンプルなフラットイラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版は約 950px 幅の中央寄せ。SP は 1 カラムに置き換える。
• SP では丸バッジを 1 行 3 個に折り返す。
• SP では成分タイルを 2 列にする。
• SP では文章とイラストの横並びを縦積みにする。
• SP ではボタンを横幅いっぱいにする。

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