DESIGN.md — ティール×ザクロ赤の地中海系サプリ LP（Mediterranean Teal and Pomegranate Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、ナチュラル、信頼・誠実、やさしい・柔らかい
• キーワード: 地中海・ティール帯・木目テクスチャ・生成り地・筆記体の英字透かし・価格の大文字訴求
• 地の質感: 生成りの紙地と木目板を背景に使い、写真は明るく淡い光。英字の筆記体を薄く透かして重ねる。
• 形: 矢羽型の帯、角丸カード、円形バッジ、括弧型コーナー枠、ピル型CTA。
• 温度感: 暖色の生成り・木目をベースに、ティールで清潔感と信頼を足す中間〜やや暖かい温度感。

Colors

• 地は生成り・白を基本に、成分ごとに赤茶とオリーブ緑の全幅セクションで切り替える。
• 機能リスト・特典見出しはティール地に白文字で統一する。
• 価格・割引率・強調語はオレンジ文字、CTAだけ深緑のグラデーションにする。
• 口コミと価格枠は木目の濃茶背景の上に生成りカードを載せる。
• 見出し内のキーワードはオレンジまたはティールの色替えで強調する。
• 注釈は小さいグレー文字にして、強調色は使わない。
• button-secondary は文字 #F3FEFF × 背景 #7A7470 のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#79736F、4.55:1）を使う。
• benefit-row は文字 #E8761E × 背景 #F9FAFE のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B65A13、4.51:1）を使う。
• price-card は文字 #E8761E × 背景 #F9FAFE のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B65A13、4.51:1）を使う。

Typography

• 見出しは極太ゴシックで、強調語だけ1.3倍に大きくして色を替える。
• Voice・Supportなどの英字は筆記体やセリフ体を薄く敷き、和文見出しの背後に置く。
• 口コミの短いキャッチは濃茶地に白の縦書き帯で並べる。
• 価格数字はオレンジで本文の4倍以上に大きくする。
• 注釈は※番号付きの10px程度でまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能リストは2〜3列、写真グリッドは3列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅背景を切り替え、カードは左右5%の余白を取る。
• セクション間は縦3点リーダーでつなぎ、流れを示す。
• 口コミは写真と文章を左右交互に配置する。
• 見出しの上に小さい英字ラベルとアイコンを置く。
• 価格カードは木目背景の中に白カードを入れ子にする。

Elevation & Depth

• カードには弱いドロップシャドウ（y2px・ぼかし8px・薄茶）を付ける。
• CTAは下方向に濃い影を付け、立体的なボタンにする。
• 円形バッジには金属調のグラデーションと影を付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は角版か切り抜き。成分写真は円形や角丸の枠に入れる。
• セクション境界: 直線で全幅の色を切り替える。一部は上辺をアーチ状や斜めにカットする。
• 機能名は右端を矢羽型にした帯にする。
• 見出しは「」型のコーナー括弧の枠で囲む。
• 効能は円形バッジで並べる。
• FAQは角丸の白い箱に＋アイコンを付ける。

Components

• 申込CTA（button-primary）: 深緑グラデーションのピル型ボタン。右端に白丸の矢印アイコンを置き、影を付ける。
• 単品購入ボタン（button-secondary）: グレーの角丸ボタンに2行で価格を入れ、CTAより控えめにする。
• 矢羽型機能帯（arrow-band）: ティール地の帯に白抜き文字で効能を縦に並べる。左に線画アイコンを置く。
• 成分ペア表示（ingredient-pair）: 白い枠2つを＆の円で結び、左右に成分の写真を添える。
• 金メダルバッジ（badge-medal）: 金色の円形メダルに実績語と※番号を入れる。
• 口コミカード（voice-card）: 大きなセリフ数字と筆記体のVoiceラベル、オレンジの名前帯、点線区切りの本文で作る。
• 特典リスト行（benefit-row）: 左に円形の番号バッジ、右に白い角丸の横長バーを置き、割引をオレンジで大きく見せる。
• 定期コース価格カード（price-card）: 木目枠の中に白カードを置く。商品画像、黄色マーカーの送料行、取り消し線の通常価格、オレンジの特大価格、CTA、注意書きの順で並べる。
• FAQ項目（faq-item）: 筆記体のQuestionラベルを付けた白い箱に、右端のオレンジ＋丸アイコンを置く。
• 注釈ブロック（note-text）: ※番号付きの小さいグレー文字で各セクションの下に置く。

