DESIGN.md — 紺×青の斜めカットで見せる男性医療脱毛 LP（Navy Blue Diagonal Men's Medical Clinic LP）

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

Overview

• 業種: 医療・クリニック・ヘルスケア ／ 雰囲気: 力強い・インパクト、信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 濃紺・斜めカット・極太価格・ミント CTA・黄色マーカー・白カード
• 地の質感: 淡いポリゴン柄の青白い背景と、濃紺〜青のグラデーション帯を交互に重ねる。金色のグラデーション面がアクセントとして入る。
• 形: 角丸の少ない四角いカードと、斜めに切った見出し帯が中心。CTA だけは完全なピル型。
• 温度感: クールで硬派。青系の寒色が主で、強調には黄色とミントを差す。

Colors

• 地は淡いグレー青と濃紺を交互に切り替えて、セクションの区切りにする。
• 見出しの強調語は青、そのほかは黒に近い文字にする。
• 購入導線はミント緑のピル型 CTA だけに絞る。他の色を CTA に使わない。
• 本文中の要点は黄色の帯マーカーで最大 1〜2 か所だけ強調する。
• 料金プランの見出し帯と部位バッジだけに金色を使い、上位感を出す。
• サブボタンは青から濃紺への横グラデーションで、主 CTA と差をつける。

Typography

• 価格の数字は本文の 4 倍以上の極太・縦長書体にし、「円」と税込表記は小さく添える。
• 見出しは 2 行に分け、強調語だけを青か大きな文字にする。
• 助詞（の・と・を）は見出し内で一回り小さくする。
• 英字の見出しは斜体にし、薄い色で和文の背後に透かして置く。
• 注釈は 10px 前後で、該当ブロックの直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコンは 3 列、部位タグは 4 列のグリッド。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 5% の余白で白く置き、地の色と対比させる。
• セクション見出しの帯は画面端から斜めに切って配置する。
• 料金カードは左にイラスト、右にタグと価格を置く 2 分割にする。
• CTA は 2〜3 セクションごとに挟み、スクロール時は画面下に追従させる。
• FAQ は左右交互の吹き出しと丸い人物写真で会話形式にする。

Elevation & Depth

• 白カードには下方向に弱い影（0 4px 12px rgba(0,0,0,.12)）をつける。
• FAQ の吹き出しにも同程度の影をつけて浮かせる。
• CTA ボタンは影なしのフラットにする。
• 番号付きカードは薄いグレーの影でずらして重ねる。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの横長矩形。人物アイコンだけ円形に切り抜く。
• セクション境界: 斜めの直線カットと、斜めの帯で切り替える。
• カード・タグは角丸ほぼなしで硬い印象にする。
• CTA とサブボタンは完全なピル型にする。
• 見出し帯は平行四辺形に切る。
• ファーストビューの特長バッジは六角形・両端斜めにする。

Components

• 主 CTA ピルボタン（button-primary）: ミント緑のピル型。左端に青い丸の「まずは」バッジを重ね、右端に三角矢印をつける。
• グラデーション予約ボタン（button-secondary）: 青から濃紺への横グラデーションのピル型。白文字と右端の三角を入れる。
• 斜め見出し帯（heading-slant-band）: 濃紺〜青のグラデーション帯を斜めに切り、白い太字を載せる。上に黄色の小ラベルを重ねる。
• POINT 番号見出し（point-label）: 左右に細い横線を引き、中央に「POINT 01」形式のラベルを置く。
• 料金カード（price-card）: 白カードの左に顔イラスト、右に枠線の部位タグ、黒い回数バッジ、極太の価格を並べ、下にサブボタンを置く。
• 番号付き特長カード（number-card）: 左上に濃紺グラデーションの番号ブロックとアイコンを重ね、右に青い見出しと説明を置く。
• 線画アイコングリッド（icon-grid）: 濃紺地に白い正方形タイルを 3 列で並べ、黒い線画アイコンと短いラベルを入れる。
• 会話型 FAQ 吹き出し（faq-bubble）: 質問は白い吹き出しと右の丸写真、回答は濃紺の吹き出しと左の丸写真で、白文字に黄色マーカーを入れる。
• エリア別アコーディオン（accordion-area）: 濃紺地に中央寄せの白文字を置き、右端に＋を配置する。各行は細い白線で区切る。
• 料金タブ（tab-plan）: 上辺を斜めにカットした 3 つのタブ。選択中は濃紺、他は淡い水色にする。

