DESIGN.md — 水色×クリーム色のやさしい補聴器相談LP（Soft Pastel Home-Visit Healthcare LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型
• キーワード: パステル地・線画イラスト・吹き出し・太枠ピルCTA・明朝見出し・シニア向け
• 地の質感: 平塗りのパステル面と白カード。影は柔らかいドロップシャドウ
• 形: 角丸の大きい白カード、太い縁取りのピル型ボタン、モコモコした吹き出し、V字・曲線のセクション境界
• 温度感: 暖かめ。クリームとオレンジに水色を合わせた穏やかな温度感

Colors

• 地は白を基本に、クリーム・パステル黄・水色の面で章を区切る
• CTAブロックは必ず水色背景＋白カードの中に置く
• 申込はオレンジ、電話は紺、資料請求は緑の太枠で役割を色分けする
• 理由・失敗例はピンク系、解決策・強調語は青系に統一する
• 見出しのキーワードは黄色マーカーか青文字＋傍点で強調する
• 紺の全幅帯は会社紹介とフッター前だけに使う

Typography

• 見出しは明朝、本文とボタンはゴシックで分ける
• 見出しは中央揃えで2〜4行に短く改行する
• 強調語は一回り大きくし、青文字＋上部の傍点で目立たせる
• CTA文言は極太ゴシックで大きく、補足語は小さく添える
• 本文は行間1.9程度に広くとり、シニアが読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約94%で左右に細い余白を残す
• CTAブロックを2〜3セクションごとに挟む
• 特長リストはアイコン付き見出し＋チェック項目を縦に並べる
• お客様の声は丸いアバター→吹き出しカードの縦並び
• 比較表は横スクロールさせ、注記を添える

Elevation & Depth

• 白カードには右下へ落ちる柔らかい影（0 4px 8px rgba(0,0,0,.15)）
• CTAボタンには下方向に少し影をつけて立体感を出す
• 声カードにも軽い影をつけ、地から浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は丸型切り抜き、場面イラストは角型、製品は切り抜き
• セクション境界: 水色帯は上辺をV字に凹ませる。クリーム地は大きな曲線で切り替える
• CTAは6px前後の太い枠線を持つピル型
• 吹き出しはモコモコした雲形で、太い黒線で縁取る
• 失敗例は角丸のピンク点線枠
• 声カードは上向き三角のしっぽを持つ角丸ボックス

Components

• 申込ピルCTA（button-primary）: クリーム地にオレンジの太枠。左に丸い『無料』バッジ、右にオレンジの丸矢印
• 電話ピルCTA（button-phone）: 紺の太枠。上部に紺のラベル、左に電話アイコン＋通話料無料表記
• 資料請求CTA（button-document）: 緑の太枠ピル。右上に冊子画像をはみ出させて置く
• CTAカード（cta-card）: 水色背景の上の白い角丸カード。ボタン2〜3種と受付時間の注釈をまとめる
• 悩み吹き出し（speech-cloud）: パステル黄の雲形吹き出しに太字キーワード。下に困り顔イラスト
• 原則カード（principle-card）: 白カードの上辺に黄色のピル型見出し札を重ね、本文と線画イラストを入れる
• 理由カード（reason-card）: ピーチの太枠カード。ピーチの見出し帯に『理由＋大きな数字』をつける
• お客様の声カード（voice-card）: ピーチ地の吹き出しカード。右下に白ピルの属性ラベル
• チェックリスト（check-list）: 青いチェックボックスアイコンと、青点線の下線付き項目

Do's and Don'ts

Do - CTAは水色帯＋白カードの形で繰り返し配置する - イラストは細い黒線＋パステル平塗りに揃える - 見出しの強調語は黄色マーカーか青文字＋傍点にする - 文字は大きめ・行間広めでシニアが読みやすいようにする - 解説役の担当者の丸アイコンと一言を章の導入に置く

Don't - 彩度の高い濃色を背景に広く使わない（紺帯は限定的に） - 角ばったボタンや細い線のボタンにしない - リアル写真とイラストを同じカードに混在させない - 本文を小さく詰めて組まない - CTAの色の役割（申込・電話・資料）を入れ替えない

Page Structure

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

1. ファーストビュー（テーマ提示と悩みの共感）: 明るい室内写真に人物、明朝の大見出しに黄色マーカー。下部に悩み場面の線画と丸い吹き出し2つ
2. CTA（最初の申込導線）: 白カードにオレンジ・紺のピルボタンと資料請求リンク
3. 専門家の問題提起（後悔する理由を説明）: クリーム地に担当者アイコンと黒ラベル付き紹介、白カードに3アイコンと下線強調文
4. 悩みの提起（失敗パターン3つ）: 黄色の雲形吹き出しを縦に3つ並べ、困り顔イラストと製品画像を添える
5. CTA（相談への誘導）: V字で始まる水色帯に白CTAカード
6. 三原則（選び方の原則を教える）: 黄色の角丸タイルに一文字ずつの章タイトル、黄色札付き白カード3枚
7. 理由（自宅で試す根拠）: ピーチ枠の理由カード2枚に比較イラスト
8. 失敗例（試さないリスクを示す）: ピンク点線枠に番号付きピンク見出しと丸型イラスト
9. サービスの特長（メリットを列挙）: 丸アバター付き青明朝見出し＋青チェックリストを4ブロック、日本地図で対応エリア
10. お客様の声（安心感と実績）: クリーム地に丸アバター→ピーチ吹き出しカードを4件
11. 商品ラインナップ（価格帯とブランドの比較）: 白カード内に青ヘッダーの横スクロール表と星評価、ブランドロゴと製品写真
12. 会社紹介（信頼性を示す）: 紺帯の後に青見出し＋下線、写真グリッド、ロゴ、グレー地の会社概要
13. 最終CTA（最後の申込導線）: 水色帯に傍点強調見出しとCTAカード3ボタン
14. フッター（規約とコピーライト）: 小さな中央揃えリンクと画面下固定の2ボタン

Imagery

• 人物や場面は黒い細線の線画に、黄・水色・ピンクのパステルを平塗りする
• 悩みの人物は困り顔＋汗マークを描き、白い丸の中に入れる
• FVは明るくぼかした室内写真に、笑顔のスタッフ写真を切り抜いて重ねる
• 製品は白背景の切り抜き写真を吹き出しの端に重ねる
• アイコンは青い細線のシンプルな線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約800px幅のカラムにし、背景色の帯だけ全幅にする
• PCの悩み吹き出しは中央の人物を囲む3方向配置にする
• PCの原則・理由カードは画像とテキストを左右2カラムにし、左右を交互に入れ替える
• PCのCTAは申込ボタンと電話番号を横並びにし、電話番号を大きく出す
• 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 行書くと起動時に読み込まれる。