DESIGN.md — ピンク×杏色グラデの花柄コスメ限定色 LP（Pastel Gradient Floral Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級
• キーワード: 春の限定色・花束・パステルグラデ・手書き文字・色見本・SNS レビュー
• 地の質感: マットで粉っぽいパステルのグラデーション。ソフトフォーカスの花写真で空気感を足す
• 形: 角のない四角パネルを左右交互に置く。アイコンだけ円形バッジ
• 温度感: 暖かく甘い。杏色・ピンク・ラベンダーの三色

Colors

• 地は杏色から右へピンクに変わる横向きのグラデーションにする
• 色の紹介パネルは、その色名に合わせて杏・ピンク・ラベンダーと塗り分ける
• 見出しの色はくすみローズにし、本文は濃いブラウンにする。真っ黒は使わない
• 手書きの色名コピーには、その色自体（オレンジ・ピンク・パープル）を使う
• レビューから下は無彩色の明るいグレーに切り替え、商品の色を目立たせる
• CTA だけを不透明なローズピンクで塗り、文字は白にする
• review-card は文字 #8A7F80 × 背景 #FEFEFE のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#7D7273、4.6:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #DD7495 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D0416E、4.5:1）を使う。

Typography

• 見出しは細めから中くらいの太さにし、字間を広めにとって上品にする
• 色名のコピーだけ手書き風の書体にし、少し傾けて写真の上に重ねる
• 欧文の見出しの下に日本語の小さなサブ見出しを添える
• 本文は 13px 前後で、行間を 1.8 と広めにとる
• 1 行は短めに改行し、左揃えか中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レビューは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 色の紹介は、写真パネルと説明パネルを半分ずつ置き、左右を交互に入れ替える
• パネル同士は余白をあけずに隣接させ、色の帯がリズムよく続くようにする
• メイクのカードは、地のグラデーションの上に少し余白をあけて浮かせる
• レビューは 2 列で、カードの高さはそろえない
• 購入先は 3 列のロゴグリッドにする

Elevation & Depth

• 基本的に影は使わず、色面の違いで階層を分ける
• レビューのカードは白地に、ごく薄い影か影なしにする
• トップへ戻るボタンだけ、ピンクの円に軽い影をつける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角く切り抜き、角丸はなし。色見本は筆で塗ったような不定形にする
• セクション境界: 直線で区切る。色の切り替えはグラデーションでなめらかにつなぐ
• ボタンは角丸の小さい長方形にする
• 特長のアイコンは白い円形バッジにする
• 塗りの跡（スウォッチ）は写真の角に重ねてはみ出させる

Components

• 色紹介パネル（color-panel）: 花と商品の写真パネルと、手書きの色名・目元写真・パッケージを置いたパネルを左右に並べる
• 手書きの色名コピー（handwritten-label）: 色名と短い説明を、その色で手書き風に書く。下線を引くこともある
• 3 色の色見本（swatch-trio）: 筆で塗ったような色見本を 3 つ横に並べ、下に番号と色名を添える
• 特長の円形バッジ（feature-badge）: 白い円の中に、線のアイコンと 2 行の短い特長を入れて 4 つ並べる
• メイク提案カード（makeup-card）: 色付きの地に説明文・使用アイテム・顔写真を置き、写真の角に手書きのラベルを重ねる
• SNS レビューカード（review-card）: 投稿の画像の下に白い帯を置き、アカウント名を中央揃えで入れる
• 購入先ボタン（button-primary）: ローズピンクの長方形に白文字を入れる。ロゴの下に縦に 2 つ並べる
• 英字のセクション見出し（section-title-en）: 字間を広くとった英字の下に、小さな日本語のサブ見出しと細い下線を置く

Do's and Don'ts

Do - 地はいつもパステルのグラデーションにし、色ごとにパネルの色を変える - 花の写真を前景にぼかして重ね、空気感を出す - 色名は手書き風の文字にし、その色自体で書く - 色見本・目元・パッケージを 1 枚のパネルにまとめて見せる - SNS レビューを数多く並べて、信頼感を出す

Don't - 原色やビビッドなネオンの地は使わない - 濃い影や光沢のあるボタンは使わない - 太い極太ゴシックで押し付けがましい訴求をしない - 背景に黒を広く使わない - 価格や割引の大きな訴求バッジを入れない

Page Structure

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

1. ファーストビュー（季節感と限定色の世界観を一目で伝える）: 人物写真と商品の俯瞰写真を左右に並べ、白抜きのキャッチと英字のコレクション名を重ねる
2. 商品の概要（限定色であることと、発売の情報を伝える）: グラデーション地の左に見出しと発売情報を置き、右に 3 色の商品写真を置く
3. 色ごとの紹介（3 色の印象を見比べてもらう）: 色ごとに地の色を変えたパネルを、左右を交互に入れ替えて 3 段重ねる
4. コレクションのまとめ（コンセプトと特長を整理する）: 英字の大見出しに続けて、色見本を 3 つと円形バッジを 4 つ並べる
5. メイクの提案（ほかのアイテムとの組み合わせを提案する）: 人物写真と、使用アイテムを並べた白いパネル。そのあとに色ごとのメイクカードを 3 枚置く
6. レビュー（SNS の口コミで共感と信頼を得る）: グレー地に投稿カードを 2 列のグリッドで並べ、SNS ごとに区切る
7. 公式 SNS（フォローにつなげる）: 白地の中央に SNS のアイコンを横一列に並べる
8. 購入先（買える場所へ誘導する）: 通販サイトのロゴを 3 列に並べ、主要な購入先にはピンクのボタンを添える
9. フッター（サイトの案内と著作権表示）: グレー地にロゴとカテゴリのリンクを複数列で置く

Imagery

• チューリップなどの花をソフトフォーカスで手前に入れ、商品を花の間に立てて撮る
• 商品の俯瞰写真は、ミントなど補色の単色背景の上に花を散らして撮る
• 目元のアップは明るく均一なライティングで撮り、色見本と並べる
• モデル写真は自然光で柔らかく、肌は明るく見せる
• 色見本は筆やマスカラで塗った跡のような質感にする
• アイコンは細い線画で、単色のローズ系にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では色紹介の左右パネルを縦に並べ、写真を上、説明を下にする
• PC はコンテンツ幅を約 65% にし、左右の余白にグラデーション地を見せる
• レビューは PC でも中央寄せの 2 列のままにし、SP では幅いっぱいの 2 列にする
• 購入先のロゴは PC で 3 列、SP で 2 列にする
• ファーストビューの 2 枚の写真は、SP では縦に重ねるか、人物を優先して 1 枚にする

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