DESIGN.md — 青×ピンクの医院向け教育サービス資料請求LP（Clinical Blue and Rose Pink BtoB Education Lead LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 医療系BtoB・資料ダウンロード・線画イラスト・淡い水色の地・ピンクの解決ブロック・オレンジCTA
• 地の質感: フラットな単色面。白カードに弱い影をつけ、背景には大きな薄い欧文の透かし文字を置く
• 形: 角ばったブロックが基本。CTA はピル型。斜めカットのラベルと V 字の矢印で区切る
• 温度感: 寒色が中心で清潔な印象。ピンクとオレンジが温かみと行動のきっかけを足す

Colors

• 地は白と淡い水色を交互に使い、セクションを分ける
• 見出しはすべてブランド青で太く組む
• 悩み→解決の区画だけ淡ピンク地にし、解決ブロックはローズピンクで塗る
• 悩みは灰色面、解決はピンク面にして、色で対比させる
• 主 CTA はオレンジのみ。ほかの要素にオレンジは使わない
• 強調したい一文はマゼンタの太字にする
• 小さな DL ボタンは濃紺の塗りと白枠の 2 種類にする
• button-primary は文字 #FEF6E5 × 背景 #FE6501 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C14D01、4.51:1）を使う。

Typography

• 見出しは極太ゴシックにし、字間を広めにとる
• 本文は字間 0.1em 前後で、ゆったり組む
• セクション見出しの背後に、淡い欧文の透かし文字を大きく重ねる
• 小見出しは『＼ ／』で挟むか『— —』で挟む
• 番号は細い欧文の大きな数字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。資料サムネイルだけ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カード・ブロックは左右 5% の余白で中央に置く
• 悩みブロックは文とイラストを左右交互に並べる
• 特典は番号→見出し→説明→白カード（サムネイル＋DL ボタン）の順に積む
• お客様の声は縦積みカードにし、アイコンを中央に置く
• CTA は FV と解決セクションの末尾、フォームの最後に置く

Elevation & Depth

• 白カードと CTA に、下方向の柔らかい影（0 4px 8px 程度の薄い灰色）をつける
• 資料サムネイルは紙を重ねたように、ずらした影で厚みを出す
• フォーム入力欄は影なしで、細い灰色の線だけにする

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物写真は切り抜き。声のアイコンは灰色の丸の中に線画を置く
• セクション境界: 直線で切り替える。悩み区画の終わりは下向きの V 字にする
• 悩み面からピンク面へは中央の三角矢印でつなぐ
• VOICE ラベルは右端を斜めにカットした濃紺の帯にする
• 肩書きラベルは平行四辺形の青帯にする

Components

• 資料DLのピルCTA（button-primary）: オレンジのピル型。左に資料の束の画像を重ね、右端に白丸の再生アイコンを置く。文字は 2 行
• 資料ダウンロード小ボタン（button-small）: 濃紺の塗りボタンと、白地に濃紺枠のボタンの 2 種類。角は小さい
• 悩み→解決ブロック（problem-solution-block）: 上は灰色面に悩み文と線画、下はピンク面に『＼おすすめ／』見出しとセミナーのバナー
• 番号付き特典パネル（benefit-panel）: 淡い水色の面に大きな番号・青見出し・説明を置き、中に白い角丸カード
• お客様の声カード（voice-card）: 斜めカットの VOICE ラベル、丸アイコン、属性、区切り線、マゼンタの強調コメントの順
• 肩書きラベル（role-tag）: FV 人物の足元に置く、青い平行四辺形の白文字ラベル
• 資料内容のチェックリスト（checklist-box）: 白い箱にチェックボックスのアイコンと項目を並べる。見出しは『— —』で挟む
• 資料請求フォーム（lead-form）: 太字ラベルに青い必須バッジを付け、白い入力欄を並べる。悩みは複数選択のチェックボックス

Do's and Don'ts

Do - 見出しは青の極太ゴシックで、中央揃えにする - 悩みは短い言葉 3 つにし、線画イラストを左右交互に添える - 解決ブロックはピンク面にして、悩みの灰色面と対比させる - セクション見出しの背後に、淡い欧文の透かしを置く - CTA はオレンジのピル型だけにし、資料画像を重ねる

Don't - オレンジを CTA 以外に使わない - ピンク面を悩み解決の区画以外に広げない - 写真を背景いっぱいに敷かない。線画とフラットな面を中心にする - 見出しを明朝や細い書体にしない - カードに大きな角丸や濃い影をつけない

Page Structure

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

1. ファーストビュー（対象と提供価値を一目で伝える）: 水色のグラデ地に青の巨大見出しを置き、医療スタッフ 3 人の切り抜き写真に肩書きラベルを付ける。下線付きのサブコピーとオレンジ CTA
2. 悩みの提起（読み手の課題に共感する）: 白と灰色の帯を交互にし、悩み文と線画イラストを左右交互に配置する。最後は下向きの V 字
3. 解決策の提示（悩みごとの解決コンテンツを示す）: 淡ピンク地にマゼンタの見出しとピンクのラベル。灰色の悩み面→三角矢印→ピンク面にバナーを並べ、3 回繰り返す
4. 中間CTA（資料請求へ誘導する）: 淡ピンク地にオレンジのピル型 CTA と資料画像
5. 特典紹介（加入特典の資料を具体的に見せる）: 透かし欧文の見出し。番号 01〜03 の水色パネルに、白カードと資料サムネイル・DL ボタン
6. お客様の声（導入実績で信頼を得る）: VOICE ラベル付きの淡色カードを 3 枚。丸い線画アイコンと、マゼンタの強調コメント
7. 資料概要（資料の中身を伝える）: 水色地に資料の表紙を重ねた画像と、チェックリストの白い箱
8. 資料請求フォーム（リードを獲得する）: 必須バッジ付きの入力欄 5 つと、悩みのチェックボックス。最後にオレンジのピル型送信ボタン

Imagery

• 人物は白衣・スクラブ姿の笑顔の切り抜き写真にし、明るい水色の背景に溶け込ませる
• 悩みや声のアイコンは黒の線画に、青と肌色の差し色を入れたシンプルなイラスト
• セミナーのバナーは講師の写真やインパクトのあるタイトル画像を、矩形でそのまま置く
• 資料サムネイルは数枚をずらして重ね、紙の束に見せる
• FV 背景に、薄い白の幾何学ひし形を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央 960px 前後の幅に収めるのを推奨
• FV は左に見出しと CTA、右に人物写真を置く 2 カラムにする
• 悩み→解決ブロックは横 3 列のカードに展開してもよい
• 特典の資料サムネイルは 3〜4 列にする
• お客様の声は横 3 枚に並べる
• フォームは 640px 程度の幅で中央に置く

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