オリーブ×金の上品な医療脱毛クリニック LP

Olive Gold Elegant Medical Hair Removal LP

オリーブグリーンと金ベージュを基調に、明朝体の大きな価格表示と深紅の数字で訴求する医療脱毛 LP。淡いダマスク柄の白地に、金の額縁風カードや斜めの面分割を重ね、上品さと情報量を両立している。

美容サロン・エステ・脱毛上品・高級信頼・誠実情報量多め・訴求型やさしい・柔らかいPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白〜淡グレーにダマスク柄、機器紹介はセージ地で区切る
見出し帯はオリーブ緑と金ベージュを交互に使う
価格・0円・強調数字は深紅に限定する
赤は予約ボタンと割合の強調ラベルだけに使う
金は額縁・リボン・番号メダルの装飾として使う
FAQ はミントストライプ、悩み訴求は淡ピンクで空気を変える

TYPOGRAPHY

書体

display価格の大きな数字明朝／ Shippori Mincho 800 ／ 56px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgセクション大見出し明朝／ Noto Serif JP 700 ／ 24px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-md帯見出し・プラン名明朝／ Noto Serif JP 700 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm番号付き特長の項目明朝／ Noto Serif JP 600 ／ 16px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md本文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・照射範囲ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent機器名の筆記体あしらい欧文スクリプト／ Great Vibes 400 ／ 28px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-button予約ボタンゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

見出しと価格は明朝、本文と注釈はゴシック
価格は数字を特大、円・税込表記は小さく添える
帯見出しは上段の小見出しを＼／で挟む
本文の要点は太字とベージュマーカーで強調
機器名には薄い筆記体の英字を重ねる

PAGE STRUCTURE

セクション構成

ファーストビュー回数と価格を即提示女性写真と花、明朝の大価格、下部をオリーブ緑の斜め面
保証訴求安心感を強調黄緑帯に人物切り抜きと白の極太見出し
料金プランプラン比較金額縁の価格カード2枚と下向き金矢印
人気プランと CTA選択率で後押し人型アイコンの割合図と赤い予約ボタン
3つのサービス付帯保証の提示番号付きベージュカード3列
選ばれる理由機器と技術の訴求金メダル番号、帯見出し、セージ地の斜め分割で機器を紹介
比較表機器の違いを整理ベージュ見出し行の4列表と記号評価
照射のこだわり丁寧さを図解線画の人体と吹き出しカード
追加料金0円費用の不安解消0円カードのグリッドとアイコン付きメリット
施術の流れ手順の可視化Step 筆記体ラベル付き写真と矢印
よくある質問疑問解消ミントストライプ地に白のアコーディオン
カウンセリング誘導相談の後押し淡ピンク地にイラスト女性と金の質問ボタン
院一覧・支払方法店舗と決済の案内茶金アコーディオンと罫線表
フッターブランド表記白地中央にロゴと小さなリンク

COMPONENTS

部品

予約ボタン button-primary赤い横長ボタンにアイコンと右矢印、左上に金の円形吹き出しで手軽さを添える
価格カード price-card金の額縁枠と角リボン。左に人体図、右にプラン名と深紅の大価格、照射範囲枠
帯見出し band-heading緑または金の全幅帯に白の明朝見出し、上段に＼小見出し／
番号付き特長 numbered-feature大きな明朝の01〜03と2行説明、下に細線
Point 枠 point-box金ラベル付きの白枠に要点と小写真
0円カード zero-cardベージュ地に金枠、項目名と深紅の大きな0円
FAQ アコーディオン faq-item白地にQ筆記体アイコン、右に金の下向き矢印
院一覧 clinic-accordion茶金の帯に白文字の院名と＋

守ること

価格は明朝の特大数字と深紅で見せる
金の枠や飾りで上品な格を保つ
緑と金の帯見出しを交互に使って区切る
注釈は小さく添えて医療広告の配慮を示す
人物は笑顔の女性を明るい白背景で使う

DON'T

避けること

原色の青や蛍光色を加えない
ボタン以外に赤い面を多用しない
見出しを丸ゴシックにしない
強い影や立体ボタンにしない
金飾りを過剰に重ねて文字を読みにくくしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — オリーブ×金の上品な医療脱毛クリニック LP（Olive Gold Elegant Medical Hair Removal LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

