DESIGN.md — グレージュ×テラコッタの美容サプリLP（Soft Greige Terracotta Wellness Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル、情報量多め・訴求型
• キーワード: くすみカラー・生成り・テラコッタ・細い欧文セリフ・円形バッジ・字間広め
• 地の質感: シルク布や大理石風の淡い背景テクスチャ。ぼかした光と柔らかい影を重ねる
• 形: 正円バッジ、角を切った八角形の数値パネル、もくもく形の吹き出し、角丸カード
• 温度感: 暖かめのニュートラル。白とベージュが中心で、くすんだ青緑で少し冷やす

Colors

• 地色は白・生成り・薄グレージュを交互に使い、セクションを区切る
• 見出しで強調したい語だけテラコッタにする。残りはグレーブラウン
• 成分名・ブランド欧文・ラベル帯はマスタードゴールドにする
• 数値の訴求パネルは、くすみセージの地に白抜きの細いセリフ数字を置く
• 原色や純黒は使わない。文字はグレーブラウン系にする
• 価格だけは赤みの強いテラコッタで大きく目立たせる
• button-primary は文字 #FFFFFF × 背景 #C8A848 のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8D742A、4.5:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #9AB5B4 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#5B7C7B、4.55:1）を使う。
• label-band は文字 #FFFFFF × 背景 #C27142 のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AD6338、4.55:1）を使う。
• stat-panel は文字 #FFFFFF × 背景 #9AB5B4 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#5B7C7B、4.55:1）を使う。
• worry-bubble は文字 #FFFFFF × 背景 #928C8C のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#7B7575、4.52:1）を使う。
• price-card は文字 #C27142 × 背景 #FEFEFE のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AD6338、4.51:1）を使う。

Typography

• 見出しは字間を0.1em以上取り、ゆったり見せる
• 見出しは強調語だけ大きくし、色も変える
• 数値と欧文は細いセリフ体で大きく扱い、和文と並べる
• 強調語の上に傍点を打つ・下に波線を引く装飾を使う
• 縦書き帯で短いコピーを見せることがある
• 本文は行間2.0で、強調部分をテラコッタまたはゴールドで色付けする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円形バッジや特長は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しは中央揃え。小ラベル→大見出しの順に積む
• カードは左右の余白を約5%にし、大きな角丸で浮かせる
• 写真は全幅で配置し、上下をグラデーションで地色になじませる
• 比較表は自社列だけを色付きにして目立たせる
• 数値パネルは写真の右側に重ね、半分はみ出させる

Elevation & Depth

• 白カードには薄く広い影を付ける（0 4px 20px rgba(0,0,0,.08)）
• 円形バッジは影を付けず、太い縁取りで立たせる
• 雑誌の掲載画像は少し傾け、影を付けて重ねる
• CTAには影を付けない。グラデーションで立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 正円の切り抜き・角丸の長方形・下端を地色にフェードさせる全幅写真
• セクション境界: 緩い曲線のウェーブ、大きな円弧の地色、矢印型の切り欠き
• 特長はグレージュの太い縁を付けた正円で見せる
• 数値パネルは角を切った八角形にする
• 悩みはもくもく形の吹き出しで表す
• ラベル帯は角の立った長方形で、下に三角の尻尾を付ける

Components

• 主CTAボタン（button-primary）: ゴールドのグラデーションのピル型。左端にテラコッタの円バッジ（初回限定などの短い語）を重ね、右端に三角矢印を置く
• 円形特長バッジ（badge-circle）: セージまたは白の正円。周りに欧文の細い文字を円状に添え、中に短い語を置く
• ラベル帯見出し（label-band）: テラコッタ・ゴールド・ブラウンの帯に白文字を置き、下に三角の吹き出し尻尾を付ける
• 数値訴求パネル（stat-panel）: セージの八角形。上に小さな角丸ラベル、中央に大きなセリフ数字と単位を置く
• 悩み吹き出し（worry-bubble）: グレーブラウンのもくもく形に白文字を置き、要点の語だけ太くする。人物写真の周りに散らす
• 比較表（compare-table）: 左の項目列はゴールド地に白文字。自社列は淡いピンクベージュの地にテラコッタ文字で、上に突き出したヘッダーを付ける。他社列はグレー
• 価格カード（price-card）: テラコッタのヘッダー帯付きの白カード。取り消し線の通常価格→大きなテラコッタ価格、赤い円の割引バッジ、細枠のタグを並べる
• FAQ行（faq-item）: クリーム地の帯にセージ色の「Q.」と質問文を置く。アコーディオン式
• チェックリストカード（check-list）: 白カードの各行に丸いチェックアイコンを付け、キーワードをゴールドの下線で強調する

