DESIGN.md — 深緑×赤CTAの価格訴求型オンライン診療LP（Deep Green Clinical Price-Appeal Telemedicine LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、力強い・インパクト
• キーワード: 深緑・白カード・大きな価格数字・赤いCTA・医師の信頼感・繰り返しCTA
• 地の質感: 深緑のグラデーションや斜めの模様が入った面と、フラットな白・薄グレーの面が交互に来る。カードには柔らかい影がつく。
• 形: 角丸カード、ピル型ボタン、円形の写真切り抜き、V字や斜めのセクション境界
• 温度感: 深緑で冷静な信頼感を出しつつ、赤・オレンジ・黄の強調色で熱量の高い訴求をする

Colors

• 地は深緑・白・薄グレーを交互に使い、セクションの切り替えをはっきりさせる
• 主CTAは赤オレンジのグラデのピル型だけに使い、他の要素に同じ色は使わない
• 価格数字は白地ならオレンジか深緑、緑地なら黄色にする
• 悩み・リスク系のセクションは赤ピンクの帯と薄ピンク地で切り替える
• 解決策のセクションは薄緑地と深緑の文字で安心感を出す
• 緑地の上の強調語は黄色、白地の上の強調語は緑かオレンジにする
• button-primary は文字 #F2F4EF × 背景 #E0401F のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC3A1C、4.53:1）を使う。
• button-line は文字 #F2F4EF × 背景 #6FB12B のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#4C7A1E、4.61:1）を使う。
• speech-bubble は文字 #F03C5F × 背景 #FEFB5B のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DE1139、4.51:1）を使う。

Typography

• 価格の数字は単位「円」より2倍以上大きくする
• 見出し中のキーワードだけを色を変えて少し大きくする
• 強調語には傍点や黄色マーカーを付ける
• CTAの文字は2行で中央揃えにする
• 注釈は※を付けて10px前後の小さいグレー文字にする
• ほぼすべてを太いゴシックで組み、細い字は注釈だけにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン特長は 3 列か 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約5%の余白を取って深緑地の上に置く
• CTAと手順図のブロックは何度も同じ形で繰り返す
• 人物写真はセクションの終わりに画面幅いっぱいで置く
• 比較図は月を横に並べたタイムラインで見せる
• 手順は番号付きの縦並びカードにし、間を下向き三角でつなぐ

Elevation & Depth

• 白カードには柔らかい影（0 4px 12px rgba(0,0,0,.12)）を付ける
• CTAボタンは下側に濃い赤の厚みを付け、立体的に見せる
• 吹き出しカードには小さな影と三角のしっぽを付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 症例写真と特長アイコンは円形。人物は切り抜きで背景になじませる
• セクション境界: 下向きのV字、斜めのカット、まっすぐな色帯の切り替え
• Before/Afterラベルはピル型にし、Beforeは白地にグレーの枠、Afterは緑の塗りにする
• 特長の円は緑の太い線で囲む
• 吹き出しは丸型か角丸で、黄色や緑の塗りにする

Components

• 主CTAボタン（button-primary）: 赤オレンジのグラデのピル型。2行の白文字で、下に厚みがある
• LINE登録ボタン（button-line）: 黄緑のピル型のサブCTA
• プラン価格カード（price-card）: 白い角丸カード。上に推奨ラベル、中に錠剤写真と用量、下に大きな価格
• 理由番号バナー（reason-banner）: 緑地の上の白い帯。左上に緑の番号タブ、右に人物を重ねる
• 症例カード（case-card）: 円形のBefore/After写真を矢印でつなぎ、服用期間と注釈を添える
• 手順カード（flow-step）: 左に番号の丸、中央にアイコン、右に見出しと説明。間を三角でつなぐ
• 安心ポイントリスト（check-list）: 白い面に大きな緑の丸と太字で4項目を並べる
• 対象者ラベル帯（label-strip）: 濃い緑地に白い細枠をつけた1行の見出し
• 税込・送料無料の吹き出し（speech-bubble）: 黄色の丸い吹き出しに赤字で条件を書く

Do's and Don'ts

Do - 価格の数字はページ内で何度も大きく見せる - CTAの直下には予約手順のスクリーンショット図を必ず付ける - 医師や人物の写真で信頼感を出す - 副作用・出典などの注釈を小さい文字で必ず添える - 深緑と白の面を交互に置いてリズムを作る

Don't - CTAを緑系の色にしない（地の色に埋もれる） - 細い明朝体やパステル調を使わない - 強調色を一つの見出しに3色以上入れない - カードの角を尖らせない - 注釈を省いたり誇大な表現にしたりしない

Page Structure

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

1. ファーストビュー（コンセプトと月額価格を一目で伝える）: 深緑地にアンバサダーの写真、白い極太コピー、錠剤写真と緑文字の価格を書いた白い帯
2. CTA（早い段階で予約へ誘導する）: 対象者ラベル帯、0円・秒数の強調、赤のピル型ボタン
3. 3つの特徴（選ばれる理由を示す）: 緑地に番号付きの白い帯を3段重ね、人物や錠剤の写真を添える
4. 料金プラン（プランごとの価格を比べてもらう）: 白いカードを2枚並べ、オレンジで大きく価格を書く。黄色マーカーの見出しを添える
5. 医師メッセージ（価格の誠実さを保証する）: 医師のプロフィール写真と吹き出し型の白いカード
6. 悩みの提起と比較（一括請求との違いを示す）: ピンク帯の見出しと12か月のタイムライン図を置き、続けて薄緑地で解決策を見せる
7. 実績（処方数で信頼を得る）: ベージュ地に月桂樹の装飾と金色の大きな数字
8. 症例紹介（効果を示す）: 緑地に白いカードを3枚。円形のBefore/After写真を並べる
9. 安心ポイント（不安を取り除く）: 緑の丸を付けた4項目のリスト
10. 症状の啓発（早めの治療を促す）: 大きな緑文字のデータ訴求、赤帯の警告、グラフ図
11. 薬の解説と価格（2種類の薬と返金保証を伝える）: 円形のバッジ2つ、緑地に黄色の巨大な価格
12. 購入の流れ（手順を分かりやすく示す）: ピンクの枠の中に番号付きの手順カードを置く。STEP形式の円形イラストも使う
13. LINE相談（迷っている層を受け止める）: チェックリストと、黄緑の枠のLINE登録ボックス
14. Feature詳細（料金・制度・品質を補足する）: 薄グレー地にFeature番号の見出し、価格カード、円形アイコンのグリッド、建物の写真

Imagery

• スーツ姿の男性アンバサダーを切り抜き、拳やガッツポーズで力強く見せる
• 白衣の医師を明るい背景で撮り、正面からの笑顔にする
• 錠剤シートは真上から撮り、白と淡い黄色の錠剤が見えるようにする
• 頭頂部の症例写真は円形に切り抜く
• アイコンは赤や緑の線画、人物は線の太いフラットイラストにする
• スマホ画面のスクリーンショットを、ピンクの枠で強調して見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480〜600px幅のSPデザインを置き、左右には深緑の地を敷く
• 価格カードと特徴カードはPCで2列にしてもよい
• CTAボタンは最大幅を400px程度に抑える
• 人物の写真は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 行書くと起動時に読み込まれる。