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