Do's and Don'ts

Do - くすみトーン（グレージュ・セージ・テラコッタ・ゴールド）だけで構成する - 数値は細い欧文セリフで大きく見せ、根拠の注釈を添える - 強調語の色替え・傍点・波線で、見出しにリズムを付ける - 写真は柔らかい自然光で撮り、上下を地色にフェードさせる - 正円・八角形・吹き出しの柔らかい図形で情報を分ける

Don't - 彩度の高い原色や蛍光色を多用しない（特典ブロック以外） - 純黒の文字や太い黒罫線を使わない - 字間を詰めた窮屈な見出しにしない - 角張った四角ボタンを主CTAにしない - 写真を硬い枠でそのまま切り貼りしない

Page Structure

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

1. ファーストビュー（商品とキャッチで世界観を伝える）: 女性の写真と商品ボトルを重ね、太い和文キャッチと細いブランド欧文を置く。下に3つの円バッジとCTAを並べる
2. メディア掲載（権威付け）: 細枠の中に誌面を傾けて重ねる。掲載告知の見出しはテラコッタにする
3. SNS紹介（共感と話題性を伝える）: 投稿風のフレームに写真を入れ、アイコン列を添える
4. 悩みの提起（不調への共感）: 青グラデーションの地に人物写真を置き、周りに吹き出しを6つ散らす。中央に縦書きの帯を置く
5. 原因の解説（不調の原因を図とグラフで示す）: 白カードに対比表を入れ、グレージュの円で影響を3つ示す。折れ線グラフで低下を見せる
6. 解決・成分紹介（成分の網羅性を訴求する）: 円形に切り抜いた商品写真の周りに欧文を円状に回す。番号バッジを付け、成分の円を商品の周りに並べる
7. 比較表（他社との差を示す）: 自社列だけを強調した縦長の表にする
8. 注目成分の詳細（主要成分の効果を数値で示す）: 成分名の円を2つ交差させる。写真の上に八角形の数値パネルを重ね、棒グラフと不足項目の円も使う
9. 品質・製造（安心感を伝える）: 青グレーの地に製造写真3枚と白い説明カードを置く
10. 監修医紹介（専門家の信頼）: セージの帯に医師の写真と経歴を載せる
11. 開発の想い（開発の背景に共感してもらう）: 人物写真に縦書きの帯とチェックリストカードを重ねる
12. まとめ特長・利用者の声（要点の再確認）: テラコッタ縁の円を3×2で並べる。イラストの人物と手書き風の吹き出しを添える
13. 価格・特典・CTA（購入を促す）: 価格カードと緑の特典ブロック、黄色の大円で継続特典を見せる
14. よくある質問・全成分（不安を解消する）: 大きなセリフ体の見出しの下に、クリーム帯のアコーディオンと成分表記を並べる

Imagery

• 30〜40代女性のナチュラルメイクのポートレート。柔らかな窓明かりで撮る
• 白いシルク布や石のテーブルに商品を置いた、明るく淡いトーンの物撮り
• 果物・野菜・きのこを白背景で切り抜いた素材写真
• 細い線と淡い水彩で塗った女性の手描きイラスト
• 太陽・月・人体シルエットなどの線画風アイコンを、ゴールドとセージで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像がないため、PCでは本文を最大幅約750pxの中央カラムにし、左右に背景テクスチャを敷くのを推奨
• 円バッジや特長は、PCでは横一列に並べる
• 人物写真と説明文は、PCでは左右2カラムにする
• 見出しのサイズは、PCではSPの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 行書くと起動時に読み込まれる。