DESIGN.md — ミントターコイズ×水面の透明感美容サプリ LP（Clear Mint Aqua Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型、信頼・誠実
• キーワード: 透明感・ミント・水面・円バッジ・線枠カード・ハイライト帯
• 地の質感: 水面の波紋、しずく、ジェルの写真をうっすら敷く。悩みパートだけ細かいドット網やくすんだ面にする
• 形: 細い線の円バッジ、角丸の線枠カード、大きな円形の背景面、帯状の見出し
• 温度感: やや涼しげ。価格のオレンジと黄色マーカーで温かみを足す

Colors

• 地は白と淡いミントを交互に使い、全体を明るく保つ
• 主色ターコイズは見出しの強調語、帯見出し、線枠に使う
• 悩み・原因パートだけグレーとくすんだネイビーにして、空気を沈ませる
• 価格と限定バッジ、レビューの縦書きキャッチはオレンジにする
• 購入ボタンは緑のグラデーションにし、横に淡い黄色の補足ラベルを付ける
• フレーバーは青・ピンク・オレンジの小ラベルで色分けする
• button-primary は文字 #FFFFFF × 背景 #52DE75 のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A8735、4.6:1）を使う。
• circle-badge は文字 #1BAA9B × 背景 #FEFEFF のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#158277、4.64:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #1BAA9B のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#158277、4.5:1）を使う。
• price-block は文字 #F38D1C × 背景 #FEFEFF のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B16209、4.51:1）を使う。
• voice-card は文字 #727273 × 背景 #F5F5F5 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6F6F70、4.6:1）を使う。
• offer-banner は文字 #FFFFFF × 背景 #1BAA9B のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#158277、4.5:1）を使う。

Typography

• 見出しは 2 行構成にする。リード行は小さめのグレー、強調行は大きめのターコイズ
• 数値は特に大きく太くし、単位は小さく添える
• 英字の小ラベルは字間を広げ、左右に点を付ける
• 強調語は、黒地に白文字の帯か、グレーの影を付けた白ボックスで囲む
• 本文は行間を広めにし、グレーで柔らかく見せる
• レビューのキャッチはオレンジの縦書きにし、白い帯に載せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長バッジは 3 列、チェック項目は 3 列×2 段
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 20px の余白を取って中央に置く
• ポイントは 1 つずつ線枠の白カードに入れ、縦に重ねる
• セクション間は点線の縦線でつなぎ、流れを示す
• オファー部分（見出し・商品・価格・CTA・注釈）は同じ形で 3 回繰り返す
• 円バッジは 3 つを横に並べ、上部に英字を円弧で入れる

Elevation & Depth

• カードはほぼ影なしにし、細い線枠で区切る
• 強調ボックスはグレーのずらし影（オフセット）で浮かせる
• CTA ボタンは下側に濃い緑の厚みを付け、立体的に見せる
• メッセージカードは柔らかいドロップシャドウで浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物と商品は角丸の長方形、成分の写真は円形にする。背景には大きな円形の面を置く
• セクション境界: 直線で切り替える。上部に半円の切り欠きを付けたカードと点線の縦線で区切る
• 円バッジは細いターコイズの線と白地で作る
• 帯見出しは角のない長方形にする
• 価格バッジは右端を矢印形に尖らせる
• FAQ は角の小さい線枠にする

Components

• 購入 CTA ボタン（button-primary）: 緑のピル型ボタン。左に丸い矢印アイコンを置き、右端に淡い黄色の「1日あたり価格」ラベルを重ねる
• 特長の円バッジ（circle-badge）: 白地に細い線の円。上部に英字を円弧で入れ、中央に短い特長を太字で書く
• 帯見出し（band-heading）: ターコイズの横帯に白抜き文字を入れる。カード内の小見出しに使う
• 価格ブロック（price-block）: 左に矢印形のオレンジバッジ。定価に取り消し線を引き、オレンジの大きな数字で価格を出す。下に線枠の特典ラベルを 2 つ並べる
• ポイントカード（point-card）: 淡いミントの外枠を持つ白カード。英字の番号ラベル、区切り線、2 行見出しを入れる
• お客様の声カード（voice-card）: 角丸の人物写真に縦書きのキャッチと VOICE 番号を重ねる。下にグレー面の本文と注釈を置く
• オファー見出し帯（offer-banner）: ターコイズのグラデーション面に、白い英字の大見出しときらめきアイコンを置く
• FAQ アコーディオン（faq-item）: 淡いミントの線枠。左にグレーの Q、右にターコイズの＋を置く
• 原因提示ボックス（dark-cause-box）: くすんだネイビーの網目面。白文字で書き、強調語にはベージュのマーカーを引く

