DESIGN.md — 黄色ストライプ×チョコ茶のポップなスイーツ LP（Banana Stripe Pop Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: 黄色ストライプ・チョコのしずく・縁取り文字・手描きバナナ・吹き出し・商品切り抜き
• 地の質感: 縦ストライプと水玉の柄を地に敷く。チョコが垂れるような波形の帯を入れ、手描きの太い茶線イラストを重ねる。
• 形: 角丸の茶色い枠ボックス、しっぽ付きの吹き出し、波形の境界、ピル型のボタン。
• 温度感: 暖かく甘い。黄色とチョコ茶色の暖色だけでまとめる。

Colors

• 地は濃い黄色と淡いクリームの縦ストライプを基本にする。
• コピーのセクションは淡い黄色の地に白の水玉を敷き、ストライプと交互にする。
• チョコ茶色は帯・枠線・文字・ボタンに使う。強調色として兼ねる。
• 見出しは黄色かオレンジの文字に、茶色の太い縁取りと白い外縁をつける。
• 本文ボックスは白い面に茶色の枠をつけ、黒は使わない。
• ピンクと黄緑は食感を伝える小さい吹き出しにだけ使う。

Typography

• 見出しは茶色の太い縁取りと白い外縁をつけた、ステッカー風の文字にする。
• 本文は手書き風の丸い書体で、行間を広く取って中央か左揃えにする。
• 価格の数字は大きく、単位や「税込」は小さく添える。
• 見出しの一部を吹き出しの中に入れ、リズムをつける。
• 注釈は小さく、茶色かグレーで最後にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 2 個並べ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真とイラストをはみ出させ、要素どうしを重ねて置く。
• 説明は吹き出しに入れ、写真の左右に交互に置く。
• 商品名の下に茶色の横線を引き、価格は右揃えにする。
• ボタンは中央に置き、主ボタンを大きく、サブボタンを小さくして縦に並べる。
• セクションの境界は波形にするか、チョコが垂れる形の帯にする。

Elevation & Depth

• 影ではなく、茶色の枠をずらして重ねたオフセットで立体感を出す。
• 切り抜き写真には白いフチを付けてステッカー風にする。
• ボタンには茶色の二重枠をつける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は白フチ付きで切り抜く。関連商品は四角い写真を全幅で並べる
• セクション境界: 波形の境界と、チョコが垂れる形の帯
• 本文ボックスは角丸の白い面に茶色の枠を付ける。
• 吹き出しには三角のしっぽを付ける。
• 見出し帯は角を少しだけ丸めた長方形にして、二重線で縁取る。

Components

• 商品名プレート（title-plate）: 茶色の面に二重線の枠を付け、クリーム色の太字で商品名を入れる。
• チョコが垂れる帯（drip-band）: 茶色の帯の下端からチョコが垂れる形にし、中に発売日やセクション名を入れる。
• 説明の吹き出し（speech-bubble）: 白い吹き出しに茶色の枠。上辺に縁取り文字の小見出しを乗せる。
• オフセット枠の本文ボックス（offset-box）: 白い角丸の箱に茶色の枠と、ずらした茶色の影を付ける。
• 食感の吹き出しタグ（texture-tag）: ピンクか黄緑の小さい円形吹き出しに、擬音と素材名を入れる。
• 価格表示（price-block）: 茶色の太い数字で税抜と税込の価格を並べ、白いフチを付ける。
• 店舗検索ボタン（button-primary）: 茶色の面に二重枠。左に丸い矢印アイコン、右に店舗アイコンを入れる。
• 情報リンクのボタン（button-secondary）: 白いピル型に茶色の枠。左に茶色の丸い矢印を入れる。
• 商品一覧の項目（product-list-item）: 白フチ付きの切り抜き写真、商品名、茶色の線、右揃えの価格を縦に並べる。

Do's and Don'ts

Do - 黄色のストライプと水玉は、セクションごとに切り替える。 - 見出しは必ず、茶色の縁取りと白い外縁をつけたステッカー風にする。 - 手描き風の輪切りバナナを余白に散らす。 - 説明は吹き出しに入れて、写真の周りに置く。 - 価格は大きい数字にして、税込価格も必ず併記する。

Don't - 寒色や黒の面を主役にしない。 - 細い明朝体や、縁取りのない平たい見出しにしない。 - 写真を四角い枠に閉じ込めて、整然と並べすぎない。 - 柄のない無地の白い背景にしない。 - 茶色以外の色をボタンに使わない。

Page Structure

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

1. ファーストビュー（新商品と価格をひと目で伝える）: ストライプの地に商品名プレートと大きな商品写真を置く。周りに食感タグ、オプションのバッジ、価格を配置する。
2. 発売日の帯（発売日を告知する）: チョコ茶色の帯にクリーム色の文字を入れ、下端をしずく形にする。
3. コンセプトコピー（情緒的な価値を伝える）: 水玉の地に縁取りの大見出しを置き、吹き出しも組み合わせる。下にオフセット枠の短い説明文を入れ、バナナのイラストを添える。
4. おいしさのポイント（素材とトッピングの特長を伝える）: 大きな商品写真の周りに、小見出し付きの吹き出しを 2 つ交互に置く。
5. 取り組みの紹介（素材の背景にある社会性を伝える）: 疑問符で挟んだ見出しを付け、オフセット枠の白いボックスに入れる。
6. 派生商品の告知（シリーズの別商品を紹介する）: 水玉の地に、特大の縁取りコピーと、2 本並べた商品写真を置く。
7. ラインアップ（商品ごとの価格を一覧にする）: ストライプの地に、切り抜き写真、商品名、線、価格を縦に並べる。
8. CTA（店舗検索と情報確認へ誘導する）: 茶色の主ボタンと、白いピル型のサブボタンを中央に縦に並べる。
9. 注釈（価格や販売条件の補足を書く）: 小さい文字の注釈を箇条書きにする。
10. 関連商品（他のおすすめ商品へ回遊させる）: しずく形の帯に見出しを入れ、その下に全幅の写真バナーを縦に並べる。

Imagery

• 商品は明るい光で撮り、背景を抜いて白いフチを付ける。
• 素材の写真は商品の横に添えて、シズル感を出す。
• イラストは太い茶色の線で描き、黄色でベタ塗りする。輪切りや房のモチーフを使う。
• 関連商品のバナーは、素材と一緒に撮った写真に縁取り文字の商品名を重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せの幅約 960px にし、ストライプの地は全幅に敷く。
• PC のファーストビューは横長にして、商品名プレートを写真の下に置く。
• PC のポイントは、吹き出しを左、写真を右の 2 カラムにする。
• PC の商品一覧は 2 カラムにする。関連商品は 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 行書くと起動時に読み込まれる。