DESIGN.md — 桜ピンク×水色の春限定お菓子福箱 LP（Spring Sakura Pink Snack Gift Box LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 桜・春限定・福箱・ピンクグラデーション・丸みのある太字・セット比較
• 地の質感: 水彩風の桜イラストと淡いグラデーション地。商品写真はパッケージの切り抜きを密に並べる
• 形: 角丸カード、ピル型ボタン、花形バッジ、装飾縁の見出しプレート
• 温度感: 暖かく華やか。ピンクを主軸に水色で春の空気を加える

Colors

• 地は淡いピンク系で統一し、白に近い面をカード内側に使う
• セットごとにテーマ色（ピンク／オレンジ）を決め、枠・見出しプレート・購入ボタンを同じ色にする
• FV だけ水色の空を使い、桜のピンクと対比させる
• 会員登録の訴求は彩度の高い赤の全幅帯で切り替え、文字は白
• クーポン金額は赤文字をベージュ面に置いて強調する
• 本文は黒ではなく濃いブラウンで柔らかく見せる
• button-primary は文字 #FEF4FB × 背景 #FB4A7B のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E20542、4.51:1）を使う。
• set-title-plate は文字 #FEF4FB × 背景 #FB4A7B のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E20542、4.51:1）を使う。
• period-box は文字 #FB4A7B × 背景 #FCF8EF のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E20542、4.5:1）を使う。
• coupon-panel は文字 #E42E3D × 背景 #F3E6DB のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#CC1A29、4.58:1）を使う。

Typography

• 本文も太めの丸ゴシックにして親しみやすくする
• 価格は数字だけ大きくし、単位と税込表記は小さく添える
• 見出しは字間を広めにとる
• 注意書きは小さく、色付き地の上に左揃えで置く
• 本文は中央の 1 ブロックで左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 24px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品セットは太い色枠の角丸カードにし、縦に積む
• カードの上半分に商品写真、下半分に説明・価格・CTA を置く
• セット名プレートは写真とテキストの境目に重ねる
• キャンペーン帯は全幅で、左にラベル、右に特典の 2 分割
• スタッフの声は丸いアバターを中央に置き、下に本文

Elevation & Depth

• カードは影をつけず、太い色枠で区切る
• セット名プレートに少し濃い縁取りを重ねて立体感を出す
• ボタンはフラットで影は弱め

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 18px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージを切り抜いて密に重ね並べる。人物はイラストを円形に切り抜く
• セクション境界: 直線で切り替え。FV の境界は桜イラストで縁取る
• 購入ボタンは完全なピル型
• 数量限定バッジは白い桜の花形
• セット名は装飾的な縁の付いたプレート型
• 会員登録ボタンは角丸の長方形で白地

Components

• 購入ボタン（button-primary）: セットのテーマ色で塗ったピル型。文字の右に小さな三角
• 商品セットカード（product-card）: テーマ色の太い枠の角丸カード。写真、プレート、説明、価格、詳細リンク、CTA の順
• セット名プレート（set-title-plate）: 装飾縁の横長プレート。上に小さなキャッチ、下に大きなセット名
• 数量限定の花形バッジ（badge-sakura）: 白い桜形に濃茶で 2 行の短い文字
• 販売期間ボックス（period-box）: ピンクのピルラベルの下に、白い帯で日付をピンク文字で表示
• 価格表示（price-display）: 小さなラベル＋大きな太い数字＋小さな単位
• クーポン訴求パネル（coupon-panel）: 左は濃茶の面に白文字、右はベージュの面に赤い大きな金額
• 会員登録ボタン（button-secondary）: 赤帯の上に置く白地の角丸ボタン。文字は濃茶
• セット詳細の開閉リンク（accordion-link）: 下向き矢印付きの小さなテキストリンク。色はテーマ色

Do's and Don'ts

Do - 季節モチーフ（桜）をFVと写真の背景に必ず入れる - セットごとにテーマ色を変え、枠とボタンの色をそろえる - 商品は数の多さが伝わるよう密に並べる - 各カードの最後に購入ボタンを置く - 本文は濃いブラウンの丸ゴシックで書く

Don't - 本文に純黒や細い明朝体を使わない - 寒色を FV 以外で大きく使わない - ボタンを四角い角や枠線だけのデザインにしない - カードに強い影をつけない - 商品写真に余白を広くとりすぎない

Page Structure

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

1. ファーストビュー（季節の限定企画であることを伝える）: 水色の空の地を桜イラストで囲み、ロゴ、多色の大タイトル、販売期間ボックス、4 行の中央揃えリードを置く
2. 商品セット 1（上位のセットの中身と価格を見せ、購入へ誘導する）: ピンク枠のカード。花形バッジ、商品写真、ピンクのプレート見出し、説明、大きな価格、発送のお知らせボックス、詳細リンク、ピンクの CTA
3. 商品セット 2（手頃なセットを比較して選べるようにする）: 同じ型のカードをオレンジに色替えして並べる
4. 会員登録キャンペーン（クーポン特典で会員登録を促す）: 赤い全幅帯。アイコン付き見出し、2 分割のクーポンパネル、期間ラベル、点線の下に注意書き、白いボタン
5. スタッフの声（作り手の思いで親しみを出す）: 淡いピンク地に、ピンクの小見出し、円形の人物イラスト、左揃えの本文と署名
6. フッター（ページを締める）: ベージュの無地帯

Imagery

• 桜の枝と花びらは水彩風のイラスト。画面の四隅から内側に向けて配置する
• 商品パッケージは切り抜いて少しずつ重ね、ひし形柄や桜柄の背景にのせる
• 人物はフラットな線のない似顔イラストで、白い円に収める
• 大タイトルは文字ごとにピンク・黄・緑のグラデーションをかけ、白い縁取りをつける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 480〜600px 程度の SP レイアウトを置き、左右を淡いピンクで埋める
• PC 化する場合は商品カードを 2 列に並べてもよいが、色分けは維持する
• FV の桜イラストは PC では左右に広げて配置する
• ボタンは PC でも最大幅 400px 程度のピル型にする

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