--- 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/）からご連絡ください。