DESIGN.md — レモン黄×マゼンタのポップな美容サプリ LP（Lemon Yellow and Magenta Pop Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: レモンイエロー・マゼンタ・コスメ風・ハート・細枠カード・クーポン訴求
• 地の質感: フラットな単色面が基本。写真は明るいハイキー調。斜線ストライプやドットを部分的に重ねる。
• 形: ピル型ボタン、正円の写真、ハート型バッジ、ギザギザ丸のバッジ、角に三角を置いた細枠ボックス
• 温度感: 明るく暖かい。甘めで元気な女性向けのトーン

Colors

• 地は白を基本にし、セクションの切り替えにレモンイエローと淡いクリーム色を交互に挟む。
• 見出しのキーワード、価格、枠線、FAQ の面はすべてマゼンタで統一する。
• CTA だけは、マゼンタよりやや深い赤のグラデーションに白文字で差別化する。
• 黄色はバッジ・マーカー・円形装飾に使い、マゼンタと補色のように対比させる。
• 本文は濃いグレーにし、黒の面は使わない。
• 最後の定期便セクションは淡いピンクの地で囲む。
• label-ribbon は文字 #FEF301 × 背景 #DE0A5A のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D40A56、4.53:1）を使う。
• coupon-card は文字 #DE0A5A × 背景 #E6899A のコントラスト比が 1.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#FDF4F6、4.53:1）を使う。
• badge-burst は文字 #DE0A5A × 背景 #FEF301 のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D40A56、4.53:1）を使う。
• review-bubble は文字 #DE0A5A × 背景 #E7E7E7 のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D40A56、4.52:1）を使う。

Typography

• 見出しでは、キーワードだけ太字のマゼンタにし、残りは細字のマゼンタにする。
• 価格の数字は特大にし、「円」「税込」は小さく添える。
• 本文のキーワードは太字にし、黄色のマーカーを引く。
• 欧文の見出しは細いセリフ体にして、上品さを足す。
• 見出しは中央揃え、本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン類は 2 列のグリッドで並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは細いマゼンタ枠の白いボックスに収める。
• 特長は、四隅にマゼンタの三角を置いた細線ボックスを縦に連ねる。
• 購入ブロックは、マゼンタ枠の中に「帯ラベル→商品写真→クーポン→価格→CTA」の順で並べる。
• 黄色の帯セクションは画面幅いっぱいに敷く。
• 定期便のプランは点線で区切って縦に並べる。

Elevation & Depth

• 影はほぼ使わず、フラットな面と枠線で階層を作る。
• CTA は上下のグラデーションで、わずかに立体感を出す。
• 成分の円形写真には淡い光沢感を持たせる。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 成分やシーンの写真は正円で切り抜く。商品は切り抜きで配置する
• セクション境界: 直線で区切る。枠ボックスの四隅にマゼンタの三角を置く
• CTA・成分ラベル・帯見出しはピル型にする。
• 訴求バッジはハート型かギザギザ丸にする。
• 吹き出しは角丸の白地にマゼンタ枠を付け、しっぽを付ける。
• おすすめ見出しのボックスは、上部をタブ状に盛り上げた二重線枠にする。

Components

• 購入 CTA（button-primary）: 赤のグラデーションのピル型ボタン。白の太字に、右端の細い矢印を添える
• 帯ラベル（label-ribbon）: 枠線の上辺に乗る、マゼンタのピル型ラベル。文字は黄色か白
• クーポンカード（coupon-card）: ピンクの斜線ストライプ枠に白地を重ね、端にチケット風の切り欠きを入れる
• ギザギザ丸バッジ（badge-burst）: 黄色のギザギザ円に、マゼンタの太字で特別価格や割引率を入れる
• ハート型バッジ（badge-heart）: マゼンタか黄色のハートに白枠を付け、配合量を記す
• コーナー三角の特長ボックス（corner-box）: 白地に細い黒線、四隅にマゼンタの三角を置く
• FAQ のアコーディオン（accordion-faq）: マゼンタの面に、白のセリフ体で Q、白の太字で質問、右に白丸の＋を置く
• おすすめ対象アイコン（check-icon-card）: 淡いピンクの円に線画アイコンを入れ、右上にマゼンタのチェックを付ける
• 口コミ吹き出し（review-bubble）: 黄色の地に白い角丸カードを置く。マゼンタの文字と星 5 つ
• 特長ナビのピル（pill-accordion）: 黄色の地に白いピル型を置く。左に成分画像、右にマゼンタの▼

