DESIGN.md — 黒ラメ×ネオンピンクの地雷系カラコン LP（Y2K Dark Glitter Devil Cute Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ラグジュアリー・ダーク、力強い・インパクト、情報量多め・訴求型
• キーワード: 地雷系・Y2K・黒ラメ・クローム装飾・ネオン発光文字・コラージュ
• 地の質感: 黒〜チャコールのラメ・ノイズ地に、銀クロームの金属光沢と紫ピンクのグロウ（外側発光）を重ねる
• 形: ハート・悪魔のツノと尻尾・炎・十字星を多用。スペックはピル型ラベル、カードは角丸の白い四角
• 温度感: 暗い地に甘い蛍光色を合わせた、少し毒のある甘さ

Colors

• 地はほぼ黒ラメとチャコールにし、明るい面はカラーごとのテーマ帯と白カードに絞る
• カラー紹介は色ごとに地を切り替える（ブルーラベンダー→ピンク→パープル）
• ネオンピンクとラベンダーは文字の発光グロウや帯ラベルに使い、広い面には塗らない
• 装飾は銀クロームで統一して、色付きの装飾は増やさない
• ラインナップの名前ラベルはパステル色をカラーごとに変え、色見本の役割も持たせる
• 白カードの文字は黒、黒地の文字は白にして、コントラストを確保する
• heart-badge は文字 #FAFAFA × 背景 #FD5CD3 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D7039F、4.57:1）を使う。
• copy-band は文字 #FAFAFA × 背景 #B395DB のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8A5CC8、4.53:1）を使う。

Typography

• 欧文見出しには白地に紫ピンクの外側グロウを付けて、ネオン管のように光らせる
• 装飾英字はクローム調か、ぷっくりした3D調にして画像として置く
• 和文キャッチは太い書体に白とピンクの二重縁取りを付ける
• 紹介コピーは1行ずつ半透明の帯に載せ、斜めに少しずつずらして並べる
• スペック数値はセリフ体の斜体で、単位は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップは 2 カラム、既存スペックは 4 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真セクションは全幅で見せ、装飾を画面の端からはみ出させる
• カラー紹介は、全幅写真→スペック行→コラージュ→黒地スペックカードの順でくり返す
• スペック行は左にピル型ラベル3段、右に目元写真を置く
• 白カード（左）と写真（右）を 1:1.1 程度で横に並べる
• ロゴ入りの区切りライン（ハートを点線状に並べる）でセクションを分ける

Elevation & Depth

• 白カードには影を付けず、黒い輪郭線だけで浮かせる
• コラージュ写真は白い縁取りと薄いドロップシャドウでステッカー風にする
• 文字には影の代わりに外側グロウを付ける
• クローム装飾はハイライトと影で立体感を出す

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 目元は角丸の四角、レンズは円、人物はステッカー風の切り抜きと全幅の四角
• セクション境界: 黒ラメ地へのフェード、緩い弧、ハートを並べた区切りライン
• スペックはピル型の帯に、悪魔ハートのアイコンを重ねる
• カラー名バッジは、ツノと炎が付いたハート型にする
• 比較チャートの背景は、上辺が弧になった銀グレーのパネル
• 特長はハート型アイコンと角丸カードを組み合わせる

Components

• スペックピルラベル（spec-pill）: 黒ハートのアイコン＋グラデーションのピル帯に、セリフ体斜体で数値を載せる
• ネオン発光カラー名（glow-title）: 白文字に紫ピンクのグロウを付けた、斜めの欧文カラー名
• 悪魔ハートバッジ（heart-badge）: ツノ・炎付きのハートに、和文の愛称を縁取り文字で入れる
• 白スペックカード（spec-card）: 上部にラメ色の帯とゴシック体欧文の見出し、下に数値や光源名を入れた白カード
• 紹介コピー帯（copy-band）: 半透明のラベンダー帯に白い太字を1行ずつ載せ、階段状に並べる
• カラー名ラベル（lineup-label）: 目元写真の下に置くパステル色のピル。太い欧文名と小さな和文名を入れる
• 特長ハートカード（feature-heart）: 蛍光色のハートアイコンと、同色の枠の角丸カードで機能を説明する
• チェキ風コラージュ（collage-polaroid）: UI風の白枠と♥♥♥ヘッダーの中に、小さい写真カードと切り抜き人物を重ねる

