黒ストライプ×マゼンタの女性トレーナー整体サロン LP

Dark Stripe Magenta Personal Stretch Salon LP

モノクロ写真と黒の斜めストライプ地に、マゼンタの強調文字と金メダル風バッジを重ねた訴求型のストレッチサロン LP。明るいグレー地と黒地を交互に挟み、金のクーポンバナーを何度も繰り返して予約へ導く。

美容サロン・エステ・脱毛力強い・インパクト情報量多め・訴求型スポーティPC

ダウンロード

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

COLORS

配色

地は白・明るいグレー・黒ストライプを交互に切り替える
マゼンタは見出しのキーワードと本文中の強調部分のみ
金はバッジとクーポンバナーに限定して特別感を出す
黒地では白文字と白カードで情報を載せる
FAQは濃グレーの質問バーと白の回答面で対比させる

TYPOGRAPHY

書体

displayFVの大キャッチ明朝／ Shippori Mincho 800 ／ 52px ／行間 1.1

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

headline-lgポイント見出し（マゼンタ）明朝／ Noto Serif JP 900 ／ 30px ／行間 1.25

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

headline-mdセクション見出しゴシック／ Noto Sans JP 700 ／ 22px ／行間 1.4

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

headline-smカード小見出しゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.4

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

body-md本文・口コミゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.8

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

note属性・注釈ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

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

accentPoint等の欧文飾り欧文スクリプト／ Dancing Script 600 ／ 30px ／行間 1.2

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

label-buttonバッジ・ボタン文字ゴシック／ Noto Sans JP 900 ／ 15px ／行間 1.3

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

ポイント見出しは極太明朝のマゼンタで大きく
見出し内のキーワードだけ大きく・色付きにする
背景に薄いグレーの筆記体番号を重ねる
本文は小さめゴシックで行間広め
英語小見出しを見出し上に小さく添える

PAGE STRUCTURE

セクション構成

ファーストビュー体感の強さを訴えるモノクロ人物写真に極太白明朝の大コピーと金バッジ3つ
ブランド紹介・オファー業態説明と初回特価マゼンタ斜め面に施術写真、ロゴ帯、金バッジ、クーポンバナー
メディア実績権威付け黒ストライプ地に3列×2段の掲載サムネ
悩みの提起共感グレー地に線画アイコン付き白カード3枚
解決提示効果の短い言葉を並べるマゼンタ強調見出しと3分割写真に白太字
CTA予約誘導暗い写真に白見出し＋金クーポンバナー
3つのポイント特長の要約と詳細金バッジ3つ、写真と文章の交互配置、サブ特長3枚組
トレーナー紹介指名予約サーモンのグラデ地に角丸人物カード
お客様の声信頼黒ストライプ地に白い口コミカード縦並び
よくある質問不安解消グレー地にQバー＋A面
店舗情報アクセス案内枠付きボックスに住所表と地図
最終CTA予約写真背景＋クーポンバナー、追従クーポン

COMPONENTS

部品

金のクーポンバナー coupon-banner通常価格取消線＋特価＋割引率円バッジ＋人物写真の横長バナー
金メダルバッジ gold-badgeリピート率・個室等の実績を円形の金メダルで3つ並べる
見出しラベル label-tag見出し上のマゼンタ角丸帯に白文字
メディア掲載カード media-card黒地に動画サムネと白キャプションを並べる
悩みカード worry-card線画アイコンを上にはみ出させた白枠カード
口コミカード review-card円形アイコン＋本文＋右下に属性
FAQ項目 faq-item濃グレーバーにQ枠、下に白面でA枠
追従クーポン floating-coupon画面右下に固定するマゼンタ枠の小型クーポン

守ること

マゼンタは強調語のみに絞る
金は実績バッジとクーポンだけに使う
写真は女性トレーナーの施術シーンを使う
黒地とグレー地を交互にしてリズムを作る
クーポンバナーを複数回置く

DON'T

避けること

パステルや淡い色を主役にしない
マゼンタを広い面の背景にしない
丸ゴシックで柔らかくしすぎない
ボタンをピル型にしない
装飾のない平坦な白一色ページにしない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黒ストライプ×マゼンタの女性トレーナー整体サロン LP（Dark Stripe Magenta Personal Stretch Salon LP）

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

Overview

