DESIGN.md — ミント×水色グラデの清涼感ある健康飲料LP（Fresh Mint Gradient Fasting Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ミントグリーン・水色グラデーション・泡・しずく・細い欧文見出し・角丸カード・黄色マーカー
• 地の質感: 白と淡いミントの地に、水滴や泡のボケを薄く重ねたみずみずしい質感
• 形: 大きな角丸カード、片側だけ大きく丸めた角、円形の泡バッジ、細線の括弧枠
• 温度感: やや寒色寄りで、黄色と金のアクセントがほどよい温かみを添える

Colors

• 地は白を基本にして、セクションの背景を淡いミント〜水色のグラデーションで切り替える
• 見出しのキーワードはミントグリーンの文字にし、下に黄色の手書き風マーカーを敷く
• 見出し帯やFAQは水色からミントへの横グラデーションの上に白文字を置く
• 課題提起のパートだけグレーと黒に落として、ネガティブな場面を表す
• 赤は価格と割引の表示だけに使う
• 金色の円バッジは数値の訴求にだけ使う
• button-primary は文字 #FFFFFF × 背景 #44BA7A のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#308456、4.6:1）を使う。
• bubble-badge は文字 #59BCB2 × 背景 #D4F0E6 のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2F746D、4.53:1）を使う。
• gold-badge は文字 #59BCB2 × 背景 #F3D58A のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2F746D、4.58:1）を使う。
• point-tab は文字 #FFFFFF × 背景 #59BCB2 のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2F746D、4.54:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #6CC3D8 のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#288095、4.55:1）を使う。
• price-block は文字 #D65959 × 背景 #FDFEFE のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D04343、4.55:1）を使う。

Typography

• 見出しはキーワードだけを大きくし、助詞は小さくして強弱をつける
• 英字の飾り見出しは細いサンセリフで、見出しの上や背景に薄く置く
• 本文中の強調はミントの太字にし、文全体は塗らない
• 本文の行の下には点線の罫を引き、ノートのように見せる
• 縦書きの大きなコピーを写真の上に重ねてよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。小さいカードは 2 列も使う
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは画面幅いっぱいの淡いグラデーション地の上に、白い角丸カードを左右約5%の余白で置く
• 見出しの上下は点線の縦三点や縦線でつなぐ
• ポイント紹介はタブ型の見出し帯とカードで、番号つきの章として並べる
• 成分紹介は大きな細字の番号と写真を斜めの淡い地に重ねる
• 注釈は各ブロックの末尾に右寄せで小さく入れる

Elevation & Depth

• 白カードにはごく薄い影（0 4px 16px rgba(0,0,0,.06)）をつける
• CTAボタンには濃い緑の下影を入れて立体感を出す
• 泡バッジは半透明の円にハイライトを入れ、ガラス玉のように見せる

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸の四角が基本。片側の角だけ大きく丸めたり、円形に切り抜いたりもする
• セクション境界: 直線で切り替え、グラデーション地と大きな角丸カードの縁で区切る
• 見出しを細線の角括弧で挟む
• タブ型の見出しは上辺が台形になった帯にする
• ハッシュタグ風のラベルは白いピル型にする

Components

• 主CTAボタン（button-primary）: 緑の縦グラデーションのピル型ボタン。左に丸い矢印アイコンを置き、2行の文字を入れる
• 泡の円バッジ（bubble-badge）: 半透明のミント色の円に、白抜きのラベルと短い言葉を入れる
• 金色の数値バッジ（gold-badge）: 金色のグラデーション円に、数値を大きく入れる
• ポイント見出しタブ（point-tab）: 台形のタブに番号を入れ、その下にミントの帯とピル型のサブ見出しを重ねる
• マーカー見出し（marker-heading）: ミントの太字キーワードの下に、黄色の手書き風の線を敷く
• 黒ラベル（label-dark）: 黒地に白文字の小さい角丸ラベル。成分名の上につける
• お客様の声カード（voice-card）: 写真の上にミントの帯で見出しを重ね、年代・属性と点線罫つきの本文を入れる。背景には英字の番号を縦に置く
• FAQアコーディオン（faq-item）: 水色→ミントのグラデーション帯に白い太字で質問を入れる。左端に縦書きの英字、右端に濃い色の＋ボタンを置く
• 価格ブロック（price-block）: 通常価格に打ち消し線を引き、黄色の星形の割引バッジと、赤い大きな数字の価格を並べる

