DESIGN.md — 桃色グラデと紅赤帯の季節スイーツ LP（Peach Pink Seasonal Dessert Promo LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気
• キーワード: ピーチピンク・グラデーション・浮遊する果物・波形の帯・丸ゴシック・季節限定
• 地の質感: ふんわりした淡いグラデーションに、水彩・ブラシ風の筆跡を下敷きとして重ねる
• 形: 波形のセクション境界、円形バッジ、ピル型ボタン、曲線のスウッシュ下線
• 温度感: 暖色寄り。桃色〜アプリコットの甘い暖かさ

Colors

• 地は淡ピンク〜アプリコットの縦グラデーションで、セクションごとに少しずつ色相をずらす
• 紅赤は発売日帯・増量版セクション・関連商品見出し帯の面に限定して使う
• 紅赤面の上の見出しは白ではなく淡ピンクで柔らかく抜く
• 本文は黒ではなく焦げ茶で甘さを保つ
• 見出し文字の赤はブランド赤と同系で揃える
• ボタンは白地に色付き枠と円形アイコンで、塗りの強いボタンは避ける
• button-primary は文字 #DA7A2D × 背景 #FDFCFD のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B05F1F、4.56:1）を使う。
• related-banner は文字 #FAC9B8 × 背景 #E40139 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B9012E、4.54:1）を使う。

Typography

• 見出しは丸ゴシックで赤、本文は焦げ茶の太めゴシック
• 本文はすべて中央揃えで短く改行する
• 商品名には難読字にルビを振る
• 価格は税抜を大、税込を括弧付きで併記し小数部を小さく
• キャッチの一部は少し斜体・傾けて躍動感を出す
• 見出し下に赤い曲線スウッシュを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅いっぱいに近い大きさで中央配置
• 桃の写真を画面端から半分はみ出させて浮遊感を出す
• 見出し→写真→説明文→ボタンの縦積みを繰り返す
• 注釈はセクション末尾に左揃えでまとめる

Elevation & Depth

• 基本はフラット、影なし
• 写真の背後に白いぼかしグローで浮かせる
• 円形バッジに淡いドロップシャドウ

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 切り抜き写真（背景なし）を基本とし、果物は端でトリミング
• セクション境界: ゆるやかな波形カーブ
• セクション境界は直線を避け波形にする
• 強調は円形バッジで示す
• ボタンはピル型か角丸の白地
• 見出し下に曲線スウッシュ

Components

• 発売日帯（date-band）: 紅赤の全幅帯に白文字で日付を表示し、下端は波形
• 価格表示（price-block）: 税抜を大きく、税込を括弧で併記する黒太字価格
• 増量円形バッジ（circle-badge）: 白〜淡ピンクの円に赤文字で倍量を訴求
• スウッシュ見出し（heading-swoosh）: 赤い丸ゴシック見出しの下に赤い曲線ライン
• ブラシ下敷き本文（brush-text）: サーモンやアプリコットの筆跡の上に中央揃え本文
• 詳細リンクボタン（button-secondary）: 白いピル型、右に黒三角
• 店舗検索ボタン（button-primary）: 白地にベージュ二重枠、左にオレンジ円矢印、右に店舗アイコン
• 情報リンクボタン（button-outline）: 白地に赤枠のピル型、左に赤円矢印
• 関連商品バナー（related-banner）: 紅赤帯見出しの下に全幅商品バナーを縦積み

Do's and Don'ts

Do - 地は淡い桃色グラデーションを保つ - 果物写真を端にはみ出させて浮かべる - 見出しは赤い丸ゴシック＋曲線下線 - 強調セクションだけ紅赤面に切り替える - 価格は税抜・税込を併記する

Don't - 純黒の文字や無彩色グレー地を使わない - 直線的な区切りや角張った箱組みにしない - 紅赤を本文や広い背景に多用しない - 寒色系を主役ゾーンに入れない - 塗りつぶしの重いボタンを並べない

Page Structure

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

1. ファーストビュー（商品名・ビジュアル・価格を一目で伝える）: ルビ付き太字商品名、中央に商品写真、縦書きコピーと右下に価格
2. バリエーション帯（増量版の存在と価格を伝える）: 紅赤帯に小写真・円形バッジ・商品名・価格を横並び
3. 発売日告知（発売日を明示）: 紅赤全幅帯に白文字、下端は波形
4. 導入（今年も登場を告知）: 小リード＋赤い大見出し＋スウッシュ、周囲に桃を浮遊
5. 素材のこだわり1（果物の品質を説明）: 果物写真→赤見出し→ブラシ下敷き本文
6. 素材のこだわり2（ソフトクリームとの相性を説明）: 商品写真→赤見出し→本文→白ピルの詳細ボタン
7. 増量版訴求（倍量商品を印象づける）: 紅赤面に淡ピンクの大見出し、大きな商品写真と円形バッジ、桃を並べ波形で終える
8. 来店CTA（店舗への来店を促す）: 傾いた赤見出し、商品2つの写真、店舗検索ボタンと情報ボタン
9. 注釈（税率・取扱条件の説明）: 小さな左揃えの注釈を箇条で
10. 関連商品（他の季節商品へ回遊）: 紅赤見出し帯の下に全幅バナーを縦積み

Imagery

• 商品は背景を抜いた切り抜き写真で、明るく柔らかい光
• 産毛の見える丸い果物写真を大小散らして浮かべる
• 一部の果物はぼかして奥行きを出す
• 水彩・筆ストロークの淡色テクスチャを文字の下敷きにする
• 関連商品は鮮やかな背景付きのバナー写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せの固定幅で、背景グラデーションを全幅に伸ばす
• FV は商品写真中央、左に増量版、右に価格とコピーを配置
• 素材のこだわり2項目は PC で 2 カラム横並び
• 増量版は写真左・見出し右の横組み
• 関連商品バナーは PC で 3 カラム横並び

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