DESIGN.md — 虹彩パステル×ティールの日用品キャンペーンLP（Iridescent Pastel Oral Care Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: オーロラ背景・半透明パネル・ティールのピルボタン・筆致の明朝キャッチ・大きな賞品数字
• 地の質感: ホログラムのような虹色ブラーを全面に敷き、上に白い半透明（すりガラス風）のパネルを重ねる
• 形: 角丸カードとピル型ボタン。斜め線や横線で見出しを挟む
• 温度感: 寒色寄りのニュートラル。ピンクやオレンジの差し色でほんのり温かくする

Colors

• 地は虹彩のパステルブラーで統一し、単色の塗りは帯やカードにだけ使う
• ボタンはすべてティールの塗りに白文字。他の色は使わない
• 見出しと期間の数字は濃紺、強調見出しは青
• 賞品金額は赤・シアン・オレンジでコース別に色を分ける
• 合計人数の数字はオレンジ→赤のグラデーションにする
• フッターだけ濃紺グレーの面にする
• button-primary は文字 #FDFBFC × 背景 #1B868C のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1A8086、4.55:1）を使う。
• button-secondary は文字 #FDFBFC × 背景 #1B868C のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1A8086、4.55:1）を使う。
• course-tag は文字 #FDFBFC × 背景 #02ACC3 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#017F91、4.58:1）を使う。

Typography

• キャッチだけを明朝にして、字の大きさを不揃いにし、下に細い斜めの線を添える
• それ以外は太めのゴシックで、中央揃えにする
• 日付の数字は大きく、曜日はかっこ付きで小さくする
• 人数の数字はグラデーション、単位の『名様』は赤の太字
• 注釈は※から始め、10px前後のグレーで書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• パネルとカードは左右に約20pxの余白をとって中央に置く
• 応募CTAのパネルはページ内で2回繰り返す
• 賞品は上位1行＋下位2カラム＋補足帯の順に並べる
• 見出しの上下は40〜60pxあける
• 規約部分は細い上下罫線で見出しを挟む

Elevation & Depth

• 影はほぼ使わず、半透明の白パネルで面を分ける
• 賞品カードは白地のみで、ごく弱い影をつける
• 告知バナーは濃い黒地にして、浮いて見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き写真を横一列に並べ、歯ブラシは大きな切り抜きをパネルの端からはみ出させる
• セクション境界: 境界線は引かず、背景の帯の色の違いで区切る
• ボタンは完全なピル型
• 期間ラベルは細い線の長方形で囲む
• コース名は角ばった色帯のラベルにする
• 補足の人数はグレーの円形バッジにする

Components

• 応募ピルボタン（button-primary）: ティール地に白文字、右に書類のアイコンを付ける
• 一覧リンクボタン（button-secondary）: 同じ色で、少し細めのピル型
• 開催中パネル（cta-panel）: 半透明の角丸パネルに、下線付きの見出し・期間・所要時間・ボタンをまとめる
• 期間枠ラベル（period-label）: 細い線で囲んだ長方形の中に期間名を書き、その下に大きな日付を置く
• 賞品カード（prize-card）: 白い角丸カード。人数を大きく見せ、下にコース別の色ラベルと金額を置く
• コース色帯（course-tag）: 赤・シアン・オレンジの帯に、白文字でコース名と当選人数を書く
• 下線見出し（heading-underline）: 青い太字に細い下線を引く
• 固定ヘッダー（site-header）: 白地。左にロゴ、右にSNSの円アイコンとティールの応募ボタンを置く

Do's and Don'ts

Do - 背景には虹色のブラーテクスチャを全面に敷く - 応募ボタンは同じ形と色でくり返し出す - 日付・人数・金額は大きな数字で目立たせる - 注釈は※付きの小さな文字で必ず添える - グラフは原色のフラットな棒にし、白い線画アイコンを載せる

Don't - 背景を真っ白や濃い単色にしない - ボタンに赤やオレンジを使わない（告知バナーは例外） - 明朝体を本文に使わない - パネルに強い影や太い枠線をつけない - 賞品金額を同じ色だけで並べない

Page Structure

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

1. ファーストビュー（キャンペーン名と期間を伝える）: 葉影とパステルの背景に、明朝のキャッチ、期間枠、商品の一列写真を載せ、大きな歯ブラシの切り抜きを浮かせる
2. 開催中CTA（すぐ応募してもらう）: 半透明パネルに下線見出し・期間・所要時間・ピルボタンを置く
3. 当選人数訴求（当たる規模を見せる）: グラデーションの大きな数字と斜め線を置き、下に商品を並べた帯を敷く
4. 対象商品の注記（対象範囲を説明する）: 左右に線を引いた見出し、中央揃えの注記、一覧ボタン
5. 同時開催告知（SNS応募を併せて促す）: グラデーション枠のバナー。倍率の数字と、第1〜3弾の日程カードを並べる
6. 動画（CMを見せる）: 幅いっぱいに埋め込み、下にキャッチの明朝を大きく置く
7. ケアの啓発（商品が必要な理由を示す）: 原色の棒グラフと出典を載せ、中央揃えのリード文を続ける
8. 応募方法（条件と手順を伝える）: 青い見出しの下に、番号付きのテキストを左揃えで並べる
9. 賞品（コース別の賞品を見せる）: 白カードに、色帯ラベルと大きな金額を置く
10. 再CTA・関連告知（応募を後押しする）: 開催中パネルを再び置き、続けて黒地の別キャンペーンのバナーを置く
11. 個人情報・フッター（規約と問い合わせ先を示す）: 罫線で挟んだ見出し、中央揃えの本文、下線リンク、SNSアイコン、濃紺のコピーライト帯

Imagery

• 虹色のホログラムを流れるようにぼかした背景テクスチャ
• 白背景で撮った商品パッケージの切り抜きを、すき間なく横一列に並べる
• 大きな歯ブラシなどの切り抜きを斜めに置き、パネルの端からはみ出させる
• 上の角には淡い葉の影をシルエットで入れる
• グラフや図解は、白い線画のフラットなアイコンで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも1カラムで、中央の幅を約70%に絞る
• PCでは、ファーストビューのキャッチの左右に商品の切り抜きを大きく置く
• パネルとカードはPCで最大幅を約800pxに抑え、中央に置く
• SPではキャッチと日付を画面幅いっぱいまで大きくする
• ヘッダーの応募ボタンはSPでも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 行書くと起動時に読み込まれる。