DESIGN.md — 桜ピンク×白の泡玉オーラルケアサプリ LP（Soft Pink Bubble Oral Care Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: かわいい、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: 淡ピンク・泡玉・金の月桂樹・SNS風フレーム・円形写真・番号付き特長
• 地の質感: 白地にシルクのような柔らかいグラデーションと光沢感のある泡玉。紙吹雪で華やかさを足す
• 形: 円形の写真切り抜き、四角い帯見出し、角丸カード、下向き三角の吹き出し
• 温度感: 暖かめ。ピンクと金でやさしく華やか

Colors

• 白地を基本にし、薄ピンクの地は推奨リストなどの区切りに使う
• ローズ赤は見出し帯と数字の強調にだけ使う
• SNS 紹介だけはローズ赤の全幅背景にして、白いカードを載せる
• 実績は金の月桂樹と焼き茶の明朝文字で見せる
• 悩みの提起は黒い帯とモノクロ写真にして暗めのトーンへ切り替える
• 大事な一文には黄色マーカーを引く
• heading-band は文字 #FEF6F1 × 背景 #EB5569 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE1A34、4.57:1）を使う。
• button-primary は文字 #FEF6F1 × 背景 #CB6364 のコントラスト比が 3.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C24849、4.56:1）を使う。
• coupon-ticket は文字 #FEF6F1 × 背景 #D7A7A3 のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B2554E、4.57:1）を使う。

Typography

• 実績と番号は明朝・セリフ体にし、焼き茶か金で上品に見せる
• 本文と見出しはゴシックで読みやすくする
• 強調語だけローズ赤の太字にして一段大きくする
• 見出しの前置きは「＼ ／」で挟んだ小さな文字にする
• 注釈は ※ 付きの 10px のグレーで、該当ブロックのすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分写真は 2 列、無添加の円は 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央揃えで縦に積む
• 特長は大きな番号を左上に置き、白いカードと重ねる
• 成分は円形写真を「×」でつないで並べる
• 説明は小見出し→本文→図解の順に置く
• 見出しには下線か三角の吹き出しを付けて次へつなぐ

Elevation & Depth

• 基本は影なしのフラット
• SNS カードは白地で影を付けない
• ボタンは下に濃い影を付けて立体的にする
• 泡玉は光沢のハイライトで立体に見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 成分や悩みの写真は正円で切り抜く。インフルエンサー写真は傾けた矩形で白枠を付ける
• セクション境界: 直線の境界。セクションの間に下向きの三角や V 字の線を入れる
• 見出し帯は角丸なしの長方形
• 推奨リストは細い枠線の四角とチェックボックス
• 吹き出しは角丸で、下向きの三角を付ける
• クーポンは切り込みと点線のあるチケット形

Components

• 帯見出し（heading-band）: ローズ赤の長方形に白文字。2 行のときは段ずらしで重ねる
• 月桂樹実績バッジ（laurel-badge）: 金の月桂樹で囲み、焼き茶の明朝で順位や本数を見せる
• SNS 投稿風カード（sns-card）: 白い角丸カードに写真と吹き出しタグを載せ、下にハート・コメント・送信アイコンを並べる
• チェックリスト（check-list）: 四角のチェックボックスと 2 行の文。文の一部に黄色マーカーを引く
• 特長番号（feature-number）: 01 などの大きなセリフ数字を焼き茶で入れ、カード左上に重ねる
• 円形写真＋キャプション（circle-photo）: 正円の写真の下に名称を置き、2 枚を×でつなぐ
• 無添加マーク（additive-free-circle）: 薄グレーの円に斜線と成分名。3 列×2 段
• 登録ボタン（button-primary）: ローズのピル型に星アイコンと白い太字。下に影
• クーポン券（coupon-ticket）: くすみピンクのチケットに大きな金額と点線の切り取り線

Do's and Don'ts

Do - 白地を広く取り、ピンクは淡色を中心に使う - 数値の実績は月桂樹と明朝で上品に見せる - 成分や悩みの写真は正円で統一する - 強調語はローズ赤の太字か黄色マーカーで示す - 主張ごとに ※ 注釈を小さく添える

Don't - 原色の赤やビビッドな色を広い面に使わない - 角張った重い黒背景を多用しない（悩み提起の帯だけにする） - 番号や実績にゴシックの極太体を使わない - 写真の形を四角と円で混在させない

Page Structure

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

1. ファーストビュー（商品の世界観と実績を一目で伝える）: ピンクの泡玉背景に人物写真を置き、明朝の大コピーを載せる。泡玉 2 つで機能を×表示し、月桂樹バッジ 2 つを並べる
2. 商品イメージ（パッケージの可愛さを見せる）: 白いガラスの上に商品を置いた明るい物撮り
3. ブランド実績（信頼感を出す）: 紙吹雪の背景に黄色マーカーのリードを置き、シリーズ商品の写真と月桂樹バッジを複数並べる
4. インフルエンサー紹介（第三者のおすすめを見せる）: 段ずらしの帯見出しの下に、傾けた動画キャプチャを 2 枚。手描きのハートと吹き出しを添える
5. SNS 口コミ（話題性を見せる）: ローズ赤の全幅背景に SNS 風カードのスライダーを置き、下にサムネイル投稿を 2 段で横に流す
6. 満足度（数値で効果感を示す）: 淡ピンクの大きな円グラフに大きな % 表示。茶色の吹き出しと商品画像を添える
7. こんな方におすすめ（ターゲットの自己認識を促す）: 薄ピンクの地に枠線ボックスを置き、帯見出しとチェックリスト 3 項目を並べる
8. 悩みの提起（問題に気づかせる）: 困り顔の写真に黒い帯の見出しを重ね、本文と口内イラスト、天秤の図解、モノクロの円形写真 2 枚を続ける
9. 解決の要点（理想のバランスを示す）: ピンク枠のボックスに黄色マーカーの比率表示と、キャラクター付きの天秤イラストを入れる
10. 商品紹介（解決策として商品を出す）: ピンクの水面グラデーションに商品を置き、縦書きの明朝コピー、六角形バッジ、泡玉 2 つを添える
11. 特長 01〜04（成分・機能・携帯性・無添加を説明する）: セリフ体の大きな番号と白いカード。ローズ赤の見出しに下線を引き、円形写真や無添加の円グリッドを入れる
12. 会員・クーポン案内（再訪と登録を促す）: ローズ赤の枠バナー、チケット形のクーポン、ピル型の登録ボタン
13. 注文前の注意（注意事項を伝える）: 淡いグラデーションの枠に、中央揃えの小さな文字を並べる

Imagery

• 人物写真は柔らかな自然光で、肌はピンク寄りの明るい色調にする
• 泡玉は光沢とハイライトのあるピンクの球体を CG 風に描く
• 成分写真は粉末や菌の接写で、正円に切り抜く
• 悩みの写真はモノクロかくすんだ色調にする
• 図解は丸い顔のキャラクターを使ったゆるいフラットイラストにする
• 金の紙吹雪や手描きのハートで華やかさを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央 480〜750px 幅のカラムで SP 構成を保つ
• 左右の余白は薄ピンクか白のグラデーションで埋める
• SNS サムネイルと無添加の円は、PC では横並びの数を増やしてよい
• 見出しの文字サイズは 1.2〜1.4 倍程度に抑える

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