DESIGN.md — 青×白の清潔感あるクリニック向け機器 LP（Clean Blue Medical BtoB Equipment LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、シンプル・ミニマル
• キーワード: 医療機関向け・業務効率化・青と白・線画アイコン・資料請求フォーム・比較表
• 地の質感: フラットな単色の面。影はほぼ使わず、薄い灰色の写真背景と水色の帯で変化をつける
• 形: 四角を基本に、カードはわずかな角丸。ボタンはピル型。STEP の番号は正円
• 温度感: 涼しく清潔。寒色が主体で、赤は必須バッジと別商品の誘導だけに使う

Colors

• 地は白。セクションの区切りに薄灰色と水色の帯を交互に挟む
• 強く訴求したい解決セクションだけ、濃い青で全面を塗り、白文字で見せる
• 特長カードはシアンで塗り、白文字で読ませる
• セクション見出しは濃い青の文字にする
• 赤は必須バッジと別商品への誘導ボタンに限る
• 黄色は青い面の上に引く下線だけに使う
• button-submit は文字 #F1FDFE × 背景 #017AFE のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#016FE7、4.57:1）を使う。
• button-pill は文字 #F1FDFE × 背景 #01AADB のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017DA1、4.54:1）を使う。

Typography

• 見出しは中央揃えにし、要所の語だけ青で色分けする
• カードの見出しは丸ゴシックで字間を広めにとる
• 本文は小さめの太字で、行間を約 2.0 とゆったりとる
• 英数字の製品名は欧文に頼らず、和文書体の中でそのまま扱う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードと STEP は縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• フォームはファーストビューの直下に、全幅に近い枠で置く
• 選ばれる理由のカードは幅 70% ほどで中央に寄せる
• STEP カードは下向きの吹き出し三角でつなぐ
• 比較表は 3 列。自社の列だけ濃い青の太枠で囲む
• 導入フローは、アイコンと文言の組を小さな青い逆三角でつなぐ

Elevation & Depth

• 基本はフラットにし、影を使わない
• STEP カードにはごく薄い影と細い枠線をつける
• 写真の上に置く見出しは、半透明の灰色を重ねて読ませる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 製品は背景を抜いた切り抜き。人物は正円で切り抜く
• セクション境界: 直線で区切る。課題から解決へは、下向きの大きな三角で切り替える
• 特長カードは角丸なしの四角
• 選ばれる理由のカードと STEP カードは小さな角丸
• リンク系のボタンはピル型で、右端に「>」をつける

Components

• 資料請求フォーム（lead-form）: 青い見出し帯の下に入力欄を並べる。項目ごとに赤い必須バッジをつける
• 送信ボタン（button-submit）: 幅いっぱいの青い角丸の四角に白文字
• リンクボタン（button-pill）: シアンまたは青のピル型で、右に矢印をつける
• 解決アイコン行（solution-row）: 白線の円形アイコンの右に、小見出し・黄色の下線・大きな結果語を並べる
• 特長カード（feature-card）: シアンの面に、白文字の見出し・白い区切り線・本文を置く
• 理由カード（reason-card）: 白地に灰色の枠線。上にシアンのアイコン、その下に見出しと本文
• STEP カード（step-card）: シアンの正円に STEP 番号。手順名、説明、画面の写真が続き、下向きの吹き出し三角で次へつなぐ
• 比較表（compare-table）: 項目列は水色の面、自社の列は青い太枠にする
• 悩みのチェックリスト（check-list）: 青いチェックマークの横に、悩みを短文で 4 つ並べる

Do's and Don'ts

Do - 色は青・シアン・水色の 3 段階でそろえる - アイコンは単色の線画またはフラットな塗りに統一する - フォームは早い位置に置き、入力の手間が少ないことを見せる - 手順や比較は、表やステップで構造的に見せる

Don't - 暖色のグラデーションや派手な装飾を使わない - 赤を広い面積に使わない - 写真に強いフィルターをかけない - 丸すぎる大きな角丸カードで、印象を幼くしない

Page Structure

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

1. ファーストビュー（製品の種類と、解決する課題を伝える）: 薄灰色の背景に、小見出し・製品名ロゴ・2 行のキャッチを置き、下に製品の切り抜き写真
2. 資料請求フォーム（すぐにリードを獲得する）: 青い見出し帯つきの枠に入力欄を並べ、青いボタンで送信させる
3. 製品概要（製品を一言で定義する）: 中央揃えの見出しと灰色の本文
4. 悩みの提起（現場の課題に共感する）: 青文字の見出し、正円の人物写真、チェックリスト 4 項目
5. 解決（効果を 3 つに要約する）: 下向きの三角から濃い青の全面に切り替え、アイコン行を 3 つ並べる
6. 特長（具体的な利点を説明する）: 灰色の背景の製品写真に重ねて、シアンのカードを 3 枚置く
7. 選ばれる理由（信頼の根拠を示す）: 枠線のカードを 4 枚。上部にシアンのアイコンを置く
8. 導入の流れ（導入への不安を減らす）: 水色の帯に、アイコンと文言の 4 段階を逆三角でつなぐ
9. 使い方（操作が簡単なことを示す）: STEP カード 5 枚に、画面の写真と製品写真を添える
10. 比較表（従来の方法との差を見せる）: 3 列の表。自社の列を青い太枠で強調する
11. 導入事例（実績へ誘導する）: 灰青色の帯に写真を置き、白文字とシアンのピル型ボタン
12. 新着情報と関連商品（回遊を促す）: 記事カードと、赤いピル型ボタンつきの関連商品バナー
13. 問い合わせ（電話と問い合わせへ誘導する）: 青い写真背景に大きなフリーダイヤル、白いピル型ボタン

Imagery

• 製品は白い背景で正面から撮り、切り抜いて使う
• 人物は白衣の医療従事者。明るい背景で撮り、正円で切り抜く
• アイコンはシアン単色のフラットな図形か、白の線画
• 操作画面のキャプチャには、注目点に赤い円の囲みをつける
• 事例の写真は、実際のクリニック受付を自然光で撮ったもの
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、フォームをファーストビューの右側に並べる
• 悩みは中央のリスト、左右に人物写真を置く
• 解決アイコンと特長カードは 3 列で横に並べる
• 理由カードは横長の 1 行にし、アイコン・見出し・本文を横に並べる
• 導入フローは横一列にし、右向きの三角でつなぐ
• 新着記事は 4 列、問い合わせ先は 3 枚のカードに分ける

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