DESIGN.md — 水色×藤紫のきらめく美容液投票キャンペーン LP（Pastel Dreamy Beauty Election Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、上品・高級
• キーワード: パステルグラデーション・きらめき・リボン見出し・総選挙風・白カード・金の装飾枠
• 地の質感: 淡いグラデーションと光の玉・十字のきらめきを重ねた、透明感のある夢かわいい質感。
• 形: 大きめ角丸の白カード、ピル型ボタン、両端が折れたリボン、アーチ型の金枠。
• 温度感: やや寒色寄り（水色・紫）に、ピンクで温かみを差す。

Colors

• セクションごとに地を水色→淡黄→藤紫と切り替え、境界は色の変化で示す。
• カードは常に白で、地のパステル色から浮かせる。
• ピンクはリボン見出しと強調文のみに使う。
• 購入 CTA は青グラデーション＋白文字に統一する。
• 紫と青の帯ラベルで 2 種の手順を色分けする。
• 注意事項は赤い小さい文字にする。
• 金色は装飾枠・きらめきだけに使い、文字には使わない。
• button-primary は文字 #FFFFFF × 背景 #14A3FE のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#017AC7、4.56:1）を使う。
• ribbon-heading は文字 #FFFFFF × 背景 #FD5A8D のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E9034B、4.59:1）を使う。
• label-band は文字 #FFFFFF × 背景 #BE91EA のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9953DE、4.52:1）を使う。
• pill-badge は文字 #FFFFFF × 背景 #14A3FE のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#017AC7、4.56:1）を使う。

Typography

• 見出しは明朝、本文・ボタンはゴシックにする。
• 本文は中央揃えで、短い行で改行する。
• 強調語はピンクか青の太字にし、マーカーを重ねてもよい。
• 見出しは助詞だけ小さくして、緩急をつける。
• 字間は 0.06〜0.1em 程度とやや広めにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、レビューは横スライダー 2 枚表示
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 28px 前後の余白を取り、中央に置く。
• 商品は「リボン→白カード→商品名→CTA→区切り線」の順で縦に繰り返す。
• 商品ブロックは両端がひし形の細い青線で区切る。
• ステップ番号のタブはカード上辺にはみ出させる。
• FV の下にアンカーボタンを 2 つ横に並べる。

Elevation & Depth

• 白カードは影なしか、ごく淡い影で地から浮かせる。
• CTA ボタンには下方向にソフトな影をつける。
• リボンは折り返し部分を濃い色にして立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品ボトルは切り抜きで、白カードの中央に置く。
• セクション境界: 直線で切り替え、背景色の変化で区切る。
• CTA はピル型にする。
• カードは角丸 24px 前後にする。
• 見出しリボンは両端を切り込みにする。
• 導入文は金のアーチ枠か飾り罫の枠で囲む。
• アコーディオンは角丸なしの細枠にする。

Components

• 購入して応援 CTA（button-primary）: 青グラデーションのピル型ボタン。左にハート、右に三角の矢印。2 行の白文字。
• ピンクリボン見出し（ribbon-heading）: 両端が折れたピンクのリボンに、白文字で商品のキャッチを 2 行で載せる。
• 商品カード（product-card）: 白い角丸カードに切り抜きボトルと詳細リンクを載せ、カードの下に商品名を置く。
• ステップカード（step-card）: 上辺にはみ出す青い Step タブを付け、明朝の見出しに細い下線を引く。
• アンカーボタン（anchor-button）: 上に色付きラベル帯、下に白地の 2 行テキストと下向き三角を置く。紫版とピンク版の 2 つ。
• 区分ラベル帯（label-band）: 紫・青・ピンクの横長の帯に白文字を載せ、条件や手順を区別する。
• 詳しく見るアコーディオン（accordion）: 白地に灰の細枠。中央にテキスト、右に＋を置く。
• 吹き出しピルバッジ（pill-badge）: 青いピル型に、スラッシュで挟んだ白文字の短い告知を載せる。
• 注意事項（notice-text）: 米印付きの赤い小さな文字の箇条書き。

Do's and Don'ts

Do - 地は必ずパステルのグラデーションにし、きらめきの装飾を散らす。 - 商品ごとにリボン・カード・CTA を同じ型で繰り返す。 - 見出しは明朝で、上品さを保つ。 - 強調はピンクと青の 2 色に限定する。 - 日付や期間はラベル付きで大きめの数字で示す。

Don't - 黒や濃い色の地のセクションを作らない。 - CTA の色を商品ごとに変えない。 - 角張った硬いカードにしない。 - 本文を左揃えの長い文章にしない。 - 高彩度の色を広い面に使わない。

Page Structure

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

1. ファーストビュー（企画名と期間を伝える。）: 水色の光の地に、ピンクのリボン、グラデーションのロゴ見出し、期間ラベル、台座に並べた商品を置く。
2. 導入メッセージ（参加を呼びかける。）: 飾り罫の枠と金のアーチ枠の中に中央揃えの文を置き、最後をピンクで締める。
3. アンカー導線（参加方法と特典へ誘導する。）: 紫とピンクのラベル付きボタンを 2 つ並べる。
4. 対象商品一覧（選んで購入してもらう。）: ピルバッジと明朝の大見出しを置き、リボン付きの商品カードと青 CTA を 8 回繰り返す。
5. お客様の声（評価で信頼を示す。）: 白地に星の評価とレビューのスライダー、枠線の「もっと見る」ボタンを置く。
6. 参加方法（3 ステップを説明する。）: 淡黄ストライプの地に紫リボン見出しを置き、Step タブ付きの白カードとアコーディオンを並べる。
7. 特典（参加の動機づけをする。）: 藤紫の地に、ピンクのタブ付きカードを 3 つ置く。表彰台・クーポン・ギフトのイラストを添える。
8. 結果発表告知（再訪を促す。）: 紙吹雪の枠の中に、リボンとロゴ、紫ラベル、日付を置く。

Imagery

• 商品ボトルは白背景で切り抜き、薄い影を添える。
• FV では商品を円柱の台座に並べ、光の玉と十字のきらめきを重ねる。
• イラストは淡い青紫のフラットなベクター（表彰台・封筒入りクーポン・ギフト箱）にする。
• 金色の細いアーチ枠や唐草の飾りを添える。
• 結果告知はカラフルな紙吹雪で華やかにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP 版の 1 カラムを中央 750px 前後の幅で表示し、左右を背景グラデーションで埋めるのが推奨。
• PC では商品カードを 2〜3 列のグリッドに広げてもよい。
• アンカーボタンは横並びのまま幅を広げる。
• レビューのスライダーは 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 行書くと起動時に読み込まれる。