DESIGN.md — 生成り×橙のやさしい乳児クリニックLP（Warm Cream Pediatric Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、信頼・誠実、ナチュラル
• キーワード: 生成り・オレンジ・手書き風・メモ紙・丸写真・安心感
• 地の質感: 紙のようなクリーム地。見出し帯とメモカードの縁は、かすれた紙のようにギザギザさせる
• 形: ピル型ボタン、端が波打つ帯見出し、丸い写真、淡い円の重なり
• 温度感: 暖色寄りでぬくもりがある

Colors

• 地色は生成りで統一する。純白はカードとメモにだけ使う
• セクション見出しの帯はオレンジで塗り、文字は白にする
• CTAブロックは淡いアプリコット地にし、オレンジのピル型ボタンを置く
• 文字は黒を使わず焦げ茶にする
• 強調したい語は黄色のマーカーか、オレンジの文字で目立たせる
• ラベルやバッジは濃い茶の地に白抜き文字にする
• button-primary は文字 #FEFAEA × 背景 #F4924D のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BB540C、4.58:1）を使う。
• section-banner は文字 #FEFAEA × 背景 #DD7B3B のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B45A1F、4.54:1）を使う。
• qa-label は文字 #FEFAEA × 背景 #9D6840 のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9B673F、4.56:1）を使う。
• step-header は文字 #DD7B3B × 背景 #FFF0DD のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B45A1F、4.51:1）を使う。

Typography

• 全体を丸ゴシックで統一し、字間をやや広めにとる
• FV のキャッチだけは、手書き風の書体を縦書きの白い短冊に載せる
• 回答や結論はオレンジの太字で示す
• 注釈は「※」から始め、11px程度で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは中央に揃え、左右に約20pxの余白をとる
• セクションの合間に CTA ブロックを挟む
• STEP はタイトル帯、本文、丸写真の順に並べ、点線でつなぐ
• Q&A は左上に斜めカットのラベルを置き、質問、点線、回答の順に並べる

Elevation & Depth

• CTAボタンには、下方向へ薄い影を付ける
• メモカードには、紙のような薄い影を付ける
• 医師写真の背後に、淡いオレンジの板をずらして重ねる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 工程写真は正円に切り抜く。人物写真は角丸の四角に切り抜く
• セクション境界: 直線で区切らず、端が波打つ帯見出しで区切る
• 見出し帯の上下の縁は、手描きのように不揃いにする
• メモカードの縁はかすれたギザギザにし、押しピンのイラストを添える
• 吹き出しは白い角丸にし、オレンジの細い枠線で囲む

Components

• 予約ピルボタン（button-primary）: オレンジのピル型。白文字で、右端に小さな三角を付ける
• CTAブロック（cta-block）: アプリコット地に、実績バッジ、問いかけ、ボタン、注釈をまとめる
• 混雑告知吹き出し（speech-bubble）: ボタンの上に重ねる白い吹き出し。一部の語にマーカーを引く
• 帯見出し（section-banner）: 端がかすれたオレンジの帯に白い太字を載せる
• メモカード（memo-card）: 白い紙に、手書き風のmemo吹き出しと押しピンを添え、要点にマーカーを引く
• 不安ラベル（qa-label）: 左端から伸びる茶色のタブ。右端は斜めにカットする
• STEP見出し（step-header）: 淡い帯の上辺に、step番号のタグを重ねる
• チェックリスト（check-list）: オレンジのチェックアイコンを並べ、キーワードにマーカーを引く
• 実績バッジ（badge-rounded）: 白いピル型。茶色の文字で実績の数字を示す

Do's and Don'ts

Do - CTAブロックを、2〜3セクションごとに繰り返す - 色は暖色だけでまとめる - 写真は明るく柔らかいトーンに揃える - 強調には黄色のマーカーを使う - 装飾の淡い円を、写真の横に重ねて置く

Don't - 黒や寒色を、文字や面に使わない - 角張ったボタンや鋭い直線の区切りを使わない - 彩度の高い赤で警告っぽく見せない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（悩みを提起して予約へ誘導する）: 赤ちゃんの写真に縦書きキャッチの短冊を重ね、下にCTAブロックを置く
2. 悩みの提起（早めに相談すべき理由を示す）: 白いカードにチェックリストを並べ、症状名は頭の形のアウトラインで3つ示す
3. クリニック案内（所在地と診療時間を伝える）: 院内写真と地図を2列に並べ、アクセスと時間は点線付きの見出しで示す
4. よくある不安（費用や待ち時間などの不安を解消する）: 不安ラベル、質問、点線、オレンジの回答の順に、3つ並べる
5. メモ（治療に適した時期を強調する）: メモ紙風のカードにマーカーを引いて強調する
6. CTA（予約を促す）: アプリコット地のブロックにピル型ボタンを置く
7. 医師紹介（専門性と信頼を示す）: 帯見出しにバッジを重ね、写真の背後に板をずらし、経歴は小さな文字で添える
8. クリニックの選び方（選ぶときの基準を示し、自院の優位性を伝える）: チェックリストの5項目にマーカーを引く
9. 当院の訴求（安心して任せてもらう）: オレンジの見出しに淡い円を飾り、大きな写真と本文を続ける
10. 治療の流れ（治療の工程を見せる）: STEP見出し、本文、丸写真の組を点線でつなぎ、5工程並べる
11. 締めのメモとCTA（最後のひと押しをする）: メモカードのあとにCTAブロックを置く

Imagery

• 赤ちゃんと家族の笑顔を、自然光でハイキーに撮る
• 写真はクリーム寄りの暖色に補正する
• 工程写真は正円にトリミングし、横に淡いオレンジの円を重ねる
• アイコンは手描き風のオレンジ線で描く
• 地図は暖色系のトーンに合わせる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に幅約480pxのカラムを置き、左右をグレーの地にする
• PC でも SP と同じ1カラムのデザインを保つ
• ボタンの幅は、カラム幅の約85%を保つ

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