DESIGN.md — クリーム地×マゼンタと黄色のキャラコラボ菓子 LP（Pop Character Collab Ice Cream Campaign LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、力強い・インパクト
• キーワード: 夏祭り感・キャラクター・極太ゴシック・白フチ切り抜き・ドット地・価格訴求
• 地の質感: 淡いクリーム地に小さな水玉と星をちりばめる。写真はハイキーで、白フチと影を付けたステッカー風にする
• 形: 平行四辺形の帯見出し、角丸のカードとボタン、波形・弧形のセクション境界、トゲの吹き出しバッジ
• 温度感: 暖色寄り。明るく甘い夏らしさ

Colors

• 地はクリームのドット柄が基本。特集ゾーンだけ黄色・紫グラデ・ジャンル別の原色帯にする
• マゼンタは CTA ボタンと特典パネルに使い、主役色として絞り込む
• 価格と見出しはこげ茶にし、純黒は使わない
• 購入条件の指示は黄色のバーにこげ茶の太字で書く
• おトク情報はオレンジの丸バッジで、販売終了・転売注意は赤文字で示す
• カテゴリ別の色分け（緑・赤・青）はベタ塗りの横帯で見せる
• button-primary は文字 #FEEC13 × 背景 #E33284 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C71B6B、4.54:1）を使う。
• notice-box は文字 #E60012 × 背景 #EAF6FE のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#E10012、4.54:1）を使う。

Typography

• 見出しは極太にして、白フチや影を付ける
• 価格は「¥」付きの極太数字をこげ茶で大きく見せる
• 大見出しはキーワードだけ色や大きさを変えて差を付ける
• 本文は 14px 前後の詰めたゴシック。行間は広めにとる
• 注釈は※で始め、2 行目からはぶら下げインデントにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。価格は 2 列、ステッカーは 3 列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品ごとに「帯見出し→写真→説明→価格→指示バー」の順で並べる
• 商品ブロックの間は茶色のドット線で区切る
• 販売終了のお知らせは、見出しの直前に枠付きボックスで置く
• 写真は画面幅いっぱいまで大きく見せる
• FV 直下には商品へのアンカーボタンを 2 列で並べる

Elevation & Depth

• カードとボタンには、下方向に濃い色のベタ影を数 px 付ける
• 切り抜き写真には白フチとソフトな影を付けてステッカー風にする
• 帯見出しは濃い茶色の太フチで立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 背景を抜いた切り抜き。白い太フチを付けてステッカー風にする
• セクション境界: 上下に弧形・波形のカーブで地の色を切り替える
• 見出し帯は平行四辺形に傾ける
• サイズラベルはピル型で、茶色の線枠を付ける
• おトク表示は円形、新作表示はトゲ形のバッジにする
• 特典パネルは上に三角の矢印が付いた角丸の大パネルにする

Components

• 詳細ボタン（button-primary）: マゼンタのピル型ボタン。黄色の太字に、右端の丸矢印アイコンを添える
• 斜め帯見出し（heading-band）: 水色の平行四辺形を茶色の太枠で囲み、白い極太文字を載せる
• サイズ別価格（price-block）: 淡い水色のピル型ラベルの下に、極太の価格を置く。2 列で並べる
• 選択指示バー（instruction-bar）: 黄色の角丸バー。中央にこげ茶の太字で購入条件を書く
• 商品アンカーカード（anchor-card）: マゼンタの角丸カードに、商品写真・白文字の商品名・下矢印を載せる。2 列で並べる
• おトクバッジ（badge-deal）: オレンジの円に白い太字で割引量を書く
• 販売終了のお知らせ枠（notice-box）: 白地に黄色の細枠。赤の太字を中央に置く
• フッターのリンクボタン（link-list）: ピンクの角丸ボタン。白文字を左寄せにし、右端に矢印を置く

Do's and Don'ts

Do - 価格は必ず極太の大きな数字で見せる - 写真は白フチの切り抜きにして、少し傾けたり重ねたりして動きを出す - 背景に星とドットをちりばめる - 商品ごとに同じ順序で情報を並べる - 注釈は※付きの小さい文字で、対象の直後に置く

Don't - 細い明朝体や繊細な書体を使わない - グレーや黒の地で暗くしない（紫グラデの特集だけは例外） - 写真を四角く切り取ったまま置かない - 色数を絞りすぎて地味にしない - 本文を長く続けない。3〜4 行までにする

Page Structure

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

1. ファーストビュー（キャンペーン名・期間・キャラクターで注目を集める）: ドット地に、立体ロゴと斜めのサブコピー、日付の丸バッジ、キャラクター群を配置する
2. 商品インデックス（各商品へ移動させる）: マゼンタのアンカーカードを 2 列のグリッドで並べる
3. 新作フレーバー（目玉商品を訴求する）: 黄色の弧形ゾーンに、稲妻背景・極太ロゴ・大きな商品写真・トゲバッジ・詳細ボタンを置く
4. カップ商品の紹介（デザインの選択肢を見せる）: 緑・赤・青の横帯ごとに、ラベル・柄見本・カップ写真を左右交互に配置する
5. 購入特典（おまけで購入意欲を高める）: マゼンタの大パネルに、水色の大見出しとステッカー一覧を 3 列で並べる
6. サンデー・セット商品（個別商品と付属品を説明する）: 帯見出し・重ねた写真・吹き出し・説明・価格・指示バーの順に並べる
7. 付属品の特集（共通のおまけを強調する）: 黄色の弧形ゾーンに、色分けしたスプーンの写真と吹き出しを置く
8. ドリンク商品（別ジャンルの商品を際立たせる）: 紫〜ピンクのグラデ地に、きらめき装飾と波形の下端を付ける
9. ボックス商品（容量別のおトク感を示す）: 箱の写真に、入数ラベル・おトクバッジ・2 列の価格を添えて縦に並べる
10. ケーキ商品（予約商品へ誘導する）: 淡いオレンジの角丸カードに、新作バッジ・写真・価格・詳細ボタンを置く
11. 注意事項とフッター（条件と注意を伝え、関連ページへ導く）: 赤字の警告の後に※の注釈リストを並べ、弧形の境界を挟んでピンクのリンクボタンを縦に並べる

Imagery

• 商品はハイキーの正面〜俯瞰で撮り、背景を抜いて大きく見せる
• キャラクターのイラストは白フチ付きのステッカー風にして、写真に重ねる
• 背景には黄色の星、小さな水玉、稲妻やきらめきを散らす
• 吹き出しは黄色やマゼンタの角丸にし、矢印を商品に向ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像は確認できない。中央に 600〜750px 幅で固定し、左右はドット地で埋める
• アンカーカードは PC では 3〜4 列にする
• ステッカーのグリッドは PC では 5 列程度に広げる
• カラー帯と弧形の境界は全幅のまま保つ

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