DESIGN.md — 青×黄のポップなコスメ特典キャンペーンLP（Pop Blue Yellow Fan Event Cosmetics Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ビビッドな青と黄・極太の立体文字・黒い楕円ラベル・ステッカー風・特典の積み上げ・価格訴求
• 地の質感: フラットな単色面に、破れた紙のような境界、細い落書き線、きらめき記号を散らす。方眼紙柄の淡い黄色の地も使う。
• 形: 角丸カード、傾いた黒い楕円、ギザギザの吹き出し、斜めに傾けたチケットやクーポン形。
• 温度感: 明るく高揚感のある暖色寄り。青が締め役になり、にぎやかでもまとまって見える。

Colors

• 青と黄の大きな面を交互に使い、セクションの切り替えをはっきり見せる。
• 青地では見出しの要所だけ黄色にし、残りは白文字にする。
• 黄色地では文字を黒にし、立体の影も黒で付ける。
• 黒は楕円ラベル・帯・大きな円に絞り、締め色として使う。
• 商品カードは白い写真部と、色帯の価格部（黄または青）に分け、カードごとに黄と青を交互にする。
• 注釈は白地の小さなグレー文字にする。

Typography

• 大見出しは極太にし、黒い影を斜め下にずらして立体的に見せる。
• 1つの見出しの中で、白と黄色の2色を語句ごとに切り替える。
• 価格は数字を最大にし、「円」は小さめにする。
• 商品名は大事な語だけ太字、容量は細字の小サイズにする。
• 見出しはすべて中央揃え、説明文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品写真は横並び、STEP は 4〜5 列の横並び
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特典ごとに、黒楕円ラベル→導入文→大見出し→ビジュアル→区切り線→注釈の順に積む。
• 商品カードは写真部と価格部の上下2段にする。
• セット番号のギザギザバッジをカードの左上角にはみ出させる。
• GIFTの小枠はカード右上に重ねる。
• STEP表記は横線でつなぎ、下に商品名を2行で置く。

Elevation & Depth

• 影はぼかさない。黒をずらしたハード影を文字やラベルに付ける。
• カードには影を付けず、黄色の太い枠線か色帯で区切る。
• チケット・クーポン・写真は少し傾けて重ね、ステッカー風にする。

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は角丸の長方形か切り抜き。商品は白地に切り抜いて並べる。
• セクション境界: FV下は破れた紙風のギザギザ、使用順セクションは上に膨らむ波形のカーブ。
• ラベルは傾けた黒い楕円にする。
• 番号バッジは花形のギザギザ円にする。
• 割引率は傾けた青い楕円の中に入れる。
• 期間などの情報帯は黒か白のピル型にする。

Components

• 黒楕円の特典ラベル（label-oval-black）: 傾けた黒楕円に白文字の見出しと黄色の番号を入れる。上には弧を描く英字の小見出しを置く。
• 期間ピル帯（period-pill）: 黒いピルに応募期間を白文字で1行で入れる。
• 開催情報ピル（info-pill-white）: 白いピルに日程・場所・発表方法を並べる。項目名は太字にする。
• 商品セットカード（set-card）: 上は白地の商品写真、下は黄か青の価格帯。黄色の太枠で囲む。
• セット番号バッジ（badge-set-number）: 黒いギザギザ円に白文字で番号を入れ、カード左上にはみ出させる。
• 割引率バッジ（badge-discount）: 傾けた青楕円に、影付きの白い極太数字と小さな%を入れる。
• 価格ブロック（price-block）: 取り消し線の通常価格とクーポン価格を矢印でつなぎ、最終価格を極太の大きな数字で見せる。
• シーン見出しピル（scene-pill-heading）: 青いピルに白文字の見出しを入れ、白カードの上端に重ねる。
• STEPチップ（step-chip）: 青い楕円に影付きの白いSTEP文字を入れ、横線でつないで順番を示す。

Do's and Don'ts

Do - 青と黄の面を大きく切り替え、ページにリズムを出す。 - 見出しには必ずハード影を付け、立体感を出す。 - 特典は番号付きラベルで順に並べ、数の多さを見せる。 - 価格は割引率・通常価格・最終価格の3段で見せる。 - きらめき・音符・落書き線を余白に小さく散らす。

Don't - くすんだ色やパステルだけで組まない。 - ぼかした柔らかい影を使わない。 - 細い明朝体を見出しに使わない。 - 1つのセクションに強調色を3色以上入れない。 - 商品写真を色地の上に直接置かない（必ず白地に置く）。

Page Structure

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

1. ファーストビュー（イベント名と期間を一目で伝える）: 黄色地に黒いアーチ枠のロゴ見出しを置き、人物写真、極太の立体タイトル、ギザギザの「第◯弾」バッジ、黒ピルの期間帯を順に並べる。
2. 特典1（メイン特典のイベント招待を訴求する）: 破れ紙の境界から青地にする。黒楕円ラベル、白と黄の2色見出し、チケット形の装飾付き写真、白ピルの開催情報を置く。
3. 応募条件（応募方法を説明する）: 黒い区切り線の下に、白文字の中央揃えの箇条書きを置く。
4. 特典2（全員プレゼントを示す）: 傾けた冊子写真を重ね、吹き出し文字と黒楕円の応募券ラベルを添える。
5. 特典3（サンプル配布を示す）: パウチ型サンプルを扇状に並べ、小さな注釈を添える。
6. クーポン・ポイント（購入時のお得さを強調する）: 傾けたクーポン券と黒い大きな円に黄色の数字を入れ、コインのイラストを散らす。
7. 対象商品セット（セットごとの価格を比較して購入を促す）: グレー地に番号バッジ付きのカードを縦に並べ、価格帯を黄と青で交互にする。
8. おすすめ使用順（悩み別の使い方を提案する）: 波形の青い上端、クリーム色の方眼地にする。シーン見出しピル付きの白カードと、STEPのフローを置く。

Imagery

• 人物は明るい自然光の白背景で撮った集合写真にし、カジュアルな服装で並べる。
• 商品は白背景に切り抜き、ボトルとチューブを高さ違いで並べる。
• チケット・クーポン・冊子は少し傾け、ステッカーのように重ねる。
• 白い手描き風の線、ハート、音符、きらめきを余白に散らす。
• 金色のコインのイラストで、ポイント特典のお得感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPC中央寄せの1カラム（約480px相当）で、SPでもほぼそのまま縦に積める。
• SPでは大見出しを1行8〜10字で改行し、文字サイズは画面幅の約12%までにする。
• 商品カードの価格ブロックは、SPでは割引率バッジを左、価格を右に置き、幅が足りなければ上下に分ける。
• STEPが5つある場合、SPでは文字を小さくするか、2段に分ける。
• PCでは中央のコンテンツ幅を480〜750pxに固定し、左右は各セクションの地色で埋める。

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