--- version: alpha name: Navy and Gold Slimming Salon LP description: 濃紺と金を軸にした、明朝の太い見出しが目立つ痩身エステの訴求型 LP。ビフォーアフター写真、お客様の声、施術紹介、オファー枠を何度も並べて予約へ導く。黒茶の地と金の紙吹雪で高級感を出し、CTA は電話（金）とフォーム（緑）の 2 つを並べる。 colors: primary: '#0E1643' secondary: '#A29265' cta: '#228D34' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#EAECFB' dark-section: '#1D1417' on-dark: '#F9F8F3' text: '#0E1643' text-body: '#333333' accent-1: '#C8244A' tint-1: '#FCFAF3' marker: '#FFF3A8' line: '#CBCDCB' cta-accessible: '#218732' secondary-accessible: '#83754F' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Cinzel fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.15em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 6px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-form: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 38px button-tel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 38px offer-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 200px badge-medal: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px label-pill: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px card-result: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 440px card-voice: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 280px voice-mini: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 60px faq-q: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 50px badge-required: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px --- # DESIGN.md — 紺×金の高級感ある痩身エステ LP（Navy and Gold Slimming Salon LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 上品・高級、情報量多め・訴求型、力強い・インパクト - **キーワード**: 濃紺・金グラデーション文字・明朝の極太見出し・ビフォーアフター・オファー枠の繰り返し - **地の質感**: 大理石風の白い地、金の紙吹雪とボケ光、濃紺の三角形の幾何学パターン - **形**: 角丸の小さい白カード、下向き三角で区切るセクション境界、ピル型の見出しラベル - **温度感**: 濃紺と黒茶の冷たく重い地に、金と肌色の暖かさを足した中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0E1643` | ブランド濃紺（セクション地・ラベル） | 18% | 画素の主要色に補正 | | `secondary` | `#A29265` | 金・ゴールド（見出し帯・電話ボタン） | 6% | 画素の実測 | | `cta` | `#228D34` | フォーム予約ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 白の基本地・カード | 16% | 画素の実測 | | `background-alt` | `#EAECFB` | 淡いグレー青の地（悩み・FAQ） | 9% | 画素の実測 | | `dark-section` | `#1D1417` | 黒茶の地（お客様の声・会社紹介・フォーム） | 12% | 画素の実測 | | `on-dark` | `#F9F8F3` | 暗い地の上の白文字 | 1% | 画素の主要色に補正 | | `text` | `#0E1643` | 見出しの濃紺文字 | 2% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文のダークグレー | 3% | 推定 | | `accent-1` | `#C8244A` | 強調の赤ピンク（減量数値・キーワード） | 0% | 推定 | | `tint-1` | `#FCFAF3` | ベージュの施術カード地 | 5% | 画素の実測 | | `marker` | `#FFF3A8` | 数値の黄マーカー | 0% | 推定 | | `line` | `#CBCDCB` | 区切り点線・表の罫線 | 1% | 画素の主要色に補正 | | `cta-accessible` | `#218732` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#83754F` | AA を満たす補正値（計算） | | 計算 | - 地の色は濃紺→白/淡グレー→黒茶の順で切り替え、重い色と明るい色を交互に並べる - 大見出しは金グラデーションか濃紺の明朝。キーワードだけ金色にして目立たせる - 数値の成果は赤ピンクの文字に黄色マーカーを重ねる - CTA は金（電話）と緑（フォーム）の 2 つを必ずセットで横に並べる - 黒茶の地には金の紙吹雪とボケ光を重ね、高級感を出す - フォームの必須バッジは赤、任意バッジは水色 - `button-form` は文字 `#FFFFFF` × 背景 `#228D34` のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#218732`、4.59:1）を使う。 - `button-tel` は文字 `#FFFFFF` × 背景 `#A29265` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#83754F`、4.54:1）を使う。 - `badge-medal` は文字 `#F9F8F3` × 背景 `#A29265` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#83754F`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV と各セクションの大見出し（金グラデーション） | 明朝 | Shippori Mincho | 800 | 44px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 30px | 1.3 | 0.02em | | `headline-md` | カード見出し・施術名 | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | ピル型ラベル・帯見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 効果の個人差などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 英字の小見出し（WORRIES, ABOUT US など） | 欧文セリフ | Cinzel | 400 | 24px | 1.2 | 0.15em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.04em | - 大見出しは太い明朝で、金グラデーションか濃紺の 2 色を語ごとに使い分ける - 見出しの一部を［ ］で囲んで強調する - 英字のセリフ体を大きく薄く敷き、和文見出しの背景に重ねる - 本文はゴシック 13px、行間 1.8 - 数値は明朝で大きく、単位は小さくする - 成果写真の下には必ず小さい注釈を入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真グリッドは 3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - カードは画面幅の 92% の白地で、濃紺の地の上に縦に積む - オファー枠と CTA ボタン 2 つを 4〜5 セクションごとに繰り返す - ビフォーアフター写真は 2〜3 枚を横に並べ、間に矢印を置く - 施術紹介は大きな番号を薄く敷き、写真と文章を交互に置く - 店舗情報は左に金の見出し列がある 2 列の表で見せる ## Elevation & Depth - 白カードには薄い影と細い濃紺の二重線の枠を付ける - オファー枠は金の細い枠で写真の上に浮かせる - ボタンは下に濃い色の影を付けて少し立体的にする ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形で、ビフォーアフターは同じ大きさにそろえる。スタッフ写真は横長の帯 - **セクション境界**: 濃紺のセクションの下端を下向きの三角に切る。それ以外は直線で切り替える - CTA ボタンは角丸 4px の長方形で、右に三角を付ける - 見出しラベルはピル型の濃紺か白の帯 - 吹き出しは白地の楕円で悩みや感想を書く - 地図の下のボタンだけはピル型の濃紺にする ## Components - **フォーム予約ボタン**（`button-form`）: 緑の地に白文字、左にメールアイコン、右に三角 - **電話予約ボタン**（`button-tel`）: 金の地に白文字、左に電話アイコン。フォームボタンと横に並べる - **オファー枠**（`offer-banner`）: 施術写真の上に明朝の極太文字で商品名・回数・価格・期間限定の人数を載せた横長の枠 - **金メダルバッジ**（`badge-medal`）: 金の月桂樹付きの丸メダルを 3 つ並べ、実績を短く書く - **ピル見出しラベル**（`label-pill`）: 大見出しの上に置く濃紺のピル帯に、短い前置きを書く - **成果カード**（`card-result`）: 番号のエンブレム、年代と施術内容、赤い減量の数値、ビフォーアフター写真、金の帯、サイズの比較を入れた白カード - **お客様の声カード**（`card-voice`）: 黒茶の地に置く二重線枠の白カード。濃紺のピルで番号を書き、明朝の見出しと本文、注釈を入れる - **イラスト付きの短い感想**（`voice-mini`）: 丸い似顔絵イラストと感想を点線で区切って 3 つ並べる。キーワードは赤 - **FAQ の質問帯**（`faq-q`）: 濃紺から青のグラデーション帯に、Q のマークと白い明朝の質問文 - **フォームの必須バッジ**（`badge-required`）: 赤い小さな角丸バッジを項目名の左に置く ## Do's and Don'ts **Do** - 大見出しは太い明朝に金グラデーションを付ける - オファー枠と 2 つの CTA ボタンを何度も入れる - 成果の写真や数値の近くに効果の個人差の注釈を必ず入れる - 濃紺・白・黒茶の地を交互に並べ、リズムを作る - 英字のセリフ体を見出しの飾りに使う **Don't** - パステル調の淡い色でまとめない - 見出しを細いゴシックにしない - CTA の色を金と緑以外に変えない - 成果の写真を注釈なしで載せない - 余白の多いミニマルな作りにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（体の変化を実感させ、オファーを最初に見せる）: お腹まわりの写真に極太の明朝コピー。濃紺の帯に金メダル 3 つ、オファー枠、2 つの CTA 2. **部位別の成果スライダー**（部位ごとに効果を見せる）: 大理石風の白い地に、部位アイコン付きの写真のカルーセル 3. **共感**（なりたい姿を見せる）: 女性の写真のまわりに白い吹き出しを散らす 4. **悩みの提起**（続けられない悩みに共感する）: 濃紺の見出し帯の下に、番号付きの悩みカードを写真と交互に並べる 5. **解決の提示**（コースへつなぐ）: 体重計の写真に吹き出しを重ね、金の大見出しで解決を言い切る 6. **成果事例**（ビフォーアフターで信頼を得る）: 濃紺の地に、番号エンブレム付きの成果カードを 3 つ並べる 7. **お客様の声**（体験談で安心させる）: 黒茶の地に金の紙吹雪、二重線枠の白カード 8. **メディア・著名人の来店**（権威付け）: 金のボケ光の地に、写真グリッドと SNS 投稿風のカードを散らす 9. **サロン紹介・代表メッセージ**（実績と人柄を伝える）: 暗い店内の写真に英字見出しを重ね、白文字の本文と金の『もっと見る』ボタン 10. **おすすめの人**（自分ごと化）: チェックボックス付きのリストを白いカードにまとめる 11. **施術紹介**（機器と手技を説明する）: 大きな薄い番号、金のラベル、濃紺の明朝見出し、短い感想のリスト 12. **施術の流れ**（来店の流れを見せる）: 濃紺の三角形のパターンの地に、写真付きの白いステップカードを下向き三角でつなぐ 13. **よくある質問**（不安を解消する）: 淡いラベンダーの地に、グラデーションの Q の帯と本文 14. **店舗情報・予約フォーム**（アクセスを示し、申し込みを受ける）: 金の見出し列の表と地図、黒茶の地に白いフォーム、必須バッジ ## Imagery - 施術中の手元の写真は、暖色の照明で肌をオレンジ寄りに写す - ビフォーアフターは同じ構図と背景の背中・お腹・脚の写真 - マッサージの動きを示すオレンジやピンクの曲線の矢印と、擬音の手書き文字を重ねる - 金の紙吹雪とボケ光の背景素材を使う - 感想には線画の丸い似顔絵イラストを添える - スタッフは笑顔の制服姿、店内は暗めで金の鏡や花のある雰囲気 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央に幅 750px ほどの SP の列を置き、左右は濃紺で埋める - 成果写真や施術のグリッドは、PC では 3〜4 列に広げる - CTA の 2 ボタンは横並びのままにし、PC では追従ヘッダーにも置く - 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-530440f2`（元 LP の URL から採番） - **元 LP**: https://acri-kobe.com/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。