業種: 美容サロン・エステ・脱毛／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、やさしい・柔らかい
キーワード: オリーブグリーン・金の額縁・明朝体の価格・深紅の数字・ダマスク柄の地・斜めの面分割
地の質感: 白地にごく淡いダマスク柄やストライプを敷き、金はグラデーション風の帯やリボンで箔押しのような質感を出す
形: 角の小さい四角カード、金の角飾り・額縁、帯見出しの左右に斜線、背景は斜めに切った面
温度感: やや暖かい。くすみ緑とベージュ金で落ち着いた温度感

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#748B34`	見出し帯・ブランドのオリーブグリーン	6%	画素の実測
`secondary`	`#B5A26A`	金ベージュの見出し帯・ボタン	5%	推定
`accent-1`	`#82BA65`	保証訴求帯の明るい黄緑	3%	画素の実測
`accent-2`	`#8F090C`	価格・強調数字の深紅	1%	画素の実測
`cta`	`#DB232B`	予約ボタンの赤	0%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の白文字	0%	画素の主要色に補正
`background`	`#FAF9F9`	ページの白地	40%	画素の実測
`background-alt`	`#E5E8DB`	機器紹介の淡いセージ地	13%	画素の主要色に補正
`tint-1`	`#DDD5B4`	0円カードのベージュ地	5%	画素の実測
`tint-2`	`#FFFFFE`	FAQ 背景のミントストライプ	3%	画素の実測
`dark-section`	`#92631C`	院一覧アコーディオンの茶金	1%	画素の実測
`text`	`#333333`	見出し・本文の濃グレー	2%	推定
`marker`	`#EAE7C9`	本文強調のベージュマーカー	0%	画素の主要色に補正
`line`	`#C8B888`	金の細枠・区切り線	0%	推定

地は白〜淡グレーにダマスク柄、機器紹介はセージ地で区切る
見出し帯はオリーブ緑と金ベージュを交互に使う
価格・0円・強調数字は深紅に限定する
赤は予約ボタンと割合の強調ラベルだけに使う
金は額縁・リボン・番号メダルの装飾として使う
FAQ はミントストライプ、悩み訴求は淡ピンクで空気を変える

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	価格の大きな数字	明朝	Shippori Mincho	800	56px	1.1	0.0em
`headline-lg`	セクション大見出し	明朝	Noto Serif JP	700	24px	1.4	0.05em
`headline-md`	帯見出し・プラン名	明朝	Noto Serif JP	700	20px	1.4	0.05em
`headline-sm`	番号付き特長の項目	明朝	Noto Serif JP	600	16px	1.5	0.03em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.8	0.03em
`note`	注釈・照射範囲	ゴシック	Noto Sans JP	400	11px	1.6	0.0em
`accent`	機器名の筆記体あしらい	欧文スクリプト	Great Vibes	400	28px	1.2	0.0em
`label-button`	予約ボタン	ゴシック	Noto Sans JP	700	15px	1.3	0.05em

見出しと価格は明朝、本文と注釈はゴシック
価格は数字を特大、円・税込表記は小さく添える
帯見出しは上段の小見出しを＼／で挟む
本文の要点は太字とベージュマーカーで強調
機器名には薄い筆記体の英字を重ねる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。0円・メリットは 2〜3 列グリッド
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
コンテンツは中央寄せで左右に余白
番号付き特長は番号＋2行テキストを下線で区切る
機器画像と特長リストは左右交互に配置
比較表は横スクロールせず4列で収める
Point 枠は文章＋小写真の横並び

Elevation & Depth

カードに薄いドロップシャドウ
価格カードは金の二重枠と角リボン
基本はフラットで影は控えめ

Shapes

角丸: 小 2px ／中 4px ／大 8px。ボタンは角丸の長方形。
写真の切り抜き: 人物は白背景の切り抜き、施術写真は角丸なしの矩形
セクション境界: 背景色の直線切替と、面の内側を斜めに切った分割
ボタンは角丸小の横長長方形に右矢印
数字番号は金の円メダル
見出しの上に金の唐草飾り

Components