業種: 美容サロン・エステ・脱毛／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、スポーティ
キーワード: モノクロ写真・マゼンタ強調・金メダルバッジ・黒斜めストライプ・クーポンバナー反復
地の質感: 写真の暗いオーバーレイと黒地の斜めストライプ、金の光沢グラデーション
形: 角丸小さめのカード、円形の金バッジ、斜めに切った写真ブロック
温度感: クールな黒グレーにマゼンタと金で熱量を足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#D10887`	ブランド強調色（見出し・強調文字）	2%	画素の実測
`secondary`	`#5C2145`	ウェア・帯の濃いマゼンタ面	2%	画素の主要色に補正
`background`	`#FFFFFE`	白の基本地	22%	画素の実測
`background-alt`	`#EEEEEE`	明るいグレー地（悩み・FAQ）	14%	画素の実測
`tint-1`	`#DDDDDD`	悩みセクションのやや濃いグレー	5%	画素の実測
`dark-section`	`#151515`	黒のストライプ地（メディア・口コミ）	13%	画素の実測
`on-dark`	`#F8F8F8`	黒地上の白見出し	1%	画素の実測
`surface`	`#333333`	FAQ質問バーの濃いグレー	4%	画素の実測
`text`	`#1C151F`	見出し・本文の黒文字	3%	画素の主要色に補正
`text-muted`	`#97999A`	注釈・属性の灰文字	1%	画素の主要色に補正
`cta`	`#D4A64A`	金のクーポンバナー	3%	推定
`on-cta`	`#B5122C`	バナー上の価格文字	1%	推定
`accent-1`	`#D8A58F`	トレーナー紹介のサーモン地	6%	画素の主要色に補正
`line`	`#252525`	カードの細い枠線	1%	画素の実測
`cta-accessible`	`#E8D09E`	AA を満たす補正値（計算）		計算

地は白・明るいグレー・黒ストライプを交互に切り替える
マゼンタは見出しのキーワードと本文中の強調部分のみ
金はバッジとクーポンバナーに限定して特別感を出す
黒地では白文字と白カードで情報を載せる
FAQは濃グレーの質問バーと白の回答面で対比させる
coupon-banner は文字 #B5122C × 背景 #D4A64A のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E8D09E、4.52:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVの大キャッチ	明朝	Shippori Mincho	800	52px	1.1	0.0em
`headline-lg`	ポイント見出し（マゼンタ）	明朝	Noto Serif JP	900	30px	1.25	0.02em
`headline-md`	セクション見出し	ゴシック	Noto Sans JP	700	22px	1.4	0.04em
`headline-sm`	カード小見出し	ゴシック	Noto Sans JP	700	16px	1.4	0.02em
`body-md`	本文・口コミ	ゴシック	Noto Sans JP	400	13px	1.8	0.02em
`note`	属性・注釈	ゴシック	Noto Sans JP	400	11px	1.6	0.0em
`accent`	Point等の欧文飾り	欧文スクリプト	Dancing Script	600	30px	1.2	0.0em
`label-button`	バッジ・ボタン文字	ゴシック	Noto Sans JP	900	15px	1.3	0.02em

ポイント見出しは極太明朝のマゼンタで大きく
見出し内のキーワードだけ大きく・色付きにする
背景に薄いグレーの筆記体番号を重ねる
本文は小さめゴシックで行間広め
英語小見出しを見出し上に小さく添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、写真カードは 1〜2 列
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
ポイントは写真と文章の左右交互配置（SPは縦積み）
サブ特長は写真＋小見出し＋本文の3枚組
クーポンバナーはセクション3つおきに再掲
口コミはアイコン左・本文右の白カード
FAQはQバー＋A面を縦に並べる

Elevation & Depth

カードは影なしまたはごく薄い影
金バッジに光沢グラデと軽いドロップシャドウ
暗い写真に黒の半透明オーバーレイ

Shapes

角丸: 小 2px ／中 6px ／大 10px。ボタンは角丸の長方形。
写真の切り抜き: 写真は角丸なしの長方形、トレーナーは角丸カードで切り抜き
セクション境界: 直線区切り。白地に斜めの薄グレー帯を敷く
バッジは円形の金メダル型
見出しラベルは小さな角丸のマゼンタ帯
FV下部は斜めにカットした写真

