DESIGN.md — 赤×緑×クリームの季節イベント菓子 LP（Festive Christmas Candy Seasonal LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: クリスマス・赤緑の補色・タータンチェック・フラットイラスト・白カード・波形区切り
• 地の質感: 緑地に細い斜めのタータン格子。そのほかはフラットな単色面
• 形: 角丸カード、雪が積もったような波形の境界、星形の番号バッジ、吹き出しラベル
• 温度感: 暖かくにぎやか。家族向けで楽しい

Colors

• セクション地はクリーム→緑→赤→クリーム→赤の順に切り替え、季節らしいリズムを出す
• 緑地には細い斜めのタータン格子を重ね、赤・クリーム地は無地にする
• 情報は白い角丸カードに載せ、地の色と分けて見せる
• 主ボタンは黄色地に焦げ茶文字。赤地のカード内では赤の塗りボタン、赤地の上では白枠のゴーストボタンにする
• クリーム地では本文を焦げ茶、見出しやリンクを赤にする
• コミュニティへの誘導だけは緑の塗りボタンにして目立たせる
• button-red は文字 #FDFEFD × 背景 #DE3A39 のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DD3332、4.52:1）を使う。
• label-bubble は文字 #FDFEFD × 背景 #DE3A39 のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DD3332、4.52:1）を使う。
• outline-info-box は文字 #DE3A39 × 背景 #FFFCB7 のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DD3332、4.52:1）を使う。

Typography

• 大見出しは英字を大きく置き、その下に小さく和文を添える2段構成にする
• 本文もやや太め（700前後）にして、ポップな色面に負けないようにする
• 導入文やカードの説明は中央揃え。レシピの説明文だけ左揃えにする
• ファーストビューの欧文タイトルは1語ごとに赤と緑で色を変える
• 細い書体と明朝は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードとボタンは左右に約18pxの余白をとる
• レシピの写真は2枚を横に並べるか、1枚を全幅で置く
• レシピは「星番号→料理名→写真→説明→使用商品カード→ボタン」の順で繰り返す
• ボタンは幅約75%で中央に置き、右端に斜め矢印を付ける
• セクション内の要素どうしは32〜40pxあける

Elevation & Depth

• 影はほぼ使わず、フラットな色面の重なりで階層を見せる
• ロゴとメニューボタンだけに、ずらした濃い色の影を付ける
• カードは地の色とのコントラストで浮かせる

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸14px前後の長方形で切り抜く
• セクション境界: 雪が積もったような波形、または大きな円弧のふくらみでセクションをつなぐ
• ボタンは角丸12px前後の長方形にし、ピル型にはしない
• ラベルはピル型の吹き出しにし、下に三角のしっぽを付ける
• 番号は六芒星の黄色バッジに入れる
• 見出しの下に点線と小さな下向きの点を付ける

Components

• 黄色主ボタン（button-primary）: 黄色の塗りに焦げ茶の文字。右端に斜め矢印を付ける
• 赤塗りボタン（button-red）: 白カード内で使う赤い塗りボタン。文字は白
• 白枠ゴーストボタン（button-ghost）: 赤地の上に置く、白い細枠と白文字のボタン
• 星番号バッジ（star-number）: 黄色の六芒星の中に、2桁の番号を焦げ茶で入れる
• 吹き出しラベル（label-bubble）: カードやボタンの上に重ねるピル型ラベル。赤地または緑地に白文字
• 使用商品カード（product-card）: 白カードに星や水玉を散らし、中央に商品写真・商品名・下線付きリンクを置く
• 茶ヘッダー付きカード（header-card）: 上部が茶帯で、白い見出しの左右に光の粒を飾る
• 赤細枠の説明ボックス（outline-info-box）: クリーム地の上に赤い細枠のボックス。内部を横線で分け、点線下線付きの赤見出しを置く
• 円形誘導バッジ（floating-badge）: 黄色の円に茶色の縁取り。サンタ帽と下向き矢印を付け、ページ内のリンク先へ誘導する

Do's and Don'ts

Do - 赤・緑・クリームの3色を、セクションごとに交互に使う - 季節のモチーフ（リース・靴下・雪の結晶・プレゼント・キャンディ）を余白に散らす - 情報はすべて白の角丸カードに収める - ボタンには斜め矢印を付けて、外部リンクだとわかるようにする - セクションの境目は波形や円弧にする

Don't - 直線の境界で、硬い印象のセクション区切りにしない - グラデーションや強い影を使わない - 黒い文字を使わない（焦げ茶か白にする） - 寒色を主役にしない - 細い書体や明朝を使わない

Page Structure

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

1. ファーストビュー（季節の挨拶でイベントの雰囲気を伝える）: クリーム地に赤緑の欧文タイトルを大きく置き、中央揃えの短い挨拶文を添え、周りに季節イラストを散らす
2. 楽しみ方の導入（レシピ紹介へ導く）: 雪の波形で緑のタータン地に切り替え、白い欧文見出しと和文サブ見出しを置く。キャラクターと円形誘導バッジを添える
3. レシピ紹介（商品を使った料理を見せる）: 星番号→料理名→角丸写真→説明→使用商品カード→黄色ボタンの順で繰り返す
4. レシピサイトへの誘導（関連サイトへ送客する）: 白カードに赤見出しを置き、左右にカトラリーのアイコン、下に赤塗りボタンを置く
5. スペシャルコンテンツ（ゲーム企画で参加を促す）: 赤地に白カードを置き、ロゴ風の見出し・説明・イラストを入れ、下に白枠ボタンを置く
6. 会員向け質問企画（コミュニティでの投稿を促す）: クリーム地に茶ヘッダー付きカードを置き、中に緑チェック柄の質問バナーを入れる
7. コミュニティの説明（会員になる価値を伝える）: 赤細枠のボックスを2段に分け、点線下線付きの見出しと中央揃えの赤文字で説明する
8. 会員登録CTA（公式サイトでの登録へ送る）: 吹き出しラベルの下に緑の大きなボタンを置き、その下に緑文字の注釈を添える
9. 店舗インフォメーション（限定商品と店舗を告知する）: 赤地に、白地で商品を並べた写真カードを置き、中央揃えの白文字と黄色ボタンを続ける

Imagery

• イラストは太めの輪郭線がない、フラットで丸みのある季節モチーフにする
• キャラクターは素朴なデフォルメの女の子にし、オレンジの服を着せる
• 料理写真は暗めの卓上を俯瞰で撮り、粉砂糖や星飾りで華やかにする
• 商品写真は白背景の切り抜きを複数散らして並べる
• 雪の結晶やキャンディを小さく余白に散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもスマホ幅の縦長カラム（約480px）を中央に固定する
• PC では左右の余白をオレンジ赤の地で埋める
• 左側にお知らせのサムネイル一覧、右側に公式サイトとSNSの白カードを固定表示する
• 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 行書くと起動時に読み込まれる。