DESIGN.md — ピンク×白カードの医療脱毛クリニック LP（Pink Pop Medical Hair Removal Clinic LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: かわいい、ポップ・元気、情報量多め・訴求型、やさしい・柔らかい
• キーワード: ローズピンク・白カード・大きな価格数字・比較図・番号見出し・カルーセル
• 地の質感: フラットな塗りが中心。紙吹雪の三角とキラキラ装飾を少し足す
• 形: 上部が半円タブになった角丸カード、ピル型ボタン、リボン型ラベル
• 温度感: 暖かく甘い。ピンク基調でパステルを差し色にする

Colors

• 地はピンクと淡ピンクを交互に使い、その上に白カードを置く
• 番号付きポイントは 1 つずつ地色を変える（ピンク→黄→紫→橙）。カード内の本文色も地色に合わせる
• 強調したい語はピンク文字にするか、白抜きのピンク帯に入れる
• 主 CTA はほかより濃いピンクのグラデーション。白文字で書く
• 他社との比較はグレー、自社はピンクで色を分ける
• 価格の数字の下に黄色のマーカー線を敷く
• button-primary は文字 #FFF6F8 × 背景 #D8476E のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D3305C、4.55:1）を使う。
• button-fv は文字 #FFF6F8 × 背景 #4FB8D6 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#237B95、4.56:1）を使う。
• price-card は文字 #ED7C9D × 背景 #FBFBFB のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DF1F57、4.54:1）を使う。
• merit-card は文字 #ED7C9D × 背景 #FBFBFB のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DF1F57、4.54:1）を使う。
• compare-box は文字 #FFF6F8 × 背景 #ED7C9D のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DF1F57、4.5:1）を使う。
• faq-item は文字 #FFF6F8 × 背景 #ED7C9D のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DF1F57、4.5:1）を使う。

Typography

• 見出しは字間を広め（0.08em 以上）にして、やわらかく見せる
• セクション見出しは白抜きの巨大な数字の横に 2 行で添える
• 見出しは灰色で書き、キーワードだけピンクにする
• MERIT・POINT・STEP は弧状に並べた英字と中抜きの 2 桁番号で示す
• 前置きの一言は「＼ ／」のスラッシュで挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。追加サポートだけ 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 色の帯の内側に、幅 90% の白カードを中央寄せで置く
• 比較図は左に灰色の小カード、右にピンクの大カードを重ねて置く
• 料金プランと CTA のまとまりを 3〜4 回繰り返し挿入する
• ポイントと手順はカルーセルにし、ドットインジケーターを付ける
• 画面下に Web 予約バーを固定する

Elevation & Depth

• CTAボタンには下方向に濃いピンクの影を付け、立体感を出す
• 追加サポートの小カードに薄い影を付ける
• ほかのカードは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: カード幅いっぱいの長方形。人物は背景を切り抜くか、斜めの多角形で切る
• セクション境界: 基本は直線。見出しの下や FAQ の上だけ V 字の三角で切り替える
• カード上部には番号用の半円タブを付ける
• 料金ラベルは両端が切れ込んだリボン型にする
• 番号付きリストは黄色い正方形に数字を入れる
• 回数を並べる帯は矢羽根型にする

Components

• 主CTAボタン（button-primary）: 濃いピンクのグラデーションで作るピル型ボタン。白い太字を入れ、下に影を付ける
• FV水色ボタン（button-fv）: 水色グラデーションの角丸ボタン。右に再生アイコンを付ける
• 料金プランカード（price-card）: リボン型の見出し、黄色い部位バッジ、巨大な価格数字、注釈で構成する白カード
• 番号タブ付きカード（merit-card）: 上部の半円タブに弧状の英字と番号を入れた白カード
• 他社比較ボックス（compare-box）: 灰色の他社カードとピンクの自社カードを重ね、下に吹き出しの矢印を付ける
• 番号付き理由リスト（number-list）: 白い帯の左上に黄色い正方形の数字を重ねる
• FAQアコーディオン（faq-item）: ピンクの帯に大きな細字の Q と白文字の質問を置き、右端に下向きの山形を付ける
• 固定予約バー（sticky-bar）: 画面下に固定する水色の帯。受付時間のピルと矢印丸を入れる

