--- version: alpha name: Sweet Pink Idol Color Contact LP description: 濃淡ピンクのグラデーション地にハートとリボンを散らした、アイドルプロデュース系カラコンの縦長 LP。カラーごとにピンク・オレンジ・グリーンのテーマ色を切り替え、白フチ付きの太い丸ゴシックと立体ロゴ風の欧文で「推し」感を出す。 colors: primary: '#E2588C' on-primary: '#FFF7FF' background: '#F6D4DB' background-alt: '#F9DDE5' secondary: '#E94A8A' accent-1: '#F4A343' accent-2: '#5DAE4F' tint-1: '#D9DDCB' tint-2: '#FAF3E1' text: '#D94F80' text-body: '#281F1C' surface: '#FCF0F3' secondary-accessible: '#DD1B69' primary-accessible: '#D9266A' text-accessible: '#CE2C66' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Playfair Display fontSize: 36px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em headline-md: fontFamily: Lobster fontSize: 40px fontWeight: 400 lineHeight: 1.0 headline-sm: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Kiwi Maru fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heart-price: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 200px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px crown-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px tag-callout: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px spec-chip: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 28px check-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 180px feature-row: textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 110px spec-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — ピンク×ハートのアイドル系カラコン LP（Sweet Pink Idol Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: ピンクグラデーション・ハート散らし・リボン・白フチ文字・カラー別テーマ色・瞳アップ写真 - **地の質感**: ぼかしたハートのボケ背景と柔らかいグラデーション。光沢のある甘い質感。 - **形**: ハート型、リボン、ピル型ラベル、タグ型吹き出し、丸く切り抜いたレンズ・瞳。 - **温度感**: 暖色寄りで甘い。カラー別にオレンジとミントグリーンで変化をつける。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E2588C` | ブランドピンク（見出し・ラベル） | 6% | 推定 | | `on-primary` | `#FFF7FF` | ピンク地上の白文字 | 2% | 画素の実測 | | `background` | `#F6D4DB` | 淡ピンクの基本地 | 25% | 画素の実測 | | `background-alt` | `#F9DDE5` | オフホワイトのやわらかい地 | 8% | 画素の実測 | | `secondary` | `#E94A8A` | 濃いマゼンタピンク（リボン・ハート） | 4% | 推定 | | `accent-1` | `#F4A343` | 2色目のテーマオレンジ | 3% | 画素の実測 | | `accent-2` | `#5DAE4F` | 3色目のテーマグリーン | 3% | 推定 | | `tint-1` | `#D9DDCB` | グリーン系セクション地 | 6% | 画素の主要色に補正 | | `tint-2` | `#FAF3E1` | オレンジ系セクション地 | 6% | 画素の実測 | | `text` | `#D94F80` | ピンク系本文・見出し文字 | 2% | 推定 | | `text-body` | `#281F1C` | ダークブラウン本文 | 2% | 画素の主要色に補正 | | `surface` | `#FCF0F3` | スペック表の白セル | 3% | 画素の実測 | | `secondary-accessible` | `#DD1B69` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#D9266A` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#CE2C66` | AA を満たす補正値（計算） | | 計算 | - 地は淡ピンクのグラデーションを基本にし、白やオフホワイトへ縦に移ろわせる。 - 見出し・ラベル・スペック表の項目セルは primary のピンクで統一。 - 商品カラー別セクションはピンク・オレンジ・グリーンのテーマ色で地と見出し色を切り替える。 - 大見出しは色文字に白の太フチとピンクの影を重ねて目立たせる。 - 黒や濃色の面は使わず、本文だけダークブラウンにする。 - 価格の訴求は濃いマゼンタのハート面に白文字で置く。 - `heart-price` は文字 `#FFF7FF` × 背景 `#E94A8A` のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#DD1B69`、4.51:1）を使う。 - `pill-label` は文字 `#FFF7FF` × 背景 `#E2588C` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D9266A`、4.51:1）を使う。 - `crown-badge` は文字 `#D94F80` × 背景 `#FCF0F3` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#CE2C66`、4.52:1）を使う。 - `tag-callout` は文字 `#E2588C` × 背景 `#FCF0F3` のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D9266A`、4.55:1）を使う。 - `spec-chip` は文字 `#FFF7FF` × 背景 `#E2588C` のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D9266A`、4.51:1）を使う。 - `check-card` は文字 `#E2588C` × 背景 `#FCF0F3` のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#D9266A`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・訴求の大見出し（白フチ＋影付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | 英字のセクション見出し | 欧文セリフ | Playfair Display | 800 | 36px | 1.2 | 0.04em | | `headline-md` | カラー名の立体ロゴ風欧文 | 欧文スクリプト | Lobster | 400 | 40px | 1.0 | 0.0em | | `headline-sm` | カード見出し・特長ラベル | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.35 | 0.05em | | `body-md` | 本文・説明文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.7 | 0.03em | | `accent` | 斜めに置く手書き風の吹き出しコピー | 丸ゴシック | Kiwi Maru | 500 | 20px | 1.4 | 0.02em | | `note` | 注意事項・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | - 大見出しは極太の丸ゴシックに白の太フチをつけ、少し傾けて配置する。 - 見出しの一部の語だけを大きくし、文字サイズに強弱をつける。 - 文末にハート記号を添えて甘い口調にする。 - 英字の見出しは太いセリフ体を大文字で、ピンク一色にする。 - カラー名は立体感のあるレトロ調スクリプトで、テーマ色のグラデーションにする。 - 本文は中央揃えで短く改行する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較とスペック表だけ 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 写真はほぼ全幅で、文字や切り抜き素材を重ねて組む。 - カラー紹介は瞳アップとレンズの丸い切り抜きを左右交互に並べる。 - 吹き出しやタグを斜めに置いて動きを出す。 - 装用前後の比較は 2 カラムの角丸カードにする。 - 特長はアイコン円を左、ラベルと説明を右に置く横並びにする。 ## Elevation & Depth - 白フチと淡いピンクのドロップシャドウで文字を浮かせる。 - アイコン円には白く光るぼかし影をつける。 - カードには薄い影と白いレースの縁をつける。 - レンズ画像には柔らかい影をつけて立体感を出す。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 瞳アップは楕円形または角丸、レンズは正円に切り抜く。人物は背景を抜いた切り抜き。 - **セクション境界**: 直線の境界でグラデーション色を切り替える。リボンやハートを境界にまたがって置く。 - ラベルはピル型か、端をリボン状に切った帯にする。 - 価格はハート型の面に入れる。 - 注釈タグは値札のような五角形タグにして、引き出し線をつける。 ## Components - **ハート型価格バッジ**（`heart-price`）: マゼンタのハート面に、1日あたりの価格を特大の数字で入れ、下にリボン帯で総額を書く。 - **ピル型見出しラベル**（`pill-label`）: ピンクのグラデーションのピル型に白文字を入れ、特長名やコピーを置く。 - **王冠付き丸バッジ**（`crown-badge`）: 上に王冠をのせた白い丸の中に、カラーの位置づけを 2 行で入れる。 - **タグ型注釈**（`tag-callout`）: レンズ画像から引き出し線を伸ばし、白い値札型タグで特徴を 2 行で示す。 - **スペック帯**（`spec-chip`）: テーマ色の淡い帯に、直径などの数値を白いセリフ体で入れる。 - **チェック付き予定カード**（`check-card`）: レース縁の白カードにチェックマークと見出しを置き、手帳を拡大する虫眼鏡風の円を重ねる。 - **特長アイコン行**（`feature-row`）: 白く光る円にピンクの線のアイコンを置き、右にピル型ラベルと説明文を並べる。 - **スペック表**（`spec-table`）: 項目はピンクのセルに白文字、値は白いセル。角丸で 1〜2 列を組み合わせる。 ## Do's and Don'ts **Do** - ハート・リボン・王冠・パールなどの甘いモチーフを背景に散らす。 - カラーごとにテーマ色を決め、地・見出し・帯をその色でそろえる。 - 大きなコピーには白フチと影をつけ、写真の上でも読めるようにする。 - 瞳アップとレンズ単体の画像を必ずセットで見せる。 - 数値スペックは小さな帯やチップにまとめる。 **Don't** - 黒・紺などの重い面や、角ばった直線的な装飾は使わない。 - 細い明朝体だけで見出しを作らない。 - テーマ色以外の原色を増やさない。 - 文字を写真にフチなしで直接のせない。 - 余白の多いミニマルな構成にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（プロデューサーの人物と新商品の発売を伝える）: ピンクのボケ背景に人物写真を全幅で置き、白フチの大見出しを重ねる。下にレンズ 3 色の円と、カラー名、スペック帯を並べる。 2. **発売の告知**（人気カラーの新タイプ登場を期待感とともに伝える）: 大きなリボンとレースの円フレームの中に中央揃えの見出しと短い声を置き、人物とレンズを下に並べる。 3. **ラインナップ概要**（3 色の特徴を一覧で見せる）: 英字見出しの下に、カラーごとに王冠バッジ・ロゴ風カラー名・瞳アップ・レンズ拡大とタグ注釈を左右交互に配置する。地はテーマ色のグラデーション。 4. **価格訴求**（コスパのよさを示す）: 斜めの白フチコピー、人物の切り抜きと吹き出し、ハート型の価格バッジとリボン帯で構成する。 5. **利用シーン**（毎日使える場面を想像させる）: チェック柄の背景に、手帳風の予定カード 3 枚をずらして重ねる。 6. **カラー詳細**（1 色ずつ着用イメージを深く見せる）: テーマ色の地に人物写真を全幅で置き、縦書きコピーと番号付きの縦書き英字を添える。ロゴ風カラー名、瞳とレンズ、全身の切り抜き、装用前後の比較 2 カラムを続ける。 7. **比較一覧**（裸眼と各色の違いを比べる）: 瞳写真の角丸カードを 2×2 で並べ、各カードにレンズ円とカラー名を添える。 8. **プロデューサー紹介**（信頼感と推しへの共感をつくる）: 大きなハート型の背景に人物の切り抜きを置き、リボン装飾の名前と中央揃えのプロフィールを続ける。 9. **特長**（機能面の安心感を伝える）: 光る円のアイコン、ピル型ラベル、説明文の行を 5 つ縦に並べる。 10. **スペック・注意事項**（仕様と法定の注意を示す）: ピンクと白の角丸セルの表、括弧付きの小見出し、小さな注意文、ロゴで締める。 ## Imagery - 人物はパールやリボン、白い手袋などの甘い小物を合わせ、ピンクのボケ背景で正面を向いたアイドル風のポートレートにする。 - 瞳は横長の超アップで撮り、まつ毛とカラーの発色を見せる。 - レンズ単体は白地に置いて正円に切り抜き、柔らかい影をつける。 - 背景にはぼかしたハート、白い小さなハート、斜めにした薄い英字（day/date/school など）を散らす。 - カラーごとに背景をピンク・ピーチ・ミントのボケで撮り分ける。 - アイコンはピンクの細い線で描いたシンプルな線画にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では幅 480〜600px の中央カラムに SP デザインをそのまま収める。 - 左右の余白は淡ピンクのグラデーションにハートを散らして埋める。 - 比較一覧は PC で 4 カラムに並べてもよい。 - 大見出しのサイズは最大 1.3 倍までに抑える。 ## 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-e53361de`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/melady/melady1month/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。