DESIGN.md — 桜ピンク×ミント×キャメルの子ども向けサプリ LP（Soft Pink Teal Kids Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、かわいい、信頼・誠実、情報量多め・訴求型
• キーワード: 淡ピンク・ミントティール・キャメル・丸ゴシック・親子写真・波形区切り
• 地の質感: フラットな淡色面に、ぼかした水彩風のピンクの曲線と和紙のような薄い凹凸の地紋を重ねる
• 形: 大きな角丸カード、ピル型の帯見出し、丸窓の写真、波形やアーチ形のセクション境界
• 温度感: 暖かく柔らかい。ピンクとベージュを主にし、ミントで清潔感を足す

Colors

• 地は白と淡ピンクを交互に置き、セクションの切り替えを地の色で見せる
• 強調文字はミントとキャメルの2色だけを使う。1つの見出しの中で両方を混ぜてもよい
• 見出しや本文の基本色は黒にせず、ブラウングレーにする
• CTAは購入が赤ピンク、無料サンプルが緑と、役割で色を固定する
• 価格は大きなミント文字にし、通常価格はグレーの取り消し線にする
• バッジは円形で、ミント・サーモン・金色を使う
• button-primary は文字 #FFFFFF × 背景 #FD5374 のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC0330、4.54:1）を使う。
• button-line は文字 #FFFFFF × 背景 #5BA304 のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4A8503、4.52:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #5CC5BC のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E827B、4.57:1）を使う。

Typography

• 全体を太めの丸ゴシックでそろえ、角のある書体はほぼ使わない
• 見出しの中のキーワードだけを1.2〜1.4倍に大きくし、色を変える
• セクションの上に英字の飾り見出し（字間広め・薄色）を小さく置く
• 手書き風の添え文字を見出しの左上に斜めに置き、親しみを出す
• 本文は字間を広め、行間を1.9前後にとってゆったり見せる
• 数字（価格・配合量）は特大の太字にし、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードは 3 列、保証アイコンは 3 列に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• お客様の声は写真とテキストを左右交互に並べる
• 価格ボックスは画面幅いっぱいに近い大きな角丸カードにまとめる
• CTAの上に斜線で挟んだ短い一文を置く
• 見出しは中央揃え、本文は左揃え
• 特長は番号を付けたカードを縦に並べ、カードを細い線でつなぐ

Elevation & Depth

• CTAボタンは上部にツヤのハイライトを入れ、下に濃い色の影を付けて立体的に見せる
• カードは影なしの淡色面にし、ピンクの線で囲む
• 価格ボックスの外側にピンクの厚みのある縁を付け、少し浮かせる
• 大きな影は使わない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形か円形の窓で切り抜き、太いピンクの枠を付ける。人物は背景を抜いて区切り線からはみ出させることもある
• セクション境界: スカラップ状の波形、ゆるいアーチ、斜めの色面で区切る
• 帯見出しは片側だけが角丸のピル形にする
• 吹き出しは丸括弧の形の線で文を挟む
• Qアイコンはミントの円にする
• バッジは正円にする

Components

• 購入CTA（button-primary）: 赤ピンクのツヤありピル型ボタン。上に小さく一言を添え、右端に丸い矢印アイコンを置く
• 無料サンプルCTA（button-line）: 緑のピル型ボタン。左に白い円で日数のバッジを付ける
• 円形バッジ（badge-circle）: FVの右上に推奨や無料配布の円バッジを重ねて置く
• 帯見出し（heading-band）: ミントの帯に白文字で書き、キーワードだけを黄色にする。お客様の声の見出しに使う
• 価格ボックス（price-box）: 通常価格に取り消し線を引き、矢印の下に初回価格を大きなミント文字で示す。金色の割引バッジと送料無料タグを添える
• 成分カード（ingredient-card）: 上に丸窓の写真、中央に配合量の大きな数字、下にキャメルかミントの色帯で効果を書いた縦長カード
• ステップ（step-row）: 左にミントのタグ形STEPラベル、右に白い角丸の説明欄。間を点線の矢印でつなぐ
• FAQ（faq-item）: ピンクの地に白いピル形の質問欄を置き、左端にミントのQ円を付ける。回答は地の上にそのまま書く
• 番号タグ（number-tag）: キャメルの角丸正方形に白い明朝風の数字を入れ、特長カードの上に重ねる