Do's and Don'ts

Do - 見出しは小さなリード行と大きな強調行の 2 段で組む - 数値（含有量・価格・割合）は特に大きく表示する - オファーブロックはページ内で 3 回ほど繰り返す - 注釈は小さな文字で、該当する要素のすぐ下に置く - 水やしずくの写真を背景にうっすら敷き、透明感を出す

Don't - 濃い原色の面を広く使わない - ターコイズとオレンジを同じ見出しの中で混ぜない - 角丸を大きくしすぎてポップに寄せない - 影を強く付けない - 本文を黒（#000）にしない

Page Structure

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

1. ファーストビュー（商品のジャンルと主成分量を一目で伝える）: 白とミントの地に、帯のリード、2 段見出し（一部オレンジ）、商品 3 箱、特長の円バッジ 3 つを置く
2. ブランド紹介（出自と信頼性を示す）: 大きなターコイズの円の上に白文字の説明を置き、下に商品パッケージの写真を入れる
3. SNS の反響（社会的な証明を見せる）: 横スクロールの投稿カードを並べ、黄色い吹き出しの見出しを付ける
4. 特長の要約（主な 3 つの価値を示す）: 水面の写真に商品を斜めに置き、周りに線の円で特長を配置する
5. オファー（購入を促す）: オファー見出し帯、商品、フレーバーラベル、価格ブロック、緑の CTA、注釈の順に並べる
6. 悩みの提起（共感を得る）: グレーのドット地のカードに線画の女性イラストを置き、吹き出し風の強調語を入れる
7. 原因（悩みの原因を説明する）: くすんだネイビーの箱に白文字で書き、果物の比較写真を添える
8. 成分の解説（解決策を示す）: ミントの枠カードに図解、本文、イラストを入れる。年齢による減少はグラフで見せる
9. 解決提示（商品を解決策として登場させる）: ターコイズの地に白い大見出しを置き、商品と成分の円バッジを掛け算記号でつなぐ
10. お客様の声（実感を伝える）: 人物写真に縦書きキャッチを重ねたカードを 3 つ並べる
11. 3 つのこだわり（詳しい根拠を示す）: POINT 01〜03 の線枠カードに、成分表や 6 項目のチェックグリッドを入れる
12. 開発者メッセージ（作り手の思いを伝える）: 人物イラストと白帯の強調コピーを置き、ターコイズの肩書き帯を付ける
13. 飲み方・品質（使い方と安全性を伝える）: タイル写真の上に使い方の円バッジを置く。工場写真と英字ラベルの見出しを付ける
14. よくある質問（購入前の不安を解消する）: ミントの角丸見出しボックスと、線枠のアコーディオンで作る

Imagery

• 商品は白とターコイズの箱。明るい白背景に置き、柔らかい影を付ける
• 背景には水面の波紋、しずく、透明なジェルの写真を淡く敷く
• 悩みパートは細い線画の女性イラストで描き、淡いミントとグレーで塗る
• レビューは店舗で商品を持つスタッフの明るい写真にする
• 成分は円形に切り抜いた食材写真や、粒状のアイコンで示す
• 装飾はきらめきの四芒星と点線にとどめる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜480px 幅の SP レイアウトを置き、左右を淡いミントの地で埋める想定にする
• PC で広げる場合、円バッジやチェック項目は横一列にまとめる
• オファーブロックは PC では、左に商品、右に価格と CTA の 2 カラムにする
• 見出しの文字サイズは PC で約 1.3 倍にする

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