--- version: alpha name: Rose Gold Glam Cosmetic Offer LP description: 黒地にきらめくローズゴールドのFVで高級感を出し、続く本文はピンクベージュと淡いグレーの地で柔らかく見せる化粧品の定期購入LP。明朝体の見出し、マゼンタのアクセント、緑の立体CTA、番号付きの特典カードが特徴で、情報量の多い訴求型。 colors: primary: '#D31963' dark-section: '#0A0404' secondary: '#960341' background: '#FFFFFF' background-alt: '#ECECEC' tint-1: '#FDD7CC' tint-2: '#FEF4F5' accent-1: '#FDA3A2' cta: '#4CAF2A' on-cta: '#F7FEF2' surface: '#FDFBF9' text: '#333333' accent-2: '#333240' marker: '#F7E08A' cta-accessible: '#398420' accent-1-accessible: '#ED0805' typography: display: fontFamily: Shippori Mincho fontSize: 72px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Great Vibes fontSize: 14px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 14px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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}' rounded: '{rounded.full}' height: 110px offer-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 560px badge-starburst: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px benefit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 80px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px testimonial-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 480px check-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px label-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 24px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 110px --- # DESIGN.md — 黒×ローズピンクの艶系ファンデーションLP（Rose Gold Glam Cosmetic Offer LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、情報量多め・訴求型、やさしい・柔らかい、ラグジュアリー・ダーク - **キーワード**: ローズゴールド・きらめき・明朝見出し・定期購入オファー・体験談・パール感 - **地の質感**: 光の粒・ボケ・クリスタル片・パールで艶を出し、淡いグラデーション地を重ねる - **形**: 円形バッジ、角丸の小さいカード、V字のセクション境界、吹き出し - **温度感**: 暖色寄り。ピンクベージュ主体で、黒とマゼンタで締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D31963` | ブランドのローズマゼンタ（帯・番号・強調） | 5% | 画素の実測 | | `dark-section` | `#0A0404` | FV・成分紹介の黒地 | 8% | 画素の実測 | | `secondary` | `#960341` | 特典後の深いワインレッド地 | 5% | 画素の実測 | | `background` | `#FFFFFF` | 本文の白地 | 16% | 画素の実測 | | `background-alt` | `#ECECEC` | 淡いグレー地 | 8% | 画素の実測 | | `tint-1` | `#FDD7CC` | オファー部のピンクベージュ地 | 9% | 画素の実測 | | `tint-2` | `#FEF4F5` | インタビュー・体験談の淡ピンク地 | 6% | 画素の実測 | | `accent-1` | `#FDA3A2` | サーモンピンクの帯・年齢バッジ | 4% | 画素の実測 | | `cta` | `#4CAF2A` | 購入ボタンの緑 | 1% | 推定 | | `on-cta` | `#F7FEF2` | 購入ボタンの白文字 | 0% | 画素の実測 | | `surface` | `#FDFBF9` | 特典カードの白面 | 7% | 画素の主要色に補正 | | `text` | `#333333` | 見出し・本文の濃い文字 | 3% | 推定 | | `accent-2` | `#333240` | 悩み・特徴セクションのくすみ紫 | 3% | 画素の実測 | | `marker` | `#F7E08A` | 体験談の黄色マーカー | 0% | 推定 | | `cta-accessible` | `#398420` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#ED0805` | AA を満たす補正値（計算） | | 計算 | - FVと全機能まとめのセクションは黒地にし、ローズゴールドの光のエフェクトを重ねる - オファー部はピンクベージュのグラデーション地に白カードを置き、ワインレッド地で締める - 強調語と特典番号はローズマゼンタ。価格もマゼンタで大きく見せる - 主CTAだけ緑の立体ボタンにして、ピンク系の中で一番目立たせる - 悩み・理由のセクションはグレーとくすみ紫で落ち着かせ、解決パートとトーンを分ける - 体験談の強調は黄色の下線マーカーと淡ピンクの帯の2種類だけ使う - `button-primary` は文字 `#F7FEF2` × 背景 `#4CAF2A` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#398420`、4.54:1）を使う。 - `circle-badge` は文字 `#FDA3A2` × 背景 `#FFFFFF` のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#ED0805`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きな漢字・価格数字 | 明朝 | Shippori Mincho | 600 | 72px | 1.1 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 500 | 30px | 1.35 | 0.08em | | `headline-md` | 体験談タイトル・特典タイトル | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.4 | 0.05em | | `headline-sm` | 帯ラベル・小見出し | ゴシック | Noto Sans JP | 500 | 16px | 1.4 | 0.05em | | `body-md` | 本文・体験談の文章 | ゴシック | Noto Sans JP | 400 | 13px | 1.75 | 0.03em | | `note` | 注釈（※） | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 番号ラベルの筆記体英字 | 欧文スクリプト | Great Vibes | 400 | 14px | 1.2 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 22px | 1.3 | 0.05em | - 見出しは明朝体で字間を広めに取り、上品に見せる - 見出しの中で強調する語だけサイズを1.5倍にし、ひらがなは小さくする - 価格はイタリック気味のセリフ数字でマゼンタにし、とても大きく置く - 本文は13px前後のゴシック体で、行間1.7以上 - 注釈は※付きの小さいグレー文字で各ブロックの下に入れる - 見出しの左右に斜線「＼ ／」を置いて強調する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特徴や手順は 3 列の小さいグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算） - セクションごとに地の色を切り替えて区切る - 特典は横長カードを縦に5つ並べ、左にマゼンタの番号タブを付ける - 体験談は写真の円と本文を左右交互に配置する - オファーブロックは白カードに商品画像、価格、CTAをまとめる - 写真の上に文字を直接重ねるときは、明るい側を余白にする ## Elevation & Depth - 特典カードとオファーカードに薄い影（0 2px 6px rgba(0,0,0,.1)） - CTAボタンは緑のグラデーションに強めの影とハイライトで立体的に見せる - 円形バッジに淡い影を付けて浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は円形に切り抜くか、白枠を付けて少し傾けた写真にする。商品は切り抜き - **セクション境界**: V字（下向き三角）の境界と、レースのような波線 - CTAは円に近い角丸の緑ボタンにし、下向き三角を入れる - 効果バッジは白い円にピンクの明朝文字 - 見出し帯は角丸の帯か、下向き三角が付いた吹き出し型 - 年齢バッジはピンクの円かハート型 ## Components - **緑の立体CTA**（`button-primary`）: 円に近い形の緑グラデーション。白い太字2行と下向き三角 - **価格オファーカード**（`offer-card`）: 明朝のタイトル、限定数、取り消し線の通常価格、マゼンタ帯の割引率、大きな価格 - **ギザギザ特典バッジ**（`badge-starburst`）: マゼンタのギザギザ円に白文字3行 - **番号付き特典カード**（`benefit-card`）: 左にマゼンタの縦タブ（筆記体のラベルと大きな数字）、右に白地の特典文 - **効果の円形バッジ**（`circle-badge`）: 白い円にピンクの明朝で効果を2〜3語、横に3つ並べる - **体験談ブロック**（`testimonial-card`）: 淡ピンクのタイトル帯、円形の顔写真、年齢バッジ、マーカー付きの本文、点線の区切り - **悩みのチェックリスト**（`check-list`）: グレーの枠内に、マゼンタのチェックと点線区切りで4行 - **番号見出しラベル**（`label-tab`）: 筆記体の大きな数字に、マゼンタの帯ラベルを重ねる - **効果の吹き出し**（`speech-bubble`）: 白い楕円の吹き出しで、マゼンタの強調語に黄色のマーカー ## Do's and Don'ts **Do** - FVは黒地とローズゴールドのきらめきで、高級コスメ感を出す - 見出しは明朝体、強調語はマゼンタで大きくする - オファー＋特典のブロックはページの冒頭と末尾の2回置く - 体験談には顔写真・名前・年齢バッジ・マーカーを必ず付ける - 効果をうたう箇所の下に※の注釈を付ける **Don't** - CTA以外に緑を使わない - 寒色を強調色に使わない（図解の補助ならよい） - 見出しを太いゴシックにして高級感をなくさない - 写真を角張った枠のまま並べるだけにしない - ピンク地に背景と同じ明るさのピンク文字を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の革新性を印象づける）: 黒地にクリスタル片と光の粒。縦長の商品ボトル、明朝の大きな漢字、効果の円形バッジ3つ 2. **ベネフィット紹介**（仕上がりのイメージを伝える）: 淡ピンク地にモデルの顔写真と短い文を数行 3. **リニューアル告知**（進化した点を示す）: パール調の地に商品画像。成分の円形バッジ3つ 4. **オファー・特典**（価格と特典で申込を促す）: ピンクベージュ地の価格カード、緑のCTA、番号付きの特典カード5枚、ワインレッド地の変更OK案内 5. **悩みの提起**（共感を得る）: グレー地のモノクロ人物写真、チェックリスト、紫地に円形写真3つ 6. **解決策の提示**（商品の登場）: 白地にピンクの水彩しみ。ブランド名をマゼンタの大きな文字で、左右に斜線 7. **メディア掲載**（権威付け）: 雑誌の表紙を少しずつ重ねて斜めに配置 8. **モニターインタビュー**（実際の使用感を伝える）: 吹き出し型の見出し、傾けた写真、マーカー付きの本文 9. **使い方・変化**（簡単さを見せる）: 3ステップの写真を矢印でつなぐ 10. **仕組み・成分**（根拠を説明する）: 濃いグレーの枠内に構造図と引き出し線のラベル 11. **肌悩みの理由と特長**（悩みと機能を結び付ける）: 紙の質感の地に線画イラスト。ダイヤ・パールの写真に番号付きの特長3つ 12. **効果まとめ・ビフォーアフター**（多機能さを実感させる）: 商品の周りに吹き出しを6つ配置。Before/Afterのラベル付き写真 13. **お客様の声**（信頼を補強する）: 体験談3件を写真の左右交互で並べる 14. **機能一覧・容器**（価値をまとめる）: 黒地の中央に商品、機能を左右に8つ。花のイラストを添えた容器の図解 15. **クロージングCTA**（最後のひと押し）: 冒頭のオファー・特典ブロックを再掲する ## Imagery - 商品はローズゴールドの光沢ボトルを切り抜き、光の粒やレンズフレアを重ねる - モデルは白背景で肌のツヤが分かる明るい美容写真 - 体験談は自然光で撮った一般女性の笑顔を円形に切り抜く - 悩みのパートはモノクロや低彩度の写真と線画イラスト - ダイヤモンド・パール・ボケの装飾で艶を表現する - 図解はパステルの円や粒で描くフラットなイラスト - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像はないため、SPのデザインを中央の幅750px程度に固定し、左右には背景色を延長する方法を推奨 - 特典カード・体験談は最大幅を640px程度に抑える - 3つ並びのバッジ・写真は、PCでも3列のまま余白を広げる - CTAは追従させず、各オファーブロック内に置く ## 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-44a9e69c`（元 LP の URL から採番） - **元 LP**: https://sukoyakajiman.com/shopping/lp.php - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。