DESIGN.md — 黒×マゼンタの夜空系ハロウィン飲料 LP（Dark Magenta Halloween Seasonal Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ラグジュアリー・ダーク、かわいい、力強い・インパクト
• キーワード: 夜・黒猫・スポットライト・マゼンタの光・季節限定・遊び心
• 地の質感: 暗い地に紫や赤の光がにじむ。ボケた円形の光と微細なノイズ。
• 形: 円形の切り抜き、白いピル型ボタン、弧を描いて歪んだ英字ロゴ
• 温度感: 暗くて妖しいが、甘い暖色の光でかわいさを残す

Colors

• 地は黒〜暗紫の縦グラデーションで、ページ全体を夜に保つ
• 商品写真の背後には必ずマゼンタの円形スポットを置く
• 英字見出しはセクションごとにローズピンクか紫を使い分ける
• 主ボタンは白地に赤紫文字、サブボタンは透明地に白線と白文字
• 朱赤のカードは目立たせたい 1 商品だけに使う
• 文字は白が基本。注釈だけ薄グレーにする

Typography

• 英字のセクション見出しは太いセリフ体を弧状に歪ませ、少し傾ける
• リード文だけ明朝で中央揃えにし、物語っぽさを出す
• 商品名・価格・説明はゴシックで左揃え
• 素材名はコピー 2〜3 行と太字の名前 2 行のセットで組む
• 価格は商品名のすぐ下に、本文より少し大きく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストは左右を交互にずらす
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算）
• 素材紹介は円形写真とテキストを左右交互にジグザグ配置する
• 商品写真は画面端からはみ出すくらい大きく置く
• セクションの間は暗い地のまま広く空けて区切る
• 主ボタンは横幅いっぱい、または左右どちらかに寄せた短いピル型にする
• テキストリンクは中央に置き、下線をつける

Elevation & Depth

• 影は使わず、光のにじみ（グロー）で立体感を出す
• 商品写真の背面にマゼンタの円形スポットとぼかした光を重ねる
• FV のロゴやキラリとした光は発光表現で強調する

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 円形のスポット内に切り抜き。端をぼかして暗闇に溶かす
• セクション境界: 直線の境界を作らず、グラデーションでつなぐ
• ボタンはすべてピル型
• 特集カードとギフトカードは角丸 10〜12px
• 四角い写真枠は使わない

Components

• 白ピル主ボタン（button-primary）: 白地に赤紫の文字で商品詳細へ誘導する
• 白線アウトラインボタン（button-outline）: 一覧ページへ誘導する透明地のボタン。中央に置く
• 下線テキストリンク（link-underline）: アレルゲンなど補足情報への小さなリンク
• 湾曲英字見出し（heading-warped）: 太いセリフ英字を弧状に歪ませたセクションタイトル
• スポットライト円写真（spot-photo）: マゼンタの円の上に商品を切り抜いて重ねる
• 朱赤の特集カード（feature-card）: ザラついた朱赤の面に筆記体の英字と商品・価格・ボタンをまとめる
• 素材ラベル（ingredient-label）: 小さなコピーと太字の素材名を 2 段で組む
• 夜光バッジ（glow-badge）: 淡黄の 2 行英字に放射線をつけて、写真の横に添える

Do's and Don'ts

Do - 背景は常に黒〜暗紫のグラデーションにする - 商品ごとにマゼンタの円スポットを背後に置く - 肉球や爪痕などのモチーフを小さく散らす - 主ボタンは白ピル、サブはアウトラインと役割を分ける - 英字見出しは歪ませて動きを出す

Don't - 白や明るい色の背景セクションを入れない - 四角い枠線つきのカードを並べない - ボタンを角ばった形や原色の塗りにしない - 強調色を多用しない（朱赤カードは 1 つまで） - 写真に影を落とさない（光で見せる）

Page Structure

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

1. ファーストビュー（季節感と主役商品を一目で伝える）: 傾いた発光ロゴ、中央に大きな商品写真、背後にボケた円の光、紫グラデの英字商品名
2. リードコピー（商品の世界観を物語のように伝える）: 明朝の 2 行見出しと 5 行ほどの中央揃え本文。周りに肉球を散らす
3. 素材の紹介（構成要素を 4 つ順に見せる）: 円で切り抜いた拡大写真と素材ラベルを左右交互にジグザグ配置する
4. 主役商品の詳細（価格を見せて詳細ページへ誘導する）: 商品の全体写真、商品名・価格・注釈、横幅いっぱいの白ピルボタン
5. 2 つ目の商品の特集カード（関連ドリンクを目立たせる）: 朱赤のザラついたカードに筆記体＋セリフの英字、商品写真、説明、白ボタン
6. 一覧への導線（関連一覧と補足情報へ誘導する）: アウトラインボタンと下線つきテキストリンクを中央に置く
7. 季節のフード（フード商品を紹介する）: ピンクの湾曲英字見出し、円スポット写真、商品名・価格・説明、短い白ピル
8. 季節のグッズ（グッズを複数見せる）: 紫の湾曲英字見出し。円スポット写真とテキストを左右交互に置き、夜光バッジを添える
9. ギフトカード（カード商品を紹介する）: 湾曲英字見出し、中央の短い本文、角丸のカード画像、白ピルとアウトラインボタンを縦に並べる
10. デジタルカード（アプリ用カードを紹介する）: 湾曲英字見出し、イラストのカード 2 種、注釈、2 行のアウトラインボタン

Imagery

• 商品は切り抜きで正面から撮り、暗い背景に浮かせる
• 背後にマゼンタの円と、ぼけた光の玉を重ねる
• 黒猫のしっぽや顔を商品の陰からのぞかせる
• 肉球・爪痕を小さなマゼンタのシルエットで散らす
• 素材は大きく寄った円形の切り抜きで見せる
• カードのイラストはフラットで、オレンジや紫のハロウィン配色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 1000px 幅。FV はロゴを左、商品を右に横並びにする
• PC の素材紹介も左右交互のジグザグを保ち、余白を広げる
• PC の主役商品は写真を左、テキストとボタンを右に置く
• PC の特集カードはテキストを左、写真を右の横長カードにする
• PC のグッズは 3 カラムのカードで横に並べる
• PC のボタンは固定幅（約 240px）にして中央、またはテキスト列に揃える

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