DESIGN.md — 漆黒×ネオン炎のハロウィン限定ドリンク LP（Dark Neon Halloween Drink Campaign LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、ポップ・元気
• キーワード: 漆黒の地・ネオンの渦・炎エフェクト・溶けて垂れる文字・季節限定・発光ボタン
• 地の質感: 黒地に、光の筋・炎・粉砂糖のような粒子を重ねたフォトコラージュ風。商品写真は切り抜いて浮かせる。
• 形: 四角い枠は使わない。曲線のリボンと有機的な炎が主役で、ボタンだけピル型。
• 温度感: 暗く妖しいが、ピンクと紫の発光で熱を感じる温度感。

Colors

• 地はすべて純黒で、明るい背景面は作らない。
• 色は渦リボンと炎のグラデーションでマゼンタ→群青に流す。
• フードセクションはマゼンタ、グッズセクションはバイオレットで CTA と見出しを統一する。
• 本文はすべて白。ロゴやミルクの表現はクリーム色にする。
• ボタンは同じ色の外側グロー（発光）をまとわせる。
• 緑は欧文の筆記体ラベルだけに少し使う。
• button-primary は文字 #F0E8E2 × 背景 #CA336E のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE3067、4.56:1）を使う。

Typography

• 欧文の見出しは、文字が溶けて垂れるディスプレイ書体にし、上方向へにじむ発光をつける。
• 見出し文字は 1 文字ずつ高さや傾きを変え、揺らいだ印象にする。
• 素材名の欧文ラベルは 10〜20 度傾け、2〜3 語を階段状にずらして置く。
• 和文コピーは太めのゴシックで、1 行 10〜14 字の短い改行にする。
• 価格は欧文数字でやや大きくし、サイズ表記は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と短文を左右交互に配置する
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 120px、基本単位 8px、カード内 0px（375px 幅換算）
• カードや枠は使わず、黒地の上に切り抜き写真とテキストを直接置く。
• 商品写真は画面端から一部はみ出させ、左右交互に置く。
• 短文コピーは写真の反対側の余白に置く。
• CTA は中央寄せで幅 70% 程度にする。
• セクションの間は、渦リボンだけの大きな黒い余白でつなぐ。

Elevation & Depth

• 影の代わりに、ボタンへ同色の外側グロー（blur 16px 前後）をつける。
• 見出し文字には、上方向へ流れるにじみ状の発光をつける。
• 写真は背景と溶け合うよう、周囲を黒へフェードさせる。

Shapes

• 角丸: 小 4px ／ 中 24px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品を背景なしで切り抜き、炎や渦リボンに重ねて浮かせる
• セクション境界: 直線の区切りは置かない。渦リボンと黒い余白で自然につなぐ
• 主ボタンは塗りのピル型、サブボタンは細い枠線のピル型にする。
• 四角い写真フレームは使わない。
• 液体が垂れる形を装飾モチーフとして繰り返し使う。

Components

• フード主 CTA（button-primary）: マゼンタで塗ったピル型ボタン。白い太字を載せ、同色のグローをつける。
• グッズ用 CTA（button-secondary-violet）: バイオレットで塗ったピル型ボタン。紫のグローをつけ、商品テキストの下に置く。
• 一覧への枠線ボタン（button-ghost）: 黒地に細い枠線を引いたピル型ボタン。文字は枠と同じ色にする。
• 注記リンク（text-link-underline）: マゼンタの小さな太字に、同色の下線を引いたテキストリンク。
• 溶ける見出し（drip-heading）: 垂れる装飾書体の欧文見出し。上方向へ発光させ、肉球などの小さなアイコンを添える。
• 斜め欧文ラベル（script-label）: 素材名を傾けて、階段状に置く欧文ラベル。
• 商品情報ブロック（product-block）: 商品名・価格・2 行の説明・ボタンを縦に並べ、写真の横に置く。

Do's and Don'ts

Do - 地は純黒で通し、ネオンのマゼンタと群青の光で奥行きを出す。 - 商品写真は切り抜き、炎・粒子・垂れる液体の演出と重ねる。 - セクションごとに、見出しとボタンの色をマゼンタかバイオレットに統一する。 - コピーは短い改行の白い太字で、写真の脇に置く。 - ボタンには必ず同色のグローをつける。

Don't - 白や明るい色の背景セクションを入れない。 - 角張ったカードや罫線の表で区切らない。 - 長い段落の本文を入れない。 - ネオン以外のパステル色やアースカラーを足さない。 - ボタンに落ち影（ドロップシャドウ）を使わない。

Page Structure

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

1. ファーストビュー（限定商品の世界観と発売日を一目で伝える）: 溶けるロゴを上に置き、中央に炎をまとった商品写真を配置する。斜めの発売日と縦書き風の商品名を添え、背景に渦リボンを流す。
2. 導入コピー（商品の正体への期待をあおる）: 中央寄せの白い太字を 4 行置き、リボンの上に少し傾ける。
3. 素材紹介①（トッピングの特長を伝える）: 商品の一部を写した写真に、斜めの欧文ラベルと短いコピーを右側に添える。
4. 素材紹介②（色の正体を説明する）: 果実の切り抜き写真を散らし、欧文ラベルとコピーを左側、写真を右側に置く。
5. 素材紹介③（味わいを伝える）: 垂れるミルクの表現と商品写真を並べ、縦向きの欧文ラベルを置く。
6. 商品名・価格（商品名と価格を明示する）: 白い太字の商品名と欧文数字の価格を左寄せで置く。
7. フード紹介（関連フードを訴求する）: ピンクの溶ける見出しの下に、粉砂糖が舞う写真を置く。商品名・価格・説明・ピンクの CTA・枠線ボタン・注記リンクを続ける。
8. グッズ紹介（限定グッズへ誘導する）: 紫の溶ける見出しの下に、3 商品を左右交互に配置する。各商品に紫のボタンをつける。
9. 特集への導線（グッズ一覧ページへ送る）: 紫の枠線ピルボタンを 1 つ、中央に置く。

Imagery

• 商品は黒背景で撮影し、輪郭で切り抜く。
• マゼンタと群青の炎や煙を CG で合成し、商品から立ち上らせる。
• マゼンタ・青・紫のネオンの光を束ねた渦リボンを、画面端から大きく流す。
• クリーム状の白い液体が垂れる表現を装飾に使う。
• 果実や粉砂糖の粒子を周囲に散らし、浮遊感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 900px 幅でまとめ、背景のリボンは全幅に広げる。
• PC ではフードの説明文・写真・CTA を左右 2 カラムに分ける。
• グッズは PC でも左右交互の配置を保ち、写真と文字の間隔を広げる。
• PC は見出しや写真の比率を小さめにし、黒い余白を多めに取る。

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