DESIGN.md — 黄緑ボケ光×こげ茶文字の季節スイーツLP（Fresh Green Bokeh Seasonal Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 清潔・爽やか、ポップ・元気、かわいい
• キーワード: 黄緑・ボケ光・シズル・季節限定・はじける・こげ茶フチ文字
• 地の質感: 淡い黄緑の上に白や黄のぼかし玉と小さな星を散らし、きらめく光を表現
• 形: 雲形のもこもこ帯、ピル型ボタン、星形の装飾
• 温度感: 爽やかで少し冷たい、夏らしい明るさ

Colors

• 地は淡い黄緑のボケ光で全面を覆い、白地は使わない
• 文字は黒でなくこげ茶に統一
• 黄緑の濃い面は帯と雲形の解説ブロックだけに使う
• 黄色は主CTAとポイントラベルだけに絞る
• 強調語は白フチ付きの黄緑文字にする
• 星飾りはピンク・水色・黄を小さく散らす
• date-band は文字 #EEEEDF × 背景 #84C524 のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4F7515、4.61:1）を使う。
• cloud-block は文字 #EEEEDF × 背景 #84C524 のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4F7515、4.61:1）を使う。

Typography

• 見出しは太い丸ゴシックに白フチと薄い影を付ける
• 訴求見出しは行を分け、強調語だけ大きく色を変える
• 本文は中央揃えにし、短い行で改行する
• 価格の小数点以下・税表記は小さくする
• 縦書きの短いコピーをFVの写真上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面幅いっぱいで見せる
• テキストは中央揃えで写真の上下に置く
• 構成要素の説明は写真に引き出し線を伸ばして配置
• 雲形の黄緑帯で解説ブロックを区切る
• CTAは最下部に縦に2段積む

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• 見出し文字だけに白フチとうすい影を付ける
• CTAは影でなくこげ茶の太フチで立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品カップは切り抜きで背景に溶け込ませる。果物も切り抜いて周囲に配置
• セクション境界: もこもこの雲形の波線で切り替える
• 四角いカードは使わない
• ラベルは角丸の黄色ピル
• 星形装飾はトゲの多いスター形

Components

• 主CTAボタン（button-primary）: 黄色地にこげ茶の太フチ、左に丸矢印、右に店舗アイコン
• サブボタン（button-secondary）: 白地にこげ茶の線、左に丸矢印のピル型
• 発売日帯（date-band）: FV直下の全幅黄緑帯に白い太字で日付
• 雲形解説ブロック（cloud-block）: 上下が雲形の黄緑面に白文字の解説。見出しの両側に放射線を付ける
• ポイントラベル（point-label）: 斜めに傾けた黄色いギザ形ラベルに手書き風の文字
• 引き出し線ラベル（callout-line）: 写真の各部から細い白線を伸ばし、白フチ付きのこげ茶文字を置く
• 価格表示（price-tag）: 税抜・税込を二段で表示し、数字は特大にする。白フチ付き
• 注釈リスト（note-list）: ※始まりの小さな文字を左揃えで並べる

Do's and Don'ts

Do - 背景は黄緑のボケ光とキラキラした星で埋める - 商品写真は切り抜いて大きく、中央に見せる - 見出しはこげ茶＋白フチで読みやすくする - 果物の写真を周りに添えて味を伝える - CTAは黄色1色で目立たせる

Don't - 真っ白な背景や無地のセクションを作らない - 黒文字や細い明朝体を使わない - 角ばった四角いカードを並べない - 黄色をCTA以外に広く使わない - 寒色や暗い配色を主役にしない

Page Structure

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

1. ファーストビュー（商品と価格をひと目で伝える）: 緑ボケ背景に切り抜きカップ、果物、商品名の大見出し、縦書きコピー、右下に価格
2. 発売日帯（発売日を知らせる）: 全幅の黄緑帯に白い太字を1行
3. コンセプト訴求（味と食感の魅力を伝える）: 黄色ラベル＋3行の白フチ見出し＋中央揃えの短い本文、周りに星
4. 商品解説（商品カテゴリを説明する）: 雲形の黄緑帯に放射線付きの見出しと白文字本文
5. 構成要素の紹介（中身のこだわりを見せる）: 大きなカップ断面写真に引き出し線で4つの要素名、1つに黄色の詳細リンク
6. 来店の呼びかけ（店舗での購入を促す）: 2行の白フチ見出しの下に、果物で囲んだ商品写真
7. CTA（店舗検索と情報確認へ誘導）: 黄色の大ボタンと白のピル型サブボタンを縦に並べる
8. 注釈（価格・販売条件を補足する）: ※付きの小さな文字を左揃えで並べる

Imagery

• 商品は白背景で撮って切り抜き、明るく高彩度に補正する
• 主原料の果物はつややかな房や粒で、カップの左右に配置
• 背景は黄緑のグラデに白・黄のぼかし円を重ねたボケ表現
• ピンク・水色・黄のトゲ星を小さく散らす
• ソフトクリームなど白い部分は明るく、シズル感を残す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央1カラムで、背景のボケを全幅に敷く
• PCのFVは横長で、商品名を写真の下部に横に並べる
• PCの訴求見出しは2〜3行にまとめ、本文は1行を長くする
• PCの構成要素は写真の左右に引き出し線を振り分け、果物を両側に置く
• 雲形帯はPCでは左右に余白のある島形にする
• CTAは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 行書くと起動時に読み込まれる。