DESIGN.md — 氷青×濃紺×マゼンタのレシート応募キャンペーンLP（Icy Blue Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 氷青グラデーション・濃紺の明朝見出し・マゼンタの日付帯・ダイヤ飾り罫線・LINE応募ステップ
• 地の質感: FVと賞品エリアに光の粒と雪の結晶を散らした青グラデーション。下層は白とごく淡い面のフラットな構成。
• 形: 角丸カード（16〜20px）、ピル型のボタンと日付ラベル、大きな角丸の下端で賞品エリアを閉じる。
• 温度感: 寒色が中心でひんやり澄んだ印象。マゼンタが華やかさと温度感を足す。

Colors

• 地は白で、FVと賞品エリアだけを青グラデーションと光の粒で特別に見せる。
• 見出し・主ボタン・STEP番号・規約の項目マークは濃紺でそろえる。
• マゼンタはキャンペーン期間と金額条件の強調だけに使う。
• LINE応募の手順は緑の帯とミント地でまとめ、LINEだとすぐわかるようにする。
• ゴールドは会場・ロゴのアクセントに少しだけ使う。

Typography

• セクション見出しは明朝の極太で中央にそろえ、下にダイヤ飾りの罫線を入れる。
• 日付と金額の数字は周りの文字より約2倍大きくし、曜日や単位は小さく添える。
• 本文と手順の文章はゴシックの太字で短く改行する。
• 注意書きは10px前後にして、関係する画像やボタンのすぐ下に中央ぞろえで置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。商品は3列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出し・ボタン・注意書きは中央ぞろえ、規約文は左ぞろえ。
• カードは左右に約16pxの余白を取り、角丸の面で区切る。
• STEPは番号の円と本文を左右に並べ、その下に白い角丸の図解カードを置く。
• STEPのあいだは緑の下向き三角でつなぐ。

Elevation & Depth

• 基本はフラットで、影はほとんど付けない。
• マゼンタの強調ボックスにだけ、うっすら影を付ける。
• 賞品カードは半透明の白い面で青の背景から浮かせる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで白地に置き、図解は白い角丸カードに入れる。
• セクション境界: 賞品エリアの下端を大きな角丸で閉じ、ほかは余白だけで区切る。
• ボタン・日付ラベル・タグはすべてピル型。
• カードの角丸は16〜20pxでそろえる。
• 規約ボックスは固定の高さにして、中だけスクロールさせる。

Components

• 濃紺ピルボタン（button-primary）: 濃紺のピル型。右端に白い円を置き、中に濃紺のアイコンを入れる。
• マゼンタの期間帯（period-band）: ピル型のラベルと横長の帯で期間を示し、数字は大きく見せる。
• 条件強調ボックス（highlight-box）: マゼンタの角丸ボックス。中に白いピル型ラベルと大きな日付を並べる。
• ダイヤ飾りの見出し（heading-ornament）: 明朝の濃紺見出しの下に、両端が細くなる線と中央の菱形を並べる。
• 賞品カード（prize-card）: 青の背景に置く半透明の淡い面。賞品画像と当選数を中央にまとめる。
• LINE応募ステップ（step-card）: 緑の見出し帯とミント地のカード。濃紺の円にSTEP番号を入れ、線画の図解を添える。
• 濃紺インラインタグ（tag-label）: 文の中の重要語を濃紺のピルで白抜きにする。
• 規約スクロールボックス（terms-box）: 薄グレーの角丸ボックス。項目名の前に濃紺の四角を付け、中だけスクロールさせる。

Do's and Don'ts

Do - FVと賞品エリアは青グラデーションに光の粒や雪の結晶を重ね、氷の世界らしさを出す。 - 日付と金額は大きな数字で目立たせる。 - 見出しはすべて明朝とダイヤ飾りで統一する。 - 応募手順は番号付きの3段階に分け、線画の図解を添える。

Don't - 暖色の背景や派手な柄を下層に入れない。 - マゼンタを見出しや本文に広く使わない。 - 四角い角のボタンにしない。 - 影を強くしたり立体的なボタンにしたりしない。

Page Structure

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

1. ファーストビュー（対象商品の購入でイベントチケットが当たることを一目で伝える）: 青グラデーションにシルエットと光を重ねる。中央に装飾ロゴ、黒とマゼンタの大見出し、期間帯、商品の切り抜きを縦に並べる。
2. 賞品（賞品と当選数、日程を示す）: 青の背景に半透明カードを置き、チケットの画像と日程を中央ぞろえで並べる。下端は大きな角丸で閉じる。
3. 対象商品（対象になる商品をそろえて見せる）: 3列グリッドに商品の切り抜きと商品名を並べ、下に店舗検索ボタンと注意書きを置く。
4. 応募条件（購入金額と期間を強調する）: 大きな数字のリードと濃紺タグに続けて、マゼンタのボックスに期間を2段で入れる。
5. 応募方法（LINEで応募する手順を案内する）: 緑の帯付きミントカードの中に、STEPを3つ縦に並べ、三角でつなぐ。
6. CTA（応募ページへ誘導する）: アカウント情報の下に濃紺ピルボタンを置き、補足の説明文を添える。
7. 応募規約（規約を詳しく示す）: 薄グレーのボックスを中だけスクロールさせ、項目名に濃紺の四角を付ける。
8. フッターバナー（関連サイトへ誘導する）: 角丸のバナーを2つ並べる。SPは縦、PCは横に並べる。

Imagery

• スケーターの白いシルエットを、光るリンクのような青背景に溶け込ませる。
• 雪の結晶やきらめく光の粒を散らす。
• 商品パッケージは影を付けない切り抜き写真で並べる。
• 応募手順の図解は黒い単線の線画アイコンにする。
• イベントロゴは金色の筆記体のような装飾文字にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の幅を約800pxに絞り、外側にFVの背景を広げる。
• PCのFVはロゴと見出しを1行にまとめ、高さを低くする。
• 対象商品はPCで6列の横1列にする。
• STEPはPCで本文を左、図解を右に置く横並びにする。
• 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 行書くと起動時に読み込まれる。