Do's and Don'ts

Do - 白カードは必ずピンクか淡ピンクの地の上に置く - 価格の数字は画面幅いっぱいに大きく見せる - 料金と CTA のまとまりを、セクションの合間に何度も挟む - 比較は灰色とピンクで色を分け、自社の優位を示す - ポイントごとにパステルの地色を変える

Don't - 暗い色や黒をセクションの地にしない（注意喚起の帯だけは例外） - 見出しを詰めた字間で組まない - 寒色を主役にしない（水色は FV ボタンとバーだけに使う） - カードの角を直角にしない - 写真を暗く加工しない

Page Structure

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

1. ファーストビュー（期間限定キャンペーンと価格を伝える）: ピンクの地に放射線と紙吹雪を散らす。白い枠の中に水色のラベル、金色のコース名、巨大な価格、期間を並べ、下に水色の CTA を置く
2. 注意喚起と機器紹介（安いサロンとの違いを提起する）: 斜めストライプの暗い帯に黄色の大見出しを置く。続けて機器写真とピンクの機器名を見せ、回数ごとの比較図を並べる
3. 料金プランとCTA（申込みを促す）: 淡ピンクの地にリボン付きの料金カードを置き、点線で囲んだ一言と濃いピンクのピル型 CTA を続ける
4. メリット3つ（技術面の優位を示す）: 大きな白抜きの数字の見出しを置き、番号タブ付きカードに図解と他社比較を入れる
5. こだわりポイント4つ（信頼と安心を示す）: 地色をポイントごとにピンク・黄・紫・橙へ変える。写真、線画イラスト、色付きの本文をカルーセルで見せる
6. 追加サポート（付帯サービスを伝える）: 白カードの中に、淡ピンクの小カードを 2×2 で並べる
7. 追加料金ゼロ（費用面の不安を取り除く）: 白い円を扇形に分割して線アイコンを入れ、中央にピンクの円で 0 円を示す
8. 予約の取りやすさ（予約面の不安を取り除く）: 切り抜いた人物と問いかけを置き、黄色い番号付きの理由を 3 つ並べる
9. 割引プラン（お得感を出す）: V 字の見出し帯の下にピンク枠のカードを置き、割引率を大きく書いて黄マーカーを敷く。カルーセルにする
10. 比較表（医療脱毛とエステ脱毛の違いを示す）: 項目列は金色地。自社側はピンクの枠で強調し、エステ側はベージュにする
11. 施術の流れ（来院までの手順を示す）: 大きな数字の見出しを置き、STEP タブ付きカードをカルーセルで見せる。写真の上にピンクの帯の文字を重ねる
12. よくある質問（疑問を解消する）: 細字の大きな英字見出しを置き、ピンクのアコーディオンを縦に積む
13. クリニック情報（所在地と連絡先を示す）: 白地に淡ピンクの見出し帯を置き、中央揃えのテキストと注意事項を続ける

Imagery

• 明るい白基調の院内で撮った、清潔な女性モデルの写真
• 人物は背景を切り抜き、斜めの多角形や淡ピンクの面に重ねる
• 灰色の細い線で描いた、手描き風のアイコンとイラスト
• 肌の断面やレーザーは、パステルの平面図で図解する
• キラキラと三角の紙吹雪を少しだけ散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC ではコンテンツ幅を 750px 前後で中央に固定し、両脇に淡ピンクの地を広げる
• 比較図やカードの構成は SP と同じ 1 カラムのまま拡大する
• 追加サポートは PC で 4 列に並べる
• カルーセルは PC で 2〜3 枚を同時に見せる
• 固定予約バーは PC では右下の浮動ボタンに変える

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