DESIGN.md — クラフト紙と若草緑の農産物キャンペーンLP（Organic Kraft Green Quiz Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ナチュラル、親しみ・手作り感、やさしい・柔らかい、ポップ・元気
• キーワード: クラフト紙・有機野菜・深緑×若草・波形区切り・クイズカード・手描きイラスト
• 地の質感: FVと手順セクションにクラフト紙の粒状テクスチャ。そのほかはフラットな白・生成り地。
• 形: 大きめの角丸カード、ピル型ボタン、波形のセクション上端、吹き出し、タブ付きのクイズ枠。
• 温度感: 暖かいベージュの地に、緑で爽やかさを足した中間寄りの暖色系。

Colors

• 地はベージュ（クラフト）→白→生成り→若草緑→白→生成りと交互に切り替え、最後を深緑のフッターで締める。
• 見出し文字と強調語は深緑で統一する。
• 黄色は吹き出しとボタン下の影だけに使う。
• 朱赤は期間バッジなど日付の情報1か所に絞る。
• 若草緑の地の上には白カードを置き、文字は深緑とこげ茶にする。
• 区切り線は深緑のドット線を使う。
• period-badge は文字 #FFFFFF × 背景 #E54D3D のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E0311E、4.54:1）を使う。

Typography

• 見出しの上に淡緑の欧文スクリプトを小さく添える。
• 本文は中央揃えで、行間を広めにとる。
• 規約部分は左揃えにして、箇条書きを使う。
• 大きな数字は深緑の線だけのアウトラインにし、ORGANIC FARMINGのような欧文ラベルと組み合わせる。
• 強調語は深緑の色だけで区別し、太字は控えめにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カードは縦に積む
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• STEPは縦に並べ、間に緑の下向き三角を置く。
• プレゼントのカードは幅52%ほどで中央に寄せる。
• 解説カードは幅92%にし、写真を内側いっぱいに入れる。
• クイズの選択肢は横幅いっぱいのピル型で3つ並べる。
• CTAはセクションの終わりごとに中央に置く。

Elevation & Depth

• 影はほぼ使わない。
• CTAは黄色のベタ影を右下に4pxずらして敷く。
• カードは影を付けず、地の色との差で浮かせる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸24px前後の矩形。商品は切り抜きで配置する。
• セクション境界: 中央が盛り上がる緩い波形（山形）の上端
• クイズ枠は太いベージュ線の角丸枠にし、上部中央に半円のタブを付けてQ番号を入れる。
• 吹き出しは黄色のピル型に下向きの尖りを付ける。
• 深緑の大きな円にプレゼント訴求を載せる。

Components

• 応募CTA（button-primary）: 深緑のピル型ボタンに白文字と右向き三角を入れ、黄色のずらし影を付ける
• STEPカード（step-card）: 緑の帯見出しの下に白地を置き、黄色の吹き出しとイラストを入れる
• 黄色吹き出し（speech-bubble）: 黄色のピル型に深緑の太字を入れ、下に尖りを付ける
• プレゼントカード（prize-card）: 白の角丸カード。商品写真→深緑の見出し→ドット線→本文の順に並べる
• 番号付き解説カード（feature-card）: グレーの角丸カード。左上にアウトライン数字と欧文ラベルを置き、見出し・本文・角丸写真を続ける
• クイズ枠（quiz-box）: ベージュ線の角丸枠に、上部タブのQ番号・イラスト・問題文・選択肢を収める
• 選択肢ピル（quiz-option）: ベージュ枠のピル型。左端に深緑の丸でA/B/Cを入れる
• 期間バッジ（period-badge）: 朱赤のピル型に白文字で期間を入れ、上に小見出しを添える
• 規約項目（terms-item）: 生成り地に深緑の小見出しと本文を置き、項目の間を深緑のドット線で区切る

Do's and Don'ts

Do - 地色はクラフト・生成り・若草緑を交互に使い、波形でつなぐ。 - 見出しには必ず淡緑の欧文スクリプトを添える。 - イラストは手描き調の人物と多角形調の野菜を併用する。 - CTAは同じデザインで複数箇所に繰り返し置く。 - 区切り線は深緑のドット線で統一する。

Don't - 原色の青や紫をメインに使わない。 - 強いドロップシャドウやグラデーションボタンを使わない。 - 角の立った直線的なセクション境界を多用しない。 - 黄色を本文や大きな面に使わない。 - 明朝体の格調高い見出しにしない。

Page Structure

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

1. ファーストビュー（キャンペーン名・期間・景品を一目で伝える）: クラフト地に緑のリボン見出しと立体文字のタイトルを置き、朱赤の期間バッジ、深緑の円の当選数、商品の切り抜きを配置
2. ページ内ナビ（各セクションへ誘導する）: 野菜アイコンと小さな緑文字を3＋2個並べる
3. 導入文（地域と取り組みの背景を伝える）: 白地に中央揃えの本文。下に農作業の人物イラストを置く
4. 応募方法（3ステップで手順を示す）: 波形の生成り見出しの下、クラフト地にSTEPカードを3枚縦に並べ、三角でつないでCTAを置く
5. プレゼント内容（景品の詳細を見せる）: 若草緑の地に白の角丸カードを3枚縦に並べる
6. 取り組み解説（地域の魅力と知識を伝え、クイズの答えにつなげる）: 野菜イラストを帯にした見出しの下に、01〜03の番号付きグレーカードと写真を置く
7. クイズ導入（クイズへの期待感を高める）: 黄色の集中線とドット地に商品と野菜を放射状に置き、深緑の吹き出しと装飾タイトルを入れる
8. クイズ（3問を出題する）: タブ付きのベージュ枠に、イラスト・問題・ピル型の選択肢3つを入れ、最後にCTAを置く
9. 応募要項（規約・注意事項を網羅する）: 生成り地に深緑の小見出しを置き、ドット線で区切ったテキストを並べる
10. フッター（最後のCTAとコピーライト）: CTAの後に深緑ベタ地と白い小さな文字

Imagery

• 人物はフラットで線の細い手描き風イラストにし、淡い水色の山影を背景に添える。
• 野菜は多角形（ポリゴン）調の大きなイラストにし、画面端で見切れさせて帯状に配置する。
• 商品は白フチ付きの切り抜きにし、少し傾ける。
• 写真は自然光の農作業・田園・山の風景にし、角丸で切り抜く。
• 背景にはクラフト紙の粒状テクスチャと黄色の集中線・ドットを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約60%幅にコンテンツをまとめ、FVは田園写真の背景に野菜イラストで囲んだタイトルカードを置く。
• STEPとプレゼントカードはPCで3カラム横並びにする。
• 解説カードはPCで本文と写真を左右に並べ、カードごとに左右を交互に入れ替える。
• PCのナビは5項目を1行に並べる。
• 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 行書くと起動時に読み込まれる。