DESIGN.md — ローズピンク×クリーム色の季節スイーツLP（Warm Rose Bokeh Seasonal Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、やさしい・柔らかい、親しみ・手作り感
• キーワード: ローズピンク・玉ボケ・クリーム色グラデ・円形の素材写真・こげ茶文字・季節限定
• 地の質感: ピンク地に白や黄の玉ボケを散らした、暖かい光の質感
• 形: 円形の写真フレーム、縁がギザギザの紙風パネル、ピル型ボタン
• 温度感: 暖色。秋らしい甘く温かい雰囲気

Colors

• ページ地はローズピンクで統一し、白と黄色の玉ボケを重ねる
• 中央の紹介パネルは、上がクリーム色、下が淡いオレンジの縦グラデーションにする
• 文字は黒を避けてこげ茶にする。ピンク地の上だけ白文字にする
• 黄色は発売日帯とCTAだけに使い、目線を集める
• 末尾の関連商品バナーは、商品ごとに背景色を変えた写真帯にする

Typography

• 見出しも本文も丸ゴシックで柔らかくそろえる
• コンセプト文は短い句で改行し、中央揃えでゆったり見せる
• 価格は数字を大きく、単位や税区分を小さくして差をつける
• 関連商品名は白文字に濃い色のフチを付け、写真の上で読めるようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃え
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 50px、基本単位 8px、カード内 24px（375px 幅換算）
• 紹介パネルは左右に約4%の余白を空けて置く
• 素材写真の円形フレームは2つを縦に並べ、間を×印でつなぐ
• CTAはメイン商品写真の下部に重ねる
• 関連商品は全幅のバナーを縦に積む

Elevation & Depth

• 影はほぼ使わず、写真と玉ボケで奥行きを出す
• CTAボタンにはこげ茶の細い枠線を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 主役商品は切り抜き写真。素材は大きな円形に収める
• セクション境界: パネルの縁を細かいギザギザにする。他は直線で切り替える
• 円形フレームは画面幅の約85%の大きさにする
• 唐草飾りはパネル文の上下に左右対称で置く

Components

• 店舗検索ボタン（button-primary）: 黄色地にこげ茶の枠線。左に丸い矢印アイコン、右に店舗アイコンを置く
• 情報リンクボタン（button-secondary）: 白地のピル型。左に黒丸の矢印アイコンを置く
• 発売日帯（release-band）: 全幅の黄色帯に、太字で日付を中央に置く
• グラデ紹介パネル（concept-panel）: クリームからオレンジへのグラデーション地。縁はギザギザで、玉ボケを散らす
• 唐草飾り罫（ornament-divider）: こげ茶の渦巻き模様の横罫。文の上下に置く
• 素材の円形カード（ingredient-circle）: 淡いクリーム色の円。上に説明文、下に素材写真をはみ出し気味に置く
• 価格表示（price-tag）: 白フチ付きの大きな数字。税込価格は丸括弧で囲む
• 関連商品バナー（related-banner）: 商品ごとに背景色を変えた全幅写真に、フチ付きの商品名を重ねる

Do's and Don'ts

Do - 地はローズピンクにし、玉ボケで温かみを出す - 素材は円形フレームで見せ、×印で組み合わせを表す - 文字はこげ茶の丸ゴシックで統一する - CTAは黄色にして、ピンク地の上で目立たせる

Don't - 純黒や寒色を使わない - 角張った硬いゴシックで見出しを組まない - 黄色を装飾に乱用しない - パネル内の文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（商品名・ビジュアル・価格を一目で伝える）: 玉ボケのピンク地に切り抜き商品写真を置く。上にフチ付きの商品名、右に縦書きのキャッチと価格を配置する
2. 発売日（いつ発売かを伝える）: 全幅の黄色帯に太字の日付を置く
3. コンセプト（商品の成り立ちを伝える）: グラデーションのパネルに中央揃えの短文を置き、唐草飾りで上下を挟む
4. 素材紹介（2つの素材のこだわりを伝える）: 円形カード2枚を×印でつないで縦に並べる
5. 来店訴求とCTA（購入行動へ誘導する）: 弧状の手書き風白文字、大きな商品写真、黄色ボタン、白いサブボタンの順に置く
6. 注記（税や取扱い条件を示す）: 濃いローズ地に白い小さな文字で並べる
7. 関連商品（他商品へ回遊させる）: 黄色の見出し帯の下に全幅バナーを3本積む

Imagery

• スイーツは白背景で撮って切り抜き、断面や層が見える角度で見せる
• 素材は割った断面をクローズアップし、蜜の照りを強調する
• 背景には白・黄・ピンクの玉ボケを散らす
• 関連商品は、布のドレープやカーテンなど劇的な背景の上で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約1000px幅で置き、背景のピンクを全幅に広げる
• PC の FV は商品写真の両脇に素材写真を置き、商品名を左下に配置する
• 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 行書くと起動時に読み込まれる。