--- version: alpha name: Navy Blue Diagonal Men's Medical Clinic LP description: 濃紺と鮮やかな青を軸に、斜めの帯やカットで勢いを出した男性向け医療脱毛クリニックの LP。極太ゴシックの大きな価格表示、ミントグリーンのピル型 CTA、黄色マーカーの強調、白カードの料金表を重ねて、情報量の多い訴求型に仕上げている。 colors: primary: '#1771AD' dark-section: '#222A37' secondary: '#1B7ABA' cta: '#01FEB3' on-cta: '#22252D' accent-1: '#4B93FE' background: '#EEEEEE' surface: '#FEFEFE' text: '#252525' text-body: '#3A404D' marker: '#FEF394' accent-2: '#BC9C6A' line: '#929292' on-dark: '#FFFFFF' typography: display: fontFamily: Noto Sans JP fontSize: 64px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 42px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Barlow Condensed fontSize: 44px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 2px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 64px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px heading-slant-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 56px point-label: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 230px number-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 100px icon-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 120px faq-bubble: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 140px accordion-area: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 76px tab-plan: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 48px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1771AD` | 見出し文字・アクセントの青 | 6% | 画素の実測 | | `dark-section` | `#222A37` | 濃紺のセクション地 | 13% | 画素の実測 | | `secondary` | `#1B7ABA` | 鮮やかな青の面（オプション帯） | 8% | 画素の実測 | | `cta` | `#01FEB3` | 主 CTA ボタンの面 | 1% | 画素の実測 | | `on-cta` | `#22252D` | CTA ボタンの文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#4B93FE` | CTA 左の「まずは」丸バッジ | 0% | 画素の実測 | | `background` | `#EEEEEE` | ページの基本地 | 20% | 画素の実測 | | `surface` | `#FEFEFE` | カード・料金表の面 | 16% | 画素の実測 | | `text` | `#252525` | 見出し・価格の文字 | 3% | 画素の実測 | | `text-body` | `#3A404D` | 本文の文字 | 3% | 画素の主要色に補正 | | `marker` | `#FEF394` | 本文の強調マーカー | 0% | 画素の実測 | | `accent-2` | `#BC9C6A` | プラン帯・部位ボタンの金色 | 3% | 画素の実測 | | `line` | `#929292` | 部位タグの枠線 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃紺地の白文字 | 3% | 画素の主要色に補正 | - 地は淡いグレー青と濃紺を交互に切り替えて、セクションの区切りにする。 - 見出しの強調語は青、そのほかは黒に近い文字にする。 - 購入導線はミント緑のピル型 CTA だけに絞る。他の色を CTA に使わない。 - 本文中の要点は黄色の帯マーカーで最大 1〜2 か所だけ強調する。 - 料金プランの見出し帯と部位バッジだけに金色を使い、上位感を出す。 - サブボタンは青から濃紺への横グラデーションで、主 CTA と差をつける。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの価格・大見出し | ゴシック | Noto Sans JP | 900 | 64px | 1.1 | 0.0em | | `headline-lg` | セクションの大見出し | ゴシック | Noto Sans JP | 900 | 42px | 1.25 | 0.05em | | `headline-md` | POINT 見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 28px | 1.35 | 0.05em | | `headline-sm` | カードタイトル・帯ラベル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.03em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 英字の斜体透かし見出し | 欧文サンセリフ | Barlow Condensed | 700 | 44px | 1.0 | 0.02em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.2 | 0.02em | - 価格の数字は本文の 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 ```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-d139a7c4`（元 LP の URL から採番） - **元 LP**: https://mens-eminal.jp/lp/index_yahoo.php - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。