Components

金のクーポンバナー（coupon-banner）: 通常価格取消線＋特価＋割引率円バッジ＋人物写真の横長バナー
金メダルバッジ（gold-badge）: リピート率・個室等の実績を円形の金メダルで3つ並べる
見出しラベル（label-tag）: 見出し上のマゼンタ角丸帯に白文字
メディア掲載カード（media-card）: 黒地に動画サムネと白キャプションを並べる
悩みカード（worry-card）: 線画アイコンを上にはみ出させた白枠カード
口コミカード（review-card）: 円形アイコン＋本文＋右下に属性
FAQ項目（faq-item）: 濃グレーバーにQ枠、下に白面でA枠
追従クーポン（floating-coupon）: 画面右下に固定するマゼンタ枠の小型クーポン

Do's and Don'ts

Do - マゼンタは強調語のみに絞る - 金は実績バッジとクーポンだけに使う - 写真は女性トレーナーの施術シーンを使う - 黒地とグレー地を交互にしてリズムを作る - クーポンバナーを複数回置く

Don't - パステルや淡い色を主役にしない - マゼンタを広い面の背景にしない - 丸ゴシックで柔らかくしすぎない - ボタンをピル型にしない - 装飾のない平坦な白一色ページにしない

Page Structure

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

ファーストビュー（体感の強さを訴える）: モノクロ人物写真に極太白明朝の大コピーと金バッジ3つ
ブランド紹介・オファー（業態説明と初回特価）: マゼンタ斜め面に施術写真、ロゴ帯、金バッジ、クーポンバナー
メディア実績（権威付け）: 黒ストライプ地に3列×2段の掲載サムネ
悩みの提起（共感）: グレー地に線画アイコン付き白カード3枚
解決提示（効果の短い言葉を並べる）: マゼンタ強調見出しと3分割写真に白太字
CTA（予約誘導）: 暗い写真に白見出し＋金クーポンバナー
3つのポイント（特長の要約と詳細）: 金バッジ3つ、写真と文章の交互配置、サブ特長3枚組
トレーナー紹介（指名予約）: サーモンのグラデ地に角丸人物カード
お客様の声（信頼）: 黒ストライプ地に白い口コミカード縦並び
よくある質問（不安解消）: グレー地にQバー＋A面
店舗情報（アクセス案内）: 枠付きボックスに住所表と地図
最終CTA（予約）: 写真背景＋クーポンバナー、追従クーポン

Imagery

白Tとマゼンタのレギンスで揃えた女性トレーナー写真
ストレッチ施術の接写を明るいグレー背景で
FVはモノクロ加工に一部だけ色を残す
人体の筋肉を赤く光らせたイメージ図
悩みは黒の細い線画人物アイコン
金属光沢の金メダルとリボン装飾
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCは中央480px相当の固定幅に左右余白、SPは全幅
ポイントの左右交互配置はSPで写真上・文章下に
メディア3列はSPで2列
サブ特長3枚組はSPで1列または横スクロール
追従クーポンは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: Dark Stripe Magenta Personal Stretch Salon LP
description: モノクロ写真と黒の斜めストライプ地に、マゼンタの強調文字と金メダル風バッジを重ねた訴求型のストレッチサロン LP。明るいグレー地と黒地を交互に挟み、金のクーポンバナーを何度も繰り返して予約へ導く。
colors:
  primary: '#D10887'
  secondary: '#5C2145'
  background: '#FFFFFE'
  background-alt: '#EEEEEE'
  tint-1: '#DDDDDD'
  dark-section: '#151515'
  on-dark: '#F8F8F8'
  surface: '#333333'
  text: '#1C151F'
  text-muted: '#97999A'
  cta: '#D4A64A'
  on-cta: '#B5122C'
  accent-1: '#D8A58F'
  line: '#252525'
  cta-accessible: '#E8D09E'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 52px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Serif JP
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Dancing Script
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  sm: 2px
  md: 6px
  lg: 10px
  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}'
  coupon-banner:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.display}'
    rounded: '{rounded.sm}'
    height: 90px
  gold-badge:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 80px
  label-tag:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 26px
  media-card:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 110px
  worry-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 90px
  review-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 130px
  faq-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 80px
  floating-coupon:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 100px
---

