DESIGN.md — コバルト青×ピンクの健康啓発 LP（Cobalt Blue and Pink Health Awareness LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 信頼・誠実、清潔・爽やか、親しみ・手作り感、やさしい・柔らかい
• キーワード: コバルトブルー・ピンクのハート・線画イラスト・点線の矢印・交互の帯・啓発
• 地の質感: 白地にごく薄いグリッド柄。青帯はベタ塗り。地図は淡い青の線画。
• 形: 角丸は小さめ（4px）。点線の枠、ノートのリング風の白い横線、鉛筆モチーフの見出し飾り。
• 温度感: クールな青に温かいピンクを足した、明るく親しみやすい温度感

Colors

• 白地と青の全幅帯を交互に置き、リズムを作る。
• ピンクはボタン・ハート・矢印・アイコン円など小面積に限る。
• 青帯の上の文字はすべて白。白地の見出しは青。
• 本文は白地なら濃いグレーか青、青地なら白。
• 淡い青は地図やイラスト背景の面に使い、主役にしない。
• button-primary は文字 #FFFFFF × 背景 #EB85B2 のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC2B79、4.5:1）を使う。

Typography

• 見出しは太い丸みのあるゴシックで青か白。
• 本文は中央揃えにして短く改行する。
• 英字の小見出しは矢印の途中に小さく置く。
• ボタン文字は字間を広めにとり、右に「>」を付ける。
• 見出しは 2 行に分け、1 行を短くする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは写真と青パネルの左右 2 分割を交互にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 全幅の青帯と白地を交互に積む。
• セクション間を太い点線の縦矢印でつなぐ。
• チェックツールは点線枠のカードに入れる。
• 特長カードは 3 つ縦に並べ、写真の位置を左右交互にする。
• フッターは青地にナビを中央揃えで縦に並べる。

Elevation & Depth

• 影はほぼ使わない。平面で構成する。
• 面の区別は色の切り替えと点線枠で行う。
• 動画プレーヤーは白い細枠で囲む。

Shapes

• 角丸: 小 3px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形で、カードの半分を埋める
• セクション境界: 直線で色を切り替える。点線矢印と鉛筆型の線の見出し飾りでつなぐ
• ボタンは角丸 4px 程度の長方形。
• アイコンは白かピンクの円に入れる。
• カード中央にノートのリング風の白い横線を並べる。
• ハートは鍵穴型の円と骨型の軸を組み合わせる。

Components

• ピンクの主ボタン（button-primary）: 角丸の小さい長方形。白文字と右に「>」を付ける。
• 斜線はさみ見出し（heading-slash）: 青帯の中で、白い見出しの左右に白い斜線を置く。
• 点線の縦矢印（dotted-arrow）: 太い青の破線と下向き矢印。途中に英字ラベルを入れる。
• 点線枠カード（dotted-card）: 白地を青の点線で囲む。中にカルーセルのチェックツールを入れる。
• 写真＋青パネルカード（feature-split-card）: 写真と青パネルの半分ずつ。境目にリング線。アイコン、番号付き見出し、本文、ピンクボタンの順に並べる。
• 鉛筆飾り見出し（pencil-heading）: 左右から鉛筆型の青い線が中央のハートを指す。下に大見出し。
• 地図の検索ビジュアル（map-search）: 淡い青の線画の地図に、ピンクのハート型ピンを点在させる。
• フッターのバナー（banner-link）: 白地の横長バナー。ロゴや数字の丸アイコンと短い文を入れる。

Do's and Don'ts

Do - 青とピンクの 2 色に絞り、白で余白を広くとる。 - 人物は線画のイラストで、やさしい表情に描く。 - 行動の流れは点線の矢印と英字ラベルで見せる。 - CTA は同じピンクのボタンで何度も出す。 - 注釈や出典は小さい灰色の文字で添える。

Don't - 濃い影や立体的なボタンを使わない。 - ピンクを大きな面に塗らない。 - 明朝や細い書体を見出しに使わない。 - 青以外の濃い色の帯を足さない。 - 本文を左揃えで長く詰めない。

Page Structure

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

1. ファーストビュー（ブランドの印象を伝える）: 白地の中央に、短いコピーと大きなロゴマークを置く
2. 動画紹介（概要を動画で伝える）: 青帯に斜線はさみの見出しと埋め込み動画を置く
3. 問題提起（健康リスクに気づかせる）: 白地に青の大見出しと、中央揃えの短い本文を置く
4. 参加の呼びかけバナー（活動への参加を促す）: 青帯に写真と吹き出しのバナーを置き、右下にリンクを付ける
5. セルフチェック（自宅で試せることを示す）: 点線矢印で導き、点線枠カードにイラストのカルーセルを入れる
6. 医療機関検索（検査先を探す行動へ導く）: 青帯に大きな白見出し、地図イラスト、ピンクボタンを並べる
7. 知識コンテンツ（詳しいページへ誘導する）: 鉛筆飾りの見出しの下に、写真と青パネルのカードを 3 つ交互に並べる
8. 締めの CTA（最後にもう一度行動を促す）: 淡いモノクロ写真の上に、ロゴ、虫眼鏡アイコン、見出し、ピンクボタンを置く
9. フッター（回遊させ、運営情報を示す）: 青地にバナー 2 つ、中央揃えのナビ、ロゴ、コピーライトを置く

Imagery

• 人物は太さが一定の線画で、青・ピンク・肌色の少ない色で塗る。
• 写真はシニアや医療の場面を明るい自然光で撮る。
• 地図は淡い青の道路の線画にピンクのピンを置く。
• 締めには淡いモノクロの写真を薄く敷く。
• アイコンは単純なシルエットを円の中に入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びのナビとピンクの CTA を常に出し、SP はハンバーガーメニューにする。
• PC の見出しは 1 行にまとめる。
• PC のコンテンツ幅は約 900px で中央に置く。
• 特長カードは PC でも左右 2 分割で、横に長くする。
• フッターのナビは PC で横 1 列にする。

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