予約ボタン（button-primary）: 赤い横長ボタンにアイコンと右矢印、左上に金の円形吹き出しで手軽さを添える
価格カード（price-card）: 金の額縁枠と角リボン。左に人体図、右にプラン名と深紅の大価格、照射範囲枠
帯見出し（band-heading）: 緑または金の全幅帯に白の明朝見出し、上段に＼小見出し／
番号付き特長（numbered-feature）: 大きな明朝の01〜03と2行説明、下に細線
Point 枠（point-box）: 金ラベル付きの白枠に要点と小写真
0円カード（zero-card）: ベージュ地に金枠、項目名と深紅の大きな0円
FAQ アコーディオン（faq-item）: 白地にQ筆記体アイコン、右に金の下向き矢印
院一覧（clinic-accordion）: 茶金の帯に白文字の院名と＋

Do's and Don'ts

Do - 価格は明朝の特大数字と深紅で見せる - 金の枠や飾りで上品な格を保つ - 緑と金の帯見出しを交互に使って区切る - 注釈は小さく添えて医療広告の配慮を示す - 人物は笑顔の女性を明るい白背景で使う

Don't - 原色の青や蛍光色を加えない - ボタン以外に赤い面を多用しない - 見出しを丸ゴシックにしない - 強い影や立体ボタンにしない - 金飾りを過剰に重ねて文字を読みにくくしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（回数と価格を即提示）: 女性写真と花、明朝の大価格、下部をオリーブ緑の斜め面
保証訴求（安心感を強調）: 黄緑帯に人物切り抜きと白の極太見出し
料金プラン（プラン比較）: 金額縁の価格カード2枚と下向き金矢印
人気プランと CTA（選択率で後押し）: 人型アイコンの割合図と赤い予約ボタン
3つのサービス（付帯保証の提示）: 番号付きベージュカード3列
選ばれる理由（機器と技術の訴求）: 金メダル番号、帯見出し、セージ地の斜め分割で機器を紹介
比較表（機器の違いを整理）: ベージュ見出し行の4列表と記号評価
照射のこだわり（丁寧さを図解）: 線画の人体と吹き出しカード
追加料金0円（費用の不安解消）: 0円カードのグリッドとアイコン付きメリット
施術の流れ（手順の可視化）: Step 筆記体ラベル付き写真と矢印
よくある質問（疑問解消）: ミントストライプ地に白のアコーディオン
カウンセリング誘導（相談の後押し）: 淡ピンク地にイラスト女性と金の質問ボタン
院一覧・支払方法（店舗と決済の案内）: 茶金アコーディオンと罫線表
フッター（ブランド表記）: 白地中央にロゴと小さなリンク

Imagery

白背景で明るく撮った笑顔の女性モデル
医療機器は白背景の切り抜き
人体図は肌色の簡易イラストで部位をピンク表示
施術風景は白衣スタッフの自然光写真
やさしい線のイラスト女性で悩みを表現
金の唐草・リボン・メダルの装飾素材
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC も中央の約 780px 幅の 1 カラム構成
SP では価格カードの人体図を上、テキストを下に積む
0円カードは SP で 2 列に
比較表は SP で文字を小さくして 4 列を維持
機器紹介の左右交互は SP で画像上・リスト下に

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Olive Gold Elegant Medical Hair Removal LP
description: オリーブグリーンと金ベージュを基調に、明朝体の大きな価格表示と深紅の数字で訴求する医療脱毛 LP。淡いダマスク柄の白地に、金の額縁風カードや斜めの面分割を重ね、上品さと情報量を両立している。
colors:
  primary: '#748B34'
  secondary: '#B5A26A'
  accent-1: '#82BA65'
  accent-2: '#8F090C'
  cta: '#DB232B'
  on-cta: '#FFFFFF'
  background: '#FAF9F9'
  background-alt: '#E5E8DB'
  tint-1: '#DDD5B4'
  tint-2: '#FFFFFE'
  dark-section: '#92631C'
  text: '#333333'
  marker: '#EAE7C9'
  line: '#C8B888'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Serif JP
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Great Vibes
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
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}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 48px
  price-card:
    textColor: '{colors.accent-2}'
    typography: '{typography.display}'
    height: 320px
  band-heading:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 64px
  numbered-feature:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 48px
  point-box:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 100px
  zero-card:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.accent-2}'
    typography: '{typography.display}'
    height: 90px
  faq-item:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 44px
  clinic-accordion:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.body-md}'
    height: 32px
---