# DESIGN.md — 黒ストライプ×マゼンタの女性トレーナー整体サロン LP（Dark Stripe Magenta Personal Stretch Salon LP）

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

## Overview

- **業種**: 美容サロン・エステ・脱毛 ／ **雰囲気**: 力強い・インパクト、情報量多め・訴求型、スポーティ
- **キーワード**: モノクロ写真・マゼンタ強調・金メダルバッジ・黒斜めストライプ・クーポンバナー反復
- **地の質感**: 写真の暗いオーバーレイと黒地の斜めストライプ、金の光沢グラデーション
- **形**: 角丸小さめのカード、円形の金バッジ、斜めに切った写真ブロック
- **温度感**: クールな黒グレーにマゼンタと金で熱量を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#D10887` | ブランド強調色（見出し・強調文字） | 2% | 画素の実測 |
| `secondary` | `#5C2145` | ウェア・帯の濃いマゼンタ面 | 2% | 画素の主要色に補正 |
| `background` | `#FFFFFE` | 白の基本地 | 22% | 画素の実測 |
| `background-alt` | `#EEEEEE` | 明るいグレー地（悩み・FAQ） | 14% | 画素の実測 |
| `tint-1` | `#DDDDDD` | 悩みセクションのやや濃いグレー | 5% | 画素の実測 |
| `dark-section` | `#151515` | 黒のストライプ地（メディア・口コミ） | 13% | 画素の実測 |
| `on-dark` | `#F8F8F8` | 黒地上の白見出し | 1% | 画素の実測 |
| `surface` | `#333333` | FAQ質問バーの濃いグレー | 4% | 画素の実測 |
| `text` | `#1C151F` | 見出し・本文の黒文字 | 3% | 画素の主要色に補正 |
| `text-muted` | `#97999A` | 注釈・属性の灰文字 | 1% | 画素の主要色に補正 |
| `cta` | `#D4A64A` | 金のクーポンバナー | 3% | 推定 |
| `on-cta` | `#B5122C` | バナー上の価格文字 | 1% | 推定 |
| `accent-1` | `#D8A58F` | トレーナー紹介のサーモン地 | 6% | 画素の主要色に補正 |
| `line` | `#252525` | カードの細い枠線 | 1% | 画素の実測 |
| `cta-accessible` | `#E8D09E` | AA を満たす補正値（計算） |  | 計算 |

- 地は白・明るいグレー・黒ストライプを交互に切り替える
- マゼンタは見出しのキーワードと本文中の強調部分のみ
- 金はバッジとクーポンバナーに限定して特別感を出す
- 黒地では白文字と白カードで情報を載せる
- FAQは濃グレーの質問バーと白の回答面で対比させる
- `coupon-banner` は文字 `#B5122C` × 背景 `#D4A64A` のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E8D09E`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大キャッチ | 明朝 | Shippori Mincho | 800 | 52px | 1.1 | 0.0em |
| `headline-lg` | ポイント見出し（マゼンタ） | 明朝 | Noto Serif JP | 900 | 30px | 1.25 | 0.02em |
| `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.04em |
| `headline-sm` | カード小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em |
| `body-md` | 本文・口コミ | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em |
| `note` | 属性・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em |
| `accent` | Point等の欧文飾り | 欧文スクリプト | Dancing Script | 600 | 30px | 1.2 | 0.0em |
| `label-button` | バッジ・ボタン文字 | ゴシック | Noto Sans JP | 900 | 15px | 1.3 | 0.02em |

- ポイント見出しは極太明朝のマゼンタで大きく
- 見出し内のキーワードだけ大きく・色付きにする
- 背景に薄いグレーの筆記体番号を重ねる
- 本文は小さめゴシックで行間広め
- 英語小見出しを見出し上に小さく添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、写真カードは 1〜2 列
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
- ポイントは写真と文章の左右交互配置（SPは縦積み）
- サブ特長は写真＋小見出し＋本文の3枚組
- クーポンバナーはセクション3つおきに再掲
- 口コミはアイコン左・本文右の白カード
- FAQはQバー＋A面を縦に並べる

## Elevation & Depth

- カードは影なしまたはごく薄い影
- 金バッジに光沢グラデと軽いドロップシャドウ
- 暗い写真に黒の半透明オーバーレイ

## Shapes