Do's and Don'ts

Do - 黒ラメ地をベースにして、色はカラーごとのテーマ帯でだけ大きく使う - クロームのハート・十字星・リボン・チェーンを、画面の端にランダムに散らす - レンズ単体の円形画像と目元の写真を必ずセットで見せる - スペックは毎回同じピル型の型でくり返し、比べやすくする - 欧文見出しには、グロウか3Dクロームのどちらかを必ず付ける

Don't - フラットな単色の白背景を広く使わない - 装飾に金色やビビッドな赤を混ぜない - 角のある硬いボタンや細いゴシック体だけの見出しにしない - 写真に余白を取りすぎて、雑誌のような静かなレイアウトにしない - グロウを本文の小さい文字に付けない

Page Structure

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

1. ファーストビュー（世界観と大きな直径を一瞬で伝える）: モデルの全幅写真に、縁取りの和文キャッチ、数値入りの悪魔ハートバッジ、マスコットを重ねる
2. 新色紹介（新色3色をまとめて見せる）: 黒ラメ地に筆記体の見出しを置き、レンズの円を3つ並べてスペックのピルを横に並べる
3. サイズ訴求（直径を強調する）: 黒い悪魔ハートに大きな数値を入れ、目元の比較写真2枚と中央揃えの説明文を置く
4. プロデューサー×目元（3色の着用イメージを見せる）: 銀グレーの地に、円形に切り抜いた目元3つをずらして配置する
5. レンズ分割図（色ごとの違いを図で見せる）: レンズを3分割した大きな円の周りに、色名を弧状の文字で配置する
6. カラー別紹介（×3）（色ごとの世界観とスペックを見せる）: テーマ色の全幅写真→発光カラー名→スペックピル→3D英字のチェキコラージュ→紹介コピー帯
7. カラー別スペック（レンズ単体と光源ごとの見え方を見せる）: 黒地に、白カードと写真の横並びを3段重ねる
8. レンズスペック（機能を説明する）: 銀パネルにクロームのロゴ見出しを置き、ハートアイコンのカードを2列、既存スペックを4列で並べる
9. プロデューサー紹介（信頼と憧れをつくる）: プリクラ風の4分割写真の横にピンクのハート見出しを置き、紫の縁取りが付いた経歴文を添える
10. カラーラインナップ（全色を一覧で比べる）: 2列のグリッドで目元写真の下にパステル色のラベルを置き、新色と限定色には斜めの文字バッジを付ける
11. カラーチャート（明るさとサイズの位置関係を見せる）: 方眼の銀パネルにレンズの円を配置し、縦軸と横軸をグラデーションの帯で示す

Imagery

• モデルは正面〜少し斜めのバストアップ。フラッシュ気味の白い肌と黒髪ぱっつん
• 目元は真正面のマクロ撮影で、自然光と室内光の2パターンを用意する
• レンズ単体は白背景の正円で、周囲に黒い縁を付ける
• 装飾は銀クロームのハート・十字のキラ星・リボン・チェーン・蝶・炎の3Dパーツ
• ゆるキャラ風のクマのマスコットを、ところどころに添える
• 背景はラメ、グリッター、点描のノイズ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 480px 前後の SP 幅のカラムに収め、左右の余白を黒ラメ地で埋めることを推奨する
• PC ではラインナップを 3〜4 列、スペックカードと写真を 2 列にできる
• 装飾パーツはカラムの外にも散らして、余白を世界観の一部として使う
• 全幅写真は最大幅を決めて、画質の荒れを防ぐ

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 行書くと起動時に読み込まれる。