DESIGN.md — ピンク×ラベンダーの夢見心地ケア雑貨 LP（Dreamy Pink-Lavender Gradient Relaxation Goods LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: やさしい・柔らかい、かわいい、上品・高級
• キーワード: ピンク→ラベンダーのグラデーション・雲とボケ光・白く光る文字・まるいバッジ・ご褒美感・夜のくつろぎ
• 地の質感: パステルのグラデーションに、半透明の雲と光の粒を重ねた霞んだ質感
• 形: 円・ハート型の写真切り抜き・ピル型ラベル・花形のバッジ
• 温度感: ぬくもりのある暖色寄りパステル

Colors

• 地は左ピンク→中央ピーチ→右ラベンダーの横グラデーションに統一する
• グラデーションの上の見出し・本文は白にし、ピンクの外光を淡く付ける
• 強調面にはコーラルピンクの単色帯を使い、セクションの区切りにする
• 2 色展開の商品はピンク系とラベンダー系のラベルで色分けする
• 濃い色は仕様表などに限り、くすんだ赤紫グレーにする
• 黄色は小さなバッジ 1 点だけに絞る
• page は文字 #6A5560 × 背景 #F19EA8 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#F7C6CC、4.51:1）を使う。
• point-badge は文字 #CA7684 × 背景 #FEFEFE のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BC5365、4.56:1）を使う。
• scene-circle は文字 #CA7684 × 背景 #FEFEFE のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BC5365、4.56:1）を使う。
• pill-label は文字 #FE7886 × 背景 #FEFEFE のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#ED021A、4.5:1）を使う。
• count-tag は文字 #FEF3F1 × 背景 #DF7F8B のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-2-accessible（#CD384A、4.53:1）を使う。
• speech-callout は文字 #FEF3F1 × 背景 #FE7886 のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#ED021A、4.5:1）を使う。
• floating-cart は文字 #FEF3F1 × 背景 #FD7A8B のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E20320、4.52:1）を使う。

Typography

• 見出しも本文も基本は中央揃え
• グラデーションの上の白文字にはピンクの外光（text-shadow）を付ける
• 数値部分は 1.5〜2 倍の大きさにしてジャンプ率を上げる
• 本文は字間 0.1em・行間 2.0 でゆったり組む
• 注釈は極小の白文字で、説明の直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央のコンテンツ幅の外側に、くすんだピンクとラベンダーの余白帯を残す
• ポイントは『バッジ→見出し→本文→図版』の順でくり返す
• 図版は横幅の 70〜80% で中央に置く
• シーン提案は円 3 つを横に並べる

Elevation & Depth

• 影はほとんど使わず、光のにじみ（グロー）で浮かせる
• 商品パッケージにはやわらかい落ち影を付ける
• 図版の背後に白い光の円を置き、発光しているように見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 人物はハートや丸の形で切り抜く。シーン写真は長方形
• セクション境界: コーラル帯の上辺を下向きの三角で切り欠く。それ以外はグラデーションで連続させる
• ラベルはピル型にする
• ポイント番号は白い花形（スカラップ）の円に入れる
• 吹き出しはピル型に小さな角を付ける

Components

• ポイント番号バッジ（point-badge）: 白い花形の円に、筆記体の英字・『Point』・大きな数字を縦に積む
• 発光する白見出し（glow-heading）: 2 行・中央揃えの白い丸ゴシックにピンクのグローを付ける
• シーン丸チップ（scene-circle）: 淡い白の円に短い使用シーンを 3 行で入れ、3 つ横に並べる
• 白ピル見出し（pill-label）: 横長の白いピルの中にピンク文字で見出しを入れる
• 枚数タグ（count-tag）: 商品の下に置く小さなピル。色はピンク系とラベンダー系で分け、文字は白
• 吹き出し＋六角バッジ（speech-callout）: 黄色い六角形バッジと、コーラルのピル型吹き出しを組み合わせる
• 固定の購入ボタン（floating-cart）: 右下に固定するピンクの角丸四角。カートのアイコンと小さな文字を入れる

Do's and Don'ts

Do - 地は必ずピンク→ラベンダーのグラデーションにし、雲とボケ光を重ねる - 文字は白を基本にして、グローでやわらかく見せる - 数値訴求は大きな数字＋小さな単位で組む - 曲線（ほかほか線・湯気線）の手描き装飾を添える - 2 色の商品はピンク系とラベンダー系で並べて見せる

Don't - 黒や原色の強い色を広い面に使わない - 角張ったボックスや太い枠線を使わない - 本文を左揃えでぎっしり詰めない - 影の濃いカードを使わない - 直線的なセクション区切りを多用しない

Page Structure

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

1. ファーストビュー（くつろぎの世界観とご褒美感を伝える）: 人物の写真を全面に敷き、ロゴ・手書きコピー・丸い新習慣バッジ・商品画像を重ねる
2. 商品紹介・数値訴求（商品と主な効果の数値を示す）: グラデーションの地に商品 2 色を並べ、大きな発光数字のコピーと注釈を置く
3. 使用イメージ（使ったときの心地よさを見せる）: ハート型に切り抜いた人物写真と、白い製品画像の上に斜線付きのラベルを置く
4. 使用シーン（使う場面を想起させる）: コーラル帯の上辺を三角で切り欠き、見出しと丸チップ 3 つ、シーン写真を置く
5. 特長ポイント 1〜3（素材・フィット感・温かさを順番に説明する）: 番号バッジ→発光見出し→本文→イラストまたは比較写真をくり返す
6. ラインアップ（サイズと色の展開を示す）: 白ピルの見出しの下に、2 カラムで商品画像と枚数タグを 3 段並べる
7. 商品仕様（サイズ情報を補う）: ラベルと数値を 2 列の表組みで置き、文字は濃い赤紫グレー
8. フッター（SNS とリンクへ導線をつなぐ）: 白い地に SNS アイコンを横に並べ、グレーの地にテキストリンクを縦に並べる

Imagery

• 人物は目を閉じてくつろぐ女性。暖色の照明でやわらかく撮る
• 夜の室内シーンは間接照明とソファで落ち着いた空気にする
• 製品はパステル調のフラットなイラストにし、湯気やほかほかの線と擬音を添える
• 背景には半透明の雲、白いボケの光の粒、放射状の光の円を重ねる
• パッケージは斜めから撮った立体の物撮りにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP 幅のコンテンツを中央に置き、両側をくすんだピンクとラベンダーのぼかした背景で埋める
• PC でもグラデーションの方向（左ピンク・右ラベンダー）は変えない
• 固定の購入ボタンは PC でも右下に置く
• ラインアップは 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 行書くと起動時に読み込まれる。