- **角丸**: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は角丸なしの長方形、トレーナーは角丸カードで切り抜き
- **セクション境界**: 直線区切り。白地に斜めの薄グレー帯を敷く
- バッジは円形の金メダル型
- 見出しラベルは小さな角丸のマゼンタ帯
- FV下部は斜めにカットした写真

## Components

- **金のクーポンバナー**（`coupon-banner`）: 通常価格取消線＋特価＋割引率円バッジ＋人物写真の横長バナー
- **金メダルバッジ**（`gold-badge`）: リピート率・個室等の実績を円形の金メダルで3つ並べる
- **見出しラベル**（`label-tag`）: 見出し上のマゼンタ角丸帯に白文字
- **メディア掲載カード**（`media-card`）: 黒地に動画サムネと白キャプションを並べる
- **悩みカード**（`worry-card`）: 線画アイコンを上にはみ出させた白枠カード
- **口コミカード**（`review-card`）: 円形アイコン＋本文＋右下に属性
- **FAQ項目**（`faq-item`）: 濃グレーバーにQ枠、下に白面でA枠
- **追従クーポン**（`floating-coupon`）: 画面右下に固定するマゼンタ枠の小型クーポン

## Do's and Don'ts

**Do**
- マゼンタは強調語のみに絞る
- 金は実績バッジとクーポンだけに使う
- 写真は女性トレーナーの施術シーンを使う
- 黒地とグレー地を交互にしてリズムを作る
- クーポンバナーを複数回置く

**Don't**
- パステルや淡い色を主役にしない
- マゼンタを広い面の背景にしない
- 丸ゴシックで柔らかくしすぎない
- ボタンをピル型にしない
- 装飾のない平坦な白一色ページにしない

## Page Structure

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

1. **ファーストビュー**（体感の強さを訴える）: モノクロ人物写真に極太白明朝の大コピーと金バッジ3つ
2. **ブランド紹介・オファー**（業態説明と初回特価）: マゼンタ斜め面に施術写真、ロゴ帯、金バッジ、クーポンバナー
3. **メディア実績**（権威付け）: 黒ストライプ地に3列×2段の掲載サムネ
4. **悩みの提起**（共感）: グレー地に線画アイコン付き白カード3枚
5. **解決提示**（効果の短い言葉を並べる）: マゼンタ強調見出しと3分割写真に白太字
6. **CTA**（予約誘導）: 暗い写真に白見出し＋金クーポンバナー
7. **3つのポイント**（特長の要約と詳細）: 金バッジ3つ、写真と文章の交互配置、サブ特長3枚組
8. **トレーナー紹介**（指名予約）: サーモンのグラデ地に角丸人物カード
9. **お客様の声**（信頼）: 黒ストライプ地に白い口コミカード縦並び
10. **よくある質問**（不安解消）: グレー地にQバー＋A面
11. **店舗情報**（アクセス案内）: 枠付きボックスに住所表と地図
12. **最終CTA**（予約）: 写真背景＋クーポンバナー、追従クーポン

## Imagery

- 白Tとマゼンタのレギンスで揃えた女性トレーナー写真
- ストレッチ施術の接写を明るいグレー背景で
- FVはモノクロ加工に一部だけ色を残す
- 人体の筋肉を赤く光らせたイメージ図
- 悩みは黒の細い線画人物アイコン
- 金属光沢の金メダルとリボン装飾
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央480px相当の固定幅に左右余白、SPは全幅
- ポイントの左右交互配置はSPで写真上・文章下に
- メディア3列はSPで2列
- サブ特長3枚組はSPで1列または横スクロール
- 追従クーポンは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-abeb7d4a`（元 LP の URL から採番）
- **元 LP**: https://zn-stretch.me/
- **解析に使った画像**: 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

出典と注意

元の LP: https://zn-stretch.me/（公開状況により表示できない場合があります）
この 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 美容サロン・エステ・脱毛オリーブ×金の上品な医療脱毛クリニック LPOlive Gold Elegant Medical Hair Removal LP 美容サロン・エステ・脱毛黒×ゴールドの男性向け医療脱毛 LPBlack and Gold Men's Medical Clinic LP 美容サロン・エステ・脱毛グレージュ×金と朱赤のパーソナルジム LPGreige and Gold Personal Gym Conversion LP