DESIGN.md — スプレー飛沫のマルチカラー練り香水 LP（Pop Spray-Paint Multicolor Fragrance LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: スプレー飛沫・ビビッド多色・手書き文字・ポラロイド・香りごとの色分け・Z世代
• 地の質感: 白地にエアブラシ状のドット飛沫とパステルのグラデーションぼかし。写真はフィルム風の高彩度。
• 形: 丸缶モチーフの円、傾けた写真フレーム、斜めの色帯、アーチ型の説明カード。
• 温度感: 暖色寄りの賑やかな多色。色ごとにセクションの温度を切り替える。

Colors

• 地は白を基本に、スプレー飛沫で多色を散らす。
• 商品バリエーションごとに固有色を決め、缶・セクション地・見出しを揃える。
• 香り紹介は 1 香り 1 色の全幅カラーブロックで縦に積む。
• 見出しのキーワードは黄色マーカーで強調。
• 説明カードは生成り白で色地から浮かせる。
• CTA は淡ラベンダー面に紫文字で他の色と差別化。

Typography

• 大見出しは手書き風、情報見出しは極太ゴシックと使い分ける。
• 香り名は欧文の太字大文字で、香り色で塗る。
• 本文も太めのゴシックで色地上の可読性を確保。
• キャッチは「＼ ／」で挟んで話し言葉にする。
• 手書き文字は写真の上に斜めに重ねてよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。香り紹介は左に情報、右にカードの 2 分割
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算）
• 写真はコラージュ状に重ね、傾けて配置。
• 香り紹介は全幅カラーブロックを隙間なく積む。
• 使い方は画像と文を左右交互に並べる。
• 香りマップは十字軸の 4 象限で配置。

Elevation & Depth

• 影はほぼ使わず、色面の重なりで奥行きを出す。
• 商品缶にはわずかなドロップシャドウ。
• 写真フレームはずらし色ベタで疑似影。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 90px。ボタンは角丸の長方形。
• 写真の切り抜き: 円形切り抜き、白縁ポラロイド風、傾けた矩形フレーム
• セクション境界: 斜めの色帯と、色ブロックの直線切り替え
• 説明カードは上辺が半円のアーチ型。
• バッジはピル型。
• 商品は丸缶の円形を繰り返す。
• CTA は角張った矩形にドットの網掛け。

Components

• 購入ボタン（button-primary）: 淡ラベンダーの全幅矩形に紫の太字、下線付き。右端にドット網掛け。
• キャッチバッジ（badge-pill）: ＼ ／で挟んだ一言をピル型の色面に白抜きで入れる。
• アーチ型説明カード（arch-card）: 上辺が半円の生成りカード。上部に色付き太字の要約、下に本文。
• 香り紹介ブロック（flavor-block）: 香り色の全幅地に、香り名・調香・シーン・星評価・丸缶写真を配置。
• マーカー見出し（marker-heading）: 太字ゴシック見出しの語句を黄色ベタで塗り、左右に斜線を添える。
• ポラロイド写真（polaroid-photo）: 色フレームの写真を傾けて重ね、手書きキャプションを添える。
• 手描き吹き出し（speech-bubble）: 細い黒線の楕円吹き出しに一言を入れる。
• 香りマップ（scent-map）: 破線の十字軸と 4 方向ラベルで商品を配置するチャート。

Do's and Don'ts

Do - バリエーションごとに固有色を割り当て、徹底して揃える。 - スプレー飛沫やぼかしを背景に散らして賑やかにする。 - 手書き文字と極太ゴシックを混ぜる。 - 写真は円形・傾き・重なりでコラージュ感を出す。 - 星評価やシーンで比較しやすくする。

Don't - くすみ色や落ち着いたモノトーンだけで組まない。 - 整然としたグリッドだけで写真を並べない。 - 細い明朝体を使わない。 - 色地の上に細字の本文を置かない。 - CTA を香り色と同じ色にしない。

Page Structure

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

1. ファーストビュー（多色展開と話題性を一目で伝える）: 飛沫背景に丸缶を散らし、縦書き見出しを黄色帯で添える。
2. 使用者コラージュ（トレンド感と共感を作る）: 手書きコピーとポラロイド・円形写真を重ねる。
3. メディア掲載（信頼性の提示）: 虹色ぼかし帯に手書き見出し、画面キャプチャをずらして配置。
4. 使い方（多用途の提示）: マーカー見出しの下にイラストと文を左右交互に並べる。
5. 商品一覧と価格（全色の提示と購入導線）: パッケージを3+2で並べ、価格と購入ボタン。
6. 販売店告知（店頭購入の案内）: ピンクとミントの斜め帯に太字テキスト、店舗リストバナー。
7. 香りマップ（選び方の提示）: 十字軸の4象限に商品と系統ラベル。
8. 香り別紹介（各商品の詳細）: 香り色の全幅ブロックを縦に積み、バッジ・星評価・アーチカード。
9. フッター（会社情報）: 赤系の細帯に白文字リンク。

Imagery

• エアブラシで吹いたような多色ドット飛沫を背景に使う。
• モデル写真は高彩度でフィルム風、手元に商品を持たせる。
• 使い方はやわらかい線と淡い肌色のイラスト。
• 商品は真上からの丸缶の切り抜き。
• 虹色のパステルぼかしで見出し帯を作る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP の 1 カラムを中央に 480px 程度で固定表示する想定。
• 左右余白には飛沫背景を広げる。
• PC で広げる場合、香り紹介は情報とカードを横並びで広く取る。
• 商品一覧は 5 列並びにしてよい。

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