Do's and Don'ts

Do - 地は白と淡いミントに保ち、清潔感を優先する - キーワードはミントの太字と黄色マーカーで目立たせる - 英字の飾り見出しを各セクションに入れて、リズムを作る - 数値の訴求は金色や泡の円バッジにまとめる - 体験談や数値には注釈を必ず添える

Don't - 濃い原色の背景を広い面に使わない - 赤を価格以外に使わない - 角の尖った重い枠線のボックスを使わない - 本文を中央寄せの長文にしない（短い導入文だけは中央寄せでよい） - 英字見出しを太字で濃く主張させない

Page Structure

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

1. ファーストビュー（専門家監修の商品と主な効果を一目で伝える）: 女性の写真と商品ボトルを並べる。白枠の肩書き見出しとミントの大見出しを置き、金色の円バッジを縦に3つ並べ、背景には縦書きの英字を薄く入れる
2. 概念の説明（手法の意味を簡単に説明する）: 英字見出しのあとに、写真と水しぶきのイラストを置く。ミントのボックスに白文字で説明を入れる
3. 仕組みの図解（体内の働きをキャラクターで図解する）: 2枚の角丸カードを並べる。グレー地に吹き出しと横棒グラフを置き、比較の前後を示す
4. メリット（得られる効果を写真で並べる）: 写真のコラージュに泡バッジと縦書きのコピーを重ねる
5. 課題の提起（間違ったやり方のリスクを示す）: グレーの水滴地に黒いシルエットと×印を置き、反転した帯で注意を促す
6. 選び方の提示（選ぶ基準を2つ示す）: 片側だけ丸めたピルを2つ並べ、グラスを持つ手の写真とつなぐ
7. 商品紹介（商品を見せる）: グラデーション帯の見出しのあとに、ボトルとグラスの物撮りを大きく見せる
8. SNSの評判（SNSで話題になっていることを示す）: ピル型のハッシュタグと、SNS風の写真カード、短い感想を置く
9. 4つのポイント（開発者・成分・ダイエット効果・無添加を訴求する）: タブ型の見出しと白い角丸カードで、番号つきの章を縦に連ねる
10. 満足度（アンケート結果を見せる）: ミント地に吹き出しの感想とドーナツグラフ、円形の写真を散らす
11. 飲み方（日数ごとの手順を説明する）: 日数ラベルを縦に置き、ステップごとのカードを並べる
12. 味と品質（味のアレンジと国内製造を伝える）: 物撮りに縦書きのコピーを重ね、アレンジ例を2つのピルで見せる。工場の写真と国旗のバッジを置く
13. お客様の声（モニターの体験談）: 写真と見出し帯つきのカードを3件並べる
14. オファーとCTA（初回の価格で購入を促す）: ミント地のカードに価格ブロックと緑のピルCTAを置き、その下に定期コースの注意を枠で囲む
15. よくある質問（不安を解消する）: 括弧枠の見出しの下に、グラデーション帯のアコーディオンを並べる

Imagery

• 自然光の明るい室内で、白い服の女性が笑顔で飲む写真を使う
• 商品の物撮りは、木の台と漆喰の壁、窓から差す光の影で撮る
• 成分は食材を白背景に切り抜くか、木のスプーンに盛って撮る
• 水色のキャラクターを丸くかわいいイラストで描く
• 背景には水滴・泡・しずくのボケを薄く散らす
• 課題の場面だけ黒いシルエットのピクトグラムを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を480〜600pxの中央カラムにし、左右にグラデーション地を広げる
• ファーストビューは写真とコピーを左右に分けてもよい
• 声やポイントのカードはPCで2列にしてもよい
• 英字の飾り見出しはPCで大きくして余白を埋める

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