DESIGN.md — ミント緑×白の清涼感ある薬用歯磨き LP（Fresh Mint Green Medicated Oral Care LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 清潔・爽やか、上品・高級、シンプル・ミニマル、ナチュラル
• キーワード: 清涼感・ミントグリーン・明朝見出し・細線の円・余白多め・和モダン
• 地の質感: 白〜淡いグレーのフラットな地に、光の透ける植物写真と白砂の写真を重ねる
• 形: 細い線の正円、六角形のバッジ、塗りの円バッジ、角丸の大きいピル型ボタン
• 温度感: 涼しげでやや寒色寄り。フッターの赤だけが温かいアクセント

Colors

• 地は白と #F0F0F0 の淡いグレーの 2 種類だけを使い、色面は最小限にする
• ブランドの清涼感はミントティールで出し、見出しや細い円線、誘導帯に使う
• 成分や機能の説明には深い緑の面を使い、上に白文字を置く
• 成分名の大見出しは緑の文字に緑の下線を引く
• 赤はフッターとページ上部へ戻るボタンだけに使う
• 購入ボタンは白地に黒い枠線のアウトラインにして、色付きの塗りにしない
• band-anchor は文字 #FFFFFF × 背景 #01B2AA のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#01847E、4.56:1）を使う。
• circle-benefit は文字 #01B2AA × 背景 #FFFFFF のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#01847E、4.56:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #00923F のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#00883B、4.58:1）を使う。

Typography

• 見出しはすべて明朝体にし、本文・注釈・ラベルはゴシック体にする
• 見出しの助詞やかなは一回り小さくして、漢字との大小差でリズムを出す
• ※番号は見出しの右上に小さく添える
• リード文は字間を 0.15em 前後まで広げる
• ファーストビューのキャッチは写真の右上に白文字の縦書きで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介だけ PC で 2 カラム
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右に広い余白を取り、中央揃えを基本にする
• 効能は大小の円を 3 つ重ね合わせて配置する
• 成分説明は緑のボックスに六角形のバッジを 4 つ置き、中央の歯のイラストに線でつなぐ
• 成分名ブロックは左揃えにし、右側に丸く切り抜いた写真を添える
• 注釈はセクション末尾に小さい文字でまとめる

Elevation & Depth

• 影はほぼ使わず、フラットな面と細い線で構成する
• 商品写真の写り込み・ぼかしで奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は四角い全幅か正円に切り抜く。商品は切り抜きで配置する
• セクション境界: 直線で区切る。白からグレー、グレーから白へ背景色を切り替える
• 効能の円は塗らず、細い線だけで描く
• 成分バッジは六角形にし、白塗りと白線の 2 種類を使い分ける
• お茶エキスは緑で塗った正円のバッジを 3 つ横に並べる
• リードのラベルは細い黒枠の四角で囲む

Components

• 販売サイトボタン（button-store）: 白地に黒い細枠のピル型ボタン。中に各ストアのロゴを置き、2 つ横に並べる
• 購入への誘導帯（band-anchor）: 全幅のティールの帯。白文字に下向き三角を添える
• 効能の線円（circle-benefit）: 淡いティールの細い線で描いた円を重ね、中に明朝体の大きな効能ワードを入れる
• 成分六角バッジ（badge-hexagon）: 緑の地の上に置く六角形。白塗りに黒文字か、白線に白文字にする
• エキス丸バッジ（badge-circle）: 緑で塗った正円。白い明朝で名前を入れ、下に小さく補足を添える
• 下線付き成分見出し（heading-underline）: 緑の明朝の大きな文字に緑の下線を引き、上に小さな黒字のリードを置く
• 注意・成分のアコーディオン（accordion）: 上下を黒い細線で区切った行。左に太字のラベル、右に＋アイコンを置く
• 商品カード（product-card）: 切り抜いた商品写真の下に、区分・商品名・販売名・価格を中央揃えで並べ、その下に販売サイトボタンを置く
• 赤いフッター（footer-red）: 全幅の赤い帯。白い線画のロゴと小さなコピーライトを入れる

Do's and Don'ts

Do - 見出しは明朝体にし、色はティールか緑にする - 余白を広く取り、要素を少なくして清潔感を保つ - 効能は線の円、成分は六角形で図解する - 注釈は※番号をつけて小さく添える - 植物や白砂の写真で涼しさを出す

Don't - ポップな丸ゴシックや太い装飾書体を使わない - 赤をフッター以外で多用しない - 影の強いカードやグラデーションのボタンにしない - 背景に柄や派手な色面を敷かない - 購入ボタンを色付きの塗りにしない

Page Structure

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

1. ファーストビュー（商品の清涼感を一目で伝える）: 植物越しの光と写り込みのある背景に商品を並べる。右上に縦書きの白いキャッチ、左上に円形の実績バッジを置く
2. リードと商品種別（商品の価値を一文で伝える）: 明朝で字間を広げた一文を置き、その下に黒枠で囲んだ種別ラベルを置く
3. 効能の図解（主な効能と作用を整理して見せる）: 線の円を 3 つ重ね、大きな効能ワードと作用 5 つの箇条書きを入れる。下に注釈を添える
4. 購入への誘導帯（購入エリアへスクロールさせる）: 全幅のティールの帯に白文字と下向き矢印を入れる
5. コンセプトビジュアル（白さと爽快感を印象づける）: 白砂の波紋の上に白いオブジェを置く。上に明朝の 2 行コピーを置き、きらめきの装飾を添える
6. 天然エキスの紹介（自然由来の配合を伝える）: 左に葉の写真、右に見出しと緑の丸バッジ 3 つを並べる
7. 使用感の訴求（使ったときの爽快感を伝える）: 緑の明朝 2 行に下線を引く
8. 有効成分の図解（薬用成分の働きを示す）: 緑のボックスの中央に歯のイラストを置き、周囲の六角バッジ 4 つと線でつなぐ
9. 独自成分（差別化となる成分を強調する）: 小さなリードの下に緑の下線付き大見出しを置き、右に丸く切り抜いた写真を添える
10. 注釈とアコーディオン（法的な表記と使用上の注意を載せる）: 小さな注釈を並べ、その下に細線で区切ったアコーディオンを 2 行置く
11. 商品ラインナップと購入（商品の選択と購入先への誘導）: 白地に商品カードを縦に並べ、それぞれに販売サイトボタンを 2 つ付ける
12. フッター（ブランドを示して締める）: 赤い全幅帯の中央に白いロゴとコピーライトを置く

Imagery

• 逆光の植物越しに、ガラスの台に置いた商品を撮る。淡いブルーグリーンのぼかしで涼しさを出す
• 白砂の波紋など、白一色のミニマルなコンセプト写真を使う
• 茶葉や針葉樹の接写で自然素材を表現する
• 歯の断面はシンプルなイラストにし、赤とピンクで描く
• きらめきの四芒星をティールで小さく散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 1 カラムで、コンテンツ幅を約 50% に絞る
• PC の商品カードは 2 つを横並びにする
• PC では注釈とアコーディオンを左右 2 カラムに分ける
• 誘導帯は PC では全幅にせず、コンテンツ幅に合わせる
• 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 行書くと起動時に読み込まれる。