DESIGN.md — 山吹×ピーチのお菓子コラボ子ども用品LP（Sweet Pastel Donut Collab Kids Product LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: スイーツ・パステル・スカラップ・コラボ限定・子ども・お菓子屋さん
• 地の質感: 縦ストライプ・ドット・網点の淡い地柄。フラットで紙のような質感。
• 形: 大きめの角丸カード、ピル型ボタン、波形スカラップの区切り、花形バッジ
• 温度感: 暖色寄りで甘く明るい

Colors

• 地色はセクションごとに山吹→クリーム縞→黄→クリーム→ピーチ縞→ピーチ点→サーモンと暖色系だけで切り替える
• 見出し帯と購入ボタンは山吹色にそろえ、文字はこげ茶。白文字は見出し帯だけに使う
• 文字は黒を使わず、こげ茶を基本にする
• 番号バッジや参加方法ラベルにはチョコ茶を使う
• 商品カラーの見本カードには商品色に合わせたパステル地を使う
• 赤は注記と外部バナーだけに使う
• section-heading-band は文字 #FEFCF8 × 背景 #FDC144 のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9C6A02、4.58:1）を使う。

Typography

• セクション見出しは山吹色の帯に白い極太丸文字で載せ、中央に置く
• サブコピーの左右に、色の違う斜線を 3 本ずつハの字に並べる
• 見出しの数字だけを大きくし、こげ茶で強調する
• 本文は行間を広めにとり、こげ茶で書く
• 価格は太字で右に寄せ、(税込)は小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品やカラー一覧は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは「見出し帯→サブコピー→コンテンツ」の順にする
• 見出し帯は上から点線 2 本で吊り下げたように見せる
• カードは左右 12px 程度の余白でほぼ全幅に置く
• カルーセルは中央の 1 枚を大きく見せ、両隣を端からのぞかせる
• 2 列グリッドの間隔は 8px

Elevation & Depth

• カードは白地にごく薄い影（0 2px 4px rgba(0,0,0,.1)）を付ける
• ボタンの下側にやや濃い影を付けて立体感を出す
• 装飾のドーナツは影なしのフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は白抜きの切り抜き。モデル写真は角丸の矩形
• セクション境界: 波形のスカラップ（雲形）で区切り、境界に淡いベージュの線を沿わせる
• 番号バッジは花形（ギザ丸）にする
• 見出し帯は角丸なしの帯にする
• キャプション付きのカードは、下部を山吹色の帯にする

Components

• 見出し帯（section-heading-band）: 山吹色の横長の帯に白い極太文字。上に吊り下げ用の点線を付ける
• 斜線飾りサブコピー（sub-copy-slash）: 短い一文の左右にカラフルな斜線を 3 本ずつ置く
• カラー見本カード（color-swatch-card）: 商品色のパステル地に商品写真と小さなお菓子写真を載せ、下に色名を入れる
• 購入ボタン（button-primary）: 山吹色のピル型。右端に白丸付きの矢印を置く
• 特典・弾数バッジ（number-badge）: チョコ茶の花形に、白文字で番号を大きく入れる
• 商品カード（product-card）: 白い角丸枠に切り抜き商品を置き、下に商品名・価格・購入ボタンを並べる
• キャプション帯付きカード（caption-card）: 白地の上半分に画像、下を山吹色の帯にして説明文を入れる
• 参加方法ラベル（label-tag）: チョコ茶の小さな角丸矩形に白文字
• 取扱い案内ボックス（info-box）: サーモン地の角丸ボックスに、中央見出しと黒丸付きの箇条書き
• カルーセル矢印（carousel-arrow）: チョコ茶の丸に、山吹色の山形矢印

Do's and Don'ts

Do - セクションの境界は必ずスカラップ波形にする - 地色は暖色パステルだけで切り替え、ストライプやドットを薄く敷く - 空いた余白にお菓子のフラットイラストを散らす - 見出しは山吹色の帯と斜線飾りサブコピーで統一する - 文字色はこげ茶でそろえる - 購入ボタンはすべて同じ山吹色のピル型にする

Don't - 寒色や黒を地色に使わない - 角張ったカードやシャープな直線の区切りを使わない - 細い明朝体や硬い書体を使わない - 濃い影や光沢グラデーションを付けない - 見出しの色を山吹色以外に変えない

Page Structure

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

1. ファーストビュー（コラボであることと商品の可愛さを一目で伝える）: 山吹色の地にパステルの円と網点を重ねる。ロゴ並び、モデル写真、お菓子写真、手書き風の一言を置き、下にカラー展開を横一列に並べる
2. カラー一覧（色のバリエーションを見せる）: クリーム色の縦ストライプ地に、商品色のパステルカードを 2 列×3 段で並べる
3. ポイント紹介（限定のこだわりパーツを訴求する）: 黄色地に、キャプション帯付きのカルーセルを置き、下に 3 列×2 段のサムネイルを並べる
4. バナー誘導（カタログ請求とSNSキャンペーンへ誘導する）: 下部に濃い色の帯ボタンが付いた横長バナーを 2 つ置く
5. 機能紹介（既存の機能で安心感を補う）: クリーム地に白カードを縦に並べる。各カードに機能ロゴ、太字見出し、写真、本文を入れる
6. 限定特典（購入の後押しをする）: ピーチの縞地に、番号バッジとキャプション帯付きの白カードを置く
7. モデルカット（背負った時のイメージを見せる）: ピーチ地にドーナツイラストを散らし、中央を大きく見せるカルーセルにする
8. ラインナップ・購入（価格を示して購入へつなげる）: ドット地に商品カードを 2 列で並べ、価格と購入ボタンを付ける。最後に取扱い案内ボックスを置く
9. キャンペーン詳細（期間限定の企画を告知する）: サーモン地に白い大カードを置く。弾数バッジ、バナー、花アイコン付きの項目リスト、ピルボタンで構成する
10. フッター（関連アプリへの誘導と著作権表示）: 赤い角丸バナーと、中央寄せのコピーライトを置く

Imagery

• 子どもモデルは明るい白背景か淡いブルー背景で、笑顔で撮る。ベレー帽やチェックの服で可愛らしくする
• 商品は白抜きの切り抜きにし、モチーフのお菓子写真を左上に小さく重ねる
• 装飾はドーナツ・花形をオレンジ・ピンク・茶のフラットイラストで描き、画面の端に半分はみ出させて散らす
• 背景には網点の円やパステルの丸を重ねる
• 手書き風の吹き出しや擬音を写真に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅のコンテナに収め、背景の地色と柄は全幅に敷く
• カラー一覧は PC では 3 列×2 段にする
• 機能カードと特典カードは PC では 2 列に横並びにする
• ラインナップは PC では 4 列にする
• 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 行書くと起動時に読み込まれる。