DESIGN.md — 赤地×花柄クリームのポップなコラボスイーツLP（Candy Red Pop Collaboration Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: 真っ赤な地・花柄クリームパネル・キャラクター・太丸ゴシック・期間限定・価格訴求
• 地の質感: 赤地はベタ塗りにキラキラを少し散らす。パネルはクリーム地に淡い花柄を規則的に並べる。
• 形: 大きな角丸パネル、ピル型のボタンとラベル、雲形・花形の吹き出し、写真用の丸い切り抜き
• 温度感: 暖色寄り。赤とクリーム色が中心で、ピンクと水色で甘さを足す。

Colors

• ページの地はすべて赤。商品はクリーム色の角丸パネルに入れて浮かせる。
• 見出しラベルは赤の塗りに白文字。ボタンは白地に赤枠と赤文字。
• 価格はえんじ色の極太数字。本文は茶色寄りの濃色にして柔らかく見せる。
• ピンク・水色は花柄と吹き出しにだけ使う甘さの差し色。
• プレゼント告知は黄色パネル＋赤文字で、商品パネルと見分けられるようにする。
• bubble-flower は文字 #FFFFFD × 背景 #F3A9C4 のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#E02368、4.55:1）を使う。
• banner-campaign は文字 #E50112 × 背景 #FEE99E のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D30111、4.59:1）を使う。

Typography

• 見出しはすべて太い丸ゴシック。細い書体は使わない。
• 円記号と価格数字は極太で大きくし、前に小さくサイズ名を添える。
• 本文は左揃えで、3〜4行に収める。
• 注釈は小さな文字で、※を頭にしてぶら下げる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。価格だけ縦線で 2 分割する
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 50px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品ごとに角丸パネルを 1 枚使い、赤地の上に縦に積む。
• パネル内は、赤ラベル見出し→写真→説明→価格→ボタン→注釈の順に並べる。
• 写真はパネルの端からはみ出すほど大きく見せてもよい。
• 裏面などの詳細は丸く切り抜いた写真＋矢印で添える。

Elevation & Depth

• パネルに影は付けない。赤地との色の差だけで浮かせる。
• 写真の切り抜きには、軽い落ち影を付けてもよい。
• ボタンは平らに作り、赤い枠線で区切る。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いて切り抜く。詳細写真は赤い枠付きの円形にする。
• セクション境界: ファーストビューの下端は溶けたクリームのような波形。以降は角丸パネルの間に赤地の余白をとって区切る。
• 見出しラベルは赤塗りのピル型。
• 吹き出しは雲形か花形にする。
• プレゼント告知パネルの見出し帯は、下端をスカラップ状にする。

Components

• 枠付きピルボタン（button-primary）: 白地に赤い太枠と赤文字。右端に赤丸の矢印アイコンを付けることもある。
• 赤ラベル見出し（label-heading）: 商品名を白い太丸ゴシックで2行にした赤いピル型ラベル。
• 花柄商品パネル（card-product）: クリーム地に淡い花柄を敷いた大きな角丸パネル。
• 価格ブロック（price-block）: 小さなサイズ名の下に極太の価格。2つのサイズは縦線で区切る。
• 花形・雲形吹き出し（bubble-flower）: ピンクや水色の花形に、白文字でフレーバー名や特長を書く。
• 新作バッジ（badge-new）: 白い円に赤文字で新作と入れ、小さな筆記体の英字を添える。
• 特典告知バナー（banner-campaign）: 左に赤地白文字の数量表示、右に黄色地赤文字の特典内容を並べる横長の角丸バナー。
• 注釈（note-text）: ※で始まる小さな茶色文字。ぶら下げインデントにする。

Do's and Don'ts

Do - 地は赤一色にし、商品はクリーム色の角丸パネルにまとめる。 - 見出しは赤ピル型ラベルに太い丸ゴシックで入れる。 - 価格は極太のえんじ色で大きく見せる。 - 花柄や吹き出しにピンク・水色を使い、甘いかわいさを出す。 - 各パネルの最後に枠付きピルボタンを置く。

Don't - 黒やグレーのくすんだ色を広い面に使わない。 - 細い明朝や細いゴシックで見出しを書かない。 - パネルを角ばった四角にしない。 - 強い影や立体的なグラデーションのボタンにしない。 - 花柄を濃くして文字を読みにくくしない。

Page Structure

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

1. ファーストビュー（コラボと期間限定であることを伝える）: 赤地にロゴ、期間を書いた雲形バッジ、大きな商品写真、キャラクター。下端は波形で区切る。
2. 商品ラインナップ（対象商品を一覧で見せる）: 水玉・花柄の敷物の上に商品をまとめて並べた写真。
3. 特典告知バナー（購入特典に気づかせ、下の詳細へ誘導する）: 赤と黄色に分けた横長の角丸バナー。右下に下向き矢印を付ける。
4. 新フレーバー紹介（新しい味の魅力を伝える）: 大きなカップ写真に花形の吹き出しと新作バッジを添え、白い本文を左右交互に配置する。最後に詳細ボタン。
5. 商品紹介パネル（複数）（商品ごとの価格と特長を伝える）: 花柄パネルに赤ラベル見出し、写真、裏面の丸い写真、説明、価格、ボタン、注釈を並べる。
6. アプリ限定特典（アプリ会員になる利点を伝え、ダウンロードを促す）: 雲形の水色の上に大きな見出し。下にストアバッジ2つと枠付きボタンを置く。
7. プレゼント詳細（特典の内容と対象商品を示す）: 赤い見出し帯の黄色パネルに特大の赤文字、ステッカーのイラスト、全種数を書いたピル、白枠の対象商品リストを入れる。
8. フッター注釈（販売条件などの注意事項を伝える）: 赤地に白い小さな文字で※の箇条書きと著作権表記。

Imagery

• 商品は明るく均一な光で撮り、背景を抜いて大きく見せる。
• ガラスの器や紙カップを斜め上から撮り、ぷるっとした質感を出す。
• 下に水玉や花柄のペーパーを敷き、かわいさを足す。
• キャラクターのイラストは太い輪郭線のレトロでかわいいタッチにする。
• 赤地には白いキラキラを少しだけ散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像はないため、SPの構成を基準にする。
• PCではパネルを最大幅約720pxで中央に置き、左右は赤地を見せる。
• PCでは商品写真と説明を2カラムにし、価格は横に並べたままにする。
• ファーストビューは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 行書くと起動時に読み込まれる。