Do's and Don'ts

Do - マゼンタとレモンイエローの対比を、ページ全体で繰り返す。 - 価格ブロックは、取り消し線の通常価格、特大の特別価格、送料無料ラベルを必ずセットで置く。 - CTA は購入ブロックと口コミの後など、複数箇所に置く。 - 数値の訴求はハートや丸のバッジに収める。 - 写真は正円の切り抜きにし、白や淡い色の地に置く。

Don't - 黒や紺の重いダークセクションを使わない。 - マゼンタ以外の強調色（青・緑など）を見出しに使わない。 - 角張ったボタンや影の強いカードを使わない。 - 黄色の上に黄色の文字を置かない。 - 写真を暗いトーンに加工しない。

Page Structure

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

1. ファーストビュー（コンセプトと新発売の印象を伝える）: 黄色いコスメ小物の上に、マゼンタ帯に白抜きのキャッチを置く。商品の箱とハート型バッジ 2 つ、手書き風の欧文を添える
2. 初回限定オファー（お試し購入へ誘導する）: マゼンタ枠に帯ラベル、商品写真、クーポンカード、ギザギザバッジ付きの価格、CTA を並べる
3. おすすめ対象（読み手に自分ごと化してもらう）: タブ付きの二重線枠に、チェック付きの円形アイコン 5 つを 2-1-2 で配置する
4. 成分の概要（主な配合成分を一覧で見せる）: 黄色の大円に商品スティックを置き、白丸のマゼンタ枠で数値を示す。円形写真にマゼンタのピルラベルを添える
5. 特長ナビ（3 つの特長への目次）: 黄色帯に、白いピル型のボタンを 3 段並べる
6. 特長の詳細（各成分の根拠と魅力を伝える）: コーナー三角の細線ボックスを縦に連ねる。円形の吹き出し、写真、マーカー付きの本文、医師の推奨バッジを入れる
7. 専門家インタビュー（権威付けを行う）: 実験器具のイラストを乗せたピンク枠に、セリフ体の欧文見出しと円形の人物写真、マゼンタの見出しを置く
8. お客様の声（飲みやすさの共感を得る）: 黄色帯に白い吹き出しカードと星評価、CTA を置く
9. 利用シーン（持ち運びやすさを伝える）: クリーム色の角丸地に、円形写真を散らして吹き出しを添える
10. よくある質問（不安を解消する）: セリフ体の FAQ 見出しの下に、マゼンタ面のアコーディオンを並べる
11. クロージング・価格プラン（単品と定期便から選んでもらう）: 初回オファーを再掲し、単品のカードを置く。淡ピンクの地に、割引バッジ付きの定期便 3 プランを並べる

Imagery

• 商品は鮮やかなマゼンタのパッケージで、切り抜きで斜めに配置して動きを出す。
• ファーストビューは、黄色に塗ったコスメ小物とレモンを俯瞰で撮ったフラットレイにする。
• 成分は泡・ゼリー状の球体・果実を、光沢のあるイメージ写真で円形に切り抜く。
• アイコンは黒の細い線画で、淡いピンクの円に入れる。
• 人物は白い服の女性を明るい自然光で撮り、笑顔で飲む姿にする。
• フラスコなどは、パステルカラーの線画イラストで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版は SP と同じ幅約 375px のカラムを画面中央に固定する。
• PC の背景はレモンイエロー一色にし、左上にロゴとページ内リンクのナビ、商品写真を置く。
• PC でもカラム内のレイアウトは SP と同一に保つ。
• PC 用に広げる場合も、本文幅は 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 行書くと起動時に読み込まれる。