DESIGN.md — 桃色グラデと水彩円の季節限定スイーツLP（Peach Pastel Sparkle Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、やさしい・柔らかい、清潔・爽やか
• キーワード: ピーチピンク・水彩円・きらめき・筆記体・シズル写真・季節限定
• 地の質感: 水彩のにじみがある円と、ぼかした多角形の光の粒を重ねたグラデーション地
• 形: 正円の水彩バッジ・ぼかした五角形・角丸のボタン
• 温度感: 暖色寄りで甘く柔らかい

Colors

• 地は上から下までピーチ〜ピンクの縦グラデーションでつなぐ。
• メッセージは白〜淡ピンクの水彩円にのせ、ローズピンクの文字で書く。
• セクション見出しの円だけミントグリーンにして、桃の葉の色を差し色として使う。
• CTAは緑のボタン一本に絞り、ピンクの地から浮かせる。
• 濃い茶は商品名ロゴと注釈だけに使う。
• button-primary は文字 #FFFFFF × 背景 #3FAE3A のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#30862D、4.59:1）を使う。
• watercolor-circle は文字 #E5606E × 背景 #FED3CC のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BD1F30、4.53:1）を使う。
• section-title は文字 #549940 × 背景 #F2EBCE のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#407531、4.61:1）を使う。
• release-band は文字 #FFFFFF × 背景 #F36A74 のコントラスト比が 2.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E91322、4.58:1）を使う。
• badge-option は文字 #FFFFFF × 背景 #3FAE3A のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#30862D、4.59:1）を使う。

Typography

• コピーは丸ゴシックの中央揃えにし、短く改行して円の中に収める。
• 筆記体の欧文は白で書き、円の上辺に沿わせて斜めや弧状に重ねる。
• 価格の数字は単位の約2倍の大きさにして目立たせる。
• 注釈は左揃えの小さい文字で「※」から始める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長の円は左右に交互に配置する
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは「筆記体の欧文＋小さな緑の円」をセットにして中央に置く。
• 特長の円は写真と重ね、左右にずらして置く。
• 商品写真は2点を横に並べて、その下に商品名・線・価格を続ける。
• CTAはページ末尾に大小2段で置き、その下に注釈を入れる。

Elevation & Depth

• 影はほぼ使わない。奥行きは写真の重なりで出す。
• CTAボタンだけに薄い外枠と軽い立体感を付ける。
• きらめきと光の粒は、要素の背面にレイヤーとして散らす。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 切り抜き写真を背景なしで重ねる。果実は画面端で見切れさせる
• セクション境界: 区切り線は使わない。グラデーションと写真でシームレスにつなぐ
• メッセージの器は水彩テクスチャの正円にする。
• ボタンは角丸の長方形にし、外側に白い二重枠を付ける。
• サブボタンはピル型で、白地に緑の枠線にする。

Components

• 店舗検索CTA（button-primary）: 緑のグラデーション地に白文字。左に丸矢印、右に店舗アイコンを置き、白い二重枠で囲む。
• 情報リンクボタン（button-secondary）: 白地に緑の枠線と緑の丸矢印を付けたピル型のボタン。
• 水彩メッセージ円（watercolor-circle）: にじみのある淡ピンクの正円に、ローズピンクのコピーを中央揃えで入れる。
• 筆記体＋緑円の見出し（section-title）: 白の筆記体欧文の下に、ミントグリーンの小円と緑の日本語見出しを重ねる。
• 発売日帯（release-band）: FV直下に置く全幅のピンク帯。白文字で日付を書く。
• 緑のオプションバッジ（badge-option）: 白縁の付いた緑の角丸ラベル。白抜き文字で付属品などを示す。
• 商品名＋価格（price-block）: ピンクの商品名、薄い下線、右揃えの価格を順に並べる。価格の数字だけを大きくする。
• きらめき装飾（sparkle）: 白い十字の光をランダムに散らす。

Do's and Don'ts

Do - 地はピーチ系のグラデーションで途切れずにつなぐ。 - 瑞々しい果実の切り抜き写真を、画面端で見切れるように大きく配置する。 - 見出しには必ず筆記体の欧文を添える。 - テキストは水彩円の中に短く収める。 - 注意を引く色は緑のCTAだけにする。

Don't - 濃い色やビビッドな色の面を広く使わない。 - 四角いカードや区切り線でセクションを分断しない。 - 明朝体や硬いゴシック体で長文を書かない。 - 強いドロップシャドウを付けない。 - CTAをピンク系の色にして地に埋もれさせない。

Page Structure

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

1. ファーストビュー（商品の魅力と価格を一目で伝える）: 果実を背景に商品写真を大きく置く。上部に極太の商品名、右に縦書きの短いコピー、右下に価格、左下に緑のバッジを配置する。
2. 発売日帯（発売日を告知する）: 全幅のピンク帯に白文字で書く。
3. コンセプト（商品の世界観を伝える）: 大きな水彩円に、3行のコピーと商品名を入れる。上には弧状の筆記体を重ね、周りにきらめきを散らす。
4. 特長見出し（ポイントの章を始める）: 筆記体の欧文と緑の小円を組み合わせた見出しを置く。
5. 特長（産地と味の魅力を2点で説明する）: 商品写真と果実写真に、番号付きの筆記体と水彩円を左右交互に重ねる。
6. ラインアップ（商品バリエーションと価格を示す）: 見出し円の下に商品写真を2点並べ、商品名・下線・価格を続ける。
7. CTA（店舗検索と詳細情報へ誘導する）: 大きな緑のボタンと、白いピル型のサブボタンを縦に並べる。
8. 注釈（価格や取扱いの注意を伝える）: ※から始まる小さな文字を左揃えで並べる。

Imagery

• 水滴の付いた果実を、切ったものと丸ごとの両方で柔らかい光の中で撮り、切り抜いて使う。
• 果汁が跳ねるしぶきを写真に添えて、シズル感を出す。
• 商品は真横からやや煽りで撮り、切り抜いて2点を重ねる。
• 背景にはぼかした淡色の五角形と白いきらめきを散らす。
• メッセージの円は、水彩のにじみと気泡のようなテクスチャで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央1カラムで、幅は約1000px。
• PCのFVでは商品名を写真の下側に重ね、バッジは左上に置く。
• PCの特長は、中央の商品写真の左右に水彩円を散らして配置する。
• PCのラインアップは2商品を横2列に並べる。
• PCのCTAは中央に寄せ、幅を狭めて置く。

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