DESIGN.md — くすみ桜ピンクの水光ツヤコスメ LP（Dusty Sakura Pink Glossy Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい
• キーワード: くすみピンク・桜の花びら・水光ツヤ・ボケ光・写真コラージュ・白抜き文字
• 地の質感: マットなくすみピンクの地に、ぼかしたボケ光と半透明の花びらを重ねた、しっとりした質感
• 形: 角丸の写真、ピル型の枠線タグ、丸い成分写真、桜アイコン
• 温度感: やや暖かい。甘く柔らかい春の空気感

Colors

• 地はくすみローズ1色を基調にし、明暗違いのピンクで面を切り替える
• 文字はほぼすべて白抜きにし、黒系の文字は使わない
• 強調は鮮やかなピンクの限定バッジと CTA のピンク→ラベンダーのグラデに絞る
• 白面はポジショニングマップなど情報図にだけ使う
• ボケ光は白〜淡いラベンダーの半透明で重ねる
• button-primary は文字 #FFF4FF × 背景 #EE8CB2 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D82067、4.54:1）を使う。
• point-pill は文字 #B5577A × 背景 #FCFBF9 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B35377、4.59:1）を使う。
• badge-limited は文字 #FEEFEF × 背景 #FC9AD2 のコントラスト比が 1.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D3067B、4.61:1）を使う。
• swatch-grid は文字 #FEEFEF × 背景 #E1BBC6 のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#B04E6A、4.54:1）を使う。
• color-map は文字 #B68786 × 背景 #FCFBF9 のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#A06361、4.56:1）を使う。
• series-card は文字 #FEEFEF × 背景 #E1BBC6 のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#B04E6A、4.54:1）を使う。

Typography

• 英字の大見出しは太いセリフ、和文見出しは字間を広めにした明朝
• 本文は中央揃えで、短い行を 2〜4 行に改行する
• 文字はすべて白にし、写真上でも可読性を保つ
• 英字ラベルは大文字・広い字間で上品にする
• 色番号は数字と色名を 2 行で積む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。色見本は 3〜6 列のグリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• テキストはすべて中央揃え
• 商品写真は画面幅いっぱいに置き、その上下にずらした角丸写真を重ねてコラージュにする
• Point セクションはピル→見出し→本文→丸写真の順で縦に積む
• 色見本は限定色を上段に大きく、定番色を下段に小さく並べる
• セクション間は余白と地色の明暗で区切る

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• CTA だけに淡いピンクの外側グロー
• ボケ光の半透明円を重ねて奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。片側だけ角丸にして画面端に寄せたり、写真同士をずらして重ねる。成分は正円に切り抜く
• セクション境界: 直線。地色の明暗で切り替え、境界に花びらを散らす
• タグは白い細枠のピル型
• Point ラベルは白塗りのピル型
• CTA は小さめの角丸の横長ボタン
• シリーズカードは大きめの角丸で、一段明るい面にする

Components

• グラデーション CTA（button-primary）: ピンクからラベンダーへの横グラデ。左にカートアイコン、右に矢印を置き、英字の大文字ラベルを入れる
• 枠線ハッシュタグ（tag-outline）: 白い細枠のピル。質感や特徴を短い語で示す
• Point 番号ピル（point-pill）: 白塗りのピルに番号入りの英字ラベル。文字はローズ色
• 限定販路バッジ（badge-limited）: 鮮やかなピンクの角丸ラベル。白文字で販路を示す
• 色見本グリッド（swatch-grid）: 唇や質感の小さな画像を並べ、下に番号と色名を置く
• カラーポジショニングマップ（color-map）: 白い角丸カードに縦横の軸を引き、色の丸を配置した図
• シリーズ紹介カード（series-card）: 明るいピンク面の角丸カード。英字見出し、写真、色の並び、説明、下線付きのテキストリンクで構成する
• 桜アイコン見出し飾り（sakura-icon）: 見出しの上に小さな桜の花を置き、余白には花びらを浮かべる

Do's and Don'ts

Do - 地色をくすみローズに統一して、文字は白にする - 写真は角丸で切り、ずらして重ねるコラージュにする - 花びらとボケ光を余白に少しずつ散らす - 英字はセリフの大見出しにし、和文は明朝を組み合わせる - 限定性は鮮やかなピンクのバッジだけで示す

Don't - 黒や濃紺の文字・面を使わない - 原色の赤や黄色のバッジで値引き訴求をしない - 角ばった太いゴシックの見出しを使わない - 白地の多いページにしない - 強い影や立体ボタンを使わない

Page Structure

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

1. ファーストビュー（限定コレクションの世界観と発売情報を伝える）: モデル写真を全面に置き、商品写真を重ね、つや文字のロゴと明朝コピーを入れる。その下に価格・色名・発売日と CTA
2. コンセプト（テーマの説明）: 全幅の商品写真のあとに、中央揃えの 3 行テキストと花びらを置く
3. 色展開一覧（限定色と定番色を一覧で見せる）: 明るいピンク地に、限定 3 色を大きく、定番色を小さくグリッドで並べる
4. 限定色の詳細（1 色ずつ魅力を伝える）: 全幅の商品写真と、角丸写真のずらし配置。販路ラベル、英字の色名、和名、2 行の説明、枠線タグの順に置く
5. キャッチ帯（価値を 2 行にまとめる）: 少し濃い地の帯に、明朝で 2 行を「×」でつなぐ
6. 特長ポイント（機能を 3 つで説明する）: Point ピル、明朝見出し、ビフォーアフター写真や丸い質感写真、腕に塗った色見本を縦に積む
7. カラーラインナップ（全色を比べる）: スライダーで 1 色ずつ見せ、白カードのポジショニングマップを添える
8. 再訴求 CTA（購入へ誘導する）: FV と同じロゴとモデルビジュアルを繰り返し、グラデ CTA を置く
9. レビュー色見本（実際の発色を見せる）: 英字の大見出しの下に、腕に塗った写真と唇のアップを縦に並べる
10. シリーズ紹介（関連商品へ回遊させる）: 角丸カードを 2 枚縦に並べ、それぞれにテキストリンクを付ける
11. フッター（店舗・EC・SNS 導線）: ボケ光グラデの地に、細い英字の大きなリンクとロゴ、SNS アイコン、ナビを置く

Imagery

• 商品はピンクの背景に花びら、ガラス、雫と並べ、柔らかい逆光で撮る
• 唇はアップで、グロスの反射を強く見せる
• モデルは淡いピンクのニットで、ボケ光の中にいる甘い雰囲気
• 色見本は腕に塗って横に引いた写真
• 飾りは半透明の桜の花びらと白〜ラベンダーのボケ円
• 限定ロゴは透明感とつやのあるガラス風の筆記体
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では 1 カラムの中央寄せにし、最大幅 480〜600px 程度で両側に同系色の背景を敷く
• PC に広げる場合、コラージュ写真は 2 カラムにずらして配置する
• 色見本グリッドは PC では 1 行に並べる
• CTA は SP では幅 80% ほど、PC では最大 400px
• ハンバーガーメニューは右上に白い丸で置く

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