DESIGN.md — ぷっくり3Dピンク×ラメの地雷系カラコンLP（Glossy Y2K Pink Pastel Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: ラメ・ぷっくり3D文字・唇スタンプ・オーロラハート・量産型・Y2K
• 地の質感: 細かいグリッター・ボケ光の淡いパステル地に、光沢のあるオーロラ質感のハートを重ねる
• 形: 楕円ラベル、ハート型フレーム、円形レンズ写真、角丸の目元写真
• 温度感: 甘く柔らかいクール寄りピンク（青み）

Colors

• 地はラメ白を基本に、カラー別セクションでピンク地・紫グレー地に切り替える
• 見出しはビビッドピンクの3Dぷっくり文字、もう一方のカラーは紫で色分け
• 赤とマゼンタの唇スタンプを画面端に散らして甘さを出す
• 本文はこげ茶で、強調は淡ピンクのマーカー
• 黒や濃色の面は使わず、全体を淡く明るく保つ
• heart-feature-icon は文字 #A85CE0 × 背景 #CCCDE2 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#8025C3、4.51:1）を使う。
• rank-badge は文字 #EDEDF1 × 背景 #E518CE のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C014AD、4.56:1）を使う。

Typography

• 大見出しは白フチ＋光沢の立体文字で画像化する
• 本文は中央揃えで、行間を広く短い行で区切る
• 縦書きのキャッチをラメ帯の上に2列で配置する
• 欧文の筆記体を薄く透かしとして背景に置く
• 本文の強調語だけ一回り大きくしてマーカーを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、ラインナップは 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• モデル写真は全幅で大きく見せる
• レンズ円＋目元写真を左右に互い違いで並べる
• スペックは左にラベル、右に写真カードの2分割
• 装飾は左右の端に寄せて写真の顔にかけない
• 機能紹介はハートアイコン＋説明文の2列グリッド

Elevation & Depth

• レンズ写真の下に鏡面反射を入れる
• ハートは光沢ハイライト付きの立体表現
• 写真カードはごく薄いドロップシャドウ
• 見出し文字に白フチと柔らかい影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: モデルは全幅の角版、目元は楕円・ハート型、レンズは正円
• セクション境界: ゆるい波形カーブと、ビーズ風の点線で区切る
• スペック値はラメ縁の楕円ラベルに入れる
• ハート型フレームで顔写真を切り抜く
• 四角いカードは角丸控えめ

Components

• ぷっくり3D見出し（puffy-heading）: ピンク光沢の立体文字に白フチ、左右に唇スタンプを添える
• 楕円スペックラベル（spec-oval-label）: ラメ縁の白い楕円にセリフ体で数値を入れて縦に3つ並べる
• スペック帯（spec-pill-bar）: 細線のピル枠に度数・直径を1行で記す
• レンズ・目元写真カード（lens-photo-card）: 白枠の写真に右下へ小さな白ラベル（光源名など）
• 縦書きラメ帯（glitter-vertical-band）: オーロララメの細い帯に縦書きキャッチを2本並べる
• ハート型機能アイコン（heart-feature-icon）: オーロラハートの中に機能名と大きな数字・欧文
• 人気順位バッジ（rank-badge）: ピンク／紫のハート型に番号を大きく入れて写真左上に重ねる
• マーカー強調（marker-text）: 本文の要点に淡ピンクの帯を敷く

Do's and Don'ts

Do - 唇・ハート・きらめきを左右端に散らす - カラーごとに地色と見出し色を変える - レンズ円は必ず鏡面反射付きで見せる - 白〜淡色を基調に明るく保つ - 目元アップを大きく見せて質感を伝える

Don't - 黒や濃紺の重い面を使わない - 平坦なゴシック見出しだけで済ませない - 装飾をモデルの顔の上に重ねない - 彩度の低いくすみ色だけでまとめない - 角張った硬い枠を多用しない

Page Structure

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

1. ファーストビュー（新作の世界観とモデルを一目で伝える）: モデル全幅写真に3Dピンクの大コピー、周囲を唇で縁取り、下にレンズ2種とスペック帯
2. 新デザインの訴求（従来の悩みを提示し解消を宣言）: 斜め手書き見出し、筆記体の欧文、中央揃えの短文、発光ピンクの解消コピー
3. 技術解説（レンズの構造的な特長を示す）: ハート型の顔写真＋レンズ拡大、マーカー入り本文、レンズ半割の比較図
4. カラー紹介（1色目）（1色目の着用イメージを見せる）: 大きなモデル写真、紫の3Dカラー名、楕円スペックと目元アップ
5. カラーの世界観（なりたい印象を情緒的に伝える）: 手書き風カラー名、縦書きラメ帯、オーロラハートと欧文透かし
6. スペック・光源別イメージ（レンズと見え方を具体的に示す）: 左にラベルと数値、右に白枠写真を縦に3段
7. カラー紹介（2色目）（2色目を同じ型で見せる）: ピンク地に切り替え、マゼンタ3Dカラー名で同構成を反復
8. レンズ機能（装用感・安全性を伝える）: ラメ枠の白パネルにハートアイコン＋説明の2列グリッド
9. モデル紹介（起用モデルで信頼と話題性を出す）: 水色の波形地に液体メタル風の欧文名、全身写真、中央揃えプロフィール
10. ラインナップ（既存カラーを一覧で見せる）: 2列の目元写真＋レンズ円、順位バッジ、カラー名と欧文ルビ
11. カラーチャート（明るさ×サイズで選びやすくする）: 方眼のマトリクスにレンズを配置、ピンク／青の軸ラベル

Imagery

• モデルは白チュールや淡ピンク衣装、ハイキーで柔らかい肌の美容写真
• 目元アップは正面の自然光で、まつ毛と瞳の質感をはっきり見せる
• レンズ単体は白背景の正円、下に鏡面反射
• オーロラ光沢の立体ハート、四芒星のきらめき、唇スタンプを装飾に
• 背景はグリッターとボケ光のラメ質感
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを固定し、左右はラメ地で埋める
• モデル写真は最大幅 480〜600px に抑える
• ラインナップは PC で 3〜4 列に増やしてもよい
• 装飾の唇やハートはカラムの外側の余白にも散らす

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