DESIGN.md — 朱×黄×緑のポップ漫画風医療脱毛 LP（Pop Comic Retro Medical Hair Removal LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、レトロ
• キーワード: 集中線・黒太枠・朱色CTA・色帯セクション・オフセット影・生成り地
• 地の質感: 生成りのフラット地に放射線・方眼・紙吹雪の装飾を重ねる。写真は明るく清潔。
• 形: 角丸カード、黒ベタヘッダー付き価格枠、下に濃い色をずらしたピル型ボタン、波形・アーチ・V字の境界
• 温度感: 暖色寄りで高彩度。緑と水色で清潔感を足す

Colors

• 地は生成りと白を交互にし、数セクションごとに黄・緑・朱・オレンジの全幅色帯を挟む
• 主CTAは朱色。緑帯上では白ボタン、黄帯上では緑ボタンに切り替える
• 価格数字は朱色の極太文字に黒い輪郭影と黄マーカーを重ねる
• 見出し内の強調語だけ朱・緑・オレンジ・水色に色替えする
• 黒は太枠線・見出し帯・オフセット影に使い全体を締める
• 比較表は自社側を朱、他方式を水色で色分けする
• button-primary は文字 #FFFAF6 × 背景 #DA5232 のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CD4525、4.53:1）を使う。
• price-box は文字 #DA5331 × 背景 #FEFEFE のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF4725、4.55:1）を使う。
• stat-card は文字 #EEB860 × 背景 #FFF6E5 のコントラスト比が 1.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#9A6610、4.57:1）を使う。

Typography

• 見出しは極太ゴシックにして、強調語は1.5倍に拡大・色替えする
• 強調文字に傍点（上に丸点）を打つ
• CTA上のマイクロコピーは「＼ ／」の斜線で挟む
• 大見出しには黒の輪郭影やずらし影を付ける
• 本文は字間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンカードは 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右余白はおよそ18px
• CTAは数セクションおきに同じ形で繰り返す
• セクションの区切りに「つまり」「さらに」などの黒いV字タブを置く
• 色帯の中に白カードを積み重ねる
• 人物の切り抜きをセクションの角にはみ出させる

Elevation & Depth

• カードは下に黒をずらしたオフセット影（約6px）
• CTAは下に濃い同系色をずらして立体ボタン風にする
• 実績カード・クリニックボタンは淡いぼかし影
• ぼかしの強い影は使わない

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸長方形。人物は切り抜きで枠外に配置
• セクション境界: 波形、上向きアーチ、下向きV字タブ、黒の太水平線
• 価格枠は黒の太枠と黒ベタのヘッダー
• タグ・回数バッジは黒枠の白ピル
• 番号は朱色のピン型シルエットに白数字
• アイコンボックスは緑か黄の細枠で角丸

Components

• 主CTAボタン（button-primary）: 朱色のピル型。左にカレンダーアイコン、右に白丸矢印。下に濃い朱のずらし影
• 価格枠（price-box）: 黒ヘッダーにコース名と回数ピル、白地に朱色の巨大数字と黄マーカー
• 比較表（compare-table）: 列見出しを朱と水色で分け、◎○△×の記号で比較する
• 番号付き特長リスト（numbered-feature）: 黒枠カード。朱のピン型番号、ピル型の小ラベル、朱の強調文
• 実績数値カード（stat-card）: 淡クリーム地。左に白丸アイコン、右にオレンジの大数字
• 0円サポートグリッド（icon-grid）: 黄帯上に白い黒枠カードを2列。線画アイコンと項目名を入れる
• 接続タブ（divider-tab）: 黒い下向きの台形・V字に白文字の接続語
• FAQ・一覧アコーディオン（accordion）: 上下を黒の太線で挟んだ白帯。左にアイコン、右に＋
• 院選択ボタン（clinic-button）: オレンジ帯上に白い角丸ボタンを2列。右に小さな矢印

Do's and Don'ts

Do - FVは集中線と破片の漫画表現で勢いを出す - セクションごとに色帯を切り替えてリズムを作る - 黒の太枠とオフセット影で輪郭を統一する - CTAは同じデザインで5回以上繰り返す - 数字は欧文の極太書体で大きく見せる

Don't - 淡いパステルだけの上品なトーンにしない - 細い明朝体を見出しに使わない - ぼかしの強いドロップシャドウを使わない - CTAの色を毎回変えすぎない（基本は朱） - 写真を角ばったまま並べない

Page Structure

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

1. ファーストビュー（インパクトのある訴求と価格の提示）: 写真背景に集中線、キャラクター、3色の縁取りコピー、黒ヘッダーの価格枠を2段
2. CTA・注釈（予約へすぐ誘導する）: 生成り地にマイクロコピー、朱のCTA、小さな注釈
3. 受賞・権威（唯一性を示して信頼を得る）: 黄の放射線背景に月桂樹、角丸写真、黒ベタ帯の見出し、緑CTA
4. 問題提起・比較（方式の違いを理解させる）: アーチ境界、傍点付きの大見出し、2列の記号比較表
5. 理由の提示（機器が選ばれる理由を示す）: 朱の全幅帯にV字の切り込み、枠囲みの機器名
6. 機器の特長（3つの強みを示す）: 黒枠カードにピン型番号を3項目並べ、V字タブで結論へつなぐ
7. 中間CTA（誰にでも向くことを伝えて予約を促す）: 淡ピンクの雲形の上に大見出しと人物の切り抜き、朱CTA
8. 取り組み（施術品質を伝える）: 波形上端の緑帯、背景に大きな英字、オフセット影の白カード3枚とスライダー、淡緑のアイコングリッド
9. 実績（数字で信頼を補強する）: 方眼背景に黒丸バッジ、淡クリームの数値カード3枚
10. 料金プラン・割引（価格と特典を伝える）: 丸囲み文字の見出し、価格枠、オレンジヘッダーの割引表
11. 0円サポート（追加費用がない安心感を伝える）: 黄帯に吹き出しラベルと白枠アイコンカード8個
12. 通いやすさ・流れ（利便性と手順を示す）: 水色強調の写真カード、横スクロールのSTEPカード
13. カウンセリング案内（不安を解消して申込へ）: オレンジの楕円背景、写真、チェックリストの白枠
14. FAQ・院一覧・予約（疑問の解消と院の選択）: 黒線アコーディオン、地域別の下線リスト、オレンジ帯に白い院ボタン

Imagery

• 人物は赤×白のレトロなボウリング風衣装で、元気なポーズを切り抜きで配置する
• 施術写真は明るい白基調の室内で、清潔感のある構図にする
• 装飾は漫画の集中線、放射線、紙吹雪、キラキラ星
• アイコンは単色の細い線画で、黄・緑・オレンジにする
• マスコットは丸い顔のデフォルメ動物で、表情を強めにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約375px幅のSPレイアウトをそのまま固定表示する
• 左右には人物写真を黄色に色かぶりさせて敷き詰める
• 左上にロゴ、左側に黒枠ピルのページ内ナビを縦に並べる
• 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 行書くと起動時に読み込まれる。