DESIGN.md — 金×紺の牧場系乳製品投稿キャンペーンLP（Golden Meadow Dairy SNS Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ナチュラル、親しみ・手作り感、ポップ・元気、やさしい・柔らかい
• キーワード: 金グラデーション・草原ジオラマ・紺の告知帯・波形白カード・STEP縦並び
• 地の質感: 金地は上下で明暗が変わる光沢グラデーション。カードはフラットな白
• 形: ふちが波打つ白カード、ピル型のラベル、下向き三角の矢印
• 温度感: 暖かく明るい。牧場の爽やかさと金の華やかさを合わせる

Colors

• 地の色は3種類だけ。上は写真、中は生成り、下は金のグラデーション
• 紺は告知帯1本だけに使い、ページを引き締める
• STEP見出しは金色の文字を白カードにのせる
• SNSアカウント名とハッシュタグには金色の帯マーカーを敷く
• 黒文字は本文と注釈だけに使う
• period-band は文字 #FFFFFF × 背景 #B79D3F のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#88742F、4.58:1）を使う。
• pill-label は文字 #B79D3F × 背景 #FFFFFF のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#88742F、4.58:1）を使う。
• step-card は文字 #B79D3F × 背景 #FFFFFF のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#88742F、4.58:1）を使う。
• tag-marker は文字 #FFFFFF × 背景 #C2B66D のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#817736、4.54:1）を使う。
• fv-badge は文字 #B79D3F × 背景 #FFFFFF のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#88742F、4.58:1）を使う。

Typography

• 見出しは太い丸ゴシックで親しみを出す
• STEPの番号は欧文を大きくし、英字は小さめにする
• 日付は数字を大きく、曜日はかっこ付きで小さく組む
• 本文も太字寄りにして写真に負けないようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内は文字が左、写真が右上にはみ出す
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 36px、基本単位 8px、カード内 22px（375px 幅換算）
• STEPカードは下向き三角の矢印でつなぐ
• カード右上に丸角写真と商品写真を重ねてはみ出させる
• 見出しのピル型ラベルはセクション上端にかぶせる
• 会期帯と告知帯はFVの直下に全幅で置く

Elevation & Depth

• カードに影はほとんど付けない
• 商品カードはごく淡い影で生成り地から少し浮かせる
• 重ねた写真には薄い影を付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の四角に切り抜き、少し傾けて重ねる
• セクション境界: 帯は直線で区切る。カードのふちは手描き風の波形
• STEPカードは上下のふちを緩く波打たせる
• ラベルは白のピル型にする
• 矢印は濃い金の下向き三角にする

Components

• 会期帯（period-band）: 金のグラデーションの帯。左に白のピル型の回数バッジを置き、白文字で日付を大きく組む
• 賞品告知帯（prize-band）: 紺の全幅帯に白文字で賞品を一行で告知する
• 対象商品カード（product-card）: 白い角丸カード。上辺にピル型ラベルを置き、商品2つを横に並べて下に商品名を添える
• ピル型見出しラベル（pill-label）: 白いピル型に濃い金の太い丸ゴシック
• STEPカード（step-card）: ふちが波打つ白カード。金のSTEP番号と見出しを置き、右上に写真を重ねる
• アカウント名の帯マーカー（tag-marker）: アカウント名やハッシュタグに金色の帯を敷き、白文字でのせる
• STEP間の矢印（step-arrow）: 濃い金の下向き三角
• 当選数の吹き出しバッジ（fv-badge）: FV写真の上に置く白い丸角の吹き出し。中に金文字

Do's and Don'ts

Do - 金の地には上下で明暗をつけたグラデーションを使う - STEPは番号・見出し・本文・注釈の順に組む - SNSアカウント名は帯マーカーで目立たせる - 写真はミニチュア人形と牛を置いた牧場ジオラマ風にする

Don't - 紺を帯以外で多用しない - カードを角張らせない - 黒地や濃い影で重くしない - 金と競合する彩度の高い赤やピンクを入れない

Page Structure

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

1. ファーストビュー（キャンペーンと賞品を写真で見せる）: 草原の写真の上に賞品を置き、左上に金色のロゴ、右に当選数のバッジを重ねる
2. 会期（応募期間を伝える）: 金のグラデーション帯に回数バッジと大きな日付を置く
3. 賞品告知（賞品を一行で示す）: 紺の全幅帯に白文字で組む
4. 対象商品（購入する商品を示す）: 生成り地に白カードを置き、商品2つを並べる
5. 応募方法（投稿の手順を案内する）: 金地にピル型ラベルを置き、波形のSTEPカード3枚を矢印でつなぐ
6. 応募完了・当選通知（当選後の流れを伝える）: 最後のSTEPカードに本文を短く添える

Imagery

• 芝生の上にミニチュアの人形と牛を置き、ジオラマ風に撮る
• 被写界深度を浅くし、背景は山と空をぼかす
• 料理写真は屋外の芝生の上で自然光で撮る
• 商品パッケージは切り抜いて写真に重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV 写真を全幅で表示し、ロゴとバッジの配置は SP と同じにする
• 会期帯と告知帯は全幅のまま、文字を中央に寄せる
• 対象商品カードと STEP カードは中央に約480px幅で置く
• 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 行書くと起動時に読み込まれる。