桃色グラデの敏感肌向け着圧ウェアLP

Soft Pink Cotton Compression Wear LP

淡いピンクのグラデーション地に、濃いマゼンタの帯見出しと白縁取りの太い文字を重ねたLP。女性の着用写真に圧力の数値やリング線を直接書き込み、機能を図で見せる。後半は実績の月桂冠バッジ、取扱店ロゴの一覧、帯付きのQ&Aで信頼感を積み上げる構成。

ファッション・アクセサリーかわいいやさしい・柔らかい情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

地は淡いピンクのグラデーションで統一。写真セクションだけ淡いグレー地にする
セクション見出しの帯はマゼンタ(primary)の全幅帯に白文字
機能を説明する円形バッジはsecondaryに白文字。キーワードだけ黄色かマゼンタで強調
圧力の数値は黒っぽいこげ茶の極太文字に白フチを付ける
ロゴ一覧とQ&Aの答えは白いカードに置き、情報を読みやすくする
寒色や原色の赤は使わない

TYPOGRAPHY

書体

displayロゴ風の大見出し（白フチ付き）装飾・ディスプレイ／ Dela Gothic One 900 ／ 44px ／行間 1.1

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

headline-lgマゼンタ帯の見出しゴシック／ Zen Kaku Gothic New 700 ／ 22px ／行間 1.4

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

headline-md機能を示す白抜きの太字コピーゴシック／ Noto Sans JP 900 ／ 20px ／行間 1.4

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

accent圧力などの数値（hPa）装飾・ディスプレイ／ Oswald 700 ／ 32px ／行間 1.0

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

body-lg円形バッジ内の説明丸ゴシック／ M PLUS Rounded 1c 700 ／ 15px ／行間 1.5

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

body-mdQ&Aの回答などの本文ゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.7

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

note試験結果などの注釈ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.5

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

headline-sm実績バッジ内の大きな数字欧文セリフ／ Playfair Display 700 ／ 40px ／行間 1.0

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

写真の上に置く文字には、白か濃いピンクのフチか影を必ず付ける
数値は大きく、単位のhPaは数値の半分くらいの大きさにする
帯見出しは字間を0.1em前後あけて落ち着いて見せる
強調語にはルビ風の小さい補足語を上に添える
本文は13px前後にとどめ、訴求は太字の短いフレーズで伝える

PAGE STRUCTURE

セクション構成

ファーストビュー商品の特徴と圧力の数値をひと目で伝える全幅の着用写真に白フチの大ロゴと訴求タグ帯を重ね、数値とリング線を描き込む
第2商品のビジュアルもう一つの商品タイプを同じ型で見せる写真の左右を反転し、同じ構成で繰り返す
ブランド導入シリーズの新商品であることと、肌へのやさしさを伝える商品写真とピンク地の中央寄せコピー、円形の吹き出しを組み合わせる
開発の想い悩みに寄り添う開発背景と素材の根拠を示すピンクのグラデーション地に黄色の強調コピー、右に円形に切り抜いた人物写真、下に注釈
商品1の特長構造と段階的な着圧を説明するピル型ラベル付きの帯見出し、切り抜き写真、円バッジ2つを×でつなぎ、斜めのキャプションを添える
商品2の特長サポート機能を説明する同じ型で、写真の左に数値、右に円バッジを縦に並べる
パッケージ紹介売り場で見つけやすいことを伝える帯見出しを段々に重ね、パッケージ写真2点を並べる
実績販売数とランキングで信頼を得るピンク地に白い月桂冠バッジ2つ、右にシリーズ商品の写真
取扱店舗身近な店で買えることを示すピンクの見出し帯と白カードに、ロゴを4列で並べる
よくある質問使い方とサイズの不安をなくす白カードの中にQ帯とA欄を4項目。サイズ表はマゼンタ×淡いピンクの表にする

COMPONENTS

部品

帯見出し band-heading全幅のマゼンタ帯に白文字。下中央に三角の吹き出しを付ける
円形説明バッジ circle-badge直径160px前後の正円。白文字の中でキーワードだけ黄色にする
訴求タグ帯 feature-tag左寄せの半ピル型の帯。大きな白太字の後に小さな補足語を続ける
商品名ラベル pill-label白いピル型にマゼンタ文字。帯見出しの左に置く
圧力数値表示 pressure-number写真の脚に白いリング線を描き、その横に極太の数値と小さい単位を置く
実績月桂冠 laurel-badge白い月桂冠の線画で大きなセリフ体の数字を囲む
取扱店ロゴカード logo-grid-cardピンクの見出し帯の下に白いカードを置き、ロゴを4列で並べる
Q&A項目 faq-itemQはマゼンタ帯に白い円マークと白文字。Aは淡いピンクのカードにピンクの円マーク

