DESIGN.md — ローズピンク×パステル虹色のまつ毛美容液キャンペーンLP（Pastel Pink Celebrity Collab Cosmetics Campaign LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、情報量多め・訴求型
• キーワード: ローズピンク・オーロラグラデーション・セリフ欧文見出し・明朝の余白・タレント起用・キャンペーン訴求
• 地の質感: 水色・ラベンダー・淡いピンクが溶け合う、パステルの光のにじみ。紙のようなざらつきはなく、つるっとした透明感。
• 形: 角丸は小さめ。四角い枠線のカードとピル型ボタンを組み合わせる。斜めにカットした白い帯を商品名の下に敷く。
• 温度感: やや暖かいパステル。ピンクが主で、水色で清潔感を足す。

Colors

• ピンクは見出し文字・セクション帯・枠線・ボタンに使う。広い面ではキャンペーン帯にだけ使う。
• 地は水色→ラベンダー→淡ピンクのグラデーションを、セクションごとに少しずつ変えて流す。
• 手順・店舗・注意書きは白か淡ピンクのパネルに入れ、ピンクの細枠で囲む。
• 重要な見出しバーだけ濃いグレーの帯にして、ページの区切りにする。
• 販売状況のお知らせは赤文字で中央にそろえる。他の場所で赤は使わない。
• 上位商品のパートはグレーがかった落ち着いた地にして、高級感を出す。
• button-primary は文字 #CD728D × 背景 #FFECF2 のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#BB4266、4.54:1）を使う。
• feature-tag は文字 #EB638C × 背景 #FEFEFE のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E21F5A、4.55:1）を使う。
• store-card は文字 #EB638C × 背景 #FEFEFE のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E21F5A、4.55:1）を使う。
• faq-item は文字 #EB638C × 背景 #FEFEFE のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E21F5A、4.55:1）を使う。
• product-name-band は文字 #EB638C × 背景 #FEFEFE のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E21F5A、4.55:1）を使う。

Typography

• 欧文見出しは大きなピンクのセリフ体にする。左に短い横線を付けるか、両側を「—」で挟む。
• 和文の見出しと本文は明朝が基本。手順・規約まわりだけゴシックを使う。
• 訴求コピーは強調したい語だけ大きくし、小さい助詞と混ぜて組む。
• 価格は大きなセリフ数字にし、税込表記は小さく添える。
• 本文は中央そろえで短く改行する。インタビューだけ左そろえにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。店舗リンクと実店舗一覧は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの見出しは欧文セリフで大きく置き、続く本文は中央にそろえる。
• 商品紹介は、名前→説明→パッケージ写真→特徴タグ→MOREリンクの順に縦に並べる。
• キャンペーン内容は、グラデーション地の上に置いた白カードにまとめる。
• 手順は step 番号のピル→見出し→線画アイコン→説明の順にし、下向きの山形でつなぐ。
• 注釈は各ブロックの末尾に小さい文字でまとめる。

Elevation & Depth

• 影はほぼ使わず、平らな面と細い枠線で区切る。
• ピル型ボタンだけ、白→淡ピンクのグラデーションでふっくら見せる。
• トレカ写真は少し傾けて重ね、軽い影を付ける。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 商品写真は切り抜きで背景になじませる。人物は角丸なしの長方形。
• セクション境界: 基本は直線で切り替える。白い地へは、ゆるい弧を描いて切り替える箇所がある。
• 枠線は 1〜2px のピンクで、角はほぼ四角にする。
• 商品名の下には、平行四辺形に斜めカットした白い帯を敷く。
• 特徴タグは小さな四角にピンク枠を付ける。
• step 番号とバッジはピル型か菱形にする。

Components

