DESIGN.md — 苺ピンク×チョコ茶×金の季節限定スイーツ LP（Strawberry Chocolate Seasonal Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、かわいい、情報量多め・訴求型、ポップ・元気
• キーワード: 苺とチョコ・金のアクセント・切り抜き商品写真・アーチ型の枠・季節限定・価格訴求
• 地の質感: なめらかなグラデーション地に小さなキラキラ装飾を散らし、金はメタリックなグラデーションで光沢を出す
• 形: 上部がアーチ形のカード、細い金線の枠、ピル型の金ボタン、波形のセクション境界
• 温度感: 暖色寄り。甘く温かい

Colors

• 地はくすみピンクとチョコ茶の2色をセクション単位で交互に敷く
• 金はボタン・区切り線・英字見出し・日付バッジに限定し、メタリックなグラデーションで表現する
• アプリ限定などの特典は濃い赤ワイン色の枠で囲み、他の商品と区別する
• グッズ系のキャンペーンだけビビッドピンクと黄色に切り替えてポップにする
• 茶地の上は白とクリーム、ピンク地の上は焦げ茶の文字にする
• お得表示の帯はサイズごとに青・ピンク・緑で色分けする
• page は文字 #6A2119 × 背景 #DD8097 のコントラスト比が 4.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#E08A9F、4.5:1）を使う。
• badge-new は文字 #E03A80 × 背景 #F9F1EB のコントラスト比が 3.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#D0216B、4.57:1）を使う。
• label-ribbon は文字 #F9F1EB × 背景 #C9952F のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8D6921、4.51:1）を使う。
• deal-bar は文字 #F9F1EB × 背景 #1E8AD8 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1973B4、4.53:1）を使う。

Typography

• 英字の大見出しの左右に細い横線を引いて中央に置く
• 価格は「各」と円記号を小さくし、数字を大きな明朝体で見せる
• キャンペーン面の見出しは丸く太い書体で、黄色の文字に縁取りをつける
• 本文は狭い段で字間を広めにとり、小さめの文字で短く切って改行する
• 強調したい語だけ文字を大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は写真と文字を左右交互に半分ずつ配置する
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品写真は画面の半分〜全幅で大きく見せる
• 写真と説明は左右を交互に入れ替えてジグザグに並べる
• 価格は全幅の濃い帯に載せ、その下にクリーム色の補足帯を置く
• 特典はアーチ型の枠にまとめ、その中で価格・ボタン・注釈まで完結させる
• 注釈は各ブロックの最後に左揃えでまとめる

Elevation & Depth

• 商品写真には落ち影を入れて立体感を出す
• カードは影より細い金線の枠で縁取る
• 金ボタンには内側の光沢と薄い影をつける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 180px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。皿やカップごと見せる
• セクション境界: 金の縁取りがついた波形の曲線、または直線の金帯
• 主要カードは上部が半円のアーチ型にする
• 説明枠は角を斜めに落とした八角形の線枠にする
• 新作・限定のバッジは円形にする
• キャンペーン見出しはリボン形の帯にする

Components

• 金のピルボタン（button-primary）: 金のグラデーションに焦げ茶の文字と右矢印を置いたピル型ボタン
• アーチ型の商品カード（arch-card）: 上部が半円の茶色い枠に商品写真と説明を収め、下部は金の地にする
• 英字のセクション見出し（section-title）: 左右に細い線を伸ばし、中央に太い英字を置く
• 新作の丸バッジ（badge-new）: 白い円の中に、筆記体の英字と新作の文字をピンクで入れる
• 価格の帯（price-band）: 濃い茶色の全幅帯に商品名と大きな明朝の価格を置き、下にクリーム色の補足帯をつける
• 商品名のラベル帯（label-ribbon）: 左右がぼける金茶のグラデーション帯に商品名を入れる
• トッピングの引き出し線（callout-line）: 商品写真の各部から細い線を引き、素材名を添える
• お得表示のバー（deal-bar）: 色付きの帯に何個分お得かを白文字で書き、強調部分は黄色にする。左上に個数のタブをつける

Do's and Don'ts

Do - ピンクと茶の地を交互に敷き、苺とチョコの対比を見せる - 金はグラデーションで光沢を出す - 苺や板チョコの切り抜きを周囲に散らす - 価格は明朝の大きな数字で見せる - 限定特典は濃い赤の枠とマゼンタの丸バッジで目立たせる

Don't - 寒色を大きな面積で使わない（お得バーは例外） - 金をベタの黄色で代用しない - 商品写真を四角く切り抜かない - 注釈を本文と同じ大きさにしない - セクションの境界を単純な直線だけにしない

Page Structure

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

1. ファーストビュー（期間限定のコレクションを一目で伝える）: 茶からピンクへのグラデーション地に英字タイトルと日付の円を置き、商品を並べて写す
2. 新作フレーバー（主力の新商品を印象づける）: アーチ型の茶色いカードに大きな写真、説明、金ボタンを収める
3. フレーバー一覧（ラインナップを紹介する）: ピンク地に写真と縦長の説明文を左右交互に並べる
4. アプリ限定特典（アプリ会員向けの特典で来店を促す）: 濃い赤の枠に金の見出し、価格、ボタン、アプリのダウンロードボタン、注釈を入れる
5. ダブルサンデー（パフェ系商品を紹介する）: 波形の境界から茶色の地に切り替え、ラベル帯、引き出し線付きの写真、線枠の説明、価格帯を順に並べる
6. 限定サンデー（アプリ限定の特別商品を見せる）: アーチ型の金のカードに日付タブと特典の丸バッジをつける
7. シングルサンデー（小さいサイズの商品を紹介する）: 写真と説明を左右交互に並べ、価格帯で締める
8. ノベルティキャンペーン（まとめ買いを促す）: ビビッドピンクの斜線地に黄色の大見出しとグッズ写真、色分けしたお得バーと価格を置く
9. イベント週間（短期間のイベント特典を告知する）: 濃い茶色の地にハートチョコを散らし、筆文字風のタイトルとハート形の吹き出しを置く
10. ギフト商品（贈り物向けの商品を勧める）: ピンク地に大きなハートを重ね、リボン見出し、商品写真、線枠の価格、金ボタンを置く

Imagery

• アイスやパフェは真横から少し見下ろす角度で撮り、背景を抜いて落ち影をつける
• 生の苺と板チョコを小物として周囲に散らす
• 背景に小さな星形のキラキラを散らす
• グッズは白背景で正面から写した切り抜きにする
• イベントの面ではハートモチーフを繰り返し使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP と同じ縦長の列を置き、左右は地色を伸ばして埋める
• PC で広げる場合は、商品一覧を 2〜3 カラムのカードにする
• アーチ型カードの最大幅は 600px 程度に抑える

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