守ること

色はピンクとマゼンタの濃淡でまとめる
機能は数値と図で写真に直接書き込む
円バッジ2つを×でつないで組み合わせのメリットを見せる
写真上の文字には白フチを付けて読みやすくする
実績は月桂冠と大きな数字で権威づけする

DON'T

避けること

寒色をアクセントに使わない
角ばった硬いボックスを多用しない
長い本文を写真の上に置かない
数値を細い書体で小さく書かない
影の濃いカードは使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 桃色グラデの敏感肌向け着圧ウェアLP（Soft Pink Cotton Compression Wear LP）

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

Overview

業種: ファッション・アクセサリー／ 雰囲気: かわいい、やさしい・柔らかい、情報量多め・訴求型
キーワード: ピンクグラデーション・マゼンタ帯・白フチ太字・数値の書き込み・円形バッジ・女性向け
地の質感: 柔らかいピンクのグラデーションと光のぼかし。写真は明るく、生成り色のニット素材で温かみを出す
形: 円形の説明バッジ、角丸の帯、下向き三角の吹き出し付き見出し帯、ピル型ラベル
温度感: 暖かく甘い。ピンク系で統一し、黒い商品をくっきり見せる

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#D1408F`	見出し帯・ブランドを代表するマゼンタ	8%	画素の実測
`secondary`	`#EC75A2`	円形バッジ・中間ピンクの面	14%	画素の実測
`background`	`#F0F4F7`	写真セクションの淡いグレー地	11%	画素の主要色に補正
`background-alt`	`#FACECF`	淡いピンクの地	8%	画素の主要色に補正
`surface`	`#FEFEFE`	カード・ロゴ一覧の白い面	10%	画素の実測
`tint-1`	`#FCDCDC`	サブ見出し帯のごく淡いピンク	5%	画素の実測
`tint-2`	`#F4B3C5`	グラデーションの中間ピンク	6%	画素の主要色に補正
`text`	`#3C2E36`	本文・数値の濃いこげ茶	7%	画素の主要色に補正
`accent-1`	`#FFE36B`	強調語の黄色	0%	推定
`on-primary`	`#FFFFFF`	帯上の白文字	2%	画素の主要色に補正
`line`	`#E6E0DF`	カードの細い区切り線	1%	画素の主要色に補正
`accent-2`	`#D74D93`	円内の強調ピンク文字	0%	画素の主要色に補正
`primary-accessible`	`#D03A8B`	AA を満たす補正値（計算）		計算
`secondary-accessible`	`#E1226A`	AA を満たす補正値（計算）		計算

地は淡いピンクのグラデーションで統一。写真セクションだけ淡いグレー地にする
セクション見出しの帯はマゼンタ(primary)の全幅帯に白文字
機能を説明する円形バッジはsecondaryに白文字。キーワードだけ黄色かマゼンタで強調
圧力の数値は黒っぽいこげ茶の極太文字に白フチを付ける
ロゴ一覧とQ&Aの答えは白いカードに置き、情報を読みやすくする
寒色や原色の赤は使わない
band-heading は文字 #FFFFFF × 背景 #D1408F のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D03A8B、4.51:1）を使う。
circle-badge は文字 #FFFFFF × 背景 #EC75A2 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E1226A、4.53:1）を使う。
feature-tag は文字 #FFFFFF × 背景 #EC75A2 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E1226A、4.53:1）を使う。
pill-label は文字 #D1408F × 背景 #FEFEFE のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D03A8B、4.54:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ロゴ風の大見出し（白フチ付き）	装飾・ディスプレイ	Dela Gothic One	900	44px	1.1	0.02em
`headline-lg`	マゼンタ帯の見出し	ゴシック	Zen Kaku Gothic New	700	22px	1.4	0.1em
`headline-md`	機能を示す白抜きの太字コピー	ゴシック	Noto Sans JP	900	20px	1.4	0.05em
`accent`	圧力などの数値（hPa）	装飾・ディスプレイ	Oswald	700	32px	1.0	0.0em
`body-lg`	円形バッジ内の説明	丸ゴシック	M PLUS Rounded 1c	700	15px	1.5	0.08em
`body-md`	Q&Aの回答などの本文	ゴシック	Noto Sans JP	400	13px	1.7	0.03em
`note`	試験結果などの注釈	ゴシック	Noto Sans JP	400	10px	1.5	0.0em
`headline-sm`	実績バッジ内の大きな数字	欧文セリフ	Playfair Display	700	40px	1.0	0.0em

