DESIGN.md — 桜色×紺文字の音符が踊る子ども向けキャンディLP（Pastel Pink Playful Kids Candy LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: 淡いピンク一色の地・紺色の丸ゴシック・音符とキラキラ・円形の写真・吹き出しラベル・中央揃え
• 地の質感: グラデーションも質感もないフラットな塗り。白い手描き風の口モチーフをうっすら散らしている。
• 形: 円・吹き出し・ピル型ボタン・角丸の白カードが中心。直線の区切りは使わない。
• 温度感: 暖かく甘い。子どもと親が安心できる、やさしいトーン。

Colors

• 地は最初から最後まで淡いピンク一色で通す。セクションごとに色を切り替えない。
• 見出しと強調テキストは紺色に統一する。本文は落ち着いたグレー茶にする。
• マゼンタは購入ボタン・特徴ラベル・注意文だけに使う。
• パープルとコーラルは味の色分けとして商品や果物の周りだけに使う。
• 水色・ピンク・黄色は音符やキラキラの小さな装飾に限って使う。
• 情報を読ませる場所だけ白いカードや白い円を置き、地から浮かせる。

Typography

• 全体を太めの丸ゴシックでそろえ、角ばった書体は使わない。
• 本文も 700 前後の太さにし、行間 2 倍以上でゆったり見せる。
• テキストはすべて中央揃えにする。短い行で改行して文の形を整える。
• 字間は 0.08〜0.15em と広めにとる。
• 見出しは紺色、ラベルと注意文はマゼンタで色分けする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え。PC は特徴セクションのみ左テキスト＋右写真の 2 カラム。
• 本文ブロックの幅: 画面幅の約 70%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文の幅は画面の約 6〜7 割にとどめ、左右の余白を広くとる。
• 特徴は『ラベル→小見出し→本文→円形写真』を 1 セットにして縦に積む。
• セクション間は 64〜96px と大きく空ける。
• 装飾モチーフは本文の左右の余白に置き、文字と重ねない。
• 購入カードだけは画面幅の 9 割強まで広げる。

Elevation & Depth

• 基本はフラットにし、影は付けない。
• 商品パッケージの写真の下にだけ、ふんわりした落ち影を付ける。
• 白いカードは影を付けず、地との色の差だけで浮かせる。

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物と商品の写真は正円に切り抜き、白か淡色の円の上に載せる。
• セクション境界: 区切り線は使わない。単色の地と余白だけでセクションを分ける。
• 特徴ラベルは白い吹き出し型にする。
• 原材料の情報は大きな白い円の中に入れる。
• 注意事項と購入先は角丸の白カードにする。
• ボタンは完全なピル型にする。

Components

• 吹き出しロゴ見出し（hero-speech-logo）: 白い楕円の吹き出しに大きな丸文字のロゴを入れ、周りにキラキラを付ける。
• キラキラ付きセクション見出し（section-title-sparkle）: 紺色の太字の両側に、小さな四芒星のキラキラを白と水色で付ける。
• 特徴番号の吹き出しラベル（feature-label）: 白い吹き出しに『特徴＋番号』をマゼンタ文字で入れ、左上にキラキラを添える。
• 円形写真（circle-photo）: 直径 170px 前後の正円に写真を収め、横に果物や音符の装飾を添える。
• 原材料の円パネル（ingredient-circle）: 商品画像の下に大きな白い円を重ね、味名・原材料・アレルギーの注記を入れる。
• 注意事項カード（caution-card）: 角丸の白カードに、ピンクの音符を箇条書きの記号にして注意文を並べる。右下に商品をはみ出させて置く。
• 購入先カード（shop-card）: 白い角丸カードの中央に販売先のロゴ、その下にピル型ボタンを置く。
• 購入ボタン（button-primary）: マゼンタのピル型ボタンに白い太字を入れる。幅は約 160px。

Do's and Don'ts

Do - 地は淡いピンク一色で通し、白い面で情報を区切る。 - 音符・キラキラ・口のモチーフを余白にリズムよく散らす。 - 写真は必ず正円に切り抜く。 - テキストは中央揃えにし、短い行で改行する。 - 見出しは紺、行動を促す要素はマゼンタと、役割で色を固定する。

Don't - 濃い色や黒の地のセクションを入れない。 - 角ばった四角い写真や、直線の区切り線を使わない。 - 明朝体や細いゴシックを使わない。 - マゼンタを広い面積に塗らない。 - 装飾を文字の上に重ねて、読みにくくしない。 - 情報を詰め込みすぎない。余白を広く保つ。

Page Structure

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

1. ファーストビュー（商品の存在と価値をひと目で伝える）: 中央に吹き出しロゴを置き、左右に 2 色のパッケージを配置する。個包装を宙に舞わせ、音符を散らす。下にリード見出しと短い説明を続ける。
2. ブランドの想い（開発の背景と健康への姿勢を伝える）: 紺の見出しの下に、短い段落を 3 つ中央揃えで並べる。左右に白い口のモチーフを置く。
3. 特長（3 つ）（おいしさ・食感・続けやすさを訴求する）: 吹き出しラベル→紺の小見出し→本文→円形写真の順で 3 回繰り返す。
4. 原材料・アレルギー情報（保護者の安心のために成分を開示する）: 味ごとにパッケージ画像と白い円パネルを縦に並べる。注意文はマゼンタにする。
5. 注意事項（食べるときの注意を伝える）: 角丸の白カードに、音符を記号にした箇条書きを 4 つ並べる。商品を右下にはみ出させて置く。
6. 購入先（CTA）（通販サイトへ誘導する）: キラキラ見出しの下に、利用者の種類ごとに見出しと白いカードを分ける。カードの中はロゴとピル型ボタン。
7. フッター（規約・社名・コピーライトを示す）: 白地に小さな黒文字で左寄せにする。

Imagery

• 商品パッケージは正面から撮った切り抜きにし、少し傾けて柔らかい影を付ける。
• 人物は子どもや開発者が商品を持って笑う写真を、明るい白背景で撮って正円に切り抜く。
• 商品そのものは淡いクリーム色の円の上に大きく置き、果物のイラストを添える。
• 装飾は音符（ピンク・水色・黄）と四芒星のキラキラ、白い線の笑った口の手描きモチーフを使う。
• イラストは平塗りでシンプルにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもピンク一色の地と中央寄せの構成を保ち、コンテンツの幅は 1000px 前後に収める。
• PC のファーストビューは左右のパッケージを大きく離し、中央にロゴとリードを置く。
• PC の特長は左にラベル付きのテキスト、右に円形写真を縦に連ねる 2 カラムにする。
• PC の原材料は 2 味を横並びにする。
• PC の購入先カードは 2 枚を横並びにする。
• PC の本文は 1 行を長めにして改行を減らす。

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