DESIGN.md — 黒×赤×蛍光黄緑の男性向け医療脱毛 LP（Bold Black Red Men's Medical Hair Removal LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 黒地・赤の極太見出し・蛍光黄緑CTA・巨大価格数字・斜め切り・男性的
• 地の質感: 白地には薄いヘアライン調の金属質感や同心円の地紋を敷く。黒地にはざらついた石目テクスチャを使う。
• 形: 四角いカードと黒帯の見出しが基本。CTA だけがピル型。セクション境界は斜めの直線で切る。
• 温度感: 冷たく硬い無彩色をベースに、赤と黄緑で熱量を足す。

Colors

• 地の色は黒・こげ茶・薄グレーの金属調の 3 種を交互に使い、無彩色でまとめる。
• 赤は見出しのキーワード、価格カードの予約帯、マーカーとして使う文字の下地に限る。
• 蛍光黄緑は主 CTA と、黒地での強調文字だけに使う。
• 強調したい語は、赤の下地に白文字を載せたマーカーで目立たせる。
• 比較表では自社側を赤い枠で、他社側をグレーで表す。

Typography

• 見出しは 800〜900 の極太ゴシックにする。
• キーワードは大きくし、助詞は小さくして文字サイズに強弱をつける。
• 価格は数字を巨大にし、『税込』『円』は小さく添える。
• 盛り上がる見出しは少し右上がりに傾けて躍動感を出す。
• 見出しの前置きは『＼ ○○ ／』のスラッシュで囲んだ小見出しにする。
• 英字の見出しは細めのコンデンス書体を大きく置き、日本語の見出しを添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン一覧は 3 列、部位ラベルは 4 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面の左右に 16px 前後の余白を取って中央に置く。
• 価格カードは『イラスト＋プラン名＋部位ラベル』『回数バッジ＋巨大価格』『赤い予約帯』の 3 段で組む。
• 各価格カードの下には黒地に白い注釈をつける。
• 比較表は 3 列で、左の黒い列に項目名を置く。
• セクションの冒頭には人物写真と大見出しを重ねる。

Elevation & Depth

• 白いカードには薄く広い影（0 4px 12px rgba(0,0,0,.15)）をつける。
• CTA ボタンの下に濃い緑の影を敷き、立体的に見せる。
• 黒いアイコンタイルは上から下への黒のグラデーションにし、影は軽くする。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 人物は白背景の切り抜き。FAQ の人物は円形に切り抜く。施術写真は四角。
• セクション境界: 斜めの直線で切る。水平の黒帯も使う。
• カード・ラベル・見出し帯は角を落とさない四角にする。
• CTA とタブだけはピル型にする。
• 番号は黒い正円に白数字で入れる。
• 吹き出しには小さい三角のしっぽをつける。

Components

• 蛍光黄緑のピル型CTA（button-primary）: 黒地の上に置く幅いっぱいのピル型ボタン。右端に『›』をつけ、上に『＼まずは／』を添える。
• 価格カード（price-card）: 白いカードに顔イラスト・プラン名・部位ラベル・回数バッジ・巨大価格を載せ、最下段に赤い予約帯を置く。
• 赤い予約帯（button-band）: カードの幅いっぱいに置く赤い帯のボタン。白文字に『›』をつける。
• 黒帯の見出し（heading-bar）: カードの上端に乗せる黒い帯。白い太字で見出しを入れる。
• 赤マーカーの強調文字（marker-text）: 本文や見出しの一部に赤の下地を敷き、白文字にして強調する。
• 黒丸の番号（number-badge）: 黒い正円に白い数字。痛み対策の番号や価格の回数表示に使う。
• 黒いアイコンタイル（icon-tile）: 3 列の正方形の黒いタイル。白い線画のアイコンの下に、ラベルを入れる。
• Q&A吹き出し（faq-bubble）: Q は白い吹き出し、A は黒い吹き出しにして、それぞれ円形の人物写真と左右交互に配置する。A の中の要点は黄緑の文字にする。
• エリアのアコーディオン（accordion-area）: 黒地に細い区切り線を引いたリスト。地域名は中央、右端に『＋』を置く。
• プランの切り替えタブ（tab-pill）: 選択中は赤、それ以外は白のピル型タブを 3 つ並べる。