写真の上に置く文字には、白か濃いピンクのフチか影を必ず付ける
数値は大きく、単位のhPaは数値の半分くらいの大きさにする
帯見出しは字間を0.1em前後あけて落ち着いて見せる
強調語にはルビ風の小さい補足語を上に添える
本文は13px前後にとどめ、訴求は太字の短いフレーズで伝える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。機能の円バッジは写真の上に左右交互に配置
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
セクションの頭にマゼンタの全幅帯見出しを置く
写真は全幅で配置し、余白にバッジや数値を重ねる
ロゴ一覧やQ&Aは白いカードの中に左右16pxの余白で入れる
円バッジ2つの間に白い×印を置いて組み合わせを表す

Elevation & Depth

影はほとんど使わず、円バッジのまわりに淡いピンクの光のぼかしを付ける
文字には白フチや薄い影を付けて立体的に見せる
白いカードは影なしのフラット

Shapes

角丸: 小 4px ／中 8px ／大 16px。ボタンはピル型。
写真の切り抜き: 角版の全幅写真か、白背景の切り抜き。説明図は正円
セクション境界: 全幅の帯と、下向き三角の吹き出しで区切る
説明は正円のバッジに入れる
商品ラベルは白いピル型にピンク文字
Q&AのQとAは円形マークにする
訴求タグは右端が丸い半ピル形の帯にする

Components

帯見出し（band-heading）: 全幅のマゼンタ帯に白文字。下中央に三角の吹き出しを付ける
円形説明バッジ（circle-badge）: 直径160px前後の正円。白文字の中でキーワードだけ黄色にする
訴求タグ帯（feature-tag）: 左寄せの半ピル型の帯。大きな白太字の後に小さな補足語を続ける
商品名ラベル（pill-label）: 白いピル型にマゼンタ文字。帯見出しの左に置く
圧力数値表示（pressure-number）: 写真の脚に白いリング線を描き、その横に極太の数値と小さい単位を置く
実績月桂冠（laurel-badge）: 白い月桂冠の線画で大きなセリフ体の数字を囲む
取扱店ロゴカード（logo-grid-card）: ピンクの見出し帯の下に白いカードを置き、ロゴを4列で並べる
Q&A項目（faq-item）: Qはマゼンタ帯に白い円マークと白文字。Aは淡いピンクのカードにピンクの円マーク

Do's and Don'ts

Do - 色はピンクとマゼンタの濃淡でまとめる - 機能は数値と図で写真に直接書き込む - 円バッジ2つを×でつないで組み合わせのメリットを見せる - 写真上の文字には白フチを付けて読みやすくする - 実績は月桂冠と大きな数字で権威づけする

Don't - 寒色をアクセントに使わない - 角ばった硬いボックスを多用しない - 長い本文を写真の上に置かない - 数値を細い書体で小さく書かない - 影の濃いカードは使わない

Page Structure

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

ファーストビュー（商品の特徴と圧力の数値をひと目で伝える）: 全幅の着用写真に白フチの大ロゴと訴求タグ帯を重ね、数値とリング線を描き込む
第2商品のビジュアル（もう一つの商品タイプを同じ型で見せる）: 写真の左右を反転し、同じ構成で繰り返す
ブランド導入（シリーズの新商品であることと、肌へのやさしさを伝える）: 商品写真とピンク地の中央寄せコピー、円形の吹き出しを組み合わせる
開発の想い（悩みに寄り添う開発背景と素材の根拠を示す）: ピンクのグラデーション地に黄色の強調コピー、右に円形に切り抜いた人物写真、下に注釈
商品1の特長（構造と段階的な着圧を説明する）: ピル型ラベル付きの帯見出し、切り抜き写真、円バッジ2つを×でつなぎ、斜めのキャプションを添える
商品2の特長（サポート機能を説明する）: 同じ型で、写真の左に数値、右に円バッジを縦に並べる
パッケージ紹介（売り場で見つけやすいことを伝える）: 帯見出しを段々に重ね、パッケージ写真2点を並べる
実績（販売数とランキングで信頼を得る）: ピンク地に白い月桂冠バッジ2つ、右にシリーズ商品の写真
取扱店舗（身近な店で買えることを示す）: ピンクの見出し帯と白カードに、ロゴを4列で並べる
よくある質問（使い方とサイズの不安をなくす）: 白カードの中にQ帯とA欄を4項目。サイズ表はマゼンタ×淡いピンクの表にする

