DESIGN.md — 赤×チョコ茶×黄の菓子コラボ告知 LP（Red Chocolate Collab Ice Cream Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 深紅・チョコブラウン・黄色の極太見出し・斜め分割・巨大価格・切り抜き商品写真
• 地の質感: ベタ塗りの地に細い斜めストライプやチョコソースの流れる装飾を重ねる。光沢のあるチョコ粒を背景に散らす
• 形: 斜めのセクション境界、角丸の大きいカード、ピル型ラベル、星形バースト、吹き出し
• 温度感: 暖色一色の高温。甘く濃厚でにぎやか

Colors

• 前半は深紅とチョコ茶の2色で地を切り替え、斜め境界で分ける
• 大見出しは黄色、価格と本文は白で赤・茶地の上に置く
• 後半はキャラメル地にピーチ・ミルクティー色のカードを重ねる
• 強調語は黄色の帯か白い箱に赤文字で置く
• 商品ごとの色（ピンク・ミント）はピル型ラベルの枠だけに使う
• 外部リンクのボタンは赤で白文字にする

Typography

• 見出しは極太で、文字に濃い影か縁取りを付けて写真に負けないようにする
• 価格は「¥」と数字を巨大な白で組み、上にピル型のサイズラベルを置く
• 見出しの左右にハの字の斜線を付けて叫ぶような強調にする
• 英字のサブ表記は日本語見出しの下に小さく添える
• 本文は左揃えで短めの段落にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品説明は写真とテキストを左右交互に配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品写真は画面幅いっぱいに近い大きさで、見出しカードと重ねる
• 価格は2つ横並びで中央に置く
• セクション区切りに白い点線を使う
• 特典カードは画面の左右から16pxほど内側に置く
• 注釈は価格の下にまとめる

Elevation & Depth

• カードとボタンには下方向に濃茶のベタ影（ぼかしなし2〜4px）
• 切り抜き写真には柔らかいドロップシャドウ
• 見出し文字には暗赤の影

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。パッケージは長方形のまま
• セクション境界: 斜めの直線で地を分割。フッターはチョコが垂れたような波形
• ラベルはピル型の白枠
• 発売日は黄色の星形バースト
• 吹き出しは三角のしっぽ付き角丸
• 詳細リンクは円形のキャラメル色ボタン

Components

• 商品名カード（flavor-title-card）: 上部が濃茶帯に年と区分、下部がキャラメル地に商品名を極太で組む角丸カード
• 丸型詳細ボタン（button-round-more）: キャラメル色の円に2行の短い文字と矢印アイコン
• 巨大価格表示（price-block）: 白枠のピル型サイズラベルの下に、白い極太数字の価格
• 補足帯（note-pill）: キャラメル色のピル型帯に濃茶の一文
• 商品ラベル（product-pill-label）: 淡色の地に商品色の太い枠を付けたピル型見出し
• 発売日バッジ（burst-badge）: 黄色のギザギザ星形に赤文字で日付
• 吹き出しカード（speech-bubble-card）: 黄色の角丸地に赤・茶の選択肢帯を2本並べる
• アプリストアボタン（button-store）: 黒い角丸ボタンを2つ横並び
• 外部サイトボタン（button-primary）: 赤い角丸の横長ボタン。右端に外部リンクアイコン、下にベタ影

Do's and Don'ts

Do - 見出しは黄色の極太書体で、影を付ける - 価格は画面幅の半分近い大きさで見せる - 地の色は赤・茶・キャラメルの暖色だけで切り替える - 背景にチョコ粒やソースの流れを少し散らす - カードにはベタ影と斜めストライプの質感を付ける

Don't - 青や灰色などの寒色を地に使わない - 細い明朝体や繊細な書体を見出しに使わない - 商品写真を四角い枠に入れて小さく見せない - 白い無地の背景のセクションを作らない - 影をぼかした淡いカードにしない

Page Structure

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

1. ファーストビュー（期間と2商品の登場を伝える）: 赤と茶を斜めに分割し、各色の上にコーンの切り抜きを置く。上部に期間帯、中央にハッシュタグ風の巨大コピー
2. 新作商品紹介（新作の魅力を伝える）: 左に大きな商品写真、右に商品名カードと白い本文、丸型の詳細ボタン
3. 復活商品紹介（再登場の商品を伝える）: 茶の地で、左右を反転させた同じ構成
4. アプリ限定特典（購入特典で来店を促す）: ストライプの角丸カードに斜めロゴ見出し、黄色帯の強調語、商品+特典の図式
5. 価格案内（サイズ別の価格を示す）: ハの字の見出し、ピル型ラベル、巨大な白い価格、補足帯、注釈
6. サンデー紹介（コラボのデザートを紹介する）: 赤地に黄色の大見出しと英字、手書き風の縦書き吹き出しと矢印
7. セット商品（まとめ買いを訴求する）: 点線で区切る。箱の写真に丸バッジ、黄色の吹き出しで選択肢、価格を2つ並べる
8. 店舗外商品（市販品の発売を告知する）: キャラメル地に色違いのピル型ラベル、パッケージ写真、星形の発売日バッジと本文
9. クーポン案内（クーポンの使い方を伝える）: 吹き出し型のピーチ色カードに白い箱の強調見出し、見本画像、注釈リスト
10. 会員特典・アプリDL（アプリ登録を促す）: 茶ストライプのカードに吹き出しと特典額、点線見出し、ストアボタン2つ、詳細ボタン
11. 外部リンク・フッター（関連サイトへ誘導する）: 赤い横長ボタン、その下に濃赤茶の波形の縁

Imagery

• 商品は真上やや斜めから撮り、背景を抜いた切り抜きにする
• チョコ粒やウエハース片を背景に小さく散らす
• 地にキャラメルやチョコソースが流れる曲線を半透明で重ねる
• 強調には集中線や小さな放射線のアイコンを添える
• パッケージ写真は正面から撮り、影を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅約480pxの SP デザインを固定し、左右を背景色で埋める想定
• PCで広げる場合は商品写真とテキストの2カラムを維持し、最大幅960pxにする
• 価格表示は横並びのまま拡大する
• 斜め分割の角度は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 行書くと起動時に読み込まれる。