DESIGN.md — 水色×白と金リボンの飲料プレゼントキャンペーンLP（Airy Sky Blue Receipt Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 白と水色・透明感・金色リボン・斜めストライプ枠・食卓写真・応募手順
• 地の質感: 白から淡い水色へのグラデーション地。背景に大きな筆記体の透かし文字を薄く敷く。
• 形: 角丸の細線枠、斜めストライプの額縁、リボン型の帯、黄色の円バッジ
• 温度感: 涼しげで明るい。賞品の金色が温かさを足す

Colors

• 地は白から淡い水色へのグラデーションを基本にし、濃色の面は使わない。
• 見出し・日付・ステップ線はシアン1色でまとめる。
• 金色は賞品のリボン帯と当選数の数字だけに使う。
• 黄色の円バッジはコース本数の表示専用にする。
• 赤はPDFダウンロードボタンと注意喚起の1行だけに使う。
• 最終の応募ボタンは黒地に白文字で、ページの最後に置く。
• deadline-frame は文字 #09A3DC × 背景 #FCFEFE のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#077DA9、4.59:1）を使う。
• label-tag は文字 #FFFFFF × 背景 #09A3DC のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#077DA9、4.53:1）を使う。
• gold-ribbon は文字 #FFFFFF × 背景 #DA9A02 のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9B6D01、4.58:1）を使う。
• course-badge は文字 #09A3DC × 背景 #FDF324 のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#077DA9、4.52:1）を使う。
• step-card は文字 #09A3DC × 背景 #FCFEFE のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#077DA9、4.59:1）を使う。
• button-download は文字 #FFFFFF × 背景 #EB3523 のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E52815、4.52:1）を使う。

Typography

• 当選数の数字は太い欧文セリフで大きくし、単位は小さめのゴシックにする。
• セクション見出しは細めの明朝をシアンで書き、字間を広めにとる。
• 日付はゴシックの太字にし、曜日は括弧付きで小さくする。
• 本文は太めのゴシックで、行間は1.6以上にする。
• 注釈は※で始め、10px前後の灰色で書く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せ 1 カラムで、ステップだけ 3 列にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 賞品カードは斜めストライプの額縁で囲み、縦に積む。
• リボン帯と円バッジはカード上端の左に重ねて置く。
• ステップカードの間は12px前後の詰めた間隔にする。
• セクション見出しは中央揃えにし、上下に二重線を引く。
• 最後のボタン群は白地の中で縦に並べる。

Elevation & Depth

• 影はほぼ使わず、細い線と色面で区切る。
• 日付枠は白地に二重の細線を引き、外側をうっすら発光させる程度にとどめる。
• 賞品写真には商品の下に落ちる自然な影だけを残す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は白背景の切り抜き。FVは人物と食卓の写真を全面に使い、下端を白へフェードさせる
• セクション境界: グラデーションで地色をなめらかに切り替える。見出しは鍋のアイコンを載せたアーチ線で飾る
• ステップカードは角丸12px前後で、シアンの細い線で囲む。
• カード内の区切りは点線にする。
• DLボタンは完全なピル型にする。
• 最終ボタンは角丸なしの矩形にする。

Components

• 締切情報枠（deadline-frame）: 二重細線の角丸枠。上端中央にアーチ飾りを付ける。シアンのラベル帯の下に日付を大きく並べる。
• シアンラベル帯（label-tag）: 締切の種類を示す小さな帯。シアン地に白文字。
• 賞品ストライプカード（prize-card）: 水色の斜めストライプ額縁の中に白地を置き、商品写真・商品名・当選数を中央揃えで並べる。
• 金色リボン見出し（gold-ribbon）: 右端が切れ込んだ金のグラデーション帯。白文字で賞品の特徴を入れ、やや右上がりに傾ける。
• コース円バッジ（course-badge）: 黄色い正円の中に、本数を大きなセリフ数字で書き、コース名を小さく添える。
• 当選数表示（lottery-count）: 金色線のピル枠に抽選ラベルを入れ、その横に金色の大きなセリフ数字と単位を並べる。
• ステップカード（step-card）: 白地にシアン線の角丸カード。上にSTEP番号、点線の区切り、左に説明文、右に線画アイコンを置く。
• アーチ見出し（section-heading）: 鍋アイコンを載せたアーチ状の線と上下の二重線で、シアンの明朝見出しを挟む。
• PDFダウンロードボタン（button-download）: 赤いピル型ボタン。白い太字で2行に書く。
• 最終応募ボタン（button-apply）: 黒い矩形の全幅ボタン。白い大きな文字を入れる。上に白地・黒枠の要項ボタンを添える。

Do's and Don'ts

Do - 地は白〜淡い水色にとどめ、透明感を保つ。 - 背景に大きな筆記体の透かし文字を薄く入れる。 - 賞品はコースごとに同じ型のカードで繰り返す。 - 応募手順は番号付きのカードと線画アイコンで見せる。 - 日付・当選数など大事な数字は大きく太くする。

Don't - 濃い色の大きな面を背景に使わない。 - 金色を本文や汎用の装飾に広げない。 - 赤を複数のボタンに使わない。 - ステップのアイコンを写真やリアルな絵にしない。線画で統一する。 - カードに強い影を付けない。

Page Structure

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

1. ファーストビュー（キャンペーンの世界観と、少ない本数から応募できることを伝える）: 人物と食卓の写真を全面に敷き、上部に明朝と筆記体を組み合わせたタイトルを置く。斜めのシアン帯で訴求を入れ、左上に商品缶を配置する。
2. 応募期間（締切と対象期間を一目で伝える）: 二重線の枠の中に、シアンのラベル帯と大きな日付を縦に並べる。枠の下に年齢制限の注釈を添える。
3. 賞品紹介（コースごとの賞品と当選数を見せる）: ストライプ額縁のカードを3枚縦に積む。円バッジと金色リボンを左上に重ね、写真・商品名・当選数の順に並べる。
4. 賞品の注釈（仕様変更などの但し書きを示す）: 小さな灰色の※注釈を左揃えで並べる。
5. 応募方法（応募条件と手順を説明する）: アーチ見出しの下に太字のリード文を置き、STEPカードを3枚並べる。
6. 郵送応募の案内（郵送での応募方法を案内する）: アーチ見出しと説明文の下に、赤いピル型のDLボタンと注釈を置く。
7. 対象商品（応募対象を明示する）: アーチ見出しの下に商品名を中央揃えの太字で書き、容量を小さく添える。
8. 最終CTA（要項を確認させてから応募へ誘導する）: 白地に赤い注意文を1行置く。その下に黒枠の要項ボタンと、黒い全幅の応募ボタンを並べる。

Imagery

• FVは明るい自然光で、白い器の食卓と笑顔の人物を写す。白っぽく軽い色調にする。
• 賞品は白背景の切り抜きにし、正面やや上から撮る。
• アイコンはシアン単色の線画にし、スマホ・指・レシートなどの手順を表す。
• 背景には大きな筆記体の欧文を白や淡い水色で透かして敷く。
• 鍋などの小さな線画アイコンを見出し飾りとして繰り返し使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは写真を横長にし、タイトルを左、人物を右に配置する。
• PCの締切枠は横長にし、ラベル帯と日付を横一列に並べる。
• PCの賞品カードは左にテキスト、右に写真を置く横組みにする。
• PCのSTEPカードは3列横並びにし、アイコンを下に置く。
• PCでも本文幅は約800pxで中央に寄せる。

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