---
version: alpha
name: Muted Dusty Pink and Olive Beauty Salon LP
description: くすみピンク・オリーブベージュ・グレージュ・淡いブルーの地色をセクションごとに切り替える、明朝体中心の上品なエステサロン LP。斜めのセクション境界や V 字の切れ込みで流れを作る。アコーディオン、比較表、ビフォーアフター、ステップを並べた情報量の多い訴求型の構成で、CTA だけを LINE 風の緑にして目立たせる。
colors:
  primary: '#BD9482'
  secondary: '#C3B995'
  accent-1: '#9A9AA6'
  background: '#FFFFFE'
  background-alt: '#F6F1ED'
  tint-1: '#E7EEF6'
  surface: '#F3F2ED'
  cta: '#138A54'
  on-cta: '#FFFFFF'
  text: '#464646'
  text-body: '#5E5E5E'
  accent-2: '#8B816A'
  line: '#D2CEC4'
  dark-section: '#93928E'
  cta-accessible: '#128651'
  primary-accessible: '#9D6A53'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Cormorant Garamond
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em
  label-button:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.12em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
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}'
    height: 100px
  badge-circle:
    backgroundColor: '{colors.accent-2}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 70px
  label-keyword:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-md}'
    height: 44px
  accordion:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 60px
  price-box:
    backgroundColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 360px
  compare-table:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 600px
  problem-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 130px
  step-heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 50px
  callout-box:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.body-md}'
    height: 110px
---

# DESIGN.md — くすみピンク×オリーブの上品エステサロン LP（Muted Dusty Pink and Olive Beauty Salon LP）

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

## Overview

- **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 上品・高級、やさしい・柔らかい、情報量多め・訴求型
- **キーワード**: くすみカラー・明朝体・斜め区切り・アコーディオン・ダマスク柄・ゴールドの光沢
- **地の質感**: マットな中間色の面に、薄いダマスク柄、斜線のストライプ帯、ゴールドのグラデーションを少しだけ重ねる
- **形**: 角丸なしの四角カード、細い線の枠、斜めや V 字のセクション境界
- **温度感**: ややあたたかい中間色に、グレーやブルーの寒色を交互に挟む

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#BD9482` | 問題提起・強調の面とラベル（くすみピンク） | 9% | 画素の実測 |
| `secondary` | `#C3B995` | 解決セクション・ステップの面（オリーブベージュ） | 7% | 画素の実測 |
| `accent-1` | `#9A9AA6` | キャンペーン帯・Problem02 の面（グレージュパープル） | 8% | 画素の実測 |
| `background` | `#FFFFFE` | 基本の白地 | 29% | 画素の実測 |
| `background-alt` | `#F6F1ED` | キャンペーン・効果セクションの生成り地 | 10% | 画素の実測 |
| `tint-1` | `#E7EEF6` | 比較・Q&A セクションの淡いブルー地 | 8% | 画素の実測 |
| `surface` | `#F3F2ED` | アコーディオンの回答面・表見出しのセル | 7% | 画素の実測 |
| `cta` | `#138A54` | LINE 予約ボタン | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | CTA ボタンの文字色 | 0% | 画素の主要色に補正 |
| `text` | `#464646` | 見出しの文字色（チャコール） | 2% | 画素の実測 |
| `text-body` | `#5E5E5E` | 本文の文字色 | 2% | 推定 |
| `accent-2` | `#8B816A` | ロゴ・ゴールド系の装飾 | 1% | 画素の実測 |
| `line` | `#D2CEC4` | カード・表の細い罫線 | 1% | 画素の主要色に補正 |
| `dark-section` | `#93928E` | ビフォーアフターの解説帯（グレー） | 3% | 画素の実測 |
| `cta-accessible` | `#128651` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#9D6A53` | AA を満たす補正値（計算） |  | 計算 |

