DESIGN.md — 苺赤×桜色グラデの限定スイーツ LP（Strawberry Red Chocolate Collaboration Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい、ポップ・元気
• キーワード: 苺赤グラデーション・綿雲・きらめき装飾・金リボン見出し・切り抜き商品写真・限定コラボ
• 地の質感: なめらかなグラデーションと柔らかな光のぼかし。綿雲とハートは半透明。
• 形: 角丸カード、ピル型ボタン、隅を内側にえぐった額縁型の枠、帯状のリボン
• 温度感: 暖色。赤〜ピンクのみでまとめた甘く温かい印象

Colors

• 地は上から赤→サーモン→ピーチへ縦グラデーションで変化させる
• 導入部は淡ピンク地、商品ゾーンは赤グラデ地に淡ピンクのカードを載せる
• 文字は赤（本文・商品名）と焦げ茶（ボタン）の 2 色だけ。黒は使わない
• 金は見出しリボンときらめき装飾だけに使う
• 白はボタンと注意書きボックスに限定する
• 限定情報は濃赤の帯に白文字で目立たせる
• ribbon-heading は文字 #E83B38 × 背景 #FEECBB のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D41C19、4.51:1）を使う。
• product-frame は文字 #E83B38 × 背景 #FFF1F0 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D41C19、4.54:1）を使う。
• limited-band は文字 #FEFCFB × 背景 #EA3335 のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#E71A1C、4.5:1）を使う。

Typography

• 見出しは明朝、本文とボタンは丸ゴシックにする
• 本文は中央揃えで短い行を重ね、行間は 2.0 と広く取る
• 字間は 0.08〜0.12em と広めにする
• 価格は『区分【税込】:¥数字』の形で 2 行に揃える
• 注意書きは※付きの小さい文字にし、白ボックスか赤帯の中に入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは画面幅の約 88% で中央に置く
• 商品ブロックは写真→商品名→点線→価格→点線→説明→ボタンの順にする
• 商品の間は 48px ほど空ける
• 見出しリボンはカード上辺に半分重ねる
• ナビの開閉ボタンは縦に 3 つ並べ、間を 12px にする

Elevation & Depth

• カードは影をほぼ付けず、淡い光彩で浮かせる
• 限定カードには柔らかなドロップシャドウを付ける
• ボタンは白地に極薄の影か淡い線を付ける

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き、人物とキービジュアルは角丸 16px の矩形
• セクション境界: 直線で色を切り替え、境目に綿雲やハートを半分はみ出させる
• 商品カードは隅を内側にえぐった額縁型にし、二重線で囲む
• 見出しリボンは両端を切り欠いた帯形にする
• 価格は点線の水平罫で上下を挟む

Components

• 詳細ピルボタン（button-detail）: 白地のピル型。中央に焦げ茶の文字、右端に › を置く
• 開閉ナビボタン（accordion-nav）: 赤地の上に置く白いピル。カテゴリ名と右端の下向き矢印
• 金リボン見出し（ribbon-heading）: クリーム〜金グラデの帯に赤い明朝の文字。カード上辺に重ねる
• 額縁型商品カード（product-frame）: 淡ピンク地で隅をえぐった枠。中に商品を縦に並べる
• 価格ブロック（price-block）: 点線で挟み、区分ごとの税込価格を 2 行で中央揃えにする
• 限定告知帯（limited-band）: 濃赤の帯に白文字で商品名と期間を入れ、白い四角のラベルを添える
• 注意書きボックス（notice-box）: 白地に淡い線で囲み、※の注記を左揃えで並べる
• スラッシュ小見出し（slash-heading）: 両側を斜線で挟んだ赤い短い見出し
• アプリ誘導バナー（app-banner）: 白地の角丸枠。左にアイコン、右に太字のサービス名

Do's and Don'ts

Do - 赤〜ピンクのグラデ地に綿雲・きらめき・ハートを散らす - 商品は白背景を抜いた切り抜きで大きく中央に置く - 見出しは金リボン＋明朝で特別感を出す - 本文は赤の丸ゴシックで、中央揃えのゆったりした行間にする - 価格は点線で挟んで整える

Don't - 寒色や黒の面を使わない - 角張ったボタンや塗りつぶしの強いボタンにしない - 本文を黒文字や詰めた行間にしない - 商品写真を四角い背景付きのまま並べない - 金を本文や面に広く使わない

Page Structure

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

1. ファーストビュー（コラボの世界観と限定感を一目で伝える）: 赤グラデの空に浮かぶ綿雲に商品を載せ、右上に明朝のキャッチ、下部に両社ロゴを × でつなぐ
2. 注意書き（販売条件を先に示す）: 淡ピンク地に白い角丸ボックスを置き、※の注記を並べる
3. ネット注文誘導（予約注文の導線をつくる）: スラッシュ小見出しの下に白いアプリバナーを置く
4. コンセプト文（商品の背景と魅力を語る）: 雲ときらめきの区切り飾りの下に赤文字を中央揃えで置き、その下に角丸の人物写真を入れる
5. カテゴリナビ（商品群へ移動させる）: 赤地に白ピルの開閉ボタンを縦に 3 つ並べる
6. 動画（CM で世界観を補強する）: 金リボン見出し付きの淡ピンクカードに動画を埋め込む
7. 商品一覧（各商品の価格と特長を伝える）: ロゴの下に額縁型カードを置き、切り抜き写真・商品名・価格・説明・詳細ボタンを繰り返す
8. 限定商品（ネット注文限定品を訴求する）: 赤地に戻してリボン見出しを付け、キービジュアル＋濃赤の告知帯＋商品詳細＋注文ボタンを置く
9. セット商品（数量限定セットで単価を上げる）: グラデのバナーに価格の丸バッジと吹き出し状の内訳を入れ、白文字の注記を続ける

Imagery

• 商品は真上やや斜めから撮り、背景を抜いた切り抜きにして柔らかい影を付ける
• キービジュアルは赤〜オレンジのグラデ空に、ピンクの綿雲を立体的に浮かべる
• 小さな人形のイラストやリボンを雲に添えて遊び心を出す
• 金・白の四芒星のきらめきと、吊り下げた点の飾りを散らす
• 半透明のハートや雲を画面端に半分はみ出させる
• 人物写真は赤い暖色背景で、商品を手に持った笑顔にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約 900px で中央に置き、両側にグラデ地を見せる
• PC のコンセプト文は左にテキスト、右に人物写真の 2 カラムにする
• PC のナビボタンは横に 3 つ並べる
• PC の商品カードは上段 2 列、下段 3 列のグリッドにする
• PC の限定告知とセットのバナーは横長にし、情報を 1 行にまとめる

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