# DESIGN.md — オリーブ×金の上品な医療脱毛クリニック LP（Olive Gold Elegant Medical Hair Removal LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 上品・高級、信頼・誠実、情報量多め・訴求型、やさしい・柔らかい
- **キーワード**: オリーブグリーン・金の額縁・明朝体の価格・深紅の数字・ダマスク柄の地・斜めの面分割
- **地の質感**: 白地にごく淡いダマスク柄やストライプを敷き、金はグラデーション風の帯やリボンで箔押しのような質感を出す
- **形**: 角の小さい四角カード、金の角飾り・額縁、帯見出しの左右に斜線、背景は斜めに切った面
- **温度感**: やや暖かい。くすみ緑とベージュ金で落ち着いた温度感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#748B34` | 見出し帯・ブランドのオリーブグリーン | 6% | 画素の実測 |
| `secondary` | `#B5A26A` | 金ベージュの見出し帯・ボタン | 5% | 推定 |
| `accent-1` | `#82BA65` | 保証訴求帯の明るい黄緑 | 3% | 画素の実測 |
| `accent-2` | `#8F090C` | 価格・強調数字の深紅 | 1% | 画素の実測 |
| `cta` | `#DB232B` | 予約ボタンの赤 | 0% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `background` | `#FAF9F9` | ページの白地 | 40% | 画素の実測 |
| `background-alt` | `#E5E8DB` | 機器紹介の淡いセージ地 | 13% | 画素の主要色に補正 |
| `tint-1` | `#DDD5B4` | 0円カードのベージュ地 | 5% | 画素の実測 |
| `tint-2` | `#FFFFFE` | FAQ 背景のミントストライプ | 3% | 画素の実測 |
| `dark-section` | `#92631C` | 院一覧アコーディオンの茶金 | 1% | 画素の実測 |
| `text` | `#333333` | 見出し・本文の濃グレー | 2% | 推定 |
| `marker` | `#EAE7C9` | 本文強調のベージュマーカー | 0% | 画素の主要色に補正 |
| `line` | `#C8B888` | 金の細枠・区切り線 | 0% | 推定 |

- 地は白〜淡グレーにダマスク柄、機器紹介はセージ地で区切る
- 見出し帯はオリーブ緑と金ベージュを交互に使う
- 価格・0円・強調数字は深紅に限定する
- 赤は予約ボタンと割合の強調ラベルだけに使う
- 金は額縁・リボン・番号メダルの装飾として使う
- FAQ はミントストライプ、悩み訴求は淡ピンクで空気を変える

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 価格の大きな数字 | 明朝 | Shippori Mincho | 800 | 56px | 1.1 | 0.0em |
| `headline-lg` | セクション大見出し | 明朝 | Noto Serif JP | 700 | 24px | 1.4 | 0.05em |
| `headline-md` | 帯見出し・プラン名 | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.05em |
| `headline-sm` | 番号付き特長の項目 | 明朝 | Noto Serif JP | 600 | 16px | 1.5 | 0.03em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | 注釈・照射範囲 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | 機器名の筆記体あしらい | 欧文スクリプト | Great Vibes | 400 | 28px | 1.2 | 0.0em |
| `label-button` | 予約ボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em |

- 見出しと価格は明朝、本文と注釈はゴシック
- 価格は数字を特大、円・税込表記は小さく添える
- 帯見出しは上段の小見出しを＼／で挟む
- 本文の要点は太字とベージュマーカーで強調
- 機器名には薄い筆記体の英字を重ねる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。0円・メリットは 2〜3 列グリッド
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- コンテンツは中央寄せで左右に余白
- 番号付き特長は番号＋2行テキストを下線で区切る
- 機器画像と特長リストは左右交互に配置
- 比較表は横スクロールせず4列で収める
- Point 枠は文章＋小写真の横並び

## Elevation & Depth

- カードに薄いドロップシャドウ
- 価格カードは金の二重枠と角リボン
- 基本はフラットで影は控えめ

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物は白背景の切り抜き、施術写真は角丸なしの矩形
- **セクション境界**: 背景色の直線切替と、面の内側を斜めに切った分割
- ボタンは角丸小の横長長方形に右矢印
- 数字番号は金の円メダル
- 見出しの上に金の唐草飾り

## Components

- **予約ボタン**（`button-primary`）: 赤い横長ボタンにアイコンと右矢印、左上に金の円形吹き出しで手軽さを添える
- **価格カード**（`price-card`）: 金の額縁枠と角リボン。左に人体図、右にプラン名と深紅の大価格、照射範囲枠
- **帯見出し**（`band-heading`）: 緑または金の全幅帯に白の明朝見出し、上段に＼小見出し／
- **番号付き特長**（`numbered-feature`）: 大きな明朝の01〜03と2行説明、下に細線
- **Point 枠**（`point-box`）: 金ラベル付きの白枠に要点と小写真
- **0円カード**（`zero-card`）: ベージュ地に金枠、項目名と深紅の大きな0円
- **FAQ アコーディオン**（`faq-item`）: 白地にQ筆記体アイコン、右に金の下向き矢印
- **院一覧**（`clinic-accordion`）: 茶金の帯に白文字の院名と＋

## Do's and Don'ts

**Do**
- 価格は明朝の特大数字と深紅で見せる
- 金の枠や飾りで上品な格を保つ
- 緑と金の帯見出しを交互に使って区切る
- 注釈は小さく添えて医療広告の配慮を示す
- 人物は笑顔の女性を明るい白背景で使う

**Don't**
- 原色の青や蛍光色を加えない
- ボタン以外に赤い面を多用しない
- 見出しを丸ゴシックにしない
- 強い影や立体ボタンにしない
- 金飾りを過剰に重ねて文字を読みにくくしない

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（回数と価格を即提示）: 女性写真と花、明朝の大価格、下部をオリーブ緑の斜め面
2. **保証訴求**（安心感を強調）: 黄緑帯に人物切り抜きと白の極太見出し
3. **料金プラン**（プラン比較）: 金額縁の価格カード2枚と下向き金矢印
4. **人気プランと CTA**（選択率で後押し）: 人型アイコンの割合図と赤い予約ボタン
5. **3つのサービス**（付帯保証の提示）: 番号付きベージュカード3列
6. **選ばれる理由**（機器と技術の訴求）: 金メダル番号、帯見出し、セージ地の斜め分割で機器を紹介
7. **比較表**（機器の違いを整理）: ベージュ見出し行の4列表と記号評価
8. **照射のこだわり**（丁寧さを図解）: 線画の人体と吹き出しカード
9. **追加料金0円**（費用の不安解消）: 0円カードのグリッドとアイコン付きメリット
10. **施術の流れ**（手順の可視化）: Step 筆記体ラベル付き写真と矢印
11. **よくある質問**（疑問解消）: ミントストライプ地に白のアコーディオン
12. **カウンセリング誘導**（相談の後押し）: 淡ピンク地にイラスト女性と金の質問ボタン
13. **院一覧・支払方法**（店舗と決済の案内）: 茶金アコーディオンと罫線表
14. **フッター**（ブランド表記）: 白地中央にロゴと小さなリンク

## Imagery

- 白背景で明るく撮った笑顔の女性モデル
- 医療機器は白背景の切り抜き
- 人体図は肌色の簡易イラストで部位をピンク表示
- 施術風景は白衣スタッフの自然光写真
- やさしい線のイラスト女性で悩みを表現
- 金の唐草・リボン・メダルの装飾素材
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC も中央の約 780px 幅の 1 カラム構成
- SP では価格カードの人体図を上、テキストを下に積む
- 0円カードは SP で 2 列に
- 比較表は SP で文字を小さくして 4 列を維持
- 機器紹介の左右交互は 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-1797341b`（元 LP の URL から採番）
- **元 LP**: https://osaka-bc.com/lp/removal_a/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

美容サロン・エステ・脱毛白タイル×焦茶帯のナチュラル脱毛ケア LPClean Tile White Natural Skincare Hair Removal LP 美容サロン・エステ・脱毛青×赤グラデと金茶の医療脱毛 LPPastel Gradient Medical Hair Removal LP 美容サロン・エステ・脱毛蛍光ライム×濃紺のパーソナルジム LPNeon Lime and Navy Personal Gym LP 美容サロン・エステ・脱毛黒×ゴールドの男性向け医療脱毛 LPBlack and Gold Men's Medical Clinic LP 美容サロン・エステ・脱毛グレージュ×金と朱赤のパーソナルジム LPGreige and Gold Personal Gym Conversion LP 美容サロン・エステ・脱毛淡いブルーグレーと明朝の美容医療 LPPale Blue-Gray Korean Skin Clinic LP