Do's and Don'ts

Do - 価格は極太の数字で大きく見せ、「一括払」を縦書きで添える。 - 濃紺と淡い青白のセクションを交互に置き、リズムを作る。 - 見出しは斜めの帯やカットと組み合わせて勢いを出す。 - 本文の要点は黄色マーカーで強調する。 - 注釈は必ず該当の価格やプランの直下に置く。

Don't - 暖色やパステルを広い面に使わない。 - CTA の色をミント以外にしない。 - 大きな角丸や柔らかい装飾で印象を甘くしない。 - 細い明朝体を見出しに使わない。 - マーカーを段落全体に引かない。

Page Structure

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

1. ファーストビュー（男性向けであることと、看板価格を一目で伝える）: 暗い背景にアスリート風の人物写真を置き、白い極太のコピーと巨大な価格、斜めのバッジ 2 つを重ねる。
2. CTA（無料カウンセリング予約へ誘導する）: 濃紺地にミントのピル型ボタンを置き、下に注釈を並べる。
3. 実績の提示（全国展開の規模で信頼を示す）: 青い斜めストライプの地に、黄色の日本地図と大きな数字を置く。
4. 比較表（医療脱毛と一般サロンの違いを示す）: 自社の列を青枠で浮かせ、他社の列はグレーにした 3 行の表にする。
5. 機器の特長（技術の優位性を説明する）: POINT 番号見出し、機器の丸写真、図解、左に色帯のある説明カードを並べる。
6. 選ばれる理由（通いやすさとスタッフの技術力を訴求する）: 斜めの見出し帯、通院回数の比較図、横長の写真と本文を組み合わせる。
7. 追加料金なし（費用の不安をなくす）: 巨大な青文字の前に人物の切り抜きを置き、続く濃紺地に 3 列のアイコングリッドを並べる。
8. おすすめプラン（看板プランを提示する）: 顔イラストと部位タグ、金色の見出し帯、白地に極太の価格、グラデーションボタンを並べる。
9. 痛み対策（痛みへの不安を解消する）: 番号付きの白カードを 3 枚縦に並べ、最後に青枠の医師フォローのブロックを置く。
10. 料金・プラン（全メニューの価格を比較させる）: タブで切り替え、濃紺地と青地に料金カードを縦に並べる。
11. 部位選択の紹介（自由に部位を選べることを伝える）: 濃紺地に部位タグ、金色の選択肢、ヒゲのデザインイラストのスライダーを置く。
12. よくある質問（疑問を会話形式で解消する）: グレーの質問番号ラベルの下に、白と濃紺の吹き出しを左右交互に並べる。
13. 予約の流れ・院内紹介（来院までの手順と空間の安心感を伝える）: 金色グラデーションの地に、黒い見出し帯つきのステップスライダーと院内写真のカードを置く。
14. クリニック情報・詳細情報（店舗の一覧と法定表記を示す）: 濃紺地にエリア別アコーディオン、院長プロフィールの白カード、小さな白文字の注意事項を並べる。

Imagery

• 人物は 20〜30 代の男性。スーツや白衣で正面を見るか指差しポーズをとり、背景を切り抜く。
• ファーストビューは暗い背景に、青い煙とスポットライト風の光を入れた力強い写真にする。
• 施術写真は明るく清潔な院内で撮り、横長に切る。
• 顔のイラストはフラットなアニメ調にし、施術部位を半透明の赤で塗る。
• アイコンは黒い単線の線画で統一する。
• 装飾は淡い青白のポリゴン柄、斜めストライプ、金色の斜線グラデーションを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も SP と同じ 1 カラムの縦長構成を中央に置く。
• PC ではコンテンツ幅を 640px 程度に固定し、左右に背景を延ばす。
• PC では比較表や料金カードの比率を保ったまま拡大する。
• 追従 CTA は 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 行書くと起動時に読み込まれる。