DESIGN.md — くすみピンク×ハートのガーリーなカラコンLP（Dusty Pink Girly Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、情報量多め・訴求型
• キーワード: くすみピンク・ハートモチーフ・雲の境界・パステル切替・着用比較・ガーリー
• 地の質感: マットな淡色ベタ面に、薄いハートや雲のシルエットを重ねる。光沢やグラデーションは控えめ。
• 形: ハート型バッジ・吹き出し、丸いレンズ切り抜き、角丸の小さな帯ラベル、細い白枠。
• 温度感: 暖かく甘いが、グレージュ寄りで落ち着いた大人ガーリー。

Colors

• 地は白と淡いピンクを交互に置き、カラー紹介ごとにピンク・ミント・ラベンダー・イエローのパステルへ切り替える。
• 見出しはくすみピンクの文字に白縁を付け、強い原色は使わない。
• 本文・価格はモカグレーで統一し、真っ黒は使わない。
• ハート評価はセクションの地色に合ったパステルで塗り分ける。
• 濃いブラウンはカラー名ラベルなどの小面積だけに使う。
• rating-card は文字 #7D6E6B × 背景 #F4F5F6 のコントラスト比が 4.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#7C6D6A、4.52:1）を使う。
• price-block は文字 #8E8680 × 背景 #FAF1F2 のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#756E68、4.52:1）を使う。
• campaign-frame は文字 #CFAABC × 背景 #FFFFFF のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A66182、4.51:1）を使う。

Typography

• 和文は丸ゴシックの太字で統一し、字間を広めにとる。
• 英字の見出しは字間の広いジオメトリック書体にする。
• 大見出しには白い縁取りか、淡い影を付ける。
• 説明文は中央揃えの2行にまとめ、文末にハートか♡を添える。
• 価格の数字は特大の斜体ローマン体にし、円と税込は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較画像は 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• カラー紹介は同じ型を繰り返す（ビジュアル→着用比較→説明→評価カード）。
• 左右の余白に縦書きの英字ラベルを置く。
• 区切りには点線を使う。
• 比較写真は2列で、すき間を細くする。

Elevation & Depth

• 影はレンズ下の楕円の落ち影だけにする。
• カードは影なしで、細い線か淡い地色で区切る。
• モデルの切り抜き写真には白フチを付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: モデルは正方形に近い枠にして、上部をハートの切り欠きで抜く。レンズは円形に切り抜き白フチを付ける。目元は横長の長方形。
• セクション境界: 白い雲型の波で切り替えるか、パステル地の色を切り替える
• ハート形をバッジ・吹き出し・評価に多用する。
• スペック表記は白い細枠の半透明帯にする。
• タグは角丸が小さいタブ型にする。

Components

• ハート型特長バッジ（heart-badge）: 白い線のハート内に特長を短い英字で入れ、3つ並べる
• スペック帯（spec-bar）: 白い細枠の半透明帯を縦に3段重ね、数値を入れる
• レンズ丸切り抜き（lens-circle）: 白フチの円形レンズ画像。下に楕円の落ち影を付ける
• ハート評価カード（rating-card）: タブ型タグ、レンズのアップ、2項目×5ハートの評価を並べる
• 着用比較ラベル（compare-label）: 目元写真の左上に置く半透明の白枠ラベル
• 価格ブロック（price-block）: ピル型の特長ラベル、箱数、特大の価格数字を組み合わせる
• キャンペーン枠（campaign-frame）: 白い面に細い枠を引き、四隅にハート。中にピル見出しと吹き出し型の注記を入れる
• カラー名ピル（color-name-pill）: マップ上でレンズ下に置くカラー名のピル。色はレンズ色に合わせる
• 度合いゲージ（mood-gauge）: 横長のバーに丸ノブと％数値を付ける

Do's and Don'ts

Do - ハート・雲・円を形の基本モチーフにする。 - パステル地をセクションごとに切り替えて、カラーの違いを伝える。 - 着用前と着用後の目元写真を2列で比較する。 - 文字色はモカグレーかくすみピンクにする。 - 評価や数値は、ハートやゲージで見せる。

Don't - 純黒や原色の赤・青を使わない。 - 角張った太ゴシックや明朝を見出しに使わない。 - 強いドロップシャドウや光沢を付けない。 - カラー紹介ブロックの型を崩さない。 - 写真の上に濃いベタ帯を置かない。

Page Structure

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

1. ファーストビュー（モデルと新色の印象を伝える）: ピンク地にモデルのアップ。英字ロゴ、ハートバッジ、レンズの丸切り抜き、カラー一覧、スペック帯を置く
2. 新色の導入（新色の特長を伝える）: 雲で切り替えた白地にピンク太字の3行見出し。レンズとハートの吹き出しで拡大を見せる
3. 着用比較と特長3点（自然な仕上がりを示す）: 上下に目元写真を並べ、矢印を付ける。チェックマーク付きの特長を3列で並べる
4. 定番ラインナップ（タイプ別にカラーを一覧で見せる）: ゲージ付きの小見出しの下に、目元写真を3列並べる
5. 価格訴求（手頃な価格を示す）: ピル型ラベルと特大の価格数字
6. キャンペーン（まとめ買いを促す）: 細枠のカード、ピンク見出し、取り消し線付きの通常価格、吹き出し型の注記
7. カラー別紹介（繰り返し）（各色の詳細を伝える）: パステル地を切り替え、モデル写真、着用比較、2行の説明、ハート評価カードを並べる
8. タイプ別おすすめ（自分に合う色を選ばせる）: 2×2のカード比較と、縦横の軸で4色に分けたポジショニングマップ
9. モデルプロフィール（親近感と信頼を高める）: 筆記体の見出し、半透明の角丸パネル、モデル写真
10. 製品スペック（機能を整理して示す）: 2×2の線画アイコン表。中心をハートでつなぐ
11. レンズイメージ一覧（全色を比較する）: 2列の目元写真。縦書きタグとパステル色のカラー名を付ける

Imagery

• モデルは柔らかい拡散光で撮り、ピンクみのハイキーに仕上げる。
• 目元のマクロ写真は同じ角度・同じ光で撮り、比較できるようにする。
• レンズ単体は白背景で真上から撮り、円形に切り抜く。
• 装飾は、淡色のハートと雲のシルエット、細い曲線を使う。
• スペック説明は、細い線のアイコンをグレーで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480px 前後の SP 幅カラムを置き、両側をパステル地で埋める。
• PC で広げる場合は、比較写真を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 行書くと起動時に読み込まれる。