--- version: alpha name: Navy Silver Professional Beauty Equipment BtoB LP description: 濃紺の地と白銀の斜めストライプ地を交互に重ねた、サロン向け業務用脱毛機の導入訴求 LP。明朝体の見出しに赤と金で強調をつけ、比較表・実績・特典・研修を情報量多めに積み上げて、問い合わせへ導く。 colors: primary: '#1E3459' background: '#E4E4E4' surface: '#FEFEFE' background-alt: '#E6E5EA' line: '#C1BFC4' secondary: '#4D5D76' dark-section: '#1E3459' on-dark: '#FFFFFF' accent-1: '#E8C25A' accent-2: '#C0242C' cta: '#A8141C' on-cta: '#FFFFFF' text: '#1A2234' tint-1: '#F8F0DD' typography: display: fontFamily: Playfair Display fontSize: 34px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px cta-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 200px comparison-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 520px feature-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 220px numbered-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px award-badge: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px label-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 24px benefit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 240px contact-form: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — 紺×銀×金の業務用美容機器 LP（Navy Silver Professional Beauty Equipment BtoB LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 上品・高級、信頼・誠実、情報量多め・訴求型、クール・先進的 - **キーワード**: 濃紺・シルバーグラデーション・明朝見出し・金の強調・比較表・BtoB導入訴求 - **地の質感**: 白〜薄グレーの斜め光沢ストライプ地と、ベタ塗りの濃紺帯。部分的に金色の光のボケ背景 - **形**: 角の小さい四角カード、下向き三角の区切り、円形バッジ - **温度感**: 寒色中心。金と赤で一部だけ温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1E3459` | ブランドの濃紺。帯とセクション地 | 26% | 画素の実測 | | `background` | `#E4E4E4` | 明るいセクションの地（斜めストライプ） | 20% | 画素の実測 | | `surface` | `#FEFEFE` | カード・表の白面 | 11% | 画素の実測 | | `background-alt` | `#E6E5EA` | 特長カードを囲む薄グレーのパネル | 11% | 画素の実測 | | `line` | `#C1BFC4` | パネル・表の罫線 | 2% | 画素の主要色に補正 | | `secondary` | `#4D5D76` | 灰紺。サブ帯・比較表の見出し列 | 6% | 画素の主要色に補正 | | `dark-section` | `#1E3459` | フッター寄りの最も濃い紺 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃紺地の白文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#E8C25A` | 金・黄色の強調文字 | 1% | 推定 | | `accent-2` | `#C0242C` | 赤の強調文字 | 1% | 推定 | | `cta` | `#A8141C` | ヘッダーの問い合わせボタン（深紅） | 0% | 推定 | | `on-cta` | `#FFFFFF` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#1A2234` | 見出し・本文の紺黒文字 | 2% | 画素の主要色に補正 | | `tint-1` | `#F8F0DD` | クリーム色の補助面（補助金・特典の地） | 3% | 画素の主要色に補正 | - 濃紺の帯と白銀ストライプ地を交互に並べ、セクションの切り替えをはっきり見せる - 濃紺地の見出しは白文字。キーワードだけ金色にする - 明るい地の見出しは紺黒文字。キーワードだけ赤にする - 赤はヘッダー CTA と強調語だけに使う。広い面には使わない - 比較表は自社列だけ濃紺に金文字にして目立たせる - 金は No.1 バッジ・月桂樹・価格などの権威づけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の欧文商品名 | 欧文セリフ | Playfair Display | 500 | 34px | 1.1 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.5 | 0.05em | | `headline-md` | カードの見出し・帯のタイトル | 明朝 | Noto Serif JP | 600 | 17px | 1.5 | 0.03em | | `headline-sm` | 小見出しの帯ラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `body-md` | 本文・カードの説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 注釈・調査の出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 価格の大きな数字 | 明朝 | Shippori Mincho | 700 | 40px | 1.1 | 0.0em | | `label-button` | ボタン・電話番号 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.03em | - 大見出しは明朝体で 2 行にし、中央揃えにする - 強調語は色（赤か金）で示し、太さはそのまま - 数字（価格・倍率）は本文の 2〜3 倍に大きくする - 本文はゴシック体で短く区切り、チェックマーク付きの箇条書きにする - 注釈は小さいグレー文字で、要素の右下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは 2 列まで - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - コンテンツは中央の狭い幅にまとめ、外側は背景地を見せる - 特長は薄グレーのパネルに入れ、パネル上端に濃紺の細い帯ラベルを付ける - 理由カードは番号を円で付け、3 個＋2 個で並べる - セクションの終わりに下向き三角を置いて次へつなぐ - 問い合わせ用の CTA バナーをページ内に 3 回置く ## Elevation & Depth - カードには弱い影（0 2px 6px rgba(0,0,0,.12)）を付ける - No.1 バッジは金色のグラデーションで立体的に見せる - CTA バナーは濃紺〜紫のグラデーション地にして浮かせる ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角に切り抜き、角丸なし。部品だけ円形に抜く - **セクション境界**: 直線で色を切り替え、下向きの三角矢印を足す - ボタンは角の小さい長方形にする - 円は番号・特長アイコン・ハンドピースの紹介だけに使う - 見出し帯は斜めに切った台形にしてもよい ## Components - **ヘッダー問い合わせボタン**（`header-cta`）: 右上に置く深紅の長方形ボタン。横に電話番号を並べる - **問い合わせ CTA バナー**（`cta-banner`）: 濃紺グラデーション地に人物の写真。白枠のボタンと電話番号の箱を横に並べる - **他社比較表**（`comparison-table`）: 自社列を濃紺地＋金文字に。他社列は白地に○×で示す - **特長パネル**（`feature-panel`）: 薄グレーのパネル。上端に濃紺の帯ラベル、明朝の見出し、写真や図を入れる - **番号付き理由カード**（`numbered-card`）: 上部に紺の円番号と濃紺の見出し帯。下は白地にアイコンと短い説明 - **No.1 月桂樹バッジ**（`award-badge`）: 金の月桂樹で囲んだ円形バッジを 3 つ横に並べ、下に出典の注釈を付ける - **濃紺の帯ラベル**（`label-bar`）: パネル上端に置く細い濃紺の帯。白い小さな文字を入れる - **特典カード**（`benefit-card`）: 写真の左下に「特典 0X」の四角ラベル。下の白地に明朝の説明と赤の強調 - **問い合わせフォーム**（`contact-form`）: 白地にラベルを左、入力欄を右に置く 2 列の細い表組み ## Do's and Don'ts **Do** - 濃紺と白銀の地を交互に並べ、メリハリを保つ - 見出しは明朝体にし、強調語だけ赤か金にする - 数値（価格・倍率・費用）は大きくし、根拠の注釈を添える - 比較表・実績・監修者・特典を並べて信頼を積み上げる - CTA バナーを数セクションごとに繰り返す **Don't** - パステル色やポップな丸ゴシックを使わない - ボタンをピル型や大きな角丸にしない - 赤を背景の広い面に使わない - 装飾のない真っ白な地を長く続けない（ストライプ地にする） - 注釈なしで No.1 などの表現を載せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（機器名と主な利点を伝える）: 白銀の地に欧文セリフの商品名。キーワードタグ 3 つと円形バッジ 3 つ。右に機器の写真。右下に濃紺の斜め面 2. **キャンペーン・補助金の案内**（導入のハードルを下げる）: 濃紺地の上に、クリーム色や青の訴求バナーを縦に積む 3. **実績・機能の訴求**（機能の多さと評価を示す）: 金の月桂樹の見出し、動画、No.1 バッジ 3 つ、2 列の小カード 4. **価格訴求と他社比較表**（コストの優位性を示す）: 人物の写真と大きな数字のバナー。下に自社列が濃紺の比較表 5. **特長の詳細**（部品と機能を具体的に説明する）: ストライプ地に、帯ラベル付きの薄グレーのパネルを縦に並べる 6. **独自方式の説明**（技術の差を図で見せる）: 濃紺地に白と金の見出し。銀色の円を 3 つ重ねた図 7. **ビフォーアフター**（効果を示す）: 濃紺の台形見出し、チェック付きの箇条書き、矢印でつないだ写真 3 枚 8. **ラインナップ・CTA**（機種を選ばせて問い合わせにつなぐ）: 2 列の機種カード。続けて濃紺の CTA バナー 9. **選ばれる理由**（利点をまとめる）: 番号付きカードを 3 個＋2 個で並べる 10. **監修・研究**（専門性の権威づけ）: 濃紺帯の見出し、医師の写真とプロフィール、研究の写真、講座の紹介 11. **導入実績と中古販売**（安心感と価格の根拠）: 写真をコラージュし、番号付きの理由 3 つと金額の図解を置く 12. **開業支援・研修**（導入後のサポートを示す）: 2 列カード、支援物を写真グリッドで、研修の写真とカレンダー表 13. **デモ体験の特典**（来社を促す）: 金のボケ背景に、特典番号付きの写真カードを 2×2 で並べる 14. **CTA・問い合わせフォーム**（問い合わせを獲得する）: CTA バナーの下に、白地の 2 列のフォーム ## Imagery - 機器は白い筐体を明るく抜き出し、青い光を強調した物撮りにする - スーツ姿の男性や白衣の女性が指さす切り抜き写真を、見出しの横に添える - サロンの施術・研修のリアルな現場写真を四角に並べる - 背景は白銀の斜めの光沢ストライプ、または金色のボケ - アイコンは紺の線画で、シンプルに描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 540px 幅のコンテンツで、両側に背景地を見せる - SP は幅いっぱいの 1 カラムにする。3 列のカードは 1〜2 列に落とす - 比較表は SP で横スクロールにするか、自社列を固定する - CTA バナーは 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-b94cd386`（元 LP の URL から採番） - **元 LP**: https://clearskinneo.net/lp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。