--- version: alpha name: Navy Gold Men's Medical Clinic LP description: 濃紺〜ロイヤルブルーの地に金グラデーションの価格・CTAを重ねた、男性向け医療脱毛 LP。斜めの切り替えとアスリート写真で力強さを出す。後半は白地の情報ページになり、アコーディオン形式の院一覧で終わる。 colors: primary: '#092442' secondary: '#02398D' cta: '#C09A3E' on-cta: '#FFFFFF' accent-1: '#D9B45A' background: '#FFFFFF' dark-section: '#151515' accent-2: '#0201C2' accent-3: '#2EE6F0' background-alt: '#ECECEC' text: '#1A1A1A' on-dark: '#FFFFFF' surface: '#062542' line: '#222222' cta-accessible: '#8E722E' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 72px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 58px price-block: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 110px heading-gold-rule: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 60px reason-label: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 40px benefit-row: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 160px compare-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 480px spec-tag: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.note}' height: 56px plan-tab: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px accordion-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 64px --- # DESIGN.md — 紺×金グラデの男性医療脱毛 LP（Navy Gold Men's Medical Clinic LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 力強い・インパクト、クール・先進的、信頼・誠実、情報量多め・訴求型 - **キーワード**: 濃紺・金グラデーション・斜めカット・アスリート起用・医療の信頼感・男性向け - **地の質感**: 暗い紺の地に青のグラデーションと光沢のある金文字。後半は白地のフラットな面。 - **形**: 斜めの区切り、ピル型の金ボタン、角が直角の表と見出し帯 - **温度感**: 冷たい青を主にして、金で熱と高級感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#092442` | ブランドの濃紺・メインの地色 | 22% | 画素の実測 | | `secondary` | `#02398D` | ロイヤルブルーのグラデーション面 | 8% | 画素の主要色に補正 | | `cta` | `#C09A3E` | 金グラデーションの CTA ボタン | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D9B45A` | 金色の価格・見出し文字 | 2% | 推定 | | `background` | `#FFFFFF` | 後半の白い地 | 32% | 画素の実測 | | `dark-section` | `#151515` | ファーストビューの黒〜グレー | 5% | 画素の実測 | | `accent-2` | `#0201C2` | 比較表の強調に使う鮮やかな青 | 2% | 画素の実測 | | `accent-3` | `#2EE6F0` | 機種ラベルのシアン | 0% | 推定 | | `background-alt` | `#ECECEC` | 比較表の薄いグレー地 | 3% | 画素の実測 | | `text` | `#1A1A1A` | 見出し・本文の黒文字 | 2% | 推定 | | `on-dark` | `#FFFFFF` | 濃色の地の上の白文字 | 2% | 画素の主要色に補正 | | `surface` | `#062542` | 部位ボタンの濃紺タグ | 0% | 画素の実測 | | `line` | `#222222` | 院一覧の区切り線 | 0% | 推定 | | `cta-accessible` | `#8E722E` | AA を満たす補正値（計算） | | 計算 | - 前半の訴求部分は濃紺〜ロイヤルブルーの地にまとめ、後半の情報部分は白い地にする - 金は価格・見出し・CTA だけに使い、グラデーションで光沢を出す - 比較表では自社側の列を鮮やかな青の太い枠で囲み、比較相手はグレーにする - シアンや薄紫はラベルの小さな面だけに使う - フッターは primary の濃紺に戻して締める - `button-primary` は文字 `#FFFFFF` × 背景 `#C09A3E` のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8E722E`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きキャッチ | ゴシック | Noto Sans JP | 900 | 44px | 1.1 | 0.02em | | `accent` | 価格の大きな数字（金グラデ） | 欧文サンセリフ | Montserrat | 700 | 72px | 1.0 | -0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.04em | | `headline-md` | 理由の小見出し（金） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.04em | | `headline-sm` | メリットの見出し（金） | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 保険適用外などの注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.2 | 0.04em | - 見出しは極太ゴシックにして、太い文字で男らしさを出す - 価格は欧文の数字を特大にし、円・税抜は小さく添える - REASON の英字の中に番号を大きく白で差し込む - 本文は 13px 前後の白またはグレーで、行間を広めにとる - 注釈は 9px で、価格の直下に必ず置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（比較表は 3 列） - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 20px - CTA はファーストビュー直後、メリットの後、料金の後の 3 か所に置く - メリットは丸アイコンを左に、テキストを右に置く 2 分割の行にする - メリット同士・理由同士は点線で区切る - 院一覧は全幅のアコーディオンを縦に並べる ## Elevation & Depth - CTA ボタンには下方向にやわらかい影を付ける - カードや表には影を付けず、枠線と色面だけで区切る - 機種写真は切り抜いて地に直接置き、影は付けない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物と機器は切り抜き、イラストは白い円の中に収め、院内写真は全幅の矩形にする - **セクション境界**: 斜めのカット（右上がり・左上がりの対角線）で紺と白を切り替える - CTA は全幅に近いピル型にし、右端に「>」を付ける - 見出し帯・タブ・ラベルは角丸なしの矩形にする - 価格の横の部位バッジは金線の円にする - 部位タグは角丸を小さくした濃紺のボタンにする ## Components - **金グラデ CTA**（`button-primary`）: 金のグラデーションで塗ったピル型ボタン。白い太字と右矢印を付け、影を落とす - **金の価格表示**（`price-block`）: 左に円形の部位・回数バッジ、右に特大の金数字と税込表記を置き、下に注釈を添える - **金線付き見出し**（`heading-gold-rule`）: 白い太字見出しの下に、中央が光る金のライン - **REASON 番号帯**（`reason-label`）: グレーの横帯に英字を入れ、その中央に白の大きな番号を重ねる - **メリット行**（`benefit-row`）: 白丸の中に線画イラストを入れ、右に金の見出しと白の説明文を置く。行の間は点線で区切る - **比較表**（`compare-table`）: 黒い縦見出し列、青の太枠で囲んだ自社列、グレーの比較列の 3 列 - **機種ラベル**（`spec-tag`）: シアンの小さな方式ラベルの下に、白地の名称帯を段違いで重ねる - **料金タブ**（`plan-tab`）: 黒の選択タブと濃紺の非選択タブを横に並べ、下に青グラデのパネルを置く - **院一覧アコーディオン**（`accordion-row`）: 白地に院名を左寄せし、右端に細い＋を置く。上下を黒の線で区切る ## Do's and Don'ts **Do** - 金は価格と CTA と見出しに絞り、光沢のあるグラデーションにする - 紺の面は上から下へ濃淡のグラデーションで奥行きを出す - 斜めの切り替えでセクションに勢いを付ける - 価格の近くに保険適用外の注釈を必ず置く - 自社の優位性は比較表と番号付きの理由で示す **Don't** - パステル調やかわいい丸文字は使わない - 金を本文や広い面に使わない - CTA を金以外の色にしない - 角丸の大きいカードを多用しない - 細くて弱い見出し書体にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（起用人物と価格で一目で惹きつける）: 暗いグレーの地に青の斜めストライプを入れ、人物を切り抜いて置く。縦書きの白い極太キャッチを添え、一部の文字を金にする。下部に金の価格を置く 2. **CTA**（最初の予約導線）: 青グラデーションの地に金のピル型ボタンを置く 3. **施術のメリット**（悩みの解消を 3 点で示す）: 金線付き見出しの下に、白丸イラストとテキストの行を点線区切りで 3 つ並べる 4. **CTA**（メリットを読んだ後の導線）: 濃紺の地に金ボタンを置き、その下を斜めカットで白い地へ切り替える 5. **比較**（医療とサロンの違いを示す）: 白地の見出しに手書き風の CHECK を添える。その下に 3 列の比較表を置く 6. **選ばれる理由**（機器と料金の優位性を示す）: 斜めカットから濃紺の地に入る。人物の切り抜きを添え、REASON 番号帯、金の見出し、機器の切り抜き写真とラベルを並べる 7. **料金プラン**（価格と選べる部位を示す）: 青グラデーションの地にタブを置く。白いパネルに部位イラストを入れ、濃紺の部位タグを 3×2 で並べる 8. **CTA**（料金を見た後の導線）: 白地に金ボタンを置く 9. **院内紹介**（清潔感と個室の安心感を伝える）: 左に寄せた青グラデーションの見出し帯を置き、その下に全幅の写真スライダー（ドット付き）と本文を並べる 10. **注意事項**（リスクと施術後の注意を開示する）: 青い小見出しと線の下に、小さめの本文を詰めて組む 11. **院一覧**（通える院を探してもらう）: 見出しの右に青グラデーションの縦長の面を添え、＋アイコン付きのアコーディオンを縦に並べる 12. **フッター**（ブランドで締める）: 濃紺の地にロゴとコピーライトを中央揃えで置く。右端に金の追従ボタンを付ける ## Imagery - スポーツ選手風の人物をユニフォーム姿で笑顔に撮り、切り抜いて斜めの青い帯と重ねる - 悩みは線画の男性イラストにし、問題の部位だけを色で塗る - 医療機器は白背景の製品写真を切り抜き、段違いに配置する - 部位説明は顔のイラストの該当部位を青く塗る - 院内は木目と落ち着いた照明の個室写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、以下は推奨。PC では中央に 375〜480px 幅のカラムを置き、左右は濃紺で埋めるのがよい - PC では比較表と料金パネルの最大幅を 720px 程度にするとよい - PC ではメリットや機器を 2〜3 列のグリッドに広げるとよい - 斜めカットの角度は画面幅が広がっても保つ ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-52521b13`（元 LP の URL から採番） - **元 LP**: https://www.homme.reginaclinic.jp/lp/rh24_beard_all_b_ya_2/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。