DESIGN.md — ミント縞×マゼンタの手書き風レシピ募集LP（Playful Recipe Contest Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか、情報量多め・訴求型
• キーワード: ミントストライプ・手書き文字・マゼンタCTA・リボン見出し・料理写真・黄色マーカー
• 地の質感: 斜めの細いミント色ストライプ地。上に白いフラットなパネルを重ね、影はほぼ使わない
• 形: 黒い細線で囲んだ角丸パネル、両端が矢羽型のリボン見出し、ピル型ボタン
• 温度感: 爽やかな寒色の地に、料理写真の暖色とマゼンタを差した明るく温かい印象

Colors

• 地はミントの斜めストライプにする。応募要項は白パネルにまとめる
• マゼンタは主CTA・期間帯・強調見出しだけに使う
• セクション見出しは青緑のリボン帯に白文字で載せる
• 強調したい一文には黄色マーカーを文字の下半分に敷く
• 購入は青、別商品は緑やオレンジと、商品ごとにボタン色を分ける
• 注意条件は淡ピンクの角丸ボックスにまとめる
• ribbon-heading は文字 #FFFFFF × 背景 #2A9D86 のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#238370、4.61:1）を使う。
• button-buy は文字 #FFFFFF × 背景 #1483BD のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#137DB4、4.55:1）を使う。
• button-sub は文字 #FFFFFF × 背景 #5BB44B のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#438537、4.52:1）を使う。

Typography

• 本文は中央揃えを基本にし、手順やリストだけ左揃えにする
• テーマ見出しなど感情に訴える部分だけ手書き風書体を使う
• 強調文はマゼンタの文字か黄色マーカーで示す
• 本文も太めのウェイトにして可読性を保つ
• カギ括弧付きの大きなキャッチをマゼンタで中央に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はレシピの写真と材料を 2 カラムにする
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 要項は 1 枚の白い角丸パネル内に点線で区切って縦に並べる
• パネルの上端に飾りリボン見出しをかぶせる
• CTA はパネルの内側と外側の両方に置く
• レシピは写真→使用商品→材料→作り方の順に並べる
• 材料表は点線リーダーで分量と結ぶ

Elevation & Depth

• 基本はフラット。影は使わない
• ボタンに下方向の薄い影を付けて立体感を出す
• パネルは影ではなく黒の細線で縁取る

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸 12px の矩形。商品写真は円形の淡い青背景に載せる
• セクション境界: パネル内は点線で区切る。ストライプ地と白地はまっすぐな境界で切り替える
• リボン見出しは両端が矢羽型の台形帯にする
• FVのタイトルは不定形の白い雲形に黒線で囲む
• 期間表示は黒線のピル型枠に入れる

Components

• 主CTAボタン（button-primary）: マゼンタのピル型ボタン。白文字で右に▶を付ける
• リボン見出し（ribbon-heading）: 青緑で両端が矢羽型の帯。白文字を中央に置く
• 要項パネル（rules-panel）: 黒い細線で縁取った白の角丸パネル。中を点線で区切る
• 期間帯（period-band）: FV直下の全幅マゼンタ帯に白太字で期間を入れる
• 条件ボックス（condition-box）: 淡ピンクの角丸ボックス。山括弧付きの見出しと◉リストを入れる
• 購入小ボタン（button-buy）: 青いピル型の小さな購入ボタン
• 使用商品ラベル（label-used）: マゼンタのタブ型ラベルの下に商品名をマゼンタで置く
• 簡単アレンジ枠（arrange-card）: 緑線で囲んだクリーム地の枠。左に商品、右に淡緑のタグと矢印付きの説明を置く
• サブCTA（button-sub）: 緑やオレンジのピル型ボタン。白い縁と影を付ける

Do's and Don'ts

Do - 地はミントストライプにし、情報は白パネルに集約する - リボン見出しで要項の項目を区切る - 強調は黄色マーカーとマゼンタ文字に限定する - 線画のイラスト（プレゼント箱・フォーク・泡立て器）を添える - 料理写真には手書きのひとことを重ねる

Don't - 濃い色や暗い背景のセクションを作らない - マゼンタを広い面に使わない（帯とボタンだけにする） - 明朝体だけで高級感のある方向に振らない - 強い影やグラデーションのボタンにしない - パネル内の区切りを太い実線にしない

Page Structure

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

1. ヘッダー（ブランドと購入導線）: 白地。左にロゴ、右に線画アイコンを並べる
2. ファーストビュー（募集を告知する）: 4分割の料理写真の中央に白い雲形タイトル。マゼンタの見出しとラベル、下に期間帯を置く
3. リード文（気軽に応募できると伝える）: ストライプ地に中央揃えの本文。一文に黄色マーカーを引く
4. 募集テーマ（今回のテーマを提示する）: リボン帯をかぶせたクリーム枠に手書き大見出しとイラスト。下にピル型の期間枠
5. 応募方法（手順を示す）: 番号付きの3ステップと主CTA
6. プレゼント内容（賞品を訴求する）: リボン見出しと線画のギフトイラスト
7. 特典（採用されたときのメリットを伝える）: カギ括弧付きのマゼンタ大見出しとマーカー付きの本文
8. 審査基準（評価軸を示す）: 丸数字の説明文と淡ピンクの条件ボックス2つ
9. 結果発表（発表方法と注意を伝える）: 左揃えの本文と※注釈。パネル外に主CTAを置く
10. アレンジレシピ例（投稿の参考例を見せる）: 白地に縦書き英字スクリプトの装飾。料理写真、使用商品、材料、作り方の順
11. 簡単アレンジ（ハードルを下げる）: 緑枠のクリーム地カードを商品ごとに3行
12. 対象商品（購入に誘導する）: 商品バナーと緑・オレンジのサブCTA、まとめ買いバナー
13. 注意事項（規約を示す）: グレーの見出し帯と、スクロールする黒線の枠

Imagery

• 料理は真上か斜め上から撮り、器ごと見せる。暖色の木目やクロスの背景にする
• 写真の上に墨色の手書きコメントを斜めに入れる
• フォーク・泡立て器・プレゼント箱は黒の線画で描き、マゼンタを少し差す
• 太陽や集中線など手描き風の小さな飾りを添える
• 商品パッケージは切り抜きにし、淡い青の円に載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 760px に固定し、ストライプ地を左右に広げる
• PC はレシピの写真を左、商品と材料を右の 2 カラムにする
• FV は PC で横長の写真4分割に変え、タイトルの雲形を中央に置く
• リード文は PC で 1 行を長くし、行数を減らす
• ボタン幅は PC でも 300〜360px 程度に保つ

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