DESIGN.md — 黒×ゴールドの男性向け医療脱毛 LP（Black and Gold Men's Medical Clinic LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、情報量多め・訴求型、力強い・インパクト、ラグジュアリー・ダーク
• キーワード: 黒×金・価格訴求・明朝の大数字・王冠バッジ・斜めの帯・医療機器
• 地の質感: 大理石・白レンガ風の淡いテクスチャ地に、黒のグラデーション面とフラットな白カードを重ねている
• 形: 角の立った四角いカード、正円のバッジ、斜めに切った背景の帯、リボン型の見出し
• 温度感: やや暖かいニュートラル。グレージュとくすんだ金で落ち着いて見せる

Colors

• 地はグレージュかベージュにする。純白は料金カードの中だけに使う
• 黒の面はFVの下部と、カード上のラベル帯に限る
• 価格の数字と強調語はゴールドの文字で書く
• 見出し帯・リボン・通い放題の枠はゴールドの面で塗る
• 本文の強調には黄色のマーカーを薄く引く
• 季節キャンペーンだけ深緑を例外として使い、他の色は増やさない
• price-card は文字 #B0913F × 背景 #FEFEFE のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8A7232、4.59:1）を使う。
• crown-badge は文字 #B0913F × 背景 #FEFEFE のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8A7232、4.59:1）を使う。
• header-cta は文字 #FFFFFF × 背景 #C7B16B のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#897534、4.51:1）を使う。

Typography

• 価格は明朝の極太で大きく組み、「円」と「税抜」は小さく右に添える
• 見出しは黒いゴシックで、要所の語だけゴールドにする
• 番号は細い明朝かサンセリフで大きく置き、横に2〜3行の説明を添える
• 筆記体の欧文は薄いグレーで背景装飾として重ねる
• 見出しの前後に「＼ ／」のスラッシュ記号を付けて煽る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。料金カードはPCで2列、SPで1列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 12px（375px 幅換算）
• 料金カードは、上に黒のラベル帯、左に図、右に価格、下に部位の表という構成にする
• バッジは3つ並べた円形にする
• 機器紹介は、左に番号リスト、右に機器写真を置く
• セクションごとに地の色を切り替え、斜めの帯で区切る

Elevation & Depth

• カードに影はほぼ付けない。細いグレーの線で囲う
• 円形バッジにはごく薄い影を付ける
• 黒板風バナーにだけ軽い影を付ける

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と機器は切り抜きで配置する。顔のイラストは正方形の枠に入れる
• セクション境界: 斜めの帯で切る。一部は直線で区切る
• カードとボタンは角を立てた四角にする
• バッジは正円にし、上に王冠アイコンを載せる
• 見出しにはゴールドのリボン型の帯を使う
• 注意書きの枠はL字のカギ線で囲う

Components

• 料金カード（price-card）: 白いカードの上に黒のラベル帯を載せ、ゴールドの大きな価格と月額の帯、部位の表を収める
• 王冠付きの円形バッジ（crown-badge）: 白い正円に王冠を載せ、強みを3行で書く。キーワードはゴールドにする
• 黒のラベル帯（label-bar）: カードの上端に白抜きの文字で入れる短いキャッチ
• ゴールドのリボン見出し（gold-ribbon）: 両端を折ったリボンの形にし、白い明朝の文字を入れる
• 機種名のタイル（machine-button）: 機器写真の下に置くオリーブ色の四角。中に白文字の名称を入れる
• 番号付きの特長（numbered-point）: 大きな細字の番号の横に説明を置き、下に罫線を引く。強調語はゴールドにする
• 予約ボタン（header-cta）: 右上に固定するゴールドの四角いボタン
• Point の枠（point-box）: ゴールドのタグを付けた白い枠。手書き風の英字を添える

Do's and Don'ts

Do - 価格は数字を最大のサイズにし、ゴールドの明朝で組む - 黒・金・グレージュの3色を中心に保つ - 税込価格と注釈は必ず小さなグレーで添える - 強みは3つにまとめ、円形バッジで横に並べる - 背景には大理石・レンガ風の淡い質感を入れる

Don't - 鮮やかな原色やピンクを使わない - ボタンやカードを大きな角丸にしない - 濃い影やぼかしを多用しない - 価格の数字をゴシックの細字にしない - ゴールドを本文の長い文章に使わない

Page Structure

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

1. ファーストビュー（男性向けの新プランと価格を一目で伝える）: 男性モデルの左右に大きな明朝コピーを置き、斜めの黒帯を通す。下部の黒い面に料金カードを2枚と円形バッジを3つ並べる
2. 期間限定キャンペーン（学生向けの特典を訴求する）: 深緑の黒板風パネルに手書き風の囲みを入れ、右に笑顔の若い男性を切り抜きで置く
3. 価格のインパクト（1回あたりの安さを強調する）: 黒い額縁の中に大きな金色の価格を入れ、周りに黒と金の風船と紙吹雪を散らす
4. プラン一覧（部位別の料金を比較させる）: ゴールドの帯見出しの下に、料金カードを2列×2段で並べる
5. 通い放題プラン（上位プランを提示する）: ゴールドの面の中に白いカードを2枚並べる
6. CTA（無料カウンセリングへ誘導する）: 黒い帯にゴールドの文字で誘導文を入れる
7. コスパの根拠（医療機器で効果が高いことを示す）: 斜めのベージュ帯に、円形バッジ3つ・本文・機器写真を配置する
8. 使用機器の一覧（承認を得た機器を3種類あることを示す）: ゴールドのリボン見出しの下に、機器写真と機種名のタイルを3列で並べる
9. 機器ごとの詳細（機器ごとの特長を説明する）: ゴールドの帯の見出し、番号付きの特長3点、切り抜きの機器写真、マーカーで強調した本文、Point 枠の順に置く

Imagery

• 清潔感のある男性モデルを、白背景またはグレーのグラデーションで撮って切り抜く
• 医療機器は白背景で全体を撮って切り抜く
• 黒と金の風船、紙吹雪、王冠などで高級な祝祭感を出す
• 背景には大理石・白レンガ・コンクリート風の淡い質感を敷く
• 部位の説明はシンプルな人体や顔のイラストに青で範囲を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は1カラムにし、料金カードを縦に積む
• 円形バッジは SP でも3つを横に並べ、直径を約100pxにする
• 機器一覧は SP で横スクロールにするか2列にする
• FVのコピーは 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 行書くと起動時に読み込まれる。