DESIGN.md — 蜂蜜色×クリームの化粧品キャンペーン LP（Honey Drip Amber Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: 蜂蜜・とろみ・琥珀色・クリーム地・角丸カード・明朝見出し
• 地の質感: とろっとした蜂蜜の液だれ波形とぼけた光の粒。面はフラットで、ほのかなグラデーションだけを使う
• 形: 波形の液だれで区切り、角丸 16px のカード、ピル型のステップラベル、しずく形の番号
• 温度感: 暖色。オレンジ・黄・クリームで甘く温かい

Colors

• 地は淡い蜂蜜色、カード内はクリーム色にして二段の暖色を重ねる
• セクションの見出し帯とキャンペーン概要は蜂蜜オレンジでベタ塗りする
• 文字は黒を避けて焦げ茶にする
• 日付・条件・無効条件などの大事な語だけ朱オレンジの文字にする
• 主ボタンは濃い茶で塗り、オレンジの地から浮かせる
• 商品カードは商品色（黄・橙・水色・ピンク・グレー）のパステル枠で色分けする
• point-drop は文字 #FFFFFF × 背景 #F39D15 のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A66909、4.52:1）を使う。

Typography

• 見出しとリード文は明朝の太字で、上品な甘さを出す
• FV の大見出しには白い光彩（グロー）をつける
• 注意事項など長い文はゴシックにして読みやすくする
• 日付の数字は少し大きくして目立たせる
• 見出し帯の文字は中央揃えにし、字間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 36px、基本単位 8px、カード内 24px（375px 幅換算）
• 各情報ブロックは、オレンジの見出し帯を上に載せた白カードで統一する
• カードは左右 16px の余白で配置する
• 手順は Step ラベル、説明文、区切り線の順にくり返す
• 注意事項は ■ の行頭記号で箇条書きにする
• テキストは基本中央揃え。注釈と箇条書きは左揃えにする

Elevation & Depth

• 影は基本使わず、色の差でカードを浮かせる
• 商品カードは色枠を二重にして奥行きを出す
• FV の文字に白いぼかしの光彩をつける

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は背景ごと四角で使い、蜂蜜のしずくや光と合成する
• セクション境界: 蜂蜜が垂れるような波形の液だれ
• カードの上の角は 16px の角丸。見出し帯もそれに合わせる
• Step ラベルは黄色の塗りにオレンジの太枠をつけたピル型
• 主ボタンは角丸 6px の長方形
• ポイントの番号は蜂蜜のしずく形にする
• 商品カードは片方の角だけ大きく丸める

Components

• 見出し帯つきカード（section-card）: オレンジの帯に白い明朝タイトルを載せ、下にクリーム色の本文エリアを置く
• ダウンロードボタン（button-primary）: 濃い茶の塗りに白文字とダウンロードのアイコン
• ステップラベル（step-pill）: 黄色の塗りとオレンジの枠で作るピル型。中に Step 番号を入れる
• ポイント帯（point-drop）: 左にしずく形の番号、右にグラデの帯を置き、特長を 4 本並べる
• 商品カード（product-card）: 商品色のパステル枠に、丸いバッジ・商品写真・明朝の商品名・価格を載せる
• 住所ボックス（address-box）: 淡いピーチの面に、宛先を中央揃えの太字で書く
• 注意事項リスト（bullet-list）: 茶色の ■ を行頭に置き、重要な語は朱オレンジにする

Do's and Don'ts

Do - 地・カード・帯の 3 段階で暖色を使い分ける - どのセクションも同じ見出し帯つきカードで統一する - 大事な条件だけ朱オレンジにする - 液だれの波形を FV と概要のあいだに入れる - 見出しは明朝、注釈はゴシックにする

Don't - 青や黒をベタ面に使わない（商品色の枠は除く） - 純黒の文字を使わない - 強い影や立体のボタンにしない - 強調色を本文全体に乱用しない - カードの角を直角にしない

Page Structure

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

1. ファーストビュー（キャンペーン名と商品を一目で伝える）: 上辺に蜂蜜の液だれ、ぼけたオレンジの背景、明朝の大見出し、蜂蜜の溜まりに並ぶ商品写真
2. キャンペーン概要（内容を短く説明する）: オレンジのベタ面に白文字。欧文サブタイトルをつけ、下端は液だれの波形にする
3. 対象商品の特長（商品の魅力を伝える）: 商品写真のバナーと、しずく番号つきのポイント帯を 4 本
4. 対象商品一覧（対象の商品を示す）: 2 カラムの色分け商品カード
5. 対象期間（期間を明示する）: 朱色の小見出しと、数字を大きくした日付
6. 申込方法（手順を案内する）: Step ピル、説明文、区切り線をくり返し、ダウンロードボタンを置く
7. 返送先・返金方法（送り先と返金額を伝える）: リード文、ピーチ色の住所ボックス、金額のリスト
8. 注意事項（条件を網羅して伝える）: ■ の箇条書き。重要な語は朱オレンジ
9. お問い合わせ（窓口を案内する）: 窓口名を朱色の明朝で書き、受付時間と SNS アイコンを並べる
10. フッター（会社情報を載せる）: 白地にロゴ、リンク、コピーライト

Imagery

• 蜂蜜のとろみや液だれ、流れ広がる溜まりをモチーフにする
• 商品は蜂蜜の溜まりの上に集合させ、暖色の逆光でぼけを入れる
• 背景にはオレンジ〜クリームのグラデとぼけた光の粒
• 蜂の巣の六角形を薄い柄として帯に入れる
• 商品写真に蜂蜜ディッパーや巣を小物として添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を横長にし、左に見出し、右に商品写真を置く
• PC ではカードを中央 約 520px 幅に固定し、左右を蜂蜜色の地にする
• 商品一覧は PC で 4 カラムにする
• ポイント帯は PC で 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 行書くと起動時に読み込まれる。