DESIGN.md — グレージュ×モカ茶の男性向け医療脱毛 LP（Greige and Mocha Men's Medical Hair Removal LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: グレージュ地・モカブラウン帯・コーラルCTA・明朝見出し・白カード・黄色マーカー
• 地の質感: フラットな単色面。白カードにごく薄い影や細い線を添え、紙のように落ち着いた質感にする
• 形: 角丸カード（約12px）、角丸なしの見出し帯、ピル型ボタン、円形アイコン台座
• 温度感: やや暖かいニュートラル。茶系の暖色にくすみブルーを一部だけ差して清潔感を出す

Colors

• 地はグレージュと白を交互に置き、セクションの切り替えを示す
• 見出し帯・バッジ・STEP円はモカブラウンに統一する
• コーラルは予約CTA・限定バッジ・副見出しの強調だけに使う
• くすみブルーは機器紹介の1セクションと部位図・小見出しに限る
• 本文の強調は淡い黄色マーカー、帯の中の強調は黄色文字にする
• フッターだけ黒にして締める
• button-primary は文字 #FEF5ED × 背景 #ED7959 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC3E16、4.57:1）を使う。
• badge-limited は文字 #FEF5ED × 背景 #ED7959 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CC3E16、4.57:1）を使う。

Typography

• セクション見出しは小さめのリード行と、明朝の大見出しの2段で組む
• 英字見出しの下に「- 日本語 -」のサブを茶色で添える
• 本文は中央揃えにし、行間を広めに取る
• 料金は太い欧文数字を最大級にし、単位と税込表記を小さく添える
• 字間は全体に0.06〜0.12emと広めにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みカードと特典アイコンは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約20pxの余白をとって中央に置く
• 特長はPOINT番号・茶帯の見出し・写真・小見出し・本文の順に縦へ積む
• 料金ブロックとCTAは同じ形でページ内に3回繰り返す
• CTAの上に斜線を添えた小さな誘導文を置く
• FLOWは横スライドのカードにし、左右に黒丸の矢印を置く

Elevation & Depth

• 白カードにはごく薄い影（0 2px 8px rgba(0,0,0,.05)）をつける
• CTAには立体感の出るグラデーションと下向きの影をつける
• 理由カードは白地の内側に細いベージュの線を二重に入れる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形、肌の拡大写真は円形にする
• セクション境界: 基本は直線で切り替え、機器紹介の下だけ中央が下に尖るV字にする
• 見出し帯は角丸を小さくし、下に吹き出しの三角をつける
• アイコンは白い円の台座に乗せる
• 部位ラベルは角丸の小さなブルー矩形にする
• Q&Aはグレージュ地の角丸バーで並べる

Components

• 予約CTAボタン（button-primary）: コーラルのピル型ボタン。全幅で、右端に「>」をつけ、立体的な影を落とす
• 料金ブロック（price-block）: 茶帯のキャンペーン見出し、明朝のプラン名、限定バッジ、打ち消し線の通常価格、大きな数字の価格を順に置く
• 吹き出し見出し帯（heading-band）: 上にPOINT番号を置いたモカ茶の帯。白文字で、下に三角をつける
• 限定バッジ（badge-limited）: コーラル地の小さな矩形に白文字。両側に細い横線を引く
• 悩みカード（worry-card）: 薄いグレーのカードを2列に並べ、線画イラストと黄色マーカーの短文を入れる
• 特典アイコンセル（icon-feature）: 白い円に茶色の線アイコンを置き、下に2行のラベル（後半は茶色）を入れる。細線のグリッドで区切る
• STEPカード（step-card）: 茶色の円にSTEP番号、横に茶色の見出し、写真、本文を入れたスライドカード
• Q&Aアコーディオン（faq-item）: グレージュの角丸バーに太字の「Q.」と質問を入れ、右端に「+」を置く
• 予約フォーム項目（form-field）: ラベルの横に茶色の必須バッジ。白い入力欄はグレーの細枠で、角丸は小さめ

Do's and Don'ts

Do - 地色はグレージュ・白・淡ピンクベージュの3つで切り替える - 強調は黄色マーカーと茶色の帯に限る - 料金とCTAのセットを複数回繰り返して予約へ導く - 人物写真は明るく清潔な肌が見えるものにする - 大見出しは明朝、本文はゴシックで使い分ける

Don't - コーラルをCTAと限定表示以外に広げない - くすみブルーを全体の基調色にしない - 原色の赤や派手なグラデーションの背景を使わない - 見出し帯に大きな角丸をつけない - 本文を左右いっぱいに広げない

Page Structure

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

1. ファーストビュー（立地・施術名・価格を一目で伝える）: グレージュ地に男性ポートレートと縦書きコピーを置き、その下に料金ブロックとCTAを続ける
2. 悩みの提起（共感を得て解決を約束する）: 白地に明朝見出しを置き、線画イラストの悩みカードを2列×3段で並べる
3. 機器紹介（独自機器と認証で信頼を得る）: くすみブルーの全幅面に機器写真・月桂樹の認証マーク・白文字の説明を置き、下端をV字にする
4. 選ばれる3つの理由（効果・痛み・安全性を伝える）: 白カードにPOINT番号・茶帯・写真・ブルーの小見出し・本文を入れ、3枚縦に並べる
5. 中間CTA（予約を促す）: 人物写真のバナーに料金ブロックとピル型CTAを続ける
6. 対象部位（施術範囲を図で見せる）: 線画の人体図にブルーの部位ラベルを並べ、選べる部位を枠付きのカード2つで示す
7. クリニックの強み（体制と設備の信頼を示す）: 二重線の白カードに茶帯の見出し（強調は黄色）・写真・本文を入れ、チェックリストを添える
8. 安心の特典（不安を取り除く）: 円アイコン付きのセルを2×3で並べ、補足の白カードを添える
9. 施術の流れ（予約から施術までを示す）: 濃いグレージュの帯に英字見出しを置き、STEPカードを横スライドで見せる
10. よくある質問（疑問を解消する）: 白地にQ&Aアコーディオンを縦に並べる
11. 最終CTA（予約の決断を促す）: グレージュ地に料金ブロックとCTAを置く
12. 院の案内（アクセスを伝える）: 院内写真、コーラルの院名バー、地図、フリーダイヤル、診療時間の順に置く
13. 予約フォーム（申込を完了させる）: 淡いピンクベージュ地に縦並びの入力項目とコーラルの送信ボタンを置き、黒いフッターで締める

Imagery

• 男性モデルは柔らかい自然光で撮った肌のきれいな上半身。背景は白やグレージュでぼかす
• 悩みのイラストはグレーの単色線画で、ゆるい表情の人物にする
• 機器はグレーのグラデーション背景に切り抜いて置く
• アイコンは茶色の細い線で、白い円の中に描く
• 院内写真は石材と白壁の明るい受付を広角で撮る
• 部位図は線画の人体に淡いブルーを塗る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480〜750px幅のSPレイアウトを置き、左右をグレージュで埋める
• PCで広げる場合は悩みカードを4列、特典を3列にする
• 料金ブロックとCTAは中央に置いたまま、最大幅を約600pxにする
• FLOWは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 行書くと起動時に読み込まれる。