Imagery

明るい室内で、生成りのニットを着た女性が黒い商品を着用した写真
白背景で脚だけを切り抜いた商品写真
脚に白い半透明のリング線を数本描いて着圧を表す
円バッジの背後にピンクの光のぼかしを置く
白い線画の綿花イラストをロゴの飾りに使う
パッケージは正面から撮り、淡いピンク地に並べる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

元はPC版の1カラム（幅700px程度）。SPでもほぼ同じ縦の流れで組む
SPでは円バッジを直径140〜160pxにし、写真に重ねる配置は残す
ロゴ一覧はSPで3列にする
PCでは中央固定幅のまま、左右をピンクのグラデーションで埋める
大ロゴはSPで画面幅の60%程度にする

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: Soft Pink Cotton Compression Wear LP
description: 淡いピンクのグラデーション地に、濃いマゼンタの帯見出しと白縁取りの太い文字を重ねたLP。女性の着用写真に圧力の数値やリング線を直接書き込み、機能を図で見せる。後半は実績の月桂冠バッジ、取扱店ロゴの一覧、帯付きのQ&Aで信頼感を積み上げる構成。
colors:
  primary: '#D1408F'
  secondary: '#EC75A2'
  background: '#F0F4F7'
  background-alt: '#FACECF'
  surface: '#FEFEFE'
  tint-1: '#FCDCDC'
  tint-2: '#F4B3C5'
  text: '#3C2E36'
  accent-1: '#FFE36B'
  on-primary: '#FFFFFF'
  line: '#E6E0DF'
  accent-2: '#D74D93'
  primary-accessible: '#D03A8B'
  secondary-accessible: '#E1226A'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.05em
  accent:
    fontFamily: Oswald
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.0
  body-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  headline-sm:
    fontFamily: Playfair Display
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.0
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  band-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    height: 56px
  circle-badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.full}'
    height: 160px
  feature-tag:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 40px
  pill-label:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.full}'
    height: 36px
  pressure-number:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 40px
  laurel-badge:
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 120px
  logo-grid-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 260px
  faq-item:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 110px
---

# DESIGN.md — 桃色グラデの敏感肌向け着圧ウェアLP（Soft Pink Cotton Compression Wear LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、情報量多め・訴求型
- **キーワード**: ピンクグラデーション・マゼンタ帯・白フチ太字・数値の書き込み・円形バッジ・女性向け
- **地の質感**: 柔らかいピンクのグラデーションと光のぼかし。写真は明るく、生成り色のニット素材で温かみを出す
- **形**: 円形の説明バッジ、角丸の帯、下向き三角の吹き出し付き見出し帯、ピル型ラベル
- **温度感**: 暖かく甘い。ピンク系で統一し、黒い商品をくっきり見せる

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#D1408F` | 見出し帯・ブランドを代表するマゼンタ | 8% | 画素の実測 |
| `secondary` | `#EC75A2` | 円形バッジ・中間ピンクの面 | 14% | 画素の実測 |
| `background` | `#F0F4F7` | 写真セクションの淡いグレー地 | 11% | 画素の主要色に補正 |
| `background-alt` | `#FACECF` | 淡いピンクの地 | 8% | 画素の主要色に補正 |
| `surface` | `#FEFEFE` | カード・ロゴ一覧の白い面 | 10% | 画素の実測 |
| `tint-1` | `#FCDCDC` | サブ見出し帯のごく淡いピンク | 5% | 画素の実測 |
| `tint-2` | `#F4B3C5` | グラデーションの中間ピンク | 6% | 画素の主要色に補正 |
| `text` | `#3C2E36` | 本文・数値の濃いこげ茶 | 7% | 画素の主要色に補正 |
| `accent-1` | `#FFE36B` | 強調語の黄色 | 0% | 推定 |
| `on-primary` | `#FFFFFF` | 帯上の白文字 | 2% | 画素の主要色に補正 |
| `line` | `#E6E0DF` | カードの細い区切り線 | 1% | 画素の主要色に補正 |
| `accent-2` | `#D74D93` | 円内の強調ピンク文字 | 0% | 画素の主要色に補正 |
| `primary-accessible` | `#D03A8B` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#E1226A` | AA を満たす補正値（計算） |  | 計算 |

