DESIGN.md — 金色×黄色×えんじの菓子プレゼントキャンペーン LP（Golden Lucky Charm Candy Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、和風
• キーワード: 金屏風・縁起物・白カード積み・えんじ極太見出し・黄色ラベル・ステップ帯
• 地の質感: FV だけ金箔・雲模様の光沢がある。ほかはベタ塗りのフラットな面。
• 形: 角丸 24px 前後の白カード、ピル型の黄色ラベル、矢羽根型に下が尖ったステップ帯
• 温度感: 暖色寄り。金・黄・朱で祝祭感がある

Colors

• セクションの地は金茶と明るい金を交互に塗り、上に白カードを置く
• 見出しと本文の強調はすべてえんじにし、黒は使わない
• 黄色はセクション見出しの下線と、小見出しのピル型ラベルに使う
• 手順は黄→オレンジ→朱と、段階ごとに色を濃くする
• 紺は当選数バッジや注釈の一部に絞って、差し色として使う
• 応募ボタンは同意チェック前はグレーにし、チェック後に有効色へ切り替える

Typography

• 文字はほぼすべて中央揃え
• 大見出しは極太のディスプレイ書体を使い、真下に黄色の太い下線を引く
• 日付と当選数は数字を大きく、単位は小さく組む
• 本文は太めのウェイトでえんじ色にする
• 注釈は 9〜10px で密に組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。白カードの中も縦積み
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 54px、基本単位 8px、カード内 28px（375px 幅換算）
• 各セクションは白カード 1 枚にまとめ、カードの外側は金色の地にする
• カードの上下に 50px 前後の地色の余白を取る
• カード内の色帯（解説ボックス・STEP 帯）は左右 28px 内側に置く
• 商品画像は 3〜5 個を横に並べたグリッドにする
• 応募フォームの部品は幅いっぱいのブロックで縦に並べる

Elevation & Depth

• 影は使わず、フラットな色面で階層を表す
• カードは地色とのコントラストだけで浮かせる
• 商品写真は切り抜きにし、影は付けない

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品とキャラクターは背景を切り抜いて置く
• セクション境界: 直線で地色を切り替える。STEP 帯の境目だけ下向きの矢羽根形にする
• 見出しラベルは完全なピル型の黄色にする
• カードの角丸は 24px
• えんじのラベルの角丸は 4〜6px
• 吹き出しは角丸 8px で、しっぽを付ける

Components

• 白コンテンツカード（section-card）: 金色の地に置く角丸の白カード。1 セクション＝1 枚
• 黄色下線つき大見出し（heading-underline）: 極太のえんじ文字の下に、幅いっぱいの黄色線（6px）を引く
• 黄色ピル見出し（pill-label）: 黄色のピル型の中にえんじの太字を置く小見出し。左側に円形バッジを重ねる場合もある
• 当選数バッジ（count-badge）: 紺のピル型に、白と黄色の文字で当選数を強調する
• 矢羽根ステップ帯（step-band）: 黄→オレンジ→朱の帯を縦に連結し、下端を V 字にして次へつなぐ。中に線画アイコンを置く
• キャラクター吹き出し（speech-bubble）: 黄色の角丸吹き出しを、キャラクターの横に置く
• 規約アコーディオン（accordion-terms）: えんじのベタ面に白の太字と▼を置いた開閉バー
• 応募ボタン（button-primary）: 幅いっぱいの角丸ボタン。上に小さな補足、下に大きなラベルの 2 段構成。同意前はグレーにする
• えんじ小ラベル（info-label）: 問い合わせ項目名などを、白文字のえんじ角丸ラベルにする

Do's and Don'ts

Do - 地色は金系 2 色の交互にし、白カードを積む - 見出しはえんじの極太書体＋黄色下線で統一する - 数字（期間・当選数）は特大で見せる - 手順は色が段階的に変わる帯で表す - 撮影例は良い例・悪い例を記号付きで並べる

Don't - 黒文字や寒色を主役にしない - 細い明朝などの繊細な書体は使わない - カードに強い影やグラデーションを付けない - 左揃えの長文ブロックを多用しない - 黄色を本文の文字色に使わない

Page Structure

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

1. ファーストビュー（賞品と当選数・期間を一目で伝える）: 金屏風と雲の背景に賞品のフィギュアを群像で置く。下部の帯に当選数と期間を大きく入れる
2. 賞品紹介（賞品の由来と魅力を伝える）: ロゴ風の見出しの後に中央揃えの説明を置き、キャラクターと黄色の吹き出しを添える
3. キャンペーン1詳細（条件・期間・抽選回を示す）: 大見出し、当選数バッジ、ピル型の期間ラベル、特大の日付、月別抽選の一覧の順に積む
4. 賞品バリエーション（種類と遊び方を見せる）: 4 種を横並びの切り抜き写真で見せ、山吹色のボックスで遊び方を 3 ステップのイラストで説明する
5. キャンペーン2詳細（全員プレゼントを訴求する）: 同じ見出しの型で期間を示し、壁紙のサンプル画像を置く
6. 対象商品（購入対象を示す）: ピル見出しの下に商品パッケージのグリッドを置き、黄色の丸点付きリストを続ける
7. 応募方法（手順を理解させる）: 黄・オレンジ・朱の矢羽根帯で 3 ステップを見せ、各段に線画アイコンを入れる
8. レシート撮影の注意（無効応募を防ぐ）: 番号付きのレシート図解、えんじの項目バー、良い例（○）と悪い例（×）を並べる
9. 規約・応募フォーム（同意を取って応募させる）: えんじのアコーディオン、同意チェック、グレーの 2 段ボタン 2 つ、会員登録の説明を順に置く
10. お問い合わせ（事務局の連絡先を示す）: 黄色のピル見出しの下で、えんじのラベルごとに連絡先と期間を中央揃えで並べる

Imagery

• 賞品やキャラクターのフィギュアは光沢のある切り抜きにし、金背景の上で群像に配置する
• FV は金箔の質感に白い雲や松などの和柄の装飾を重ね、縁起の良い印象にする
• 商品パッケージは正面の切り抜きをグリッドで並べる
• 手順のアイコンは、えんじの太線とグレーで描いたスマホやレシートのシンプルな線画にする
• 説明用のイラストはキャラクターを赤い線で描き、星のきらめきを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも 1 カラムを保ち、白カードを中央に置いて幅 75% 程度に収める
• PC では見出しの文字を相対的に小さくし、余白を詰める
• PC ではステップ帯を横 3 列に並べ、右向きの矢羽根でつなぐ
• PC ではレシート図解と撮影注意を左右 2 カラムにする
• 変身方法のボックスは、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 行書くと起動時に読み込まれる。