Do's and Don'ts

Do - 強調色はミントとキャメルに絞り、交互に使う - CTAブロック（購入とサンプル）はページ内に2回以上繰り返す - 写真には子どもと母親の自然な笑顔を使い、丸窓に入れる - 数値の根拠は注釈で小さく添える - 見出しの左右に斜線やきらめきの小さな飾りを置く

Don't - 純黒の文字や濃紺は使わない - 角ばった四角いボタンにしない - 彩度の高い原色を広い面に塗らない - 医薬品のような冷たい青系にしない - 明朝体を本文に使わない

Page Structure

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

1. ファーストビュー（驚きのある効果と安心感を一度に伝える）: 親子の写真の上に円形バッジを置き、特大の丸ゴシックで二段のキャッチを入れる。下に商品パッケージと認定マークを置く
2. 実績と初回CTA（満足度の数字で背中を押す）: 白い帯に数字をミントで大きく書き、斜線で挟んだ一文の下に緑のサンプルボタンを置く
3. 価格オファー（初回の割引価格を示す）: キャメルの吹き出し帯の下に大きな角丸の価格ボックスを置き、2種類のCTA、保証アイコン3列、注釈を入れる
4. お客様の声（共感と実感を伝える）: 波形で区切り、英字の飾りと数字見出しを置く。ミントの帯見出しと写真を左右交互に並べる
5. 悩みの提起（子どもの悩みを3つ挙げる）: アーチ形の白い面にチェックアイコン付きのリストを並べ、悩む子どもの写真を右に置く
6. 解決提示（商品を解決策として示す）: 下向きの三角の下に商品と説明文、金色の枠で囲んだメッセージを置く
7. 成分の仕組み（成分の働きを図で示す）: 腸のイラストをキャメルとミントの循環矢印で囲み、下に成分カードを3列並べる
8. 味の訴求（子どもでも食べやすいことを伝える）: 錠剤と果物の写真を並べ、大きな薄い英字を背景に敷く
9. 専門家の推奨（信頼性を補う）: 背景を抜いた人物写真、円形バッジ、白い吹き出しでの一言、淡いピンクのカードに書いたコメント
10. 使い方ステップ（続け方を示す）: ミントのSTEPタグと白いピル形の説明を縦に3段並べる
11. 特長（選ばれる理由を3つ示す）: 円形の見出しの下に、番号タグ付きのピンクのカードを並べ、写真を丸窓に入れて線でつなぐ
12. 開発者の想い（作り手の想いを伝える）: 和紙のような地紋の上に、英字の飾りとピンクの雲形見出しを置き、本文を長めに書く。最後に署名
13. よくある質問（不安をなくす）: 波形の上端を持つピンク地に、Q円付きの白いピル形の質問欄を縦に並べる
14. フッター（ナビゲーション）: 生成り地の中央にロゴ、SNSアイコン、リンクを縦に並べる

Imagery

• 自然光の明るい室内で撮った、白い服の親子の笑顔の写真
• 商品パッケージはピンクベージュで、白い錠剤を散らして添える
• 臓器は淡いピンクのやわらかいイラストにし、きらめきを付ける
• 原材料の粉や液体を白背景で寄って撮り、円形に切り抜く
• 背景には水彩風のピンクのにじみ、小さな星やきらめきを散らす
• 見出しの横に線画のアイコン（吹き出し・手・カレンダー）を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもSPと同じ約375px幅のカラムを中央に置き、レイアウトは変えない
• PCの左右の余白には、淡いピンクのにじみと商品画像を繰り返し並べた背景を敷く
• PCの右側の余白に、商品名と購入ボタンの追従ミニCTAを置く
• 画像・文字サイズは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 行書くと起動時に読み込まれる。