- 地は淡いピンクのグラデーションで統一。写真セクションだけ淡いグレー地にする
- セクション見出しの帯はマゼンタ(primary)の全幅帯に白文字
- 機能を説明する円形バッジはsecondaryに白文字。キーワードだけ黄色かマゼンタで強調
- 圧力の数値は黒っぽいこげ茶の極太文字に白フチを付ける
- ロゴ一覧とQ&Aの答えは白いカードに置き、情報を読みやすくする
- 寒色や原色の赤は使わない
- `band-heading` は文字 `#FFFFFF` × 背景 `#D1408F` のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D03A8B`、4.51:1）を使う。
- `circle-badge` は文字 `#FFFFFF` × 背景 `#EC75A2` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E1226A`、4.53:1）を使う。
- `feature-tag` は文字 `#FFFFFF` × 背景 `#EC75A2` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E1226A`、4.53:1）を使う。
- `pill-label` は文字 `#D1408F` × 背景 `#FEFEFE` のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D03A8B`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ロゴ風の大見出し（白フチ付き） | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.02em |
| `headline-lg` | マゼンタ帯の見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.1em |
| `headline-md` | 機能を示す白抜きの太字コピー | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.05em |
| `accent` | 圧力などの数値（hPa） | 装飾・ディスプレイ | Oswald | 700 | 32px | 1.0 | 0.0em |
| `body-lg` | 円形バッジ内の説明 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.5 | 0.08em |
| `body-md` | Q&Aの回答などの本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.03em |
| `note` | 試験結果などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `headline-sm` | 実績バッジ内の大きな数字 | 欧文セリフ | Playfair Display | 700 | 40px | 1.0 | 0.0em |

- 写真の上に置く文字には、白か濃いピンクのフチか影を必ず付ける
- 数値は大きく、単位のhPaは数値の半分くらいの大きさにする
- 帯見出しは字間を0.1em前後あけて落ち着いて見せる
- 強調語にはルビ風の小さい補足語を上に添える
- 本文は13px前後にとどめ、訴求は太字の短いフレーズで伝える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。機能の円バッジは写真の上に左右交互に配置
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションの頭にマゼンタの全幅帯見出しを置く
- 写真は全幅で配置し、余白にバッジや数値を重ねる
- ロゴ一覧やQ&Aは白いカードの中に左右16pxの余白で入れる
- 円バッジ2つの間に白い×印を置いて組み合わせを表す

## Elevation & Depth

- 影はほとんど使わず、円バッジのまわりに淡いピンクの光のぼかしを付ける
- 文字には白フチや薄い影を付けて立体的に見せる
- 白いカードは影なしのフラット

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 角版の全幅写真か、白背景の切り抜き。説明図は正円
- **セクション境界**: 全幅の帯と、下向き三角の吹き出しで区切る
- 説明は正円のバッジに入れる
- 商品ラベルは白いピル型にピンク文字
- Q&AのQとAは円形マークにする
- 訴求タグは右端が丸い半ピル形の帯にする

## Components

- **帯見出し**（`band-heading`）: 全幅のマゼンタ帯に白文字。下中央に三角の吹き出しを付ける
- **円形説明バッジ**（`circle-badge`）: 直径160px前後の正円。白文字の中でキーワードだけ黄色にする
- **訴求タグ帯**（`feature-tag`）: 左寄せの半ピル型の帯。大きな白太字の後に小さな補足語を続ける
- **商品名ラベル**（`pill-label`）: 白いピル型にマゼンタ文字。帯見出しの左に置く
- **圧力数値表示**（`pressure-number`）: 写真の脚に白いリング線を描き、その横に極太の数値と小さい単位を置く
- **実績月桂冠**（`laurel-badge`）: 白い月桂冠の線画で大きなセリフ体の数字を囲む
- **取扱店ロゴカード**（`logo-grid-card`）: ピンクの見出し帯の下に白いカードを置き、ロゴを4列で並べる
- **Q&A項目**（`faq-item`）: Qはマゼンタ帯に白い円マークと白文字。Aは淡いピンクのカードにピンクの円マーク

