DESIGN.md — 白×医療ブルーの院内機器BtoB LP（Clean Clinical Blue Equipment LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 医療ブルー・白とライトグレー・斜めの面構成・線画アイコン・英字小見出し・資料請求フォーム
• 地の質感: 白〜薄グレーのグラデーションに斜めの面や幾何学の淡い陰影を重ね、院内写真を淡く敷く
• 形: 円形の実績バッジや悩みバブル、小さめ角丸カード、斜めのカットライン
• 温度感: やや寒色寄りでクリーン。人物写真で温かみを少し補う

Colors

• 地は白と薄グレーを交互に使い、青は見出し・強調語・ボタンに限定する
• 見出しはブランド名部分を青、残りを黒にする二色構成
• 本文中の強調は青文字＋細い下線で示す
• 悩みセクションだけグレー地と黒円で落ち着いた暗いトーンにする
• 最終の問い合わせ帯は写真に青を半透明で重ねて白文字にする
• 赤は必須バッジのみ、オレンジ・黄色は固定CTAのみに使う
• button-primary は文字 #F0FDFE × 背景 #1478F0 のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0F6FE4、4.57:1）を使う。
• sticky-cta は文字 #F0FDFE × 背景 #EB6003 のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#C35002、4.52:1）を使う。

Typography

• 見出しの上に小文字英字ラベル＋下線を置く
• 見出しは2行で、1行目ブランド名を青・2行目を黒にする
• POINT番号は細長い数字を大きく、右に縦線を入れて見出しを並べる
• 数値実績は数字だけ大きく青で強調する
• 本文は13px前後で行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、機能・科目アイコンは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• FV直下に資料請求フォームを全幅カードで置く
• 効果は写真を淡く敷いた全幅帯を4つ縦に積む
• 選ばれる理由は文章と画像を左右交互に配置
• 科目別は写真背景の上に白カードを2列で並べる
• サポート手順・ブログはカルーセルで左右矢印を付ける

Elevation & Depth

• フォームカードは細い青枠と弱い影
• 白カードは影ほぼなし、背景との明度差で分ける
• 固定フローティングボタンは柔らかい影付き

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は切り抜き、院内写真は全幅の長方形、実績や機能は円形の背景
• セクション境界: FVや背景に斜めのカットを入れ、他は直線で切り替える
• 主CTAは角丸小さめの長方形
• 一覧・問い合わせボタンは白地の枠付きピル型
• 悩みは黒い円を三角に3つ配置
• ラインナップは大きな角丸の青カード

Components

• 資料請求フォーム（lead-form）: 青い見出し帯付きのカードに氏名など6項目と必須バッジ
• 送信ボタン（button-primary）: 鮮やかな青の全幅ボタン
• 英字ラベル付き見出し（section-heading）: 小さな灰色英字＋下線の下に青と黒の2行見出し
• 実績円バッジ（stat-circle）: 白い大円に大きな数字・図版・説明文
• 悩みバブル（worry-bubble）: 黒い円に白い線画アイコンと2行の悩み
• POINT番号見出し（point-number）: 大きな青数字と縦線、2行見出し
• 科目アイコンカード（icon-card）: 白い角丸カードに青線画アイコンと科目名
• 導入事例カード（case-card）: ティールの科目帯・写真・院名・青引用ボックス
• 製品ラインナップ（lineup-accordion）: 青い大きな角丸カードに製品名と＋アイコン
• 固定フッターCTA（sticky-cta）: オレンジの資料請求と黄色の問い合わせを2分割で固定

Do's and Don'ts

Do - 青は1色系統にしぼり、見出しと強調語にだけ使う - アイコンは青か白の均一な細線画でそろえる - 白とグレーの地を交互にしてセクションを区切る - 数字の実績は大きく見せる - フォームを早めに出し、固定CTAも置く

Don't - 暖色の大きな面を本文エリアに使わない - 装飾的なフォントや手書き風書体を混ぜない - 写真を濃いまま背景に敷かない（淡く白を重ねる） - 影を強くつけない - アイコンの線の太さやスタイルをバラバラにしない

Page Structure

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

1. ファーストビュー（製品と価値を一目で伝える）: 淡いグレーの斜め背景に2行の大きなコピー、青強調の説明、製品切り抜き
2. 資料請求フォーム（早い段階でリードを獲得）: 青見出し帯付きのフォームカード
3. 実績（導入数と全国展開で信頼を示す）: 月桂樹付き数値見出しと白い大円バッジ2つ
4. 導入事例（現場の声で納得させる）: 科目帯・写真・引用ボックスのカード
5. 悩みの提起（課題に共感させる）: グレー地に黒円バブル3つ、下に解決コピーと製品写真
6. 開発の背景（製品の誕生理由を伝える）: モノトーン写真上に吹き出し枠と製品カードのカルーセル
7. 導入の効果（メリットを4つ示す）: 丸数字付き見出しと本文を淡い写真背景の帯で4段
8. 選ばれる理由（差別化ポイントを示す）: POINT番号見出しと画像を左右交互に5つ
9. 機能一覧（機能の幅を見せる）: 淡グレー円に青線画アイコンとラベル
10. 科目別利用（自院向けだと感じさせる）: 院内写真背景に白アイコンカード2列
11. 導入サポート（導入の不安を解消）: STEP番号付きの白カードのカルーセル
12. ブログ・動画（情報で信頼を補強）: 写真・青日付ラベル・タイトルのカルーセルと動画枠
13. 製品ラインナップ（関連製品へ誘導）: 青い角丸カードの開閉式リスト
14. 問い合わせCTA（電話・問い合わせへ誘導）: 青オーバーレイ写真に大きな電話番号と白いピルボタン

Imagery

• 製品は白背景で切り抜き、やや斜め上からの明るい撮影
• 院内は白・木目・石目調の明るい受付まわり
• 人物は笑顔のスタッフや患者で、淡く白を重ねて背景に敷く
• アイコンは青の細線画で角を丸めたフラット調
• 背景に白〜グレーの斜めのポリゴン模様を薄く入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVの右にフォームを並べた2カラムにする
• PCでは実績を写真背景の大きな角丸カード内に円バッジ2つで横並び
• PCでは事例・悩み・製品カードを3列にする
• PCでは科目アイコンを5列、サポートSTEPを5列で全部表示
• PCではカルーセルをやめ、ブログを4列グリッドで出す

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