--- version: alpha name: Pastel Kawaii Idol Color Contact LP description: 水色・ピンク・ラベンダーのパステルグラデーションを地にしたカラコン LP。ぷっくりした立体ピンク文字、ハート・リボン・鍵・南京錠のガラス風装飾、インフルエンサーの大判写真で、地雷・量産系の甘くキラキラした世界観を作っている。カラーごとに色テーマを切り替えて、紹介ブロックを繰り返す構成。 colors: primary: '#E8559A' secondary: '#5BB8E0' background: '#FEFEFE' background-alt: '#FEFEFE' tint-1: '#FACAF2' tint-2: '#ECDDFC' accent-1: '#AD65D3' accent-2: '#E84A9A' accent-3: '#8E6A9A' text: '#231E2B' dark-section: '#231E2B' line: '#A1C0D3' marker: '#D7BEC9' primary-accessible: '#DF1E79' accent-3-accessible: '#8D6899' secondary-accessible: '#1F7EA6' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 34px fontWeight: 800 lineHeight: 1.25 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Great Vibes fontSize: 36px fontWeight: 400 lineHeight: 1.1 headline-sm: fontFamily: Playfair Display fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 14px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' puffy-headline: textColor: '{colors.primary}' typography: '{typography.display}' height: 120px script-section-title: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 80px spec-chip: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 34px check-list-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px point-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 220px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 110px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 140px badge-heart: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px ticker-band: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 28px --- # DESIGN.md — 水色×ピンクのぷっくり甘めカラコン LP（Pastel Kawaii Idol Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: パステルグラデーション・ぷっくり立体文字・ハートとリボン・ガラス風キラキラ・カラー別テーマ - **地の質感**: 光沢のあるガラス・ジェル風の質感。レースやホログラム、グリッターを重ねた柔らかい地。 - **形**: ハート、リボン、波線フレーム、角丸カード、円形のレンズ画像 - **温度感**: 甘く明るい。水色で清涼感、ピンクで甘さを出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E8559A` | ブランドのピンク（見出し・強調文字） | 6% | 推定 | | `secondary` | `#5BB8E0` | 水色（アクセント見出し・リボン） | 5% | 推定 | | `background` | `#FEFEFE` | 白の地・カード面 | 10% | 画素の実測 | | `background-alt` | `#FEFEFE` | 淡い水色の地 | 9% | 画素の実測 | | `tint-1` | `#FACAF2` | 淡いピンクの地（ハニー系） | 8% | 画素の実測 | | `tint-2` | `#ECDDFC` | ラベンダーの地（チェリー系） | 7% | 画素の実測 | | `accent-1` | `#AD65D3` | 紫の強調文字 | 2% | 画素の実測 | | `accent-2` | `#E84A9A` | 濃ピンクのバッジ・ラベル帯 | 2% | 推定 | | `accent-3` | `#8E6A9A` | スペック表記のくすみ紫 | 1% | 推定 | | `text` | `#231E2B` | 本文の濃いグレー | 3% | 画素の主要色に補正 | | `dark-section` | `#231E2B` | 流れるテキスト帯の濃紺 | 1% | 画素の主要色に補正 | | `line` | `#A1C0D3` | カードの水色点線・枠 | 1% | 画素の主要色に補正 | | `marker` | `#D7BEC9` | チェックボックスの淡色帯 | 2% | 画素の主要色に補正 | | `primary-accessible` | `#DF1E79` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#8D6899` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#1F7EA6` | AA を満たす補正値（計算） | | 計算 | - 地は水色・ピンク・ラベンダーのパステルにし、グラデーションでつなぐ。 - カラーごとに色テーマを決める。クール系は水色、甘め系はピンク、チェリー系はラベンダー。 - 大見出しはピンクの立体グラデ文字にし、補助語だけ水色にする。 - 本文は濃グレー、強調語はピンクか紫で太くする。 - 濃色は細いテキスト帯だけに使い、面積は 1% 程度にとどめる。 - スペック数値はくすみ色のセリフ体で控えめに見せる。 - `script-section-title` は文字 `#E8559A` × 背景 `#FEFEFE` のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1E79`、4.53:1）を使う。 - `spec-chip` は文字 `#8E6A9A` × 背景 `#FEFEFE` のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#8D6899`、4.55:1）を使う。 - `point-circle` は文字 `#E8559A` × 背景 `#FACAF2` のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1E79`、4.56:1）を使う。 - `ticker-band` は文字 `#5BB8E0` × 背景 `#FEFEFE` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#1F7EA6`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の立体キャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.1 | 0.0em | | `headline-lg` | セクションの訴求見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 34px | 1.25 | 0.02em | | `headline-md` | カラー名・カード見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.02em | | `accent` | 英字の筆記体ロゴ風見出し | 欧文スクリプト | Great Vibes | 400 | 36px | 1.1 | 0.0em | | `headline-sm` | スペック数値・英字カラー名 | 欧文セリフ | Playfair Display | 600 | 16px | 1.4 | 0.04em | | `body-md` | コメント・チェックリスト | ゴシック | Noto Sans JP | 500 | 15px | 1.6 | 0.03em | | `note` | 機能説明・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 大見出しは白フチと光沢を付けたぷっくりグラデ文字にする。 - 英字見出しは筆記体かピクセル風の装飾体を使い、両脇にキラ星を置く。 - 語尾にハートの記号を付けて甘さを出す。 - スペックは「項目：数値」の形でセリフ体を使う。 - 助詞は小さく、キーワードは大きくしてジャンプ率を高くする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧と機能カードは 2 カラム、アイコンは 4 列。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 40px、基本単位 8px、カード内 14px（375px 幅換算） - 写真は全幅で大きく見せる。 - カラー紹介は「大判写真→スペック3枠→2×2写真グリッド→フレーム写真→チェックリスト」の順で繰り返す。 - 各ブロックの終わりに、ハートを並べた小さな区切り行を置く。 - 機能説明は左アイコン＋右テキストの横長カードにする。 - 比較チャートは方眼地に、レンズ画像を座標配置する。 ## Elevation & Depth - カードには淡い影と白フチを付け、浮いて見せる。 - レンズ円画像には白縁とドロップシャドウを付ける。 - ハートやリボンにはガラス風のハイライトを入れる。 - 影は強くせず、ふんわり拡散させる。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物は全幅の矩形。レンズは円形。メイク写真は角丸のタグ型フレームか波線フレームに入れる。 - **セクション境界**: 上辺をスカラップ（波形）にした帯か、レース柄で切り替える。 - ハート型の吹き出しにプロフィール文を入れる。 - 波線で縁取ったフレームの中に写真を置く。 - スペック枠は小さな矩形に並べ、左上にリボンを付ける。 ## Components - **ぷっくり立体見出し**（`puffy-headline`）: ピンクのグラデに白フチと光沢を付けた大見出し。周りにガラスハートを散らす。 - **筆記体セクション見出し**（`script-section-title`）: 英字の筆記体見出しをハートやリボンの装飾で囲み、両脇にキラ星を置く。 - **スペック枠**（`spec-chip`）: 直径などの数値を 3 枠横に並べる。白地にリボンを付ける。 - **チェックリストカード**（`check-list-card`）: 半透明の角丸カードに、チェックボックス付きの特長を 3 行並べる。右端にレンズ画像をはみ出させる。 - **3ポイント円**（`point-circle`）: 淡色の円の中にレンズ画像と point 番号、小見出し、説明を入れ、3 列に並べる。 - **機能アイコンカード**（`feature-card`）: 線画アイコンと見出し・説明文を入れた白い角丸カード。2 列に並べる。 - **悩み吹き出し**（`speech-bubble`）: 点線で囲んだ吹き出しに、イラストの人物と悩みの文を入れる。 - **ハートバッジ**（`badge-heart`）: 水色ガラスのハートの中に実績の短い語を入れる。 - **流れるテキスト帯**（`ticker-band`）: 英字のフレーズをハートで区切って横に流す、細い帯。 ## Do's and Don'ts **Do** - 色テーマはカラー（商品）ごとに水色・ピンク・紫で切り替える。 - ハート・リボン・鍵・南京錠のガラス風モチーフを散らす。 - 見出しにはキラ星や光の装飾を添える。 - レンズは円形にし、白縁と影を付けて並べる。 - テキストには語尾にハートを付け、甘い口調で書く。 **Don't** - 黒や原色の大きな面を使わない。 - 角の立った硬い四角カードや直線的な区切りを多用しない。 - 明朝体だけで落ち着いたトーンにしない。 - 装飾のない平坦な見出しにしない。 - 写真を小さくしすぎない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（モデルと新作の強みを一目で伝える。）: モデル写真を全幅に置き、下に立体キャッチ、3 色のレンズ写真、大きな数値訴求を重ねる。 2. **カラーラインナップ概要**（新色 3 種を紹介する。）: 色テーマ別の帯に、目元写真・レンズ円・スペック・一言コメントを並べる。 3. **悩みの提起と解決**（悩みに共感し、解決策を示す。）: 吹き出しとイラストで悩みを見せ、大見出しで解決を訴求する。 4. **3つのポイント**（レンズの特長を整理する。）: 点線枠のカードに、円形ポイントを 3 列で並べる。 5. **カラー別詳細（繰り返し）**（各色の世界観と着用感を見せる。）: 大判写真、スペック枠、2×2 グリッド、フレーム写真、チェックリストの順で並べる。 6. **レンズスペック**（機能面の安心感を伝える。）: レース柄の地に、メイン機能の横長カードと 2 列の機能カードを置く。 7. **全カラー一覧**（シリーズ全色を比較させる。）: 2 列のグリッドに目元写真・レンズ円・英字名・カナ名を並べ、New バッジを付ける。 8. **プロデュースカラー**（シリーズ別の素材と機能を伝える。）: スカラップ帯で切り替え、レンズを横に並べ、4 列の機能アイコンを置く。 9. **プロデューサー紹介**（人物の実績で信頼を高める。）: 風船の写真、封筒モチーフ、ハート型の吹き出しにプロフィール文を入れる。 10. **カラーチャート**（明るさとサイズで比較させる。）: 方眼の白カードにレンズを座標配置し、縦軸ラベルと横軸のグラデバーを付ける。 ## Imagery - 人物は正面寄りのアップ。透明感のある肌に、ぷっくりした艶リップのメイクで撮る。 - 背景はパステルの無地。リボンや風船、レースを添える。 - 目元はマクロで撮り、まつげを強調する。 - レンズ写真は白抜きの円形にし、ドット感のある縁を見せる。 - ガラスのハートや鍵、リボンの 3D オブジェクトをちりばめる。 - イメージ素材（氷・はちみつ・さくらんぼ）を色テーマごとに使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 480〜600px 幅の SP 画像カラムを置き、左右はパステルのグラデで埋める。 - 広げる場合でも、カラー一覧は 3〜4 列までにする。 - 機能アイコンは PC で横一列に並べる。 - 大判写真は最大幅を決めて中央に置く。 ## 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-c050dc2b`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/PRIMORE/PRIMORE1day/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（5/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。