DESIGN.md — くすみピンク×ハートの甘めカラコン LP（Dusty Pink Romantic Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、ポップ・元気
• キーワード: くすみピンク・ハート・筆記体・ぼかし写真・点線・甘めセクシー
• 地の質感: ソフトフォーカスの写真とピンクのグラデーションを重ねた、霞がかった質感
• 形: ハート、正円のレンズ切り抜き、角丸カード、ピル型ラベル、点線の弧
• 温度感: 暖かめ（ピンク〜ベージュ）。色ごとのセクションだけ青やグレージュに寄せる

Colors

• 全体の地はくすみピンクのグラデーションでまとめる
• 商品カラーごとにセクション地をピンク・ベージュ・ブルー・グレージュへ寄せる
• 写真の上の見出しは白文字に薄い影をつける
• 見出しの濃色はブラウン〜モーブにして、黒は使わない
• 強いピンクはラベル・ハートバッジ・比較バーだけに使う
• 線は白の細線か白の点線にそろえる
• page は文字 #B5768A × 背景 #E8C2C1 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• heart-badge は文字 #F6E7E4 × 背景 #ED92A5 のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CA2144、4.58:1）を使う。
• before-after-card は文字 #F6E7E4 × 背景 #D4A2AE のコントラスト比が 1.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#A54C62、4.59:1）を使う。
• scale-bar は文字 #F6E7E4 × 背景 #ED92A5 のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CA2144、4.58:1）を使う。
• copy-band は文字 #F6E7E4 × 背景 #EAACC1 のコントラスト比が 1.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C03161、4.53:1）を使う。

Typography

• 和文は明朝を基本にし、字間を広めにとって上品にする
• 商品名は大きな欧文セリフ体を 2 行に分け、段をずらして置く
• 筆記体の英字は見出しの背後や横に斜めに重ねる
• 番号つきの見出しは斜体の欧文数字と手書き風の和文で組む
• スペック行は小さな大文字の欧文を、ハート記号で区切る
• 強調語は文字を大きくするか、白抜きの帯にのせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レンズ一覧と特長は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅いっぱいに置き、文字とレンズの切り抜きを重ねる
• 色ごとに同じ構成のブロックを繰り返す
• before/after は 2 枚を横に並べた比較カードにする
• セクションの区切りは点線＋ハート記号の細い罫で示す
• 装飾は左右の端にはみ出させてよい

Elevation & Depth

• 影は弱く広いソフトシャドウだけを使う
• 白文字には薄いピンクのグロー影をつける
• レンズの切り抜きには白い縁と淡い影をつける
• カードは半透明の白枠でガラス風にする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 瞳は角丸の長方形か大きな円弧、レンズは正円、モデルは円・ハート・フルブリード
• セクション境界: 上に凸の弧やハート形の切り抜き、または点線の細罫
• ハート形を数値バッジ・スペックアイコン・枠に繰り返し使う
• ラベルはピル型で統一する
• 直角の硬い箱は避ける

Components

• カラー名ピルラベル（pill-label）: カラーの愛称を入れる半透明のピル型ラベル
• ハート数値バッジ（heart-badge）: 着色直径などの数値をハートの中に入れるバッジ
• レンズ円形切り抜き（lens-circle）: 白い縁の正円で、レンズ単体を見せる
• 着用比較カード（before-after-card）: 瞳のアップを 2 枚並べ、左下に before/after を斜体で入れる
• 印象スライダーバー（scale-bar）: 左右に英単語を置いたグラデーションの横棒
• ハート評価（heart-rating）: フチ感・発色感を 6 つのハートの塗りで示す
• 白枠ピル小見出し（outline-pill-heading）: 白い線のピルの中に、英字の大文字を入れる
• 白抜き帯コピー（copy-band）: 写真上で、半透明ピンクの帯に白い明朝の 2 行コピーをのせる
• モデル紹介カード（muse-card）: 円形の顔写真、吹き出し、大きな名前を半透明の枠に入れる

Do's and Don'ts

Do - ハート・点線・筆記体の英字を全セクションに散らす - カラーごとに同じテンプレートを繰り返し、地色だけ変える - 写真はソフトフォーカスで、肌を明るく仕上げる - 和文の明朝は字間を広めにとる - 数値はハートか細い欧文セリフで見せる

Don't - 原色や彩度の高いピンクを広い面に使わない - 太いゴシックの見出しを使わない - 黒い文字やくっきりした濃い影を使わない - 角の立った四角いボタンを使わない - 装飾のない白い余白だけの面を作らない

Page Structure

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

1. ファーストビュー（モデルと世界観で惹きつける）: 寝そべったモデルの写真に細いロゴ、ハートの装飾、6 色のレンズの円を並べる
2. キャッチコピー（シリーズの訴求）: 手書き風の大見出しに点線の弧と筆記体を重ねる
3. カラー一覧（全色を一目で見せる）: 2 カラムのカードに瞳のアップ、ハートバッジ、愛称ピル、欧文の名前を入れる
4. スペック要約（基本仕様を伝える）: 4 つのハート枠を横に並べ、仕様の値を入れる
5. モデル紹介（起用モデルを示す）: 半透明の枠に円形の写真と吹き出しを入れる
6. ラインナップ導入（系統別に分類する）: 筆記体の大見出しとモデル写真で、2 系統のレンズの円を見せる
7. カラー別詳細（×6）（各色の魅力を訴求する）: 番号見出し、全面写真、大きな欧文の商品名、レンズの円、帯コピーを順に重ねる
8. 着用比較（装着した変化を見せる）: before/after カード、スライダーバー、明朝の説明文、ハート評価を並べる
9. レンズマップ（色を選ぶ手助けをする）: 十字の座標軸にレンズの円を配置する
10. 全色比較（仕上がりを並べて比べる）: 横長カードを縦に積み、色名の帯をつける
11. 特長（機能性を示す）: 2 カラムに、ピンクの線画アイコンと 2 行の説明を置く
12. ブランドコンセプト（想いを伝える）: ピンクのグラデーションに、中央揃えの白い明朝を広い行間で組む

Imagery

• 女性モデルをソフトフォーカス・暖色・逆光気味で撮る
• 瞳は大きくクローズアップし、まつげまで鮮明に写す
• レンズ単体は白背景で正円に切り抜く
• リボン・苺・桃・バラ・ハートの宝石などの小物を散らす
• ぼけたハートと光の粒を背景に重ねる
• 背景の大きな欧文を、うっすら透かして敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜480px の SP 版を置き、左右を同じピンクのグラデーションで埋める
• PC に広げる場合、カラー一覧は 3 カラムにする
• 全面写真は最大幅を 1200px にし、文字の重ね位置は保つ
• 着用比較カードは 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 行書くと起動時に読み込まれる。