DESIGN.md — 赤×金のきらめく季節限定スイーツ LP（Sparkling Red Festive Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、かわいい
• キーワード: 真紅・きらめき・光の玉・金縁文字・切り抜き写真・期間限定
• 地の質感: 赤の放射グラデーションにボケた光の玉と十字の星の光を重ね、ツヤと輝きを出す
• 形: 角丸を抑えたピル型・角丸ボタン、星飾り付きの細い罫線、切り抜き写真の自由配置
• 温度感: 暖色一色の高揚した温度感

Colors

• 地は真紅一色で、中央を明るく周囲を濃くした放射グラデにする
• 白は文字・罫線・ボタン地に限定し、赤地で最大のコントラストを作る
• 金は見出しの縁取りと小見出し・発売日帯のみに使い高級感を添える
• 発売日帯だけ生成りゴールド地に濃赤文字で反転させて目立たせる
• 寒色は使わない。写真の苺・プリンの赤と黄が地の色になじむようにする
• page は文字 #AB0F1C × 背景 #E23E39 のコントラスト比が 1.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#F5BCBA、4.54:1）を使う。

Typography

• 見出しは白文字に金の縁と濃赤の影を重ね、ツヤのある立体感を出す
• 本文は白で中央揃えにし、1行15〜18字で改行する
• メインタイトルは斜めに傾けた太いポップ書体にする
• 素材名の見出しは金グラデ文字で左右どちらかに寄せる
• 価格は数字を大きく、税込の小数点以下は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材紹介は写真とテキストを左右交互に重ねる
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• ファーストビューは商品の切り抜き写真を画面幅いっぱいに大きく置く
• テキストブロックは星飾りの罫線で上下を挟む
• 素材紹介は写真を画面端から少しはみ出させ、文字と少し重ねる
• CTAボタンは最下部に縦に2つ並べ、主ボタンを大きくする
• セクション同士はカードで区切らず、連続する赤地の上に置く

Elevation & Depth

• 切り抜き写真には地の赤に溶ける柔らかい影を付ける
• 見出し文字に濃赤のドロップシャドウを付ける
• ボタンには薄い影と細い赤の二重枠を付け、少し浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品・素材は背景を抜いた切り抜き写真で自由に配置する
• セクション境界: 境界線は作らない。発売日帯だけ横長の帯で区切る
• 主ボタンは角丸小の長方形で、赤の内側枠を付ける
• サブボタンはピル型の白地
• 左端に赤丸の矢印アイコンを置く
• 罫線は中央に星を集めた細い白線にする

Components

• ロゴ風メインタイトル（hero-title）: 白い太字に赤縁と影を付けたタイトルと副題。上部中央に置く
• 縦書きキャッチ（vertical-catch）: 写真の右側に白文字の縦書き2行を置く
• 価格表示（price-badge）: 本体価格と税込価格を白い太数字で、カッコ付きで2段に並べる
• 発売日帯（date-band）: 生成りゴールドの帯に濃赤の明朝体で日付を入れ、両端に星を置く
• 星飾り罫線（sparkle-divider）: 中央に十字の星を並べた細い白線。テキストを上下から挟む
• 店舗検索ボタン（button-primary）: 白地に赤の二重枠、赤丸の矢印、濃赤の明朝体文字、右端に小さな店舗アイコン
• 情報リンクボタン（button-secondary）: 白のピル型。左に赤丸の矢印、黒〜濃赤のゴシック文字
• 注釈（footnote）: 最下部に米印付きの小さな白文字を数行置く

Do's and Don'ts

Do - 赤地全体に光の玉と十字の星を散らして祝祭感を出す - 商品写真は切り抜いて大きく、光が当たっているように見せる - 見出しは白と金で縁取りし、立体感を出す - テキストは中央揃えで短く改行する - CTA は白地にして、赤地から浮き立たせる

Don't - 寒色や灰色の面を入れない - 白い四角のカードで区切らない - 細い書体だけで見出しを組まない - 長い本文を左揃えで詰め込まない - 写真を四角いまま枠に入れない

Page Structure

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

1. ファーストビュー（商品の見た目と価格を一目で伝える）: ロゴ風タイトル、商品と素材の切り抜き写真、縦書きキャッチ、価格をキラキラの赤地に重ねる
2. 発売日告知（いつから買えるかを伝える）: 生成りゴールドの帯に濃赤の明朝体で日付を入れる
3. コンセプト紹介（商品の魅力を短く伝える）: 星罫線で挟み、金の小見出し、白金の大見出し、白い中央揃えの本文3行を置く
4. 素材紹介1（1つ目の素材のこだわりを伝える）: 左に金の見出しと本文、右に素材の切り抜き写真を置く
5. 素材紹介2（2つ目の素材のこだわりを伝える）: 左に写真、右に見出しと本文を置き、素材紹介1と左右を入れ替える
6. 締めのメッセージ（来店をうながす）: 斜めに傾けた白い2行のコピーと、商品と素材の集合写真を置く
7. CTA（店舗検索と詳細情報へ誘導する）: 白地の主ボタンとピル型のサブボタンを縦に並べる
8. 注釈（価格・税・提供時間の補足）: 小さな白文字の米印注記を置く

Imagery

• スイーツは透明カップのまま斜め上から撮り、断面の層が見えるように切り抜く
• 素材（果物・プリン）はツヤを強調して撮り、単体で切り抜く
• 背景は赤の放射グラデに、ボケた光の玉と十字の星をランダムに散らす
• 写真に白いハイライトの星を少し重ね、きらめきを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 960px 幅に同じ構成を保ち、縦の流れは変えない
• PC のファーストビューは横長にして、タイトルを上部中央、写真を横に並べる
• PC の素材紹介はテキストと写真をより広く左右に分ける
• PC の本文は1行を長めにして2行にまとめる
• PC のボタンは幅を絞って中央に置く

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