DESIGN.md — チョコ茶×金のレトロなプレゼントキャンペーンLP（Retro Chocolate Brown and Gold Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: レトロ、上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: チョコレートブラウン・金のグラデーション・クリーム色の紙・アンティーク唐草・封蝋バッジ・赤リボン
• 地の質感: 濃茶の地に、うっすら紙の質感がある生成りのパネルを重ねる。金ボタンは光沢グラデーション。
• 形: 上下が大きく丸いアーチ型カード、ピル型ボタン、リボン帯、円形の封蝋。
• 温度感: 温かく深みのある暖色。ノスタルジックで落ち着いた印象。

Colors

• 地は濃チョコ茶を基本とし、情報量の多いブロックは生成り・クリームの紙面パネルに載せる。
• 主CTAは必ず金のグラデーションのピルボタンにし、文字は濃茶にする。
• 深紅はリボン見出しと小見出し帯・封蝋バッジに限定する。
• 金の唐草罫線でセクションの区切りと見出しの左右を飾る。
• 濃茶地の文字は生成り、紙面上の文字は濃茶にし、黒は使わない。
• STEP帯はオリーブゴールドの地に白い大文字の欧文を載せる。

Typography

• 見出し・賞品名・ボタンは明朝体で格調を出す。
• 数字の当選人数は周りより大きくして強調する。
• リード文は中央揃えで短く改行し、行間を広く取る。
• 手順説明・規約はゴシックで読みやすくする。
• セクション見出しは字間を広めに取り、左右に唐草飾りを置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。対象商品だけ 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 賞品は紙面パネル内に縦に積み、1 賞品 1 カードにする。
• セクションの終わりごとに金CTAを中央に置く。
• 上部にアンカーナビの 2×2 ピルボタンを置く。
• 見出し→リード→パネルの順に中央揃えで並べる。
• 規約は高さ固定のスクロールボックスに収める。

Elevation & Depth

• 賞品写真には柔らかいドロップシャドウを付ける。
• 歴史画像の背後にぼかした暖色の光を置く。
• 金ボタンは光沢グラデーションで立体感を出し、影は弱くする。
• 紙面パネルはフラットにして、外周を金の装飾枠で囲む。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 80px。ボタンはピル型。
• 写真の切り抜き: 賞品・商品は切り抜き。背景なしで影を付ける。
• セクション境界: 唐草模様の金の水平罫線。地色は直線で切り替える。
• 賞品カードは上下が大きく丸いアーチ型で、オリーブ色の二重線にする。
• STEPカードは角丸12px程度で、オリーブ金の太枠にする。
• リボン見出しは両端に切り込みを入れた赤い帯にする。
• 当選数のバッジは封蝋風の不定形な円にする。

Components

• 金の応募ボタン（button-primary）: 金のグラデーションのピル型ボタン。中央に明朝の文字、右端に矢印。
• 特設ページへのリンク（button-outline）: 濃茶地に生成りの細い線のピル型ボタン。右端に矢印。
• アンカーナビ（anchor-nav）: クリーム地に金の縁取りのピルを2×2で並べる。右に小さなv字。
• リボン見出し（ribbon-heading）: 両端が燕尾形の深紅の帯に、生成りの明朝文字。応募口数の区分に使う。
• 封蝋バッジ（wax-badge）: 深紅の封蝋風の円。賞の名前と当選数を2段で入れ、カードの左上に重ねる。
• アーチ型賞品カード（prize-card）: 生成り地にオリーブの二重線のアーチ枠。写真→キャッチ→賞品名→区切り線→仕様の順に並べる。
• STEPカード（step-card）: 上部はオリーブ金の帯に欧文のSTEP番号。下は生成り地に太字の説明とアイコン。
• 小見出し帯（sub-heading-bar）: 全幅の深紅の細い帯に、白い小さな太字を中央に置く。
• 唐草付きセクション見出し（ornament-heading）: 金の明朝見出しの左右に、アンティークの唐草飾りと細い線を置く。

Do's and Don'ts

Do - 金のCTAボタンは各セクションの終わりに繰り返して置く。 - 賞品は封蝋バッジとアーチ型カードの組み合わせで格を表す。 - 見出しには必ず唐草飾りを付け、クラシックな統一感を保つ。 - 地の色は濃茶とクリームの2トーンを交互にしてリズムを作る。 - 当選人数などの数字は大きな明朝体で強調する。

Don't - 純黒や純白の大きな面を使わない。 - ビビッドな青や緑などの寒色を入れない。 - ボタンをフラットな単色の四角にしない。 - 丸ゴシックやポップな手書き体を使わない。 - 装飾のない細い1px罫線だけで区切らない。

Page Structure

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

1. ファーストビュー（キャンペーン名・賞品・応募期間を一目で伝える。）: 板チョコの写真を敷いた上に大きな白抜きタイトルを置く。八角形の白パネル2枚に応募口数別の賞品を見せる。下部は赤リボン付きの深紅帯に応募期間を入れる。
2. アンカーナビ（各セクションへ移動しやすくする。）: 濃茶地にクリーム色のピルボタンを2×2で並べる。
3. 賞品紹介（賞品の魅力と仕様を伝える。）: 唐草見出しとリードの下に、金枠の紙面パネルを置く。リボン見出しで口数を区分し、アーチ型カードを縦に積む。
4. CTA（応募へ誘導する。）: 濃茶地の中央に金のピル型ボタンを置く。
5. ブランドストーリー（歴史とこだわりで共感を生む。）: 暖色の光を背負った古い本の画像を置き、中央揃えの短い詩的な文章を続ける。続けて角丸の淡いベージュのカードに商品写真と素材の説明を入れる。
6. 対象商品（購入対象の商品を明示する。）: クリーム地に商品パッケージを2カラムで並べ、下に名称と容量を入れる。背景にカカオの線画をうっすら置く。
7. 応募方法（手順と注意点を説明する。）: ベージュのパネル内に深紅の小見出し帯と説明を置き、STEPカード3枚を縦に並べる。
8. レシート撮影方法（撮影の不備を防ぐ。）: 良い例は淡い黄土の地、悪い例はグレーの地に、レシートのイラストを並べる。
9. 応募規約（条件を網羅して示す。）: 生成りのスクロールボックスに小さなゴシックで規約を入れ、見出しは濃茶の太字＋区切り線にする。
10. お問い合わせ（問い合わせ先を伝える。）: 濃茶地に金の細い枠のボックスを置き、金の見出しと生成りの文字で書く。

Imagery

• 賞品はレトロな木目や真鍮の質感が出るように斜め上から撮り、切り抜いて柔らかい影を付ける。
• 背景には板チョコの凹凸を大きく写した写真を敷く。
• アンティークな金の唐草模様・額縁の飾りを多用する。
• 手順の説明は濃茶とオリーブ金の単純なフラットアイコンにする。
• クリーム地の装飾にはカカオの実の線画をうすく入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の固定幅（約70%）に収め、左右には濃茶の地を広げる。
• PCの賞品カードは横長のアーチにし、左に文字、右に写真を置く。
• PCのSTEPカードは3カラムで横並びにする。
• PCのナビは4つのピルを1行に並べる。
• 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 行書くと起動時に読み込まれる。