DESIGN.md — ピンク×ミントのポップなアイスケーキ LP（Pop Party Pink & Mint Ice Cream Cake LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: パーティー・風船・きらめき・ミント×ピンク・斜め帯・限定感
• 地の質感: グラデーション地に光の粒・キラキラ・放射光を散らした華やかな質感
• 形: 斜めに傾いた金ライン付きのセクション境界、金の波形縁の円形写真、旗型ラベル、ピル型ボタン
• 温度感: 明るく甘い暖色ピンクと爽やかなミントの対比

Colors

• ミント地と淡ピンク地をセクションごとに交互に使う
• セクション境界は斜めの金色ラインで区切る
• マゼンタはCTAと表の該当セル・バッジだけに使う
• ミント地の文字は白、ピンク地の文字はこげ茶
• 黄色はポイントラベルと装飾の星に限定
• サブボタンはティールでCTAと区別する
• button-primary は文字 #FDF6F9 × 背景 #E2007E のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD007B、4.52:1）を使う。
• button-icon-cta は文字 #FDF6F9 × 背景 #E2007E のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD007B、4.52:1）を使う。
• button-sub は文字 #FDF6F9 × 背景 #00A2AD のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#007E87、4.55:1）を使う。
• point-label は文字 #00A2AD × 背景 #FEF593 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#007E87、4.61:1）を使う。
• speech-bubble は文字 #FDF6F9 × 背景 #E2007E のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD007B、4.52:1）を使う。
• release-badge は文字 #FDF6F9 × 背景 #E3017D のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#DB0179、4.6:1）を使う。

Typography

• 英字大見出し＋小さな日本語サブ見出しの2段構成にする
• FVタイトルは縁取り・ドロップシャドウ付きの立体ロゴ風
• 斜めに傾けた縦組みの祝いコピーを装飾として配置
• 本文は小さめで行間広め
• 価格は白の太字で大きく
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントは写真と文章の左右交互
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• ポイントは円形写真を画面端にはみ出させて配置
• 写真と説明文を左右ジグザグに並べる
• フレーバー紹介は左に円写真、右に名前・説明・ボタン
• 項目間は白の点線で区切る
• アレルギー表は4列グリッド

Elevation & Depth

• ボタンは影なし、白い細枠でフラットに
• 商品写真は切り抜きで軽い落ち影
• 円形写真は金の波形縁で浮き立たせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 円形切り抜き＋金色の波形（スカラップ）フレーム、商品は背景切り抜き
• セクション境界: 右上がりの斜め境界に金色の細ライン
• ポイントラベルは黄色の旗型（下に吹き出しの尾）
• 吹き出しはマゼンタの円形
• 表は角丸8pxで白い罫線

Components

• マゼンタピルCTA（button-primary）: 白枠付きマゼンタのピル型、右に＞矢印
• アイコン付き予約ボタン（button-icon-cta）: 左端に白丸アイコンを入れたマゼンタピル。2つ横並び
• 詳細ボタン（button-sub）: ティールのピル型、右に＞
• POINT旗ラベル（point-label）: 黄色の旗型に番号付きポイント表記
• 波形縁円写真（scallop-photo）: 金のスカラップ縁で囲んだ円形の商品アップ写真
• 円形吹き出し（speech-bubble）: マゼンタ円に白太字の短い補足
• 発売日バッジ（release-badge）: 左上角のマゼンタ旗に日付と発売の白字
• アレルギー表（allergy-table）: 淡ミントのセル4列、該当品目のみマゼンタ反転
• 点線挟み見出し（dotted-heading）: 白い点線で左右を挟んだ中央見出し

Do's and Don'ts

Do - 風船・星・キラキラを各セクションに散らす - ミントとピンクのセクションを交互に置く - 境界は斜め＋金ラインにする - 商品アップは円形の波形縁で見せる - CTAはマゼンタのピルに統一

Don't - 暗い色や黒の大きな面を使わない - 水平でまっすぐな境界だけにしない - マゼンタを本文や装飾に多用しない - 明朝体など落ち着いた書体を使わない - 写真を四角いまま並べない

Page Structure

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

1. ファーストビュー（限定商品と価格を一目で伝える）: ピンクのカーテン地に風船、立体ロゴ、限定バッジ、斜めの祝いコピー、大きな切り抜き商品、サイズと価格
2. 特長（ポイント）（商品の魅力を3点で説明）: ミント地に波形縁円写真と旗ラベル＋白文を左右交互、吹き出しで補足
3. 使用素材紹介（中身の構成を見せる）: 淡ピンク地に英字見出し、断面写真にティールの引き出し線ラベル、放射光と風船
4. 素材詳細リスト（各味の説明と詳細導線）: 円写真＋名前・説明・ティールボタン、白点線区切り
5. アレルギー情報（安心情報の提示）: ミント地に英字見出し、4列の表で該当をマゼンタ反転、注釈
6. CTA（予約）（予約行動へ誘導）: マゼンタのピルボタン、点線挟み見出し、ネットと店舗の2ボタン並び、税込注釈

Imagery

• 商品は白背景を抜いた切り抜きで斜め上から
• 中身の断面やアップは円形トリミング
• パステルの金・銀・ミントの風船を画面端に浮かべる
• 白いキラキラ・星・光の粒を散らす
• 背景にはステージ風のカーテンや放射光を薄く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のコンテンツを置き左右を同系背景で埋める
• ポイントは PC で写真と文章を横2カラムに
• アレルギー表は PC で6〜8列に広げてもよい
• 予約ボタンは横並びのまま幅を最大360pxに制限

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