DESIGN.md — パステル桃×水色に深紅キャンペーンの医療脱毛LP（Pastel Pink and Aqua Medical Hair Removal LP with Red Campaign Blocks）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 情報量多め・訴求型、やさしい・柔らかい、清潔・爽やか、かわいい
• キーワード: パステルグラデーション・深紅キャンペーン・価格の大きな数字・手書き風見出し・比較表・3色CTA
• 地の質感: 淡いグラデーションと光のにじみ。キャンペーン帯は深紅に菱形のチェック柄とリボンの装飾
• 形: 角丸カード、ピル型ボタン、六角形のバッジ、雲形の吹き出し
• 温度感: 暖色ピンクと寒色ティールが交互に出る、やや暖かめの配色

Colors

• 地は白・ラベンダー・生成りを使い、セクションごとに切り替える
• キャンペーン帯は深紅の地に白抜きの大きな文字を載せ、ページ中で何度も繰り返す
• 理由セクションはティールからラベンダーへのグラデーション地に白カードを載せる
• 強調語はピンクの文字か黄色マーカーにする
• CTAはピンク・緑・ティールの3色を縦に並べる
• 公式サイトへのボタンだけはゴールド茶のグラデーションにして区別する
• button-primary は文字 #FFF9F6 × 背景 #E69493 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D13C3A、4.56:1）を使う。
• button-line は文字 #FFF9F6 × 背景 #74BB53 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4B8032、4.54:1）を使う。
• reason-number は文字 #3CC7D1 × 背景 #FEFEFE のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#208289、4.51:1）を使う。
• price-card は文字 #F17489 × 背景 #FEFEFE のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E8173A、4.51:1）を使う。

Typography

• 価格の数字は本文の3倍以上の大きさにし、単位（円）は小さくする
• 見出しの中の強調語だけ色を変えるか、サイズを大きくする
• セクション見出しには半透明の英字スクリプトを重ねる
• 本文は中央揃えを基本とし、カードの中だけ左揃えにする
• 注釈は※を付けて小さな灰色の文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンだけ 3 列グリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約90%で中央に置く
• 比較表は3〜4列で、自社の列を色付きで強調する
• CTAの3段ブロックは同じ組み合わせで何度も挿入する
• 番号付きのこだわりはアコーディオン型のリストで縦に並べる

Elevation & Depth

• 白カードにはぼかしの大きな薄い影を付ける
• CTAボタンには下方向の影と立体的なグラデーションを付ける
• 吹き出しやバッジは影なしのフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。人物写真は背景を切り抜いて端に寄せる
• セクション境界: 基本は直線で切り替える。キャンペーン帯の下端は雲形のフリンジ、注意喚起の帯にはストライプの境界を使う
• ボタンは完全なピル型にし、右端に三角の矢印を付ける
• 見出しの帯はリボン形か角丸のタブにする
• アイコンは円形の枠に入れる

Components

• ピンクのCTAピル（button-primary）: ピンクのグラデーションに白文字と右矢印。冒頭の語だけ黄色にする
• LINE相談ボタン（button-line）: 緑のグラデーションのピル。左にLINEアイコンを置く
• 公式サイトボタン（button-official）: ゴールド茶のグラデーションで、角丸は小さめ
• 深紅キャンペーン帯（campaign-band）: 菱形柄の深紅地にリボンを飾り、白枠カードの中に巨大な価格を載せる
• メリットカード（benefit-card）: 円形アイコンとラベンダーのタブ見出しを付けた白カード
• 他社比較表（comparison-table）: 自社の列をピンクの見出しと枠で強調し、他社の列は灰色にする
• 理由の番号タブ（reason-number）: 白いタブに、ティールの斜体数字で01などを入れる
• 料金カード（price-card）: ピンクの帯見出し、通常価格の取り消し線、大きなピンクの価格、月額を並べる
• 注釈（note-text）: ※付きの小さな灰色文字を箇条で並べる

Do's and Don'ts

Do - キャンペーン帯とCTAの3段ブロックは、セクションの区切りごとに繰り返す - 価格は太字の大きな数字で見せる - 強調語には黄色マーカーかピンク文字を使う - セクションの地はパステルを交互に切り替える - 見出しには英字スクリプトや手書き風の書体を添える

Don't - 深紅をキャンペーン帯以外の広い面に使わない - CTAを角張ったボタンにしない - グラデーションを使わない平板な配色にしない - 比較表で自社の列を目立たせずに並べない - 黒い背景を多用しない（注意喚起の箇所に限る）

Page Structure

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

1. ファーストビュー（続けやすさと価格を一目で伝える）: 女性の写真と機器を並べ、ピンクの帯コピーを載せる。下に六角形の特長バッジを3つ置く
2. キャンペーン（期間限定の価格を訴求する）: 深紅の菱形柄地にリボンを飾り、巨大な価格カードと照射部位のイラストを置く
3. 価格比較（地域で最安値級であることを示す）: 白い条件カードと、自社の行をゴールドで強調した比較表を置く
4. 適用条件とCTA（申込みの方法を示す）: 生成り地に条件の箇条書きを置き、3色のピルボタンと注釈を続ける
5. こだわり（安心感を伝える）: 手書き風の見出しの下に、番号付きのアコーディオンを7つ並べる
6. メリット（脱毛後の生活を想像させる）: 光のにじむ写真の下に、アイコン付きのラベンダーのタブカードを並べる
7. 悩みの提起（共感を得る）: 桃色地の白カードに、チェック付きの悩みを並べる
8. 注意喚起（他院との違いを際立たせる）: ストライプの帯と灰色地に、困り顔のイラストと吹き出しを置く
9. 選ばれる理由（機器・範囲・価格の根拠を示す）: ティールのグラデーション地に番号タブ付きの大きなパネルを置き、比較表やQ&Aカードを入れる
10. 追加料金なし（費用面の不安を解消する）: 円形の線画アイコンを3列のグリッドで9個並べる
11. 料金プラン（コースごとの価格を示す）: ピンクの帯見出し付きの料金カードを縦に並べ、紙吹雪の特典カードを添える
12. 施術の流れ（来院までの流れを示す）: STEP番号付きのカードをスライダーで見せる
13. よくある質問（残る疑問を解消する）: Q&A形式で、雲形の飾りを付けた見出しにする

Imagery

• 明るい自然光の下で笑顔の若い女性を撮り、白い肌を見せる写真
• 医療機器は白背景の切り抜き写真にする
• 淡いタッチの女性イラスト（全身の部位図や困り顔）
• 細い線画のティールのアイコン
• キラキラの光、ハート、リボン、紙吹雪の装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480px幅のSPレイアウトを置き、左右を淡い色の地で埋める
• 比較表やアイコンのグリッドは列数を保ったまま拡大する
• キャンペーン帯は全幅の背景にし、中身は中央の幅に収める

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