## Do's and Don'ts

**Do**
- 色はピンクとマゼンタの濃淡でまとめる
- 機能は数値と図で写真に直接書き込む
- 円バッジ2つを×でつないで組み合わせのメリットを見せる
- 写真上の文字には白フチを付けて読みやすくする
- 実績は月桂冠と大きな数字で権威づけする

**Don't**
- 寒色をアクセントに使わない
- 角ばった硬いボックスを多用しない
- 長い本文を写真の上に置かない
- 数値を細い書体で小さく書かない
- 影の濃いカードは使わない

## Page Structure

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

1. **ファーストビュー**（商品の特徴と圧力の数値をひと目で伝える）: 全幅の着用写真に白フチの大ロゴと訴求タグ帯を重ね、数値とリング線を描き込む
2. **第2商品のビジュアル**（もう一つの商品タイプを同じ型で見せる）: 写真の左右を反転し、同じ構成で繰り返す
3. **ブランド導入**（シリーズの新商品であることと、肌へのやさしさを伝える）: 商品写真とピンク地の中央寄せコピー、円形の吹き出しを組み合わせる
4. **開発の想い**（悩みに寄り添う開発背景と素材の根拠を示す）: ピンクのグラデーション地に黄色の強調コピー、右に円形に切り抜いた人物写真、下に注釈
5. **商品1の特長**（構造と段階的な着圧を説明する）: ピル型ラベル付きの帯見出し、切り抜き写真、円バッジ2つを×でつなぎ、斜めのキャプションを添える
6. **商品2の特長**（サポート機能を説明する）: 同じ型で、写真の左に数値、右に円バッジを縦に並べる
7. **パッケージ紹介**（売り場で見つけやすいことを伝える）: 帯見出しを段々に重ね、パッケージ写真2点を並べる
8. **実績**（販売数とランキングで信頼を得る）: ピンク地に白い月桂冠バッジ2つ、右にシリーズ商品の写真
9. **取扱店舗**（身近な店で買えることを示す）: ピンクの見出し帯と白カードに、ロゴを4列で並べる
10. **よくある質問**（使い方とサイズの不安をなくす）: 白カードの中にQ帯とA欄を4項目。サイズ表はマゼンタ×淡いピンクの表にする

## Imagery

- 明るい室内で、生成りのニットを着た女性が黒い商品を着用した写真
- 白背景で脚だけを切り抜いた商品写真
- 脚に白い半透明のリング線を数本描いて着圧を表す
- 円バッジの背後にピンクの光のぼかしを置く
- 白い線画の綿花イラストをロゴの飾りに使う
- パッケージは正面から撮り、淡いピンク地に並べる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- 元はPC版の1カラム（幅700px程度）。SPでもほぼ同じ縦の流れで組む
- SPでは円バッジを直径140〜160pxにし、写真に重ねる配置は残す
- ロゴ一覧はSPで3列にする
- PCでは中央固定幅のまま、左右をピンクのグラデーションで埋める
- 大ロゴはSPで画面幅の60%程度にする

## 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-29a8d110`（元 LP の URL から採番）
- **元 LP**: https://item.rakuten.co.jp/glamorousseries/ryo-omoi/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（4/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

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

似た LP の design.md

ファッション・アクセサリー桜色×淡青の雑誌風ベビー服 LPSoft Pastel Editorial Baby Apparel LP ファッション・アクセサリーミントティール×黒の機能性サンダル LPTeal Glass Active Footwear LP ファッション・アクセサリー7色帯で切り替えるTシャツ特集LPColor-Block Category Catalog Apparel LP ファッション・アクセサリーくすみブルー×液体シェイプのネイル・アクセ LPPastel Fluid Shapes Accessory & Nail LP ファッション・アクセサリースマイル花柄×原色ポップのアパレルコラボLPMaximal Happy Pop Fashion Collab LP ファッション・アクセサリー生成り×ボルドーのバレンタイン部屋着特集 LPValentine Burgundy Editorial Roomwear LP