DESIGN.md — ミント×六角形の清涼感サプリ LP（Mint Clinical Fresh Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、クール・先進的、情報量多め・訴求型
• キーワード: ミントグリーン・六角形・清涼感・黄色マーカー・成分訴求・明暗対比
• 地の質感: 淡いグラデーションに六角形パターンやドット網点、光のライン。全体にフラットで清潔なデジタル質感
• 形: 六角形バッジ、円形切り抜き写真、角丸カード、逆三角形の区切り、片側を大きく丸めた写真枠
• 温度感: 寒色寄り。ミントと白で涼しく、黄色で少しだけ温度を足す

Colors

• 地は白・淡グレーグリーン・ミントグラデを交互に置き、ページ全体を寒色で統一する
• 悩みと原因のパートだけ暗いネイビー黒にし、写真もモノトーン寄りにする
• 強調語は黄色マーカーを引くか、黄色文字にする。ミント地の上では黄色文字を使う
• 見出しはミント文字か、白地にミント文字の箱で組む
• カード見出し帯はくすみブルーグリーンに白文字
• 暖色は成分写真（実・果物）にだけ出す
• point-hex-badge は文字 #72C5BA × 背景 #FEFDFD のコントラスト比が 1.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#358076、4.6:1）を使う。
• marker-box-heading は文字 #72C5BA × 背景 #FDFD8B のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#358076、4.54:1）を使う。
• mint-label-box は文字 #FBFBFB × 背景 #72C5BA のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#358076、4.51:1）を使う。
• faq-card は文字 #7A7A7A × 背景 #FEFDFD のコントラスト比が 4.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#757575、4.54:1）を使う。

Typography

• 見出しは字間を広めに取り、太いゴシックで組む
• POINT見出しは斜体のミント文字にし、行ごとに下線を引く
• 数字（倍率・秒数・分）は本文の2倍以上に大きくする
• 英字はロゴ風の太いサンセリフにし、カタカナのルビを小さく添える
• 本文は13px前後で、短い行で改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分紹介だけ写真と文を左右交互に置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の背景で切り替え、中身は左右16〜20px内側
• 成分紹介は円形写真を左右交互に画面端からはみ出させる
• カードは白地で、上にくすみ色の見出し帯を付ける
• 利用シーンは写真を左右交互にずらし、片側を大きく丸める
• FAQは方眼グリッドの背景に白カードを縦に並べる

Elevation & Depth

• 白カードには淡いミント寄りの影を付ける（0 4px 16px rgba(80,160,150,0.15)）
• 吹き出しは影なしか、ごく弱い影
• 円形写真には白の太い縁と淡い外側グローを付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分写真は円形、シーン写真は片側だけ半円に丸めた矩形
• セクション境界: 基本は直線。商品紹介の下は逆三角形（V字）で切り替える
• POINT番号は六角形のバッジにする
• 成分ラベルは白い六角形に入れる
• 背景に半透明の六角形パターンを散らす
• 吹き出しは小さな三角しっぽ付きの白い四角

Components

• POINT六角バッジ（point-hex-badge）: 白地の六角形にミント枠。上に小さな英字ラベル、下に大きな2桁番号
• 黄枠ボックス強調（marker-box-heading）: 見出しの中の1語を黄色の枠や塗りの箱に入れて目立たせる
• ミント帯ラベル（mint-label-box）: ミントの塗りに白文字の短いキャッチ。2段に積んで使う
• 成分円形写真＋六角タグ（ingredient-circle）: 白縁の円形写真の上に、白い六角形の成分タグを重ねる
• 帯見出しカード（header-band-card）: 上部がくすみティールの帯で白文字、下が白地。成分を2つ並べる
• 体験コメント吹き出し（speech-bubble）: 白い四角にしっぽ付き。中は2行の短い感想
• FAQカード（faq-card）: 白カードの左端から、ミントの半ピル型Qタブをはみ出させる。回答に黄色マーカーを引く
• 不使用表示カード（free-from-card）: 3列カード。上がティール帯に白文字、下が白地に斜線入りの線アイコン
• 黄色マーカー（highlight-marker）: 本文の強調語の下半分〜全体に、淡い黄色の塗りを引く

Do's and Don'ts

Do - ミント・白・淡グレーグリーンで寒色の清潔感を保つ - 強調は黄色マーカーと黄色の枠に絞る - 六角形と円を繰り返して、ブランドの記号として使う - 悩みパートだけ暗くして、解決パートとの対比を作る - 数字は大きく、単位は小さく組む - 注釈は該当ブロックのすぐ下に小さく置く

Don't - 赤やオレンジをUIの色に使わない - 角張った重い黒枠や太い影を使わない - 成分写真を四角いまま置かない - 明朝体を使わない - 本文を長い段落にしない - ミント地にミント文字を重ねない

Page Structure

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

1. ファーストビュー（悩みの訴求と、独自処方・商品の提示）: ミントグラデ地に大見出し。1語を黄枠で強調する。人物写真の手前に成分の六角形3つと商品パッケージを置く
2. お知らせ（パッケージ変更の告知）: 白地。旧パッケージから新パッケージへ矢印でつなぎ、短い説明を添える
3. 悩みの提起（悩みのシーンに共感させる）: 暗い地にモノトーン写真を4分割。悩みの短文を4つ置き、中央に大きな問いかけ
4. 原因の解説（原因は複数あると伝える）: 暗いデジタル背景に、原因を円形ノードで放射状に配置。中央に菌のCG
5. 解決策の提示（商品を解決策として出す）: ミント地に大きな欧文ロゴ。商品を持つ手と錠剤を見せ、下をV字で切る
6. 特長1：独自処方（3成分の配合を訴求する）: 六角POINTバッジ＋斜体見出し。成分ごとに円形写真を左右交互に置き、三角図と人体図でまとめる
7. 補助成分（その他の成分を補足する）: 帯見出しカードに成分を2つ。専門家風の人物アイコンを添える
8. 特長2：飲みやすさ（手軽さと持ち運びやすさ）: ミント帯ラベルと大きな数字。円形写真と、持ち物を並べた俯瞰写真
9. 体験検証（効果の持続を実感で示す）: ミント地に吹き出しを連ねる。時間経過は矢印とタイマーアイコンで示し、下にイラスト人物を並べる
10. 特長3：無添加（安心感を伝える）: くすみティール地。甘味料カード、不使用の3列カード、使っていない成分リスト
11. 利用シーン（飲むタイミングを想像させる）: 淡グレー地に、片側を丸めた写真を交互に配置。ミント帯ラベルとミントの葉を散らす
12. よくある質問（不安を解消する）: 方眼背景にQタブ付きの白カードを縦に並べ、回答に黄色マーカーを引く

Imagery

• 人物写真は明るく自然光で撮り、白い服の清潔な雰囲気にする
• 悩みシーンは暗く彩度を落とし、ニオイを黄緑の煙として合成する
• 成分は白背景の物撮りで、円形に切り抜く
• 菌やウイルスは黄緑のCGで、不快感を表す
• ミントの葉・氷・水しぶきを装飾として散らす
• 背景に六角形パターン・ドット網点・光の流線を薄く重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP レイアウトを置き、左右を淡いミントの背景で埋める
• PC に広げる場合、成分紹介は写真と文を 2 カラムにする
• 不使用カードは PC でも 3 列のまま、幅だけ広げる
• FAQ は最大幅 800px にして中央に寄せる

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