DESIGN.md — パステル原色×ストライプのパーティースイーツ LP（Candy Color Party Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: パーティー・カラフル・ステッカー・ストライプ地・チョコ色見出し
• 地の質感: 地色に細い斜めストライプや白い小ドットを重ねる。印刷物やお菓子のパッケージのような質感にする。
• 形: 角丸の大きい白カードと茶色の見出し帯を使う。セクション境界は波形の白点線スカラップ。円形の写真フレームと黄色いリボン型の帯を置く。
• 温度感: 暖かく明るい。子ども向けの祝祭感がある。

Colors

• セクションごとに地色を黄→黄緑→オレンジ→ピンク→水色の順に切り替える。
• 地色には同系色の細い斜めストライプか白い小ドットを必ず重ねる。
• カード見出しの帯は茶色の面に白い太字で統一する。
• 黄色のリボン帯は補足の見出し（選択数など）に使う。
• ボタンはピンクか茶色のピル型にする。黄色の地の上では黄ボタンを使わない。
• 色地の上の英字見出しは白、白カードの中の文字は茶色にする。
• page は文字 #733D2C × 背景 #5AC5E2 のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#65C9E4、4.53:1）を使う。
• point-badge は文字 #FEFDFD × 背景 #3DBBD3 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#217F91、4.59:1）を使う。
• button-pill-pink は文字 #FFFFFF × 背景 #E55483 のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DF2A65、4.51:1）を使う。

Typography

• 英字の大見出しの下に、小さな和文の訳を添える二段構成にする。
• 和文の見出しは太い丸ゴシックか、ポップ体寄りの書体にする。
• 本文は字間を広めにとり、読みやすさを優先する。
• 手順の説明文は茶色の下線つきの太字にして、行ごとに罫線を引く。
• 注意書きは※付きの小さな文字で、地色に合わせて白か茶色にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品の比較は 2 カラム、付属品は 1:2 の横並び。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは画面幅の約 88% で中央に置く。
• 特長は円形の写真とテキストを左右交互に並べる。
• セット内容は茶色の帯つきカードを縦に連ね、下向きの三角でつなぐ。
• 2 択の比較は左右に並べ、中央に or バッジを置く。
• 手順は番号つきの枠イラストの下に説明文を置く。

Elevation & Depth

• 影はほぼ使わず、太い輪郭線と色面の差で階層を作る。
• カードは茶色の太枠か白い面だけで表現する。
• ステッカーのイラストには白いフチと黒い輪郭線を付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品の写真は円形に切り抜き、ターコイズの太い枠に星柄を付ける。アイテムの写真は角丸の四角。
• セクション境界: 白い波形のスカラップに点線ステッチを重ねる。
• カード上部の茶色帯は角丸を大きくする。
• リボン帯は両端を切り欠いた黄色の帯にする。
• 手順の番号は枠の左上に円形で重ねる。
• 選択肢のラベルは角丸の四角のピンク面にする。

Components

• 英字セクション見出し（section-title-en）: 白い英字の大見出しに小さな和訳を添え、左右にステッカーのイラストを置く。
• 茶色帯カード（card-brown-header）: 茶色の太枠で、上部が見出し帯、中は白い面。下に三角の矢印を付ける。
• 黄色リボン帯（ribbon-label）: 茶色帯にまたがる黄色のリボンで、選択数などを示す。
• POINT 番号（point-badge）: ターコイズの旗型の枠に、白い英字と数字を入れる。
• 詳細ボタン（button-pill-pink）: ピンクのピル型ボタン。右端に > を付ける。
• 予約・情報ボタン（button-pill-brown）: 茶色のピル型ボタン。左に白丸のアイコンを入れる場合がある。
• 手順枠（step-frame）: ターコイズの太枠の白い角丸箱で、左上に番号の円を重ねる。
• or バッジ（or-badge）: 茶色かピンクの小円に or と入れ、選択肢の間に置く。
• 黄色タグ（tag-yellow）: アレルギー項目などを表示する、角の小さい黄色の矩形。2 列で並べる。

Do's and Don'ts

Do - セクションごとに地色を変え、ストライプかドットの柄を重ねる。 - イラストは太い輪郭線のステッカー調にして、見出しの横に散らす。 - 見出しは茶色帯か英字＋和訳の型で統一する。 - セクション境界には白い点線のスカラップを入れる。 - 商品の写真は円形のフレームで見せる。

Don't - 黒や灰色の無彩色の地を使わない。 - 細い明朝体や硬い書体を使わない。 - 鋭い角の直線的なカードにしない。 - 強いドロップシャドウやグラデーションのボタンにしない。 - 1 セクションに地色を 3 色以上混ぜない。

Page Structure

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

1. ファーストビュー（商品と楽しさを一目で伝える）: 水色のボケ背景に、ロゴと主役の商品写真を置く。縦書きの吹き出しと、バリエーション違いの写真、価格を添える。
2. 特長（ポイント）（選び方の魅力を 3 点で示す）: 黄色ストライプの地に、円形の写真と POINT 旗＋短文を左右交互に並べる。
3. セット内容（選べる組み合わせを示す）: 黄緑ドットの地に茶色帯カードを連ねる。2 択の比較と、イラストの一覧を入れる。
4. 注意書き（保管上の注意を伝える）: 白い小さな文字の※リストを置く。
5. アレンジ例（楽しみ方を広げる）: オレンジストライプの地に、リボン見出しとイラストのスライダー、丸いサムネイルを置く。
6. 使い方の手順（手順をわかりやすく示す）: ピンクドットの地に、番号つきの枠イラストと下線つきの説明文を 4 ステップ並べる。
7. アレルギー情報（成分情報を示す）: 水色ストライプの地に、小見出しと黄色タグの 2 列表を点線で区切って並べる。
8. CTA（予約導線）（ネットまたは店舗の予約へ誘導する）: 罫線つきの見出しの下に、アイコンつきの茶色ピルボタンを 2 つ並べる。

Imagery

• 商品は真上やや斜めから明るく撮り、背景にパーティー小物のボケを入れる。
• イラストは黒い太線に原色の塗り、白フチのステッカー調にする。
• 動物・お菓子・とんがり帽子・旗・星を装飾に使う。
• 手順は線画のケーキに黄色い皿、オレンジの集中線で描く。
• 顔つきキャラクターで親しみを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。
• PC では中央に 960px 程度の幅で配置し、地色の帯は全幅に伸ばす。
• 特長は写真と文を左右 2 カラムに並べる。
• セット内容のカードは 2〜3 カラムのグリッドにする。
• 手順は 2×2 のグリッドにする。
• ステッカーのイラストは左右の余白に多めに散らす。

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