Do's and Don'ts

Do - 成分ごとに背景色を切り替え、テーマ色を持たせる。 - 大見出しの背後に薄い筆記体の英字を重ねる。 - 効能や割引は数字を大きくしてオレンジで強調する。 - 根拠となる図やグラフはイラストで簡潔に見せ、注釈を必ず添える。 - セクション同士は縦の点線とつなぎ文でつなぐ。

Don't - CTAの色を他の要素に流用しない。 - 黒の全面背景やネオン色を使わない。 - 注釈を本文と同じサイズにしない。 - 見出しを細字や明朝だけで組まない。 - 写真を暗く彩度の低いトーンにしない。

Page Structure

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

1. ファーストビュー（成分と効能を一目で伝える）: 成分ペア枠、金メダル、ティールの矢羽帯で効能を5つ並べる。右に爽やかな女性写真と商品パッケージを置く。
2. 効能まとめ（機能の数を訴求する）: 黄色い光の背景にティールの円形バッジを並べ、極太の大見出しを置く。
3. お客様の声（共感と信頼を得る）: 木目の見出し板の下に、生成り地の口コミカードを左右交互に並べる。
4. SNS・専門家の声（第三者の権威を示す）: 写真を3列グリッドで並べる。専門家は大きな人物写真、円形の肩書きバッジ、経歴リストで見せる。
5. 悩みの提起（読み手の悩みに共感する）: グレー地の白カードにチェックリストを6項目並べる。線画の悩む女性イラストと吹き出しを添える。
6. 解決策の提示（成分と商品を紹介する）: 地中海の風景を円形に切り抜き、商品画像を重ねる。下にティールの機能グリッドを置く。
7. 制度の説明（機能性表示食品の信頼性を伝える）: 白い角丸カードに円形アイコンを3つ並べ、紺の帯で強調する。
8. 成分解説（作用の仕組みを説明する）: 赤茶・オリーブ緑の全幅地に、成分写真と比較イラストを白カードで載せる。
9. 配合・飲み方・素材のこだわり（商品の付加価値を伝える）: オレンジのPlus枠、縦書きの飲み方ラベル、産地写真、円形の原料バッジ、開発者プロフィールで構成する。
10. 品質（製造面の安心感を示す）: 青い空の工場写真に、白い見出し枠と大見出しを重ねる。
11. 試験結果（エビデンスを示す）: 成分色の背景に白カードで折れ線グラフを置き、差の値をティールの吹き出しで示す。
12. 特典（購入動機を高める）: オレンジの案内枠の後、ティールの見出しと番号付きの特典バーを5本並べる。
13. 価格・申込（コースを選んで申し込んでもらう）: 木目の背景に価格カードを3コース分縦に並べる。最後にグレーの単品購入ボタンを置く。
14. よくある質問（購入前の不安を解消する）: 空の写真上に円形エンブレムの見出しを置き、アコーディオン形式のFAQを並べる。

Imagery

• 人物は明るい自然光の笑顔写真を使う。白やベージュの服で、軽やかさを出す。
• 原料はザクロ・オリーブなどを瑞々しく切り抜き、水滴や葉を添える。
• 地中海の海と街並みの風景を、明るい彩度で背景に使う。
• 仕組みの説明は淡色フラットなイラストにし、細い線で注記を入れる。
• 悩みのパートは単色の線画イラストを使う。
• 口コミ枠には木目の板と紙のテクスチャを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文の幅を最大750px前後で中央に置き、左右の余白には生成り地を敷く。
• PCでは口コミの写真と文章を2カラムで並べたままにする。
• PCでは写真グリッドを4〜6列まで広げてよい。
• CTAはPCでも幅480px程度の大型ピル型を維持する。

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