DESIGN.md — 空色×黄緑の畑風景プレゼントキャンペーン LP（Bright Sky and Cornfield Kids Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: 青空・とうもろこし畑・極太ゴシック・白カード×太枠・キャラクター・レシート応募
• 地の質感: フラットなイラスト背景に、雲・畑・風車のイラストを重ねる。FVだけ縦ストライプ柄。
• 形: 角丸カード、ピル型の見出し、旗形のリボン、波形の境界
• 温度感: 暖かく明るい。空色と黄色で季節感と元気さを出す

Colors

• 背景は上から空色、青空、黄緑の畑、淡緑と変わる。季節や物語の流れを地色で表す
• コンテンツは白カードに乗せ、枠は黄色か緑の太線(4px前後)にする
• 赤はCTAボタンと重要語句の強調にだけ使う
• 見出しピルは白地に色付きの太枠。青ゾーンでは青、畑ゾーンでは緑を使う
• 黄色は賞品カードとサブCTAに使い、ボタン文字は赤にする
• 注意事項の見出しだけは黒ピルに白文字で締める
• button-secondary は文字 #D70936 × 背景 #FEF000 のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#D50935、4.51:1）を使う。
• period-box は文字 #009B41 × 背景 #FFFFFF のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#00893A、4.53:1）を使う。
• contact-pill は文字 #009B41 × 背景 #FFFFFF のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#00893A、4.53:1）を使う。

Typography

• 見出しはすべて極太。細い書体は使わない
• 背景の上に載る見出しには白いフチ取りか影を付ける
• 本文も太字を基本にし、強調語は赤にする
• 英字のSTEPラベルは字間を広く取る
• 注釈は※から始め、小さくても太めにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 3 列、NG例は 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは中央寄せで左右の余白を約6%取る
• セクションの頭にピル見出しを中央に置く
• CTAは要所の3か所に繰り返し置く
• 背景イラストはカードの外側の余白にはみ出させて置く
• STEPは縦に並べたカードで、上部に緑帯を付ける

Elevation & Depth

• 影はほぼ使わず、フラットな太枠で面を分ける
• 見出しの文字にだけ濃い色のドロップシャドウを付ける
• カードはイラスト背景の上に白い面として浮かせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。カード内でははみ出さずに並べる
• セクション境界: FV下端は黄・オレンジのスカラップ。草原は波形の境界
• 見出しは白地に色付き太枠のピル型
• 主CTAは角丸の小さい長方形(約8px)、サブCTAは黄色のピル型
• 賞のラベルはオレンジの旗形リボンと丸い虫眼鏡形のバッジ
• カード枠は4px前後の太線

Components

• 赤の参加CTA（button-primary）: 赤地に白い極太文字。右に外部リンクのアイコン
• 黄色の商品情報ボタン（button-secondary）: 黄色のピル型に赤文字と右向き三角
• ピル型の見出し（heading-pill）: 白地に青か緑の太枠を付け、同じ色の極太文字を置く
• 期間表示ボックス（period-box）: 上に緑のラベル帯、下に白地と緑の日付。緑の枠で囲む
• 賞品カード（prize-card）: 黄色の大枠の中に旗形の人数ラベルと白カード。賞品写真を右に置く
• STEPカード（step-card）: 緑帯に黄色のSTEP番号、白地に手順とイラスト
• NG例カード（ng-example）: 白い角丸カードの左上に赤い×印。下にキャプション
• 注意の黒ピル（notice-bar）: 黒いピル型に白文字で無効条件を告知する
• 問い合わせのピル（contact-pill）: 白地に緑枠のピル型。アイコンと電話番号・メールを入れる

Do's and Don'ts

Do - 背景を空から畑、草原へと段階的に変えて物語性を出す - キャラクターや商品のイラストを余白に散らす - 重要な数字や語句は赤の極太にする - CTAは賞品の前、応募方法の中、規約の前に繰り返し置く - 情報はすべて白カードと太枠に収める

Don't - 細い明朝体や大人っぽいトーンを使わない - 暗い背景を広い面積に使わない - 赤をCTAや強調以外に乱用しない - 影の強いリアルな立体表現を使わない - カードに枠を付けずに背景へ直接本文を置かない

Page Structure

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

1. ファーストビュー（キャンペーン名・当選総数・賞品を一目で伝える）: 空色ストライプ地に子どものキャラクター、極太で赤いタイトル、A賞・B賞の白い枠カード、景品写真を置く
2. 期間表示（対象期間と応募期間を示す）: 白地に緑ラベルの付いた枠ボックスを2段並べる
3. CTA・リード（参加を促し、応募条件を要約する）: 青空の地に赤ボタンを置き、赤い極太で3行のリード文を添える
4. 賞品紹介（賞の内容と当選人数を示す）: ピル見出しの下に、黄色の大カード、旗形ラベル、白い内側カードを置く。＋記号でもれなく貰える特典につなぐ
5. 対象商品（対象となる商品を一覧で示す）: 黄枠の白カードに商品パッケージを3列で並べ、下に注釈とサブCTAを置く
6. イラスト区切り（空のゾーンから畑のゾーンへ場面を転換する）: とうもろこし畑と家族のイラストを全幅で見せる
7. 応募方法（3ステップで手順を伝える）: 緑のピル見出しの下に、緑帯付きのSTEPカードを縦に3枚並べる
8. 注意事項・NG例（無効となる応募を防ぐ）: ●の箇条書き注釈、黒ピル、×印付きのNG例を2×2で並べる
9. 応募規約（規約の全文を掲載する）: 白いスクロールボックスに収め、下に風車とキャラクターの風景を置く
10. お問い合わせ（事務局の連絡先を示す）: 淡緑の地に緑枠カードを置き、電話・メールのピルと受付時間ラベルを入れる

Imagery

• 太い線と明るいベタ塗りで描いた、子ども向けのフラットなキャラクターイラスト
• とうもろこしは写実的な切り抜き写真にし、葉付きで斜めに置く
• 背景には白い雲、丘、畑、風車、羊を絵本調で描く
• 商品パッケージは正面の切り抜きで並べる
• 手順は端末やレシートのシンプルなアイコン調イラストで示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約60%の中央カラムに絞り、左右に背景イラストを広げる
• PCのFVは横長構図にし、キャラクター・タイトル・景品を横に並べる
• PCではSTEPカードを3列に並べる
• PCではNG例を4列に並べる
• PCのCTAボタンはSPより小さめにし、中央に置く

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