DESIGN.md — 青×白カードの医療DX SaaS LP（Corporate Blue Medical SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型
• キーワード: ロイヤルブルー・白カード・角丸・工程フロー・医療DX・キャラクター
• 地の質感: フラットな単色面。グラデーションと影は最小限にとどめる
• 形: 角丸16〜24pxのカード、矢羽型の工程チップ、下向き三角の区切り
• 温度感: 涼しげで清潔感のある寒色

Colors

• ファーストビューとメッセージ部分はブランドブルー一色の地にする
• 主CTAと実績帯は濃紺にして、ブルーの地から浮かせる
• サービス詳細は白い地または淡い水色の地に切り替える
• 情報カードは水色の面に、青の見出しと濃いグレーの本文を載せる
• 強調には青文字だけを使い、赤や黄は使わない
• flow-chips は文字 #134A8D × 背景 #75B4DC のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8DC1E2、4.54:1）を使う。
• number-badge は文字 #FFFFFF × 背景 #0179D3 のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0178D0、4.57:1）を使う。

Typography

• 全体をゴシック体1書体でそろえ、太さで強弱をつける
• 見出しは中央揃えにし、カード内の箇条書きは左揃えにする
• 青地の上のリード文は白の太字で中央揃えにし、行間を広めに取る
• 電話番号は太い数字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では情報カードを 2 カラム、理由カードを 3 カラムにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面の左右に約22pxの余白を取って置く
• ステップカードは下向き三角でつないで縦に並べる
• 情報カード同士の間隔は約16pxにする
• セクションの切り替えは背景色の帯で表す

Elevation & Depth

• CTAボタンと事例バナーには、青みのある柔らかい影をつける
• 情報カードは影なしのフラットにする
• ファーストビューの白カードは影なしで、ブルー地との対比で浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形に切り抜く。キャラクターはカードの外へはみ出させる
• セクション境界: 背景色の直線で切り替える。ステップ間は下向き三角でつなぐ
• ボタンは角丸12px前後の長方形にし、右端に白丸の矢印アイコンを置く
• 工程チップは矢羽型でつなげる
• 見出しラベルはカードの右上角に、タブのように食い込ませる

Components

• 資料請求CTA（button-primary）: 濃紺の角丸ボタン。2行の白文字と右端の白丸矢印を持つ
• 工程チップ列（flow-chips）: 機能の工程を矢羽型の水色チップで横一列に並べる
• ファーストビューカード（hero-card）: ブルー地の上に置く白い角丸カード。ロゴ、コピー、CTA、電話番号を載せ、キャラクターを重ねる
• タブ見出し付き枠カード（tab-label-card）: 青い線で囲んだ白カード。右上に青いタブ型の見出しを置く
• ステップカード（step-card）: 上部に青帯の見出しを持つ白カード。中に青い小見出しと丸点の箇条書きを入れ、下向き三角でつなぐ
• 水色情報カード（info-card）: 水色の角丸カード。中央の青い見出しと、小さな丸点の箇条書きで構成する
• 番号丸バッジ（number-badge）: 青い丸に白い数字を入れ、リストの順番を示す
• 実績帯（stats-band）: 濃紺の全幅帯。実績の数字を白文字で示し、注釈を添える

Do's and Don'ts

Do - 青、濃紺、白、水色の4色で構成する - 情報はカードに区切り、箇条書きで短く並べる - 工程や手順は矢羽や三角で流れを見せる - CTAは濃紺にして、ページの上部とヘッダーに置く

Don't - 暖色の強調色や派手なグラデーションを使わない - カードを角ばった四角にしない - 影を強くかけない - 本文を長い段落にせず、明朝体も使わない

Page Structure

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

1. ヘッダー（ロゴと問い合わせへの導線）: 白地の左にロゴ、右に濃紺の小さなCTAと青い丸のメニューボタンを置く
2. ファーストビュー（価値の提示と問い合わせ）: ブルー地に白カードを置き、大きなコピー、工程チップ、CTA、電話番号を載せる。キャラクターを重ねる
3. 企業メッセージ（事業の全体像を伝える）: ブルー地に白い太字のリード文を中央揃えで置く
4. サービス相関図（関連サービスの網羅性を示す）: 円環の図に機能ラベルを配置し、周囲に吹き出し型のサービスカードを散らす
5. 実績（信頼性の訴求）: 濃紺の全幅帯に白文字で実績数字と注釈を置く
6. サービス概要（製品の説明）: タブ見出し付きの枠カードに、青い導入文と横スワイプの動画サムネイルを入れる
7. 導入事例バナー（事例ページへの誘導）: 青い角丸バナーの背景に写真を薄く重ね、白文字と外部リンクアイコンを置く
8. サポート体制（導入の流れを示す）: 淡い地に、青帯付きのステップカードを三角でつなげて3つ並べる
9. 付帯サポート一覧（細かい支援内容の列挙）: 水色の情報カードを縦に積み、見出しと箇条書きで示す
10. 製品紹介（仕組みの図解）: ブルー地に白カードを置き、円環のフロー図と、医療機関側・患者側の説明を左右に配置する
11. 選ばれる理由（メリットの訴求）: 白地に、枠線付きのカードを3枚並べる。各カードに青い丸アイコン、青い見出し、本文を入れる

Imagery

• ファーストビューにはキャラクターを置き、カードの外へはみ出させる
• フラットなイラストで人物とスマホの利用シーンを描く
• 写真は青のフィルターを重ねてバナーの背景にする
• アイコンは青い丸に白の線画で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは、ファーストビューのカードを横長にし、コピーを左、キャラクターを右に置く
• PCでは、ステップカード内の箇条書きを2列にする
• PCでは、情報カードを2カラムのグリッドにする
• PCでは、理由カードを3列に並べる
• PCのヘッダーにはナビゲーションを横に並べ、右端に濃紺のCTAを置く

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