DESIGN.md — 漆黒×ピンク光線のコスメ洗浄オイル LP（Dark Pink Laser Glow Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、クール・先進的、情報量多め・訴求型
• キーワード: 漆黒・ピンクのレーザー光・バブル・ホログラム・明朝の大見出し・POINT 番号
• 地の質感: 黒地に発光するピンクの光線と泡、中盤は虹色の箔のような淡いホログラム地
• 形: 白い角なしカード、上部は斜めに切ったワイン色の帯、円形のアイコン枠、六角形のバッジ
• 温度感: クールでややセクシー。暗い地に寒色寄りのピンクが光る

Colors

• FVと締めは漆黒の地にピンクの光線と泡を重ねる
• 中盤は淡いホログラム地に白カードを並べ、黒→白の明暗のリズムを作る
• POINT カード上部はワイン黒の帯、下部は白で本文を置く
• ピンクの面は小さなバッジや比較ラベルだけに使う
• 見出し文字は白またはピンクのグロー付きの白
• 成分図解だけ黄・水色のパステルを許す
• page は文字 #555555 × 背景 #020001 のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#FFB5DA、4.57:1）を使う。

Typography

• 大見出しは明朝、リードはゴシック極太の二段構成
• 黒地の明朝見出しにはピンクの外側グローを付ける
• 本文は中央揃えで短く改行する
• 数字は細い欧文セリフで大きく、上に小さな POINT ラベルを置く
• 注釈は※付きで小さく、見出しの直下や本文の下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は POINT を左右 2 分割と 2 カラムのカードで並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 32px、基本単位 8px、カード内 24px（375px 幅換算）
• POINT カードは左右 5% の余白で幅いっぱいに置く
• カード同士は 30px ほど空けて地のホログラムを見せる
• カード上部の黒帯は右下がりの斜めで白面に切り替える
• 写真はカード内で左右 20px 内側に置く
• 締めの小カードは高さ 70px 前後の横長帯

Elevation & Depth

• 影は使わず、明暗の差で奥行きを出す
• 見出し文字と光線にはピンクの発光グロー
• 商品写真は床に映り込みを付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 長方形の角なし。顔写真だけ円形、成分は円・六角形の枠
• セクション境界: 斜め切り・液体の波形・黒から白へのグラデーション
• カードは角丸なしでシャープに
• ボタンは白細線のピル型の枠
• 円形アイコンは白い細線の円
• 成分は虹色箔の六角形バッジ

Components

• ピル型の枠ボタン（button-more）: 黒地に白の細い枠、中央に英字
• POINT カード（point-card）: 上部はワイン黒の斜め帯に番号と見出し、下部は白で写真と本文
• POINT 番号（point-number）: 線で挟んだ小さな POINT と、大きな細い欧文の数字
• 悩みの円アイコン（concern-circle）: 黒地に白線の円を3つ並べ、悩みを短い言葉で入れる
• 成分の六角形バッジ（hex-badge）: 虹色箔の地に黒縁の六角形、2×2で並べる
• ピンクの丸バッジ（pink-badge）: NEW や比較ラベルに使うピンクの円
• 比較図解（compare-diagram）: 黒ラベルの下に黄と水色のパネルを三角矢印でつなぐ
• 円が重なる成分図（ingredient-venn）: 黒地に白線の円を4つ重ね、成分名を入れる
• 特長の帯カード（feature-strip）: 黒地にピンクの光線が走る横長帯、中央に短い特長

Do's and Don'ts

Do - 黒い地には必ずピンクの光線か泡を添える - 黒のセクションと淡い地のセクションを交互に並べる - POINT は番号・リード・明朝の大見出しの3段で組む - 注釈は※番号で丁寧に付ける - 商品写真はピンクの透明ボトルが光る形で見せる

Don't - カードに大きな角丸や影を付けない - ピンクで大きな面を塗らない - ポップな丸ゴシックを使わない - 黒地の文字にグレーを使って沈ませない - 暖色のオレンジや黄色をアクセントに使わない（図解は除く）

Page Structure

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

1. ファーストビュー（高級感とブランドの世界観を伝える）: 漆黒の地にピンクのボトルと光線、左にロゴと英字のタグライン
2. コンセプト（シリーズで最上位という位置づけと価値を伝える）: 明朝のグロー大見出しと、太め明朝の中央揃えコピー
3. 商品紹介（商品名・価格・容量を見せる）: 泡に囲まれたボトル写真、価格を太字で書き、MORE ボタンを置く
4. 悩みの提起（肌の悩みを示す）: ひび割れ質感の黒地に円アイコンを3つ、傍点付きの見出し
5. 原因説明と解決（蓄積汚れのしくみと解決策）: 顔の円形写真を挟み、黒から白へグラデーションでつなぐ
6. 特長の導入（POINT 群への導入）: 液体の波形の区切り、ホログラム地に明朝の見出し
7. 特長 POINT01〜04（処方・テクスチャー・成分を順に訴求）: 斜め切りの黒帯つき白カードに写真・本文・注釈を入れる
8. 比較・図解（従来品との違いを見せる）: 黒の比較ボックスとパステルの図解
9. 特長 POINT05〜06（保湿成分と香り）: 全面黒のカードに円が重なる成分図と香りのピラミッド
10. サブ特長（便利な点を補う）: 光線が入った黒の横長帯カードを2枚
11. 締めの CTA（体験を促す）: 液体の波形から黒地へ、グロー見出し、MORE ボタン、パッケージ写真

Imagery

• 黒背景にピンクのレーザー光が斜めに交差する
• ピンクの縁で光るシャボン玉のような泡を散らす
• 黒の多いスタジオで、透明ボトルを床の映り込み付きで撮る
• 成分は青白い分子の泡や金色のオイル玉のマクロ写真
• 花の写真は円形に切り抜いて淡いピンクにまとめる
• 白い液体が流れ落ちる波形で区切る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV の左にロゴ、右にボトルを置く横長構図
• PC の POINT カードは写真と見出しを左右に分け、斜めの帯を横に伸ばす
• PC の POINT05・06 とサブ特長は 2 カラムで並べる
• PC の比較図解は 4 枚を横 1 列に並べる
• PC はコンテンツ幅を約 70% に収め、両脇にホログラム地を見せる

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