DESIGN.md — 空色×砂浜ベージュの夏の菓子キャンペーンLP（Summer Beach Pop Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: 夏のビーチ・空色と砂色・3段階の賞品色・立体ピルボタン・白カード・レシート応募
• 地の質感: フラットなイラストと点線・紙吹雪の装飾。カードの右下にずらした色付きの影を付けた、少し立体的な見た目
• 形: 角丸カード、ぷっくり立体のピル型ボタン、波形のセクション境界
• 温度感: 暖かく明るい。昼の空と砂浜の色

Colors

• 地の色は空色と砂ベージュを交互に使い、セクションの切り替わりに使う
• コンテンツは必ず白カードに載せ、地の色の上に本文を直接置かない
• 賞品の段階は赤・橙・緑で固定する。帯・ボタン・数字を同じ色でそろえる
• ナビ・規約アコーディオン・セクション見出しはロイヤルブルーにする
• 注意・NG関連は赤枠と赤文字、OK関連は水色でまとめる
• カテゴリ見出しの帯は、カテゴリごとに茶・黄土・橙・青などで塗り分ける
• button-secondary は文字 #FDFAFA × 背景 #17B5FF のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#007AB3、4.56:1）を使う。

Typography

• セクション見出しは、英字の小見出しを弧状に置き、その下に和文の大見出し、さらに点線の飾りを付けて3段で組む
• 金額や人数の数字は特に大きくし、単位はその半分ほどの大きさにする
• 本文は字間を広めに取り、中央揃えと左揃えを使い分ける
• 注釈は小さめの灰色の文字で、ぶら下げインデントにする
• 注意事項の強調には赤い太字を使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 3 列、商品詳細へのリンクは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約 90% で中央に置く
• セクションは見出しブロックから始め、その下にカードを縦に積む
• カード同士の間隔は 16px
• ステップカードは青帯のパネルの中に入れ子にする
• 規約はアコーディオンを 8px 間隔で縦に並べる

Elevation & Depth

• カードの右下に、地の色を濃くしたずらし影（4〜6px）を付ける
• ボタンは下に濃い色の厚み（4px）を付けて立体的に見せる
• ぼかしの強い影は使わない

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き画像を白地に置く。説明の写真は角丸の四角か円形に切り抜く
• セクション境界: 空色と砂色の境は、ゆるい波形または斜めの線にする
• 見出し帯は上側だけ角丸にする
• OK/NGのラベルは小さなピル型にする
• ステップカードは薄い橙の 1px 枠と角丸 8px
• 注意事項のボックスは赤の 2px 枠

Components

• 応募ボタン（立体ピル）（button-primary）: 賞品の段階ごとの色で塗り、下に濃い厚みを付けたピル型ボタン。右端に小さな三角を付ける
• 水色サブボタン（button-secondary）: 詳細や一覧を開くための水色のピル型ボタン
• 賞品コースカード（prize-card）: 上部に色帯で応募条件、白地部分に当選者数と大きなポイント数、その下にボタンを置く
• セクション見出し（section-title）: 弧状に置いた英字＋放射線の飾り、和文の立体文字、点線を組み合わせる
• カテゴリ見出し帯（category-header）: カードの上部に付ける色帯。白文字で、右端に横線を入れる
• ステップ／ポイントカード（step-card）: 橙の英字ラベルと太字の小見出し、本文、図版を並べる枠付きカード
• OK/NG例ボックス（ok-ng-box）: 淡い水色とピンクの面に、ピル型のラベルと〇×付きのリストを入れる
• 規約アコーディオン（accordion）: 青い帯に白文字を中央揃えで置き、右端に＋アイコンを付ける
• ページ内ナビ（anchor-nav）: 青い面を点線で2×2に区切り、各項目の下に黄色の三角を付ける。下段にSNSボタンを置く

Do's and Don'ts

Do - 賞品の段階の色（赤・橙・緑）は、ページ全体で一貫させる - 地の色の上には白カードを置き、ずらし影を付ける - セクションの四隅に夏の小物のイラストを部分的に見切れさせて置く - 応募ボタンは賞品ごとに3本並べて繰り返し出す - 注意事項は〇×のアイコンと色分けで、パッと見て判断できるようにする

Don't - 黒やくすんだ色をメインに使わない - 白カードを使わずに長文を地の色の上に直接置かない - 賞品の段階の色を他の用途に流用しない - 細い明朝体や、落ち着きすぎた書体を見出しに使わない - ぼかしの大きい影や、写真のグラデーション背景を使わない

Page Structure

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

1. ファーストビュー（キャンペーン名、賞品の総数、応募期間を伝える）: 海辺のイラストを背景に立体ロゴを置き、その下に赤・橙・緑で3段階の賞品金額、吹き出し付きの期間表示を並べる
2. CTA（コースごとに応募してもらう）: 3色の立体ピルボタンを縦に並べる
3. ページ内ナビ（各セクションへの移動）: 青い面に2×2のリンクとSNSボタンを置く
4. キャンペーン概要（参加条件を要約する）: 空色の地に装飾見出しを置き、中央揃えの太字で、数字だけ赤くする
5. コース紹介（賞品ごとの条件と当選者数を示す）: 色帯付きの白カードを3枚並べ、それぞれにボタンを付ける
6. 賞品の説明（ポイントの交換先を示す）: 白カードに交換先のロゴを3×2で並べ、説明とサブボタンを置く
7. 対象商品（応募できる商品を示す）: 砂色の地に、カテゴリごとの色帯カードを置き、商品を3列のグリッドで並べる
8. 応募方法（手順を説明する）: 青帯のパネルの中に STEP カードを縦に積み、スマホのイラストを添える
9. 注意事項・撮影のポイント（無効な応募を減らす）: 赤枠のボックス、OK/NG例、POINT カード、NG写真の2×2グリッドで構成する
10. 利用規約（規約を開示する）: 砂色の地に青いアコーディオンを縦に並べる
11. お問い合わせ（問い合わせ先を案内する）: 細い黒枠の角丸ボックスに、中央揃えで電話番号と受付時間を書く
12. 商品詳細リンク（商品サイトへ送客する）: 2列の白カードに商品画像を置き、色付きのカテゴリ名と矢印を付ける

Imagery

• ヤシの葉・浮き輪・パラソル・太陽・雲のフラットイラストを、セクションの角から見切れさせて置く
• 白い点線の軌跡や小さな斜線を散らして、動きを出す
• 商品は白背景で切り抜いた正面向きの写真を使う
• 説明の図版は、木目の台に置いたレシートとスマホのイラスト
• 当選のステップは、紙吹雪とギフトボックスのイラストで演出する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 80% の幅のコンテナに収め、背景イラストは左右に広げる
• コース紹介や STEP、POINT カードは、PC では 2〜3 列に並べる
• 商品グリッドは PC では 5 列
• ナビは PC では横一列の青帯にする
• PC のファーストビューでは、賞品3段階を横並びにする

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