DESIGN.md — 青グラデと若葉色のエコ懸賞キャンペーンLP（Fresh Blue Eco Recycling Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、やさしい・柔らかい
• キーワード: 青グラデーション・若葉の波線・白い角丸カード・リボン見出し・弾ごとの色分け・ステップ解説
• 地の質感: フラットな塗りとなめらかな縦グラデーションの組み合わせ。影はごく薄くし、紙のように清潔な質感にする
• 形: 大きめの角丸カード、両端を切り欠いたリボン型の帯、波打つセクション境界、ピル型ボタン
• 温度感: 青を基調にした爽やかで涼しい印象。若葉色とクリーム色が少し温かみを足す

Colors

• 地は青→濃紺→青の縦グラデーションを基本にする。賞品セクションだけクリーム地に切り替える
• セクションの境目には若葉色の波線を1本入れる
• コンテンツは必ず白い角丸カードに載せる。文字はほぼすべて濃紺にする
• 賞品の弾ごとに帯の色を緑・青・橙・ピンク・黄と変え、当選人数の丸バッジも同じ系統の淡色にそろえる
• 強調は黄色マーカーと、濃紺より一段濃い太字で行う。赤は無効条件などの注意書きだけに使う
• 情報ボックスは淡い水色の見出し帯と細い水色の枠で作る
• prize-band は文字 #F2FEFF × 背景 #6DB33F のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#4E802D、4.58:1）を使う。
• button-primary は文字 #F2FEFF × 背景 #029EE9 のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#027AB4、4.59:1）を使う。
• or-divider は文字 #F2FEFF × 背景 #EB8202 のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#AE6001、4.56:1）を使う。

Typography

• 見出しも本文も太めのゴシックにし、細い書体は使わない
• 数字（人数・日付・個数）は1.4〜1.8倍に大きくして強調する
• 説明文は中央揃えで短く改行する
• キャッチは橙色の丸ゴシックでやわらかく見せる
• 注釈は※から始め、2行目以降は字下げしてそろえる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。賞品写真と対象商品は 2〜3 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは画面幅の約92%で中央に置く
• 各セクションはリボン見出しから始める
• 賞品は弾ごとにグレーの帯で区切り、弾の中は点線と「または」ラベルで2択を並べる
• 応募方法はStepカードを縦に積み、間に若葉色の下向き三角を置く
• 当選人数の丸バッジはカード右下からはみ出させて重ねる

Elevation & Depth

• カードの影はごく薄いかなしにする。白と青の明暗差で浮かせる
• 応募要項のスクロール枠だけ、グレーの細い枠と薄い影を付ける
• 丸バッジは平面のまま、カードの端に重ねて立体感を出す

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品写真は白背景の切り抜き。賞品写真は角丸なしの四角にする
• セクション境界: 若葉色の細い波線と、背景色が切り替わる波形
• カードの角丸は大きめ（約24px）にする
• リボン見出しは両端をV字に切り欠いた帯にする
• 賞品名の帯はカード幅より左右にはみ出させ、端を斜めに切る
• 当選人数は直径約80pxの正円バッジにする
• A/B/Cの番号は青い正方形に白文字で入れる

Components

• リボン見出し（ribbon-heading）: 濃紺の帯の両端をV字に切り欠き、白文字のセクション名を中央に置く
• 賞品名の帯（prize-band）: 弾ごとの色の帯をカード幅より広げ、端を斜めに切る。白文字で2行まで
• 当選人数の丸バッジ（winner-badge）: 淡色の正円に「合計」と大きな数字・名様を濃紺で入れ、カード右下に重ねる
• ピル型ボタン（button-primary）: 青のピル型。白文字で、右端に矢印を付ける
• Stepカード（step-card）: 上部が若葉色の帯で、濃紺の斜体でStep番号を入れる。下部は白の本文
• 情報ボックス（info-box）: 淡い水色の見出し帯と水色の細い枠で、必要数や宛先を入れる
• 終了済みの帯（ended-overlay）: 終わった弾の見出しに半透明のグレーをかぶせ、終了のお知らせを白文字で載せる
• 黄色マーカー（marker-text）: 重要な語句の背面を黄色の帯で塗る
• 「または」区切り（or-divider）: 点線の中央に、ピル型の小さな色ラベルを置く

Do's and Don'ts

Do - 地は青のグラデーションにし、白カードを重ねて情報を整理する - セクションの境目は若葉色の波線でつなぐ - 数字は大きく太く、濃紺で見せる - 賞品は弾ごとに帯の色を変えて区別する - 手順は番号付きのStepカードと下向き三角でたどれるようにする - 葉っぱ・木・リサイクル矢印のイラストで環境のテーマを伝える

Don't - 黒や濃いグレーの地を使わない - 細い明朝体で見出しを組まない - 赤を装飾に使わない（注意書きだけにする） - 角の立った四角いボタンにしない - カードに強い影を付けない - 写真を全面に敷いて文字を重ねない

Page Structure

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

1. ファーストビュー（キャンペーン名と対象ブランドを伝える）: 白地に橙のキャッチを置き、手描き線画のロゴ風タイトルと葉のイラスト、商品パッケージを並べる
2. プレゼント告知（当選人数と期間を訴求する）: 青グラデの地に白・黄色の太字で人数を大きく見せ、リボン帯の下に期間の日付を置く
3. コンセプト説明（リサイクルの意義を伝える）: 淡い若葉色のカードに中央揃えの短文を置き、リサイクル矢印のイラストを添える
4. 応募概要（集めるものと必要数を示す）: 黄色マーカーで強調し、A/B/C番号付きの必要数ボックスと注釈を置く
5. 賞品紹介（弾ごとの賞品を見せる）: クリーム地に弾の見出しを置き、色の帯・写真・スペック・丸バッジを入れた白カードを2択で並べる
6. 対象商品（対象となる商品をはっきり示す）: 白カードの中にカテゴリ見出しを置き、切り抜き商品写真と商品名を2〜3列で並べる
7. 応募方法（手順を4段階で説明する）: Stepカードを縦に積み、イラスト・情報ボックス・OK/NG例・ピル型ボタンを入れる
8. 応募要項（規約の詳細を載せる）: 枠付きの白いスクロールボックスに小さな文字で収める
9. お問い合わせ（問い合わせ先を案内する）: 白カードに山括弧付きの見出しとフリーダイヤルの大きな番号を置く

Imagery

• 商品は白背景の切り抜き写真で、正面からややななめに撮る
• 賞品はやわらかい自然光で、テーブルの上に置いた生活シーンとして撮る
• 葉・木・リサイクル矢印は若葉色のフラットなイラストで描く
• 手順の説明は段ボールや封筒の線画に、赤い矢印を添える
• タイトルは青い手描き線の箱と指先のイラストで遊び心を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではカードの幅を約70%（最大約900px）にして中央に置く
• PCでは賞品を1弾ごとに2カラムで並べ、間に縦の点線と縦書きの「または」を置く
• PCでは対象商品を5列にする
• PCのStepカードは、左にイラスト・右に本文の横並びにする
• PCのFVはタイトルを中央に置き、ブランドロゴを左右に分ける

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