DESIGN.md — 紺×水色の清潔な医療SaaS導入LP（Clean Medical Blue SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 淡い水色グラデ地・紺の太字見出し・白カード＋薄い影・フラットな医療イラスト・2色ピルCTA・シェブロン型フロー
• 地の質感: フラットで光沢のない面。背景に淡い幾何学（三角形）模様のグラデーション
• 形: 角丸カード、ピル型ボタン、下向き矢印型のステップ帯
• 温度感: クールで清潔。CTAのオレンジだけが暖色

Colors

• 地は白と淡い水色を交互に使い、白カードを水色地に浮かせる
• 悩みセクションだけ濃紺グラデにして解決パートとの明暗差を作る
• 見出し・番号・カード見出し帯は紺で統一する
• CTAはシアン（資料請求）とオレンジ（無料体験）の2色をセットで縦並び
• オレンジはCTAと所要日数バッジだけに限定する
• FAQは中間水色の地に白カードを並べる
• button-cta は文字 #FEF8EC × 背景 #F68736 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BB5408、4.53:1）を使う。
• button-secondary は文字 #FEF8EC × 背景 #33C2D3 のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1E7E8A、4.51:1）を使う。

Typography

• 見出しは太字ゴシックで紺、本文はグレーで細めにして階層差をつける
• 強調語だけ紺色の太字にして文中で目立たせる
• 価格など数字は見出しの数倍に拡大し単位は小さく添える
• 小見出しには左に紺の縦線を付ける
• マイクロコピーはCTA上の小さなピルに入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。フロー図のみ2列並列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右12px程度の余白で画面幅いっぱいに置く
• 特長は番号付きカードを縦に3つ積む
• CTAブロックは主要セクションごとに挟む
• 機能カードは見出し帯＋イラスト＋チェックリストの構成
• セクション見出しは中央揃え、カード内は左揃え

Elevation & Depth

• 白カードはごく薄い影（0 2px 8px rgba(0,40,90,0.08)）
• CTAボタンは下方向に軽い影で浮かせる
• FV訴求チェック行は白の角丸パネルに薄い影

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは円形背景に配置、写真は角丸なしの矩形
• セクション境界: 悩みセクション下端は中央が下に尖るV字、他は水平の色切替
• CTAとマイクロコピーラベルはピル型
• フローは下向きシェブロンの帯を重ねる
• 吹き出しは下向き三角の尾を付ける
• 番号は紺の正円に白数字

Components

• 無料体験ピルCTA（button-cta）: オレンジのピルにアイコン＋太字、上にオレンジ枠の白ラベルで一言を添える
• 資料請求ピルCTA（button-secondary）: シアンのピル。主CTAの上に同形で並べる
• 詳細リンクボタン（button-outline）: 白地に紺枠のピル、右に丸矢印アイコン
• FVチェック訴求行（check-panel）: 白い角丸パネルに紺のチェック丸アイコン＋一文、キーワードは紺太字
• 番号付き特長カード（feature-card）: 白カード左上に紺丸番号と2行見出し、下に本文と図解
• 0円訴求カード（price-card）: 上部紺帯に白見出し、下の白地に紺グラデの巨大数字
• 機能カード（function-card）: 紺の見出し帯＋中央イラスト＋チェック付き2項目、紺の細枠
• 導入ステップ帯（step-chevron）: 下向きシェブロンを5段重ね、段ごとに水色が濃くなる。左に大きなSTEP番号、境目にオレンジ枠の日数バッジ
• Q&Aカード（faq-card）: 白角丸カードに紺丸Q＋太字質問、紺枠丸A＋グレー回答
• 疑問吹き出し帯（speech-band）: 水色の角丸帯に人物アイコンと疑問文、下に三角の尾

Do's and Don'ts

Do - 水色地と白カードを交互にして清潔感を保つ - CTAはシアンとオレンジの2つを常にセットで出す - 数字や効果の訴求は大きく紺で示す - イラストは同じタッチのフラット人物で統一する - チェックアイコン付きの短文リストで要点をまとめる

Don't - オレンジをCTA・日数バッジ以外に多用しない - 濃紺の地を悩みセクション以外で連続させない - 本文を黒にしない（グレーで軽く） - 写実的な写真をFVに使わない - 角のとがった四角ボタンにしない

Page Structure

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

1. ファーストビュー（サービス価値と手軽さを即伝える）: 淡い水色グラデ地。上に吹き出し型のグラデラベル、紺の大見出し、白パネルのチェック3行、医師イラスト
2. CTA（最初の申込導線）: シアン・オレンジのピルCTAを縦に2つ、各上に一言ラベル
3. 悩みの提起（導入前の課題に共感させる）: 濃紺グラデ地に白見出し、チェック付き悩み3行、困り顔医師の円形イラスト、下端V字
4. 解決の提示（悩みの解決を宣言）: 幾何学模様の淡色地に人物アイコンと2行見出し、キーワードを紺で大きく
5. 特長1（費用）（無料で始められる根拠）: 番号付き白カード、0円価格カード、疑問吹き出し、枠付き説明ボックスと2行表、詳細ボタン
6. 特長2（ワンストップ）（業務の流れを可視化）: 医療側と患者側の2列シェブロンフロー、各段にアイコン
7. 特長3（集患）（リーチ拡大を示す）: 地図イラストに人物アイコンを線で結ぶ図
8. CTA（中盤の申込導線）: 水色帯に2色ピルCTA
9. 主要機能（機能を一覧化）: 紺見出し帯付き機能カードを3つ縦積み
10. 導入の流れ（導入までの速さを示す）: 5段グラデのシェブロン帯とオレンジ日数バッジ
11. CTA（再度の申込導線）: 水色帯に2色ピルCTA
12. よくある質問（不安解消）: 中間水色地に白のQ&Aカード6枚
13. 関連サービス（周辺サービスでエコシステムを示す）: 罫線付き小見出し＋ロゴ＋製品画像＋黒丸箇条書きを繰り返す
14. 最終CTA・フッター（締めの申込と企業情報）: 水色帯CTA、青灰地に会社情報とリンク、白地にセキュリティバッジ

Imagery

• 白衣の医師や患者のフラットイラスト。紺・水色主体で肌と小物だけ暖色
• 人物は淡い水色の円形背景の中に置く
• アイコンは白の線画を色付き円の中に入れる
• 日本地図など図解は水色の面と細い線で構成
• 製品写真は明るい白〜グレー背景のスタジオ撮影
• 背景に淡い三角形の幾何学模様を薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを左テキスト・右イラストの2カラムに
• PCのCTAは2つを横並びにする
• PCでは悩みセクションも左文・右イラスト
• 機能カードはPCで3列横並び
• 導入フローはPCで右向きシェブロンの横一列、日数バッジは下に配置
• 関連サービスはPCで左画像・右箇条書きの2カラム

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