• 購入ピルボタン（button-primary）: 幅 85% のピル型。淡ピンクのグラデーション地にピンク枠、明朝のピンク文字。右端に「>」を付ける。
• MOREリンク（link-more）: 大きなピンクのセリフ欧文に「>」を付け、下線を引く。直下に小さな注記を添える。
• キャンペーン告知帯（campaign-banner）: 左がピンク地に白いセリフ文字と期間、右が白地にピンク枠で「全員」を強調。下向き三角を付ける。
• 特徴タグ（feature-tag）: ピンク枠の小さな四角に、短い特徴語を入れる。
• ステップ番号（step-pill）: ピンクの小さなピルに白い英字で step 番号を入れる。
• 店舗リンク枠（store-card）: ピンク枠の白い四角を 2 列に並べ、店名をピンクの明朝で中央に置く。
• 濃色見出しバー（dark-heading-bar）: 幅いっぱいの濃いグレーの帯に、白い明朝で見出しを中央に置く。
• Q&Aアコーディオン（faq-item）: 上下に細いグレー線。質問はピンク文字で、右端にピンクの四角い＋アイコンを置く。
• 斜め商品名帯（product-name-band）: 白い平行四辺形の帯に、商品名をピンクの明朝で 2 行に入れる。

Do's and Don'ts

Do - 地は必ずパステル（水色・ラベンダー・ピンク）のグラデーションでつなぐ。 - 欧文見出しはピンクのセリフ体を大きく使う。 - 商品写真は余白をたっぷりとって中央に置く。 - キャンペーン情報は白カードに入れ、期間を大きな数字で見せる。 - 手順は線画アイコンとピンクの差し色で、親しみやすく図解する。

Don't - 原色の強いボタンや太いゴシックの煽り文字は使わない。 - 濃い影や立体的なボタンは使わない。 - ピンク以外の強調色を増やさない（赤は注意文だけ）。 - 本文を詰めて組まない。行間は 1.8 以上を保つ。

Page Structure

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

1. ファーストビュー（タレントと商品群で世界観を伝える）: 人物写真を 2 段に重ね、手書き風の白い明朝コピーを重ねる。下部に商品パッケージを並べる。
2. キャンペーン告知帯（購入特典を即座に伝える）: ピンクと白の 2 分割バナーで、期間と対象者を見せる。
3. ブランドメッセージ（情緒的な価値を伝える）: 虹色のグラデーション地に、明朝の中央そろえで短い文を段落ごとに置く。最後に商品の集合写真。
4. 動画（CMやメイキングを見せる）: ピンクの額縁の中に動画を埋め込む。上に欧文見出し。
5. ラインナップ（商品を一覧で比較させる）: 商品ごとに、名前→説明→写真→タグ→MOREリンクを縦に並べる。
6. スペシャルインタビュー（タレントの言葉で共感を生む）: 写真の右下にピンクの名前プレートを付け、左そろえの明朝で語りを載せる。
7. キャンペーン詳細（特典と応募条件を伝える）: ピンク地のカード、水色地の白カード、トレカのモック画像、SNS応募の案内。
8. 取り扱い店舗（購入先へ誘導する）: 濃色見出しバーの下に、赤字のお知らせ、2列の店舗枠、淡ピンクの実店舗一覧を置く。
9. 応募方法ステップ（応募手順を分かりやすくする）: 淡ピンクのパネルに、step ピル・線画アイコン・説明を縦に並べる。
10. 商品詳細（商品ごとの効能と価格を訴求する）: 下線付きのピンク見出し、斜め帯の商品名、価格、購入ボタン、ピンク枠の解説図。
11. お客様の評価（満足度で信頼を高める）: 深い紫の帯見出し、円グラフの大きな数字、吹き出しの口コミ。
12. よくある質問（不安を解消する）: 大きなピンクのセリフで「Q&A」と見出しを置き、線区切りのアコーディオンを並べる。
13. 追従バナー（キャンペーンを常に見せる）: 画面下に告知帯を固定する。

Imagery

• 人物は柔らかい光のポートレート。パステル色のニットを着て、商品を顔の横で持つ。
• 商品は切り抜きにし、パッケージと本体を並べて撮る。
• 背景は水色・紫・ピンクが溶ける、ぼかしたオーロラ光。
• 手順のアイコンは、濃いグレーの太い線画にピンクを一部塗る。
• 成分の図解は、毛髪の断面図や比較写真に小さな丸いラベルを付ける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅 750px 前後の 1 カラムにし、中央に寄せる。左右はグラデーション地を延ばす。
• 店舗枠は PC で 3〜4 列に広げてもよい。
• 欧文見出しは PC で 64px 程度に拡大する。
• 追従バナーは 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 行書くと起動時に読み込まれる。