Do's and Don'ts

Do - 価格の数字は画面幅の大部分を占めるほど大きくする。 - 強調語は赤字か、赤マーカーに白文字で示す。 - 黒地と金属調の白地を交互に配置して、リズムを作る。 - 注釈は価格や CTA のすぐ下に小さな文字で必ず入れる。 - 前置きの小見出しは『＼○○／』で囲む。 - 人物は白背景の切り抜きを使い、見出しと重ねて置く。

Don't - パステルカラーや柔らかい丸ゴシックは使わない。 - 黄緑を CTA と強調文字以外に使わない。 - カードに大きな角丸をつけない。 - 細い明朝体の見出しは使わない。 - 1 セクションの中で赤い強調を多用しすぎない。

Page Structure

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

1. ファーストビュー（メインの施術と価格を一目で伝える）: 黒地に格闘家風の人物写真を置き、極太の白見出し・黄緑の帯ラベル・巨大な価格・黄緑の CTA を重ねる。
2. 実績の訴求（院数の規模を示す）: 金属調の地にドットの地図を描き、数字を巨大な赤字にする。
3. サービスの比較（医療とエステの違いを示す）: スーツの人物を添え、3 列の比較表で自社側を赤い枠で囲む。
4. 機器の特長（技術的な優位性を伝える）: こげ茶の地を斜めに切り、斜体の番号 01〜03 と白い見出しにマーカーを重ねる。
5. 選ばれる理由（期間・技術力を訴求する）: 白いカードの上端に黒帯の見出しを置き、図解と写真で説明する。
6. 追加料金なし（費用面の不安をなくす）: 巨大な赤文字と人物を重ね、9 個の黒いアイコンタイルを並べる。
7. おすすめプラン（主力の価格を示して予約に誘導する）: 石目調の黒地に部位イラストと赤い部位ラベル、巨大な価格、黄緑の CTA を置く。
8. 痛み対策（痛みへの不安を和らげる）: 吹き出しで悩みを出し、黒丸の番号と赤の見出しで対策を 3 つ並べ、アフターフォローのカードを続ける。
9. 料金プラン（全プランを比べてもらう）: 英字の見出しと人物写真、ピル型のタブを置き、価格カードを縦に並べる。オプションは中グレーの地にする。
10. 部位の選択（自由に選べる楽しさを伝える）: 黒い吹き出しの部位グリッド、黒丸で部位数、スライダーで顔イラストを見せる。
11. よくある質問（疑問を解消する）: 黒帯の見出しの下に、人物写真つきの Q&A 吹き出しを交互に並べる。
12. 予約の流れ・院内（来院までの流れをイメージさせる）: 英字の赤い大見出しと指をさす人物を置き、黒いステップカードのスライダーと院内写真のカードを続ける。
13. クリニック情報（近くの院を探してもらう）: 英字の赤見出しと人物を置き、黒地にエリア別のアコーディオンを並べる。
14. 詳細情報・最終CTA（法定表記と最後のひと押し）: 医師紹介のあと、黒地に■見出しで施術情報を並べ、黄緑の CTA とフッターを置く。

Imagery

• メインビジュアルは暗いリング風の背景で、上半身裸の男性を硬いライティングで撮る。
• 説明役はスーツの若い男性モデル。白背景の切り抜きで、指さしや OK サインのポーズにする。
• 部位の説明には、顔に赤い斜線で範囲を塗ったフラットな顔イラストを使う。
• アイコンは白い線画にして、黒いタイルの中に置く。
• 背景には金属のヘアライン、同心円の地紋、斜めのストライプを薄く敷く。
• 院内写真は白とグレーの清潔な個室を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP のデザインを中央に固定幅（約 750px）で置き、左右は黒か金属調の地で埋める。
• 価格カードは PC で 2〜3 列に並べてもよい。
• アイコンタイルは PC で 4〜5 列に広げる。
• 巨大な価格と見出しは PC でも画面幅に対して大きめを保つ。
• SP は下部に追従する CTA を置く。

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