DESIGN.md — 水色×ピンクのぷっくり甘めカラコン LP（Pastel Kawaii Idol Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: パステルグラデーション・ぷっくり立体文字・ハートとリボン・ガラス風キラキラ・カラー別テーマ
• 地の質感: 光沢のあるガラス・ジェル風の質感。レースやホログラム、グリッターを重ねた柔らかい地。
• 形: ハート、リボン、波線フレーム、角丸カード、円形のレンズ画像
• 温度感: 甘く明るい。水色で清涼感、ピンクで甘さを出す。

Colors

• 地は水色・ピンク・ラベンダーのパステルにし、グラデーションでつなぐ。
• カラーごとに色テーマを決める。クール系は水色、甘め系はピンク、チェリー系はラベンダー。
• 大見出しはピンクの立体グラデ文字にし、補助語だけ水色にする。
• 本文は濃グレー、強調語はピンクか紫で太くする。
• 濃色は細いテキスト帯だけに使い、面積は 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

• 大見出しは白フチと光沢を付けたぷっくりグラデ文字にする。
• 英字見出しは筆記体かピクセル風の装飾体を使い、両脇にキラ星を置く。
• 語尾にハートの記号を付けて甘さを出す。
• スペックは「項目：数値」の形でセリフ体を使う。
• 助詞は小さく、キーワードは大きくしてジャンプ率を高くする。
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。