DESIGN.md — 黄色×ピンクの明るい医療脱毛クリニック LP（Sunny Yellow Pink Medical Hair Removal LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 山吹イエロー・ピンクCTA・波形セクション・円形英字ロゴ・手書き吹き出し・実績数字
• 地の質感: 白〜クリームの地に、淡い斜線ストライプと柔らかなグラデーションを敷く。光沢はゴールドの実績バッジだけに使う。
• 形: 角丸カード、ピル型のラベル、楕円に切り抜いた写真、波形のセクション境界、円形のポイント番号
• 温度感: 暖色寄りで明るく、元気な印象

Colors

• 地は白とクリームを交互に使い、強調したいセクションだけ黄色のベタ面にする。
• 予約ボタンだけにピンクのグラデーションを使い、ピンクを他の面の塗りに使わない。
• 見出しの文字は黄色、本文の強調はピンク文字で書き分ける。
• 比較表は、他社側をグレーにして自社側を黄色とピンクで目立たせる。
• 実績の数字にはオリーブゴールドかゴールドのメダルを使い、信頼感を出す。
• 青は冷却や部位分類など、機能を説明する場面に限る。
• cta-price-box は文字 #FBFDFE × 背景 #FC326B のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E80344、4.55:1）を使う。
• point-badge は文字 #F6C323 × 背景 #FFFFFF のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#937106、4.56:1）を使う。
• boxed-heading は文字 #F6C323 × 背景 #FFFFFF のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#937106、4.56:1）を使う。
• yellow-band-heading は文字 #FFFFFF × 背景 #F6C323 のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#937106、4.56:1）を使う。
• benefit-card は文字 #E8608A × 背景 #EAF3FA のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D31E56、4.57:1）を使う。
• step-label は文字 #FFFFFF × 背景 #F6C323 のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#937106、4.56:1）を使う。
• faq-row は文字 #FFFFFF × 背景 #F6C323 のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#937106、4.56:1）を使う。

Typography

• ファーストビューのコピーは明朝の縦組みにして、上品さを出す。
• セクション見出しは極太ゴシックで黄色、または黄色帯に白抜きで入れる。
• 数字は他の文字の 2〜3 倍の大きさにし、単位は小さく添える。
• 本文は中央揃えで行間を 2.0 にし、強調部分だけピンクにする。
• 吹き出しには手書き風の書体を使い、口語調で短く書く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードのみ 2 列のグリッドにする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは英字か番号の装飾、見出し、ビジュアル、本文の順に並べる。
• 予約 CTA ブロックを 4〜5 セクションごとに繰り返し置く。
• ポイント番号は円形にし、周りに英字を円状に回す。
• 見出しは枠線の箱で囲み、中央揃えにする。
• ステップは白い角丸ラベル＋縦線でつないで縦に並べる。

Elevation & Depth

• CTA ボタンには下方向に柔らかい影（0 4px 8px の薄いグレー）を付ける。
• 比較表の行カードには薄い影を付けて浮かせる。
• それ以外の面は基本的にフラットにする。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は左右が膨らんだ楕円のピル型に切り抜く。人物写真は背景を白に溶かす。
• セクション境界: 黄色の波形カーブと V 字の矢羽型で区切る。
• 部位タグや STEP ラベルはピル型にする。
• CTA は角丸 16px 前後の横長ボックスにし、左に白い円形バッジ、右に丸い矢印を置く。
• 吹き出しは雲形やいびつな円にする。
• 見出しは細い黄色枠の長方形で囲む。

Components

