--- version: alpha name: Pop Comic Retro Medical Hair Removal LP description: 漫画の集中線とボウリング場のレトロ感をFVに使った、元気な医療脱毛クリニックLP。生成り地に朱色CTA、黄・緑・オレンジの色帯セクションを切り替える。黒い太枠・黒ベタ見出し・オフセット影で、情報量が多くても力強いリズムを作る。 colors: primary: '#DA5331' cta: '#DA5232' on-cta: '#FFFAF6' background: '#F7F7ED' surface: '#FEFEFE' secondary: '#4FAF6F' accent-1: '#E5C543' accent-2: '#EEB860' accent-3: '#5CC3EB' text: '#151412' dark-section: '#121212' tint-1: '#FFF6E5' tint-2: '#D9EADE' marker: '#E6C443' cta-accessible: '#CD4525' primary-accessible: '#CF4725' accent-2-accessible: '#9A6610' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Montserrat fontSize: 72px fontWeight: 900 lineHeight: 1.0 headline-md: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 56px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 8px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px 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: 56px price-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 140px compare-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 600px numbered-feature: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 120px stat-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 140px icon-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 68px divider-tab: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 48px accordion: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px clinic-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 52px --- # DESIGN.md — 朱×黄×緑のポップ漫画風医療脱毛 LP（Pop Comic Retro Medical Hair Removal LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、レトロ - **キーワード**: 集中線・黒太枠・朱色CTA・色帯セクション・オフセット影・生成り地 - **地の質感**: 生成りのフラット地に放射線・方眼・紙吹雪の装飾を重ねる。写真は明るく清潔。 - **形**: 角丸カード、黒ベタヘッダー付き価格枠、下に濃い色をずらしたピル型ボタン、波形・アーチ・V字の境界 - **温度感**: 暖色寄りで高彩度。緑と水色で清潔感を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DA5331` | 朱色。価格数字・強調・主CTA | 6% | 画素の実測 | | `cta` | `#DA5232` | 主CTAボタン面 | 2% | 画素の実測 | | `on-cta` | `#FFFAF6` | CTA上の白文字 | 0% | 画素の実測 | | `background` | `#F7F7ED` | 生成りの基本地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | 白カード・表 | 22% | 画素の実測 | | `secondary` | `#4FAF6F` | 緑の取り組みセクション帯 | 7% | 画素の実測 | | `accent-1` | `#E5C543` | からし黄の色帯 | 6% | 画素の実測 | | `accent-2` | `#EEB860` | オレンジ黄。数字強調・カウンセリング帯 | 10% | 画素の実測 | | `accent-3` | `#5CC3EB` | 水色。比較対象・通いやすさ強調 | 1% | 画素の実測 | | `text` | `#151412` | 見出し・本文の黒 | 3% | 画素の実測 | | `dark-section` | `#121212` | 価格枠・見出しの黒ベタ帯 | 2% | 画素の実測 | | `tint-1` | `#FFF6E5` | 実績カードの淡クリーム | 4% | 画素の実測 | | `tint-2` | `#D9EADE` | 淡緑のケア環境ブロック | 3% | 画素の実測 | | `marker` | `#E6C443` | 価格下の黄マーカー | 0% | 画素の実測 | | `cta-accessible` | `#CD4525` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CF4725` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#9A6610` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互にし、数セクションごとに黄・緑・朱・オレンジの全幅色帯を挟む - 主CTAは朱色。緑帯上では白ボタン、黄帯上では緑ボタンに切り替える - 価格数字は朱色の極太文字に黒い輪郭影と黄マーカーを重ねる - 見出し内の強調語だけ朱・緑・オレンジ・水色に色替えする - 黒は太枠線・見出し帯・オフセット影に使い全体を締める - 比較表は自社側を朱、他方式を水色で色分けする - `button-primary` は文字 `#FFFAF6` × 背景 `#DA5232` のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CD4525`、4.53:1）を使う。 - `price-box` は文字 `#DA5331` × 背景 `#FEFEFE` のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CF4725`、4.55:1）を使う。 - `stat-card` は文字 `#EEB860` × 背景 `#FFF6E5` のコントラスト比が 1.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#9A6610`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縁取り付きロゴ風コピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.1 | 0.02em | | `headline-lg` | 価格数字 | 欧文サンセリフ | Montserrat | 900 | 72px | 1.0 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.4 | 0.04em | | `headline-sm` | カード見出し・小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.06em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.06em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.04em | | `accent` | 背景の大きな英字・STEP番号 | 欧文サンセリフ | Montserrat | 800 | 56px | 1.0 | 0.02em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 900 | 16px | 1.3 | 0.04em | - 見出しは極太ゴシックにして、強調語は1.5倍に拡大・色替えする - 強調文字に傍点（上に丸点）を打つ - CTA上のマイクロコピーは「＼ ／」の斜線で挟む - 大見出しには黒の輪郭影やずらし影を付ける - 本文は字間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコンカードは 2〜3 列グリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右余白はおよそ18px - CTAは数セクションおきに同じ形で繰り返す - セクションの区切りに「つまり」「さらに」などの黒いV字タブを置く - 色帯の中に白カードを積み重ねる - 人物の切り抜きをセクションの角にはみ出させる ## Elevation & Depth - カードは下に黒をずらしたオフセット影（約6px） - CTAは下に濃い同系色をずらして立体ボタン風にする - 実績カード・クリニックボタンは淡いぼかし影 - ぼかしの強い影は使わない ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸長方形。人物は切り抜きで枠外に配置 - **セクション境界**: 波形、上向きアーチ、下向きV字タブ、黒の太水平線 - 価格枠は黒の太枠と黒ベタのヘッダー - タグ・回数バッジは黒枠の白ピル - 番号は朱色のピン型シルエットに白数字 - アイコンボックスは緑か黄の細枠で角丸 ## Components - **主CTAボタン**（`button-primary`）: 朱色のピル型。左にカレンダーアイコン、右に白丸矢印。下に濃い朱のずらし影 - **価格枠**（`price-box`）: 黒ヘッダーにコース名と回数ピル、白地に朱色の巨大数字と黄マーカー - **比較表**（`compare-table`）: 列見出しを朱と水色で分け、◎○△×の記号で比較する - **番号付き特長リスト**（`numbered-feature`）: 黒枠カード。朱のピン型番号、ピル型の小ラベル、朱の強調文 - **実績数値カード**（`stat-card`）: 淡クリーム地。左に白丸アイコン、右にオレンジの大数字 - **0円サポートグリッド**（`icon-grid`）: 黄帯上に白い黒枠カードを2列。線画アイコンと項目名を入れる - **接続タブ**（`divider-tab`）: 黒い下向きの台形・V字に白文字の接続語 - **FAQ・一覧アコーディオン**（`accordion`）: 上下を黒の太線で挟んだ白帯。左にアイコン、右に＋ - **院選択ボタン**（`clinic-button`）: オレンジ帯上に白い角丸ボタンを2列。右に小さな矢印 ## Do's and Don'ts **Do** - FVは集中線と破片の漫画表現で勢いを出す - セクションごとに色帯を切り替えてリズムを作る - 黒の太枠とオフセット影で輪郭を統一する - CTAは同じデザインで5回以上繰り返す - 数字は欧文の極太書体で大きく見せる **Don't** - 淡いパステルだけの上品なトーンにしない - 細い明朝体を見出しに使わない - ぼかしの強いドロップシャドウを使わない - CTAの色を毎回変えすぎない（基本は朱） - 写真を角ばったまま並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（インパクトのある訴求と価格の提示）: 写真背景に集中線、キャラクター、3色の縁取りコピー、黒ヘッダーの価格枠を2段 2. **CTA・注釈**（予約へすぐ誘導する）: 生成り地にマイクロコピー、朱のCTA、小さな注釈 3. **受賞・権威**（唯一性を示して信頼を得る）: 黄の放射線背景に月桂樹、角丸写真、黒ベタ帯の見出し、緑CTA 4. **問題提起・比較**（方式の違いを理解させる）: アーチ境界、傍点付きの大見出し、2列の記号比較表 5. **理由の提示**（機器が選ばれる理由を示す）: 朱の全幅帯にV字の切り込み、枠囲みの機器名 6. **機器の特長**（3つの強みを示す）: 黒枠カードにピン型番号を3項目並べ、V字タブで結論へつなぐ 7. **中間CTA**（誰にでも向くことを伝えて予約を促す）: 淡ピンクの雲形の上に大見出しと人物の切り抜き、朱CTA 8. **取り組み**（施術品質を伝える）: 波形上端の緑帯、背景に大きな英字、オフセット影の白カード3枚とスライダー、淡緑のアイコングリッド 9. **実績**（数字で信頼を補強する）: 方眼背景に黒丸バッジ、淡クリームの数値カード3枚 10. **料金プラン・割引**（価格と特典を伝える）: 丸囲み文字の見出し、価格枠、オレンジヘッダーの割引表 11. **0円サポート**（追加費用がない安心感を伝える）: 黄帯に吹き出しラベルと白枠アイコンカード8個 12. **通いやすさ・流れ**（利便性と手順を示す）: 水色強調の写真カード、横スクロールのSTEPカード 13. **カウンセリング案内**（不安を解消して申込へ）: オレンジの楕円背景、写真、チェックリストの白枠 14. **FAQ・院一覧・予約**（疑問の解消と院の選択）: 黒線アコーディオン、地域別の下線リスト、オレンジ帯に白い院ボタン ## Imagery - 人物は赤×白のレトロなボウリング風衣装で、元気なポーズを切り抜きで配置する - 施術写真は明るい白基調の室内で、清潔感のある構図にする - 装飾は漫画の集中線、放射線、紙吹雪、キラキラ星 - アイコンは単色の細い線画で、黄・緑・オレンジにする - マスコットは丸い顔のデフォルメ動物で、表情を強めにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約375px幅のSPレイアウトをそのまま固定表示する - 左右には人物写真を黄色に色かぶりさせて敷き詰める - 左上にロゴ、左側に黒枠ピルのページ内ナビを縦に並べる - SP幅を超えてカラム数を増やさない ## 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-ccab7e6b`（元 LP の URL から採番） - **元 LP**: https://lucia-c.com/lp10/?argument=iKSDyTmU&dmai=a68aea1826000f&utm_source=facebook&utm_medium=cpc&utm_campaign=%E3%83%AB%E3%82%B7%E3%82%A2%E3%82%AF%E3%83%AA%E3%83%8B%E3%83%83%E3%82%AF%EF%BC%88%E9%96%A2%E8%A5%BF%E3%83%BB%E5%90%8D%E5%8F%A4%E5%B1%8B%EF%BC%89 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（14/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。