DESIGN.md — 赤×チョコ茶のお祝い菓子コラボ LP（Festive Red and Chocolate Brown Confectionery Collab LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、力強い・インパクト、親しみ・手作り感
• キーワード: 記念コラボ・赤ベタ・チョコ茶・白カード・キャラクター・限定感
• 地の質感: ベタ塗りの面に紙吹雪と花模様を散らす。商品写真は照りの強いシズル感。
• 形: 白い角丸カード、赤いピル型ボタン、点線の区切り線、手描き風の吹き出し
• 温度感: 暖色中心の温かくにぎやかなトーン

Colors

• 地は赤とチョコ茶を大きなブロックで交互に置く。
• 紹介・特長は赤地、商品購入はチョコ茶地にする。
• 情報は必ず白カードの上に載せ、地に直接本文を置かない。
• 購入ボタンは赤一色。白文字に右端の白丸矢印を付ける。
• 金ベージュはセクション見出しの帯だけに使う。
• 赤地の上の文字は白、カード内は茶系の文字にする。
• point-heading は文字 #E60112 × 背景 #F7E21C のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C80110、4.57:1）を使う。
• badge-shipping は文字 #FFFFFF × 背景 #2BA34A のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#24873D、4.56:1）を使う。

Typography

• 全体は丸ゴシックで、親しみやすくまとめる。
• 価格の数字は大きく太く、円と税表記は小さく添える。
• ポイント番号は筆記体の欧文を赤で書き、下に黄色マーカーを斜めに引く。
• 強調したい語には傍点を付ける。
• 吹き出しの文字は手書き風の書体にする。
• 本文は中央揃えで短く改行する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の商品画像と価格は縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 6% の余白を取って地の上に浮かせる。
• カード同士は 16px 空けて縦に並べる。
• 購入ボタンはカードの下中央に、幅 75% 前後で置く。
• 商品名の下に赤い点線を引き、その下に内容リストを置く。
• 装飾のキャラクターや花は余白に散らし、本文には重ねない。

Elevation & Depth

• カードは影なし。色の対比だけで浮かせる。
• 購入ボタンは下に濃い赤の影を 3px ほど付け、押せる立体感を出す。
• 商品写真には薄い落ち影を付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージとお菓子は切り抜き写真で使う。四角い枠には入れない。
• セクション境界: 直線で色を切り替える。見出しは上下に二重線を引いた金色の帯にする。
• カードは角丸 16px。
• ボタン・注記ラベルはピル型。
• 吹き出しは手描き風の太い線で、角丸を大きくする。
• バッジは角丸の小さい矩形にする。

Components

• 購入ボタン（button-primary）: 赤いピル型。中央に白い太字、右端に白丸の矢印アイコンを付ける。
• 商品カード（product-card）: 白の角丸カード。商品写真、商品名、点線、内容リスト、価格、ボタンの順に並べる。
• 金帯の見出し（section-band）: 金ベージュの帯に二重線を引き、茶色の太字見出しの左右にキャラクターのシルエットを置く。
• ポイント番号見出し（point-heading）: 赤い筆記体の番号に黄色マーカーを敷き、右に 2 行の太字見出しを置く。
• 送料込みバッジ（badge-shipping）: 価格の左に置く緑の小さなラベル。文字は白。
• セット内容ボックス（contents-list）: クリーム地に中点付きの内容を小さく中央揃えで並べる。
• 画像注記ラベル（image-label）: 比較写真の下に置く、えんじのピル型ラベル。
• 手描き吹き出し（speech-bubble）: 白地に太い黒線で描いた吹き出し。キャラクターの台詞として限定感を伝える。
• 紹介文ボックス（intro-box）: 赤地の上に置くクリームの枠。周りにお菓子と商品写真をはみ出させる。

Do's and Don'ts

Do - 赤とチョコ茶の面を大きく交互に使う。 - 購入カードはページの途中と最後の 2 回置く。 - キャラクターと花・紙吹雪は余白にだけ散らす。 - 価格は大きな数字と小さな税表記をセットで見せる。 - お菓子の断面写真で中身のとろけ感を見せる。

Don't - 寒色や無彩色だけのセクションを作らない。 - 赤地に直接長い本文を置かない。 - 角が鋭いボタンや線だけのボタンを主 CTA にしない。 - 装飾で価格やボタンを隠さない。 - 金色を広い面に使わない。

Page Structure

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

1. ファーストビュー（コラボ商品と限定数を一目で伝える）: 赤地の中央にロゴ風のタイトル。下にチョコが流れる写真と浮かぶお菓子を置き、右下に金のメダル型で限定数のバッジを付ける。
2. コラボ紹介（記念コラボの背景を語る）: 赤地にタイトルを再び置き、白の大見出しを続ける。その下にクリームの枠の紹介文、白文字の説明と断面写真を並べる。
3. 商品購入（1回目）（単品と詰め合わせを売る）: チョコ茶地に白カードを 3 枚縦に並べる。各カードは写真・商品名・点線・内容・価格・赤ボタンの順。
4. おすすめポイント見出し（特長パートの始まりを示す）: 金ベージュの帯に二重線を引き、茶色の見出しの左右にリスのシルエットを置く。
5. 特長（ポイント1〜3）（大きさ・食感・限定性を説明する）: 赤地に白カードを並べる。筆記体の番号見出しを付け、サイズ比較写真や断面の引き出し線注記を入れる。
6. 限定の訴求（購入できる場所が限られることを伝える）: 線だけの吹き出しタグとキャラクターの手描き吹き出しで、限定感を伝える。
7. 商品購入（2回目）（最後に購入を促す）: 最初の購入エリアと同じチョコ茶地のカード 3 枚をもう一度並べる。

Imagery

• お菓子は照りの強いクローズアップで撮り、切り抜いて斜めに浮かせる。
• 断面を見せ、中のチョコのとろけ感を強調する。
• パッケージは正面の切り抜きにし、複数個は少し重ねて並べる。
• リスのキャラクターは厚塗りのリアルなイラストにし、旗やお菓子を持たせる。
• 背景には黄色やクリームの花模様、カラフルな紙吹雪を散らす。
• チョコが流れる液体表現で背景の奥行きを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元の LP は PC でも幅 480px 前後の SP 型 1 カラムで中央に置き、左右の地色をそのまま伸ばしている。
• SP ではカード内の写真と商品名・価格を縦に積む。
• PC の単品カードは写真を左、商品名・価格を右に置く 2 カラムにしてもよい。
• SP では装飾キャラクターを縮め、本文と重ならない位置に置く。
• ボタンは SP で幅 80%、高さ 48px 以上を保つ。

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