• 料金入り予約 CTA（cta-price-box）: ピンクグラデーションの横長ボックス。上に黄色のリボン型ラベル、左に白い円形の部位バッジ、中央に大きな月額料金、右に丸い矢印、下に総額の小さな帯を置く。
• CTA 上のリード文（cta-lead）: 斜線で挟んだ 2 行のコピー。数字は黄色、予約を促す語はピンクで強調する。
• 円形のポイント番号（point-badge）: 白い円の中に黄色の 2 桁番号を入れ、外周に英字を円状に回す。
• 枠囲み見出し（boxed-heading）: 上に小さめのリード行を置き、下の主見出しを細い黄色枠の箱で囲む。
• 黄色帯見出し（yellow-band-heading）: 行ごとに黄色の帯を敷き、白抜きの極太文字を乗せる。縦組み版もある。
• 2 列の比較表（compare-table）: 左がグレーの他社側、右が自社側。中央にピンクの円で項目名を入れ、行は白い角丸カードにする。
• 特典カード（benefit-card）: 淡い水色の角丸カードを 2 列に並べる。左上にピンクの丸ラベル、小さな説明文とピンクの特典名を入れる。
• プランカード（plan-card）: 黄色い枠の見出しバー＋白いカード。ピル型のタグと大きなピンクの月額を入れる。
• STEP ラベル（step-label）: 黄色地の上に白い線のピル枠を置いて STEP 番号を入れ、下に短い縦線を付ける。
• FAQ アコーディオン（faq-row）: 黄色のベタ行の左に Q. を入れ、右に白い＋を置く。行の間は白い細線で区切る。

Do's and Don'ts

Do - CTA は同じデザインでページ全体に 5 回以上繰り返す。 - 数字（回数・実績・価格）を特大で見せる。 - 黄色は白とクリームの地と交互に使い、明るさを保つ。 - 写真は楕円に切り抜き、筆記体の英字を重ねる。 - 手書き風の吹き出しで利用者の本音を添える。

Don't - ピンクを CTA と強調文字以外の面に広く使わない。 - 黒や濃紺の重い背景は使わない。 - 角張った四角い写真を並べない。 - 本文を左揃えで長く詰め込まない。 - 比較表で自社側をグレーにしない。

Page Structure

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

1. ファーストビュー（最短回数と実績で興味を引く）: 白い背景で笑顔の女性を右に置き、明朝縦組みのコピーを左に入れる。下にゴールドの円形メダルを 2 つ並べる。
2. CTA（早い段階で予約へ誘導する）: リード文とピンクの料金入り CTA を置く。
3. 選ばれる理由（共感と安心を得る）: 淡い黄色の英字の上に、手書き風の吹き出しを散らす。
4. 実績（信頼を示す）: 黄色帯見出しのあとに、月桂樹で挟んだ巨大な数字と院内写真を置く。
5. 理由カルーセル（強みを要約する）: 黄色枠のカードを横スライドで並べ、スタッフの写真と吹き出しを入れる。
6. 比較（医療とサロンの差を示す）: Q 吹き出しの問いかけのあと、2 列の比較表と毛根の図解を置く。
7. 特長ポイント（5 つの強みを詳しく説明する）: 円形の番号、枠囲み見出し、楕円写真か図解、中央揃えの本文の順にする。境界は波形にする。
8. 無料特典（追加費用の不安をなくす）: 大きな ¥0 を見せ、特典カードを 2 列のグリッドで並べる。
9. まとめ（結論を印象づける）: 手書き文字に縦の黄色帯コピーと女性の写真を組み合わせる。
10. 料金プラン（プランを比較してもらう）: クリーム色の枠の中にプランカードを 2 つ縦に並べる。
11. カウンセリングの流れ（来院までの不安をなくす）: 黄色の背景に STEP 1〜4 を V 字で区切って並べ、写真とイラストを添える。
12. よくある質問（疑問を解消する）: Q&A の英字見出しのあと、黄色の行のアコーディオンを並べる。
13. 最終 CTA（予約を締めくくる）: リード文と CTA、注釈を置く。

Imagery

• 20〜30 代の女性を、白い背景・自然光・笑顔で撮る。肌見せは肩までにする。
• 院内やスタッフの写真は明るいベージュ系の空間で撮る。
• 写真は楕円に切り抜き、白い筆記体の英字を重ねる。
• 毛周期や肌断面は、淡いピンクとベージュのフラットな図解にする。
• 氷やコスメなどの小物を切り抜いて、セクションの端に浮かせる。
• 線画の女性イラストはモノトーンにグレーの塗りを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため推奨として記す。PC では中央に幅 480〜600px の SP レイアウトを置き、左右の余白は淡いグレーかクリームで埋める。
• 広げる場合、比較表と特典カードは最大幅 960px にとどめる。
• CTA は横幅 600px を上限にする。
• カルーセルは PC では 3 枚を同時に見せる。

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