DESIGN.md — 青緑×水色の調査データ型クリニックLP（Teal Medical Survey Data LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 調査レポート・グラフ訴求・青緑と水色・大きな数字・オレンジCTA・番号付き理由
• 地の質感: フラットな単色面と淡いグラデーション。影は軽く、清潔な医療系の印象
• 形: 角丸の小さいカードと料金表。写真は片側を大きく丸めたカプセル型に切り抜く
• 温度感: 寒色が中心で、CTAと強調文字だけ暖色を使う

Colors

• 地の色は白・淡い水色・水色を順番に使い分け、セクションの区切りにする
• 理由と料金表のブロックは水色地に白文字・白い枠線でまとめる
• グラフは薬ごとに緑・黄緑・青灰で色を固定する
• CTAはオレンジ一色に絞り、ほかの面には使わない
• 本文の強調は赤オレンジの太字にし、キーワードには黄色マーカーも使う
• 店舗案内だけ濃いグレー地にして、黄緑のバッジを目立たせる
• button-primary は文字 #FFFFFF × 背景 #FB7C33 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC4D04、4.53:1）を使う。
• bar-chart は文字 #5D9D82 × 背景 #FDFDFE のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4B7F69、4.55:1）を使う。
• stat-number は文字 #F29B30 × 背景 #FDFDFE のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#AC640B、4.51:1）を使う。

Typography

• 数字は細長いコンデンス書体を大きく使い、単位は小さく添える
• 見出しは太いゴシックで中央揃え、2行に収める
• キーワードには緑地に白文字の帯か、黄色マーカーを付ける
• 番号は大きく半透明にして、見出しの左に重ねる
• 本文は左揃えで、強調はオレンジの太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC でも中央に幅約 500px の 1 カラムを置く）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• ページ全体を細い縦長の中央カラムにする
• グラフは横棒にして、値をバーの右に大きく載せる
• 理由の項目は番号と見出し→写真→説明文の順で縦に積む
• 料金表は2列で、行の見出しを左に置く
• セクションの終わりに毎回オレンジのCTAを中央に置く

Elevation & Depth

• カードとステップ枠には、ごく薄い影を落とす
• CTAボタンには小さな影を付ける
• それ以外はフラットにし、影はほぼ使わない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は横長にし、片側を大きく丸めたカプセル型に切り抜く
• セクション境界: 境界は直線にし、地の色の切り替えだけで区切る
• CTAは完全なピル型にして、右に矢印アイコンを付ける
• FAQとチェックリストは角丸4pxの白い帯にする
• 薬名のラベルは小さなピル型にする

Components

• オレンジCTA（button-primary）: ピル型で右に矢印を付け、中央に置く
• 横棒グラフ（bar-chart）: 薬ごとに色分けし、値を大きな数字で添える
• 大型％表示（stat-number）: 人物イラストの下に、オレンジか青の巨大な数字を置く
• 番号付き理由ブロック（reason-card）: 水色地に半透明の番号と白い見出しを置き、カプセル型の写真を添える
• 料金表（price-table）: 白い線の2列の表。価格は太い数字で示す
• ステップカード（step-card）: 白いカードに番号と見出し・説明を入れ、点線でつなぐ
• チェックリスト（check-list）: 黄緑のチェックアイコンと白い帯の一行説明を並べる
• FAQ（faq-accordion）: 緑のQと下向きの矢印を付けた行を区切り線で並べる
• 店舗バッジ（location-badge）: グレー地の地図の上に、黄緑のピル型で店舗名を置く

Do's and Don'ts

Do - 数値は大きな数字とグラフで見せる - 地の色は白と水色を交互にしてリズムを作る - CTAはセクションの終わりごとに同じ形で繰り返す - 理由やメリットには01〜の番号を必ず付ける - 医師の写真で清潔感と信頼感を出す

Don't - CTA以外にオレンジの面を使わない - 濃い暗色の背景を多用しない（店舗案内の1か所だけにする） - グラフの色を薬ごとに変えたまま混ぜない - 写真を四角いまま並べない - 装飾的な書体や手書き書体を使わない

Page Structure

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

1. ファーストビュー（調査レポートであることを示す）: 青緑の地に白衣の医師の写真を置き、大きな白い見出しと緑帯の数字を重ねる
2. 調査結果1（データで関心を引く）: 凡例と横棒グラフを置き、その下に強調入りの解説文を続ける
3. 悩みの提起（不安に共感する）: 考え込む人物写真の周りに吹き出しを配置する
4. 調査結果2（効果を裏付ける）: 比較の棒グラフを置き、緑の帯で結論をまとめる
5. 遺伝の確率（自分ごと化させる）: 人物イラストと大きな％数字を2列で比較する
6. CTA（申込に誘導する）: オレンジのピル型ボタンを中央に置く
7. こんな方へ（理由）（対象者を示し、価格を提示する）: 水色地に番号付きの項目とカプセル型の写真、料金表を並べる
8. メリット（オンライン処方の利点を伝える）: 淡い水色地に番号付きの見出し、写真、短い文を置く
9. ステップ（流れを示す）: 白いカードを縦に5つ並べ、点線でつなぐ
10. 特長一覧（安心材料をまとめる）: 黄緑のチェックアイコン付きリストを並べる
11. 店舗案内（実在感を出す）: グレー地の地図に黄緑のバッジとCTAを置く
12. よくある質問（不安を解消する）: Q付きのアコーディオンを並べる
13. フッター（締めくくる）: 水色地に白いロゴとコピーライトを置く

Imagery

• 医師は白衣で笑顔の正面写真。明るい背景で撮る
• 悩む男性は額に手を当てた上半身の写真にする
• 人物アイコンは線のはっきりしたフラットなイラストにする
• 薬やスマホなどの物撮りは淡い背景で明るく撮る
• 写真はカプセル型に切り抜いて柔らかく見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅約500pxのSP型カラムを置き、左右は青緑と淡いグレーの地にする
• PCでは左側の余白にロゴと電話番号を固定で表示する
• PCでは右側に追従するCTA（オレンジ）とアクセスボタン（緑）を置く
• SPでは追従するボタンを画面下に固定する

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