DESIGN.md — 紺×ローズピンクのフレンチ菓子キャンペーンLP（French Navy and Rose Pink Sweets Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 上品・高級、かわいい、情報量多め・訴求型
• キーワード: フレンチ・リボン見出し・金の細線・エアメール柄・ピンクグラデーション・きらめき
• 地の質感: ピンクから藤色へのなめらかなグラデーション地に、細い弧線と星形のきらめきを散らす。紺のパネルには金の二重線の額縁を付ける。
• 形: 上辺だけ角が丸い紺のパネル、両端が燕尾形のリボン見出し、紅白紺のエアメール柄縁の丸バッジ、ピル型CTA。
• 温度感: 暖かいピンクと冷たい紺の対比。金色で甘さと高級感を足している。

Colors

• 地は淡いピンクのグラデーションにし、後半で藤色、ラベンダーへ移していく。
• 情報パネルは濃紺か、くすみ紺の面。その上の見出しは金、本文は白にする。
• 白い地の上の見出しと本文は紺で書き、黒は使わない。
• CTAは白地のピル型にし、枠を左半分は赤、右半分は紺に塗り分けてトリコロール風にする。
• 黄色は注意ラベルとアコーディオンだけに使う。
• 金の細線は額縁・区切り・ドットなどの装飾だけに使う。
• headline-band は文字 #FEFEFE × 背景 #EA649E のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DE1E71、4.6:1）を使う。

Typography

• 見出し・賞品名・ボタン文字は明朝体にして、フレンチの上品さを出す。
• リード文・説明文は太めのゴシックで中央揃えにし、短く改行する。
• リボン見出しは字間を0.2em前後まで広げる。
• 当選人数などの数字は、周りの文字の2倍以上の大きさにする。
• 規約の本文は明朝体の左揃えで、詰めて組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。応募手順は横スワイプのカルーセルにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• パネルは左右に約16pxの余白を取って中央に置く。
• リボン見出しはパネルの上辺にまたがるように重ねる。
• 賞品パネルは、ラベル・人数バッジ・賞品名・額縁写真・説明の順に縦に並べる。
• リード文は中央揃え、説明文は左揃えにする。
• CTAは手順説明の後と規約の後に置き、計2回出す。

Elevation & Depth

• 影は基本的に付けず、金の線と色面の差で階層を見せる。
• 写真の額縁には、ごく薄い内側の影で奥行きを付ける。
• 手順カードは白地にし、下辺だけ金色の太めの縁を付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 賞品写真は金の二重線の額縁に収めた四角形にする。ビジュアルは斜めに傾けたエアメール柄縁のポラロイド風フレームに入れる。
• セクション境界: 背景はグラデーションで切り替える。紺のセクションの下端は、緩やかな弧のカーブにする。
• 賞品パネルは上辺を大きく丸め、下は小さい角丸にする。
• 人数バッジは正円にし、紅白紺の斜めストライプの縁を付ける。
• 見出しは両端が燕尾形にカットされたリボン形にする。
• 手順カードは上辺がアーチ状に丸い形にする。

Components

• リボン見出し（ribbon-heading）: 紺のリボンに金の縁取りと燕尾形の端を付け、白い明朝体を字間広めで中央に置く。
• 応募CTA（button-primary）: 白地のピル型。枠は左が赤、右が紺に分かれ、紺の明朝体の文字と右端に紺の三角を置く。
• 賞品パネル（prize-panel）: くすみ紺の面に金の賞品名、金の飾り罫、額縁写真、白い説明文を並べる。
• 賞ラベル（prize-label）: 金の縁取りの紺い四角に、賞のランクと応募条件を縦の飾り罫で区切って並べる。
• 当選人数バッジ（airmail-badge）: 白い円にエアメール柄の縁を付け、中に紺の明朝体で人数を大きく入れる。
• 当選訴求帯（headline-band）: ローズピンクの全幅の帯に、白い太ゴシックで大きな人数を入れる。
• 手順カード（step-card）: 上辺がアーチ形の白いカード。番号を書いたピンクの旗を左上に立て、紺の明朝体で見出しを付ける。
• 注意アコーディオン（accordion-note）: 黄色の全幅バーに紺の太字を入れ、右端に下向きの三角を置く。
• 情報ラベル（pill-label）: 紺の小さなピル型に、白文字で項目名を入れる。項目の間は金の3点ドットで区切る。

Do's and Don'ts

Do - 見出しには必ずリボン形と明朝体を使い、トンマナをそろえる。 - 紺のパネルには金の細い二重線か飾り罫を添える。 - 地のグラデーションに白いきらめきと細い弧線を散らす。 - 賞品ごとに同じ型のパネルを繰り返して見比べやすくする。 - 撮影の良い例と悪い例は、イラストを並べて視覚的に示す。

Don't - 原色の鮮やかなピンクを広い面に使わない。 - 見出しをゴシックだけで済ませない。 - CTAを単色の塗りボタンにしない（赤と紺の枠の白ピルを守る）。 - 金色を本文に使わない。 - 濃い影や立体的なボタン表現を加えない。

Page Structure

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

1. ファーストビュー（キャンペーン名・期間・キャラクターを印象づける）: ピンクの地に、金の円形背景に置いたキャラクター写真、紺の円形タイトル、商品パッケージ、散らしたフルーツを配置する。
2. 当選訴求帯（当選人数を一目で伝える）: ローズピンクの全幅の帯に、白い大きな数字を入れる。
3. コンセプト（世界観を伝える）: 紺のパネルに、傾けたエアメール柄フレームの写真と白い中央揃えの文を置く。
4. 応募期間（期間を明示する）: リボン見出しの下に、紺の明朝体の大きな日付と飾り罫を置く。
5. 賞品（賞品と応募条件を見せる）: リード文の後に、ラベル・人数バッジ付きの紺のパネルを賞の数だけ繰り返す。
6. 対象商品（購入対象を示す）: 濃紺の全幅地に、金の角飾りを付けたパッケージ画像と白い商品名を縦に並べ、最後に店舗検索の白いボタンを置く。
7. 応募方法（手順を案内する）: 藤色グラデーションの地に、番号旗付きのアーチ型カードのカルーセルを置き、その下にアカウント情報のパネルとCTAを続ける。
8. 撮影方法（不備を防ぐ）: 白いカードの中に、グレーの良い例と悪い例のボックスを置く。黄色のピル型ラベルとレシートのイラストで説明する。
9. 応募規約（規約を示す）: 白いカードの中に、スクロールする明朝体の本文を置き、項目を細線で区切る。最後にCTAを再び置く。
10. お問い合わせ・フッター（窓口を示す）: 濃紺の地に白文字の連絡先とバナーを置き、その下に黒紺の企業フッターを続ける。

Imagery

• 人形やキャラクターを、柔らかい光で正面から上品に撮る。
• 苺とブルーベリーを、ぼかしも交えて画面の四隅に散らす。
• パリの名所などフランスを思わせる写真に、筆記体のメモと消印風のスタンプを添える。
• 賞品は無地のグレーかピンクのグラデーション背景で撮った物撮り。
• 説明図は線画のフラットなイラストにし、手書き風の吹き出しを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央約1000px幅にまとめ、背景のグラデーションは全幅に広げる。
• 賞品パネルは左にラベルとバッジ、右に写真と説明を並べた横長のレイアウトにする。
• 応募手順のカードは3枚を横に並べ、カルーセルをやめる。
• アカウント情報は3列を横に並べる。
• 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 行書くと起動時に読み込まれる。