- セクションごとに地色を白→生成り→オリーブ→淡ブルー→くすみピンク→グレージュの順で切り替え、単調にしない
- 色面の上の文字は白、白地や淡い地の上の文字はチャコールにする
- 強調したい語はくすみピンクで太く大きくし、薄いピンクのマーカーを敷く
- 緑は LINE CTA だけに使い、ほかの部品には使わない
- ゴールドのグラデーションはロゴ、価格、丸いバッジに限って使う
- アコーディオンの開閉アイコンは、セクションの主色で塗った小さな正方形にする
- `button-primary` は文字 `#FFFFFF` × 背景 `#138A54` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#128651`、4.61:1）を使う。
- `accordion` は文字 `#BD9482` × 背景 `#FFFFFE` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9D6A53`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の大きなキャッチ・価格 | 明朝 | Shippori Mincho | 500 | 60px | 1.2 | 0.05em |
| `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 500 | 32px | 1.4 | 0.1em |
| `headline-md` | 中見出し・アコーディオンのタイトル | 明朝 | Noto Serif JP | 400 | 20px | 1.5 | 0.08em |
| `accent` | 欧文見出し（CAMPAIGN、Before & After など） | 欧文セリフ | Cormorant Garamond | 500 | 44px | 1.1 | 0.05em |
| `headline-sm` | Step・Case 番号のイタリック | 欧文セリフ | Cormorant Garamond | 600 | 24px | 1.2 | 0.0em |
| `body-md` | 本文・リストの文章 | ゴシック | Zen Kaku Gothic New | 400 | 15px | 1.9 | 0.08em |
| `note` | 注釈・小さな補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.05em |
| `label-button` | CTA ボタンの文字 | 明朝 | Shippori Mincho | 500 | 22px | 1.3 | 0.12em |

- 見出しは明朝体にし、字間を 0.08〜0.12em と広めに取る
- 見出しの中で助詞を小さく、要の語を大きくして、ひとつの見出しに大小の差をつける
- 欧文はセリフ体で、番号はイタリックにする
- 本文は細めのゴシック体で、行間を 1.8 以上取る
- 太字は表の見出しセルと強調語だけにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。比較表とビフォーアフターだけ 2 列
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- カードとアコーディオンは左右 18px 程度の余白で全幅に並べる
- アコーディオン同士は 16px 空ける
- セクション見出しは中央揃え、本文は左揃え
- 悩みのリストは左に寄せ、右側に人物写真を重ねる

## Elevation & Depth

- 影はほぼ使わない。平面の塗りと細い罫線で層を分ける
- CTA ボタンだけ、斜めの白い光沢の帯を半透明で重ねる
- 丸いゴールドのバッジは、ボタンの左上に重ねてはみ出させる

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物は白背景の切り抜き、または四角い写真。ビフォーアフターは角丸なしの四角に揃える
- **セクション境界**: 斜めの直線、または下向きの V 字の切れ込みで区切る。境界にグレーの斜線ストライプ帯を入れる場合もある
- ボタン・カード・ラベルはすべて角丸なしの四角にする
- 円はバッジとアイコンだけに使う
- 吹き出しは四角に小さな三角のしっぽを付ける
- 強調ラベルは四角い色面に白抜きの文字を入れる

## Components

- **LINE 予約ボタン**（`button-primary`）: 全幅で角丸なしの緑のボタン。白の明朝体の文字を中央に置き、右下に細い矢印を添える。斜めの光沢を重ね、左上に丸いゴールドのバッジを付ける
- **ゴールドの丸バッジ**（`badge-circle`）: 直径 70px ほどの円形。ゴールドのグラデーションに白い文字で、手軽さや期間限定を示す
- **キーワードラベル**（`label-keyword`）: 四角い色面に白抜きで短い語を入れ、「×」でつないで 3 つ並べる
- **アコーディオン**（`accordion`）: 白いカードに細い枠線を付け、左にタイトル、右に色付き正方形の＋/−を置く。開くと薄いグレーの回答面が出る
- **キャンペーン価格ボックス**（`price-box`）: グレージュの面の上下に斜線のストライプ帯を入れる。中央に白い明朝体の文字と、ゴールドの大きな価格を置く
- **比較表**（`compare-table`）: 2 列の表。左の見出しセルは薄いグレーに太字、右のセルは評価の記号と説明文を中央揃えにする
- **悩みのイラストカード**（`problem-card`）: 白いカードの左に線画の女性イラスト、右に小さな前置きと大きな結論の文字を置く
- **ステップ見出し**（`step-heading`）: イタリックの「Step.番号」と明朝体の見出しを並べ、下に斜線の破線を引く。白地とオリーブ地を交互に使う
- **吹き出しの解説**（`callout-box`）: 上に三角のしっぽを付けたグレーの帯に、白文字で症例の解説を書く

## Do's and Don'ts

**Do**
- セクションごとにくすみ系の地色を切り替え、境界は斜めか V 字にする
- 見出しは明朝体と欧文セリフ体を組み合わせ、要の語を大きくする
- ボタンやカードは角丸なしの四角に揃え、細い線で上品にまとめる
- CTA は緑の全幅ボタンにしてゴールドのバッジを添え、ページ内に 2 回以上置く
- 情報量の多い内容は、アコーディオンや表に収めて縦に整理する

**Don't**
- 彩度の高い原色やネオンカラーを使わない（CTA の緑は例外）
- ピル型や大きな角丸のボタンを使わない
- 見出しに太いゴシック体を使わない
- 濃い影や立体的な装飾を入れない
- ゴールドを広い面に塗らない

## Page Structure

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

1. **ファーストビュー**（即効性と最新機器の採用を伝える）: 白地の右側に女性の顔写真、左側に大きな明朝体のキャッチを置き、上部に最寄り駅の情報を添える。下にオリーブゴールドの斜めの帯を敷き、機器の写真と説明を載せる
2. **コンセプト**（幅広い悩みに対応できることを示す）: 薄いダマスク柄の地に、明朝体の大見出し、3 つのキーワードラベル、マーカー付きの強調語、吹き出しを並べる
3. **キャンペーン**（初回価格で来店を促す）: 生成り地に欧文の大見出しを置き、グレージュの価格ボックスを続ける。勧誘しないことを伝える文と、緑の CTA を並べる
4. **悩みの提起**（読み手に自分ごととして捉えてもらう）: 右側に人物写真を置き、左側にチェックリストを 5 項目、下線で区切って並べる
5. **解決の提示**（機器で悩みを解決できると伝える）: V 字で始まるオリーブ地に白文字の見出しを置き、中に白いカードを入れる
6. **一般サロンとの比較**（一般的なサロンの問題点を示す）: 淡いブルー地に警告アイコンを置き、線画イラストのカードを 3 枚並べる
7. **問題点の詳細**（2 つの問題を深く掘り下げる）: くすみピンクとグレージュの面に、Problem 番号のラベルを付ける。中身はアコーディオンとチェック付きのカード
8. **解決策**（機器と技術の組み合わせを訴求する）: ロゴの紋章の下に機器とスタッフの写真を並べ、ラベルを「＋」でつなぐ。続けて斜め区切りのピンクの帯を置く
9. **強みの比較表**（機器の性能を一覧で見せる）: 2 列の表に評価の記号と説明文を入れる
10. **悩み別の効果**（症状ごとに効果を説明する）: 生成り地に、短期と継続の 2 つのグループに分けたアコーディオンを並べる
11. **ビフォーアフター**（実績で信頼を得る）: Case 番号を付け、小さな施術前と大きな施術後の写真を並べる。下に費用と期間の表、グレーの吹き出しの解説を続ける
12. **予約の流れ**（予約から施術までの不安を減らす）: キャンペーンの見出しを置き、Step を 5 つ並べる。背景は白とオリーブを交互にし、途中に CTA を入れる
13. **よくある質問**（疑問を解消する）: 淡いブルー地に、カテゴリの小見出しと Q. 付きのアコーディオンを並べる
14. **再 CTA・店舗情報**（最後のひと押しとアクセスの案内）: キャンペーン価格ボックスと CTA を繰り返す。続けて筆記体の Information 見出し、店舗名の帯、情報の表、地図、フッターを置く

## Imagery

- 透明感のある女性モデルを白背景で撮り、肌に触れるしぐさの写真にする
- 美容機器は白背景で切り抜いた製品写真にする
- 悩みは細い線画に淡い色を付けた女性のイラストで表す
- ビフォーアフターは正面から撮った同じ構図の実写にする
- 背景には薄いグレーのダマスク柄や、筆記体の欧文を薄く重ねる
- アイコンは細い線のチェックや警告の三角など、控えめなものにする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 版の画像はないため、以下は推奨。PC では本文の幅を 960px 前後に収め、色面のセクションは全幅のままにする
- 悩みのリストと人物写真は左右 2 カラムに広げる
- ビフォーアフターや問題カードは 2〜3 列のグリッドにする
- アコーディオンや Q&A は最大幅 800px で中央揃えにする
- CTA ボタンは最大幅 480px で中央に置く

## 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-88e6ce96`（元 LP の URL から採番）
- **元 LP**: https://doctor-h.net/hommachi-line/?sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。