---
version: alpha
name: Dark Neon Halloween Drink Campaign LP
description: 真っ黒な地に、マゼンタと群青のネオンが渦巻くリボンと炎のエフェクトを重ねた季節限定ドリンクの LP。溶けて垂れる装飾文字のロゴ、斜めに置いた欧文の筆記体ラベル、白い短文コピーで、商品の構成要素を一つずつ見せていく。フードはピンク、グッズは紫の発光ボタンで、セクションごとに色を分けている。
colors:
  background: '#000000'
  primary: '#EC248D'
  cta: '#CA336E'
  on-cta: '#F0E8E2'
  secondary: '#7B3CF0'
  accent-1: '#1F3567'
  accent-2: '#7E143D'
  accent-3: '#3FB58F'
  text: '#FCF9F2'
  marker: '#FBF1DA'
  line: '#CE337B'
  dark-section: '#2D122B'
  cta-accessible: '#BE3067'
typography:
  display:
    fontFamily: Creepster
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
  accent:
    fontFamily: Playfair Display
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.2
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Montserrat
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.7
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
rounded:
  sm: 4px
  md: 24px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 0px
  section: 120px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 56px
  button-secondary-violet:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  button-ghost:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 38px
  text-link-underline:
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    height: 20px
  drip-heading:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 120px
  script-label:
    textColor: '{colors.accent-3}'
    typography: '{typography.accent}'
    height: 80px
  product-block:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 260px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#000000` | ページ全体の地 | 55% | 画素の実測 |
| `primary` | `#EC248D` | ネオンマゼンタ（ドリンク・フードのキー色） | 5% | 画素の実測 |
| `cta` | `#CA336E` | フード側の主ボタン | 1% | 画素の主要色に補正 |
| `on-cta` | `#F0E8E2` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `secondary` | `#7B3CF0` | グッズ側のバイオレットボタン・見出し | 2% | 推定 |
| `accent-1` | `#1F3567` | 渦リボンの群青 | 4% | 画素の主要色に補正 |
| `accent-2` | `#7E143D` | 深いワイン色の炎・リボン影 | 5% | 画素の主要色に補正 |
| `accent-3` | `#3FB58F` | 欧文筆記体ラベルのエメラルド | 0% | 推定 |
| `text` | `#FCF9F2` | 本文・商品名・価格の白 | 2% | 画素の実測 |
| `marker` | `#FBF1DA` | ロゴ・ミルク表現のクリーム色 | 3% | 画素の実測 |
| `line` | `#CE337B` | フード系ゴーストボタンの枠線 | 0% | 画素の実測 |
| `dark-section` | `#2D122B` | 炎背景の濃紫 | 4% | 画素の主要色に補正 |
| `cta-accessible` | `#BE3067` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 溶けて垂れるロゴ・セクション見出し（欧文） | 装飾・ディスプレイ | Creepster | 400 | 72px | 1.0 | 0.0em |
| `accent` | 斜めに置く素材名の欧文筆記体ラベル | 欧文セリフ | Playfair Display | 500 | 26px | 1.2 | 0.0em |
| `headline-md` | 商品名 | ゴシック | Noto Sans JP | 700 | 20px | 1.45 | 0.03em |
| `headline-sm` | 価格 | 欧文サンセリフ | Montserrat | 600 | 22px | 1.3 | 0.02em |
| `body-lg` | 中央寄せの短いコピー | ゴシック | Noto Sans JP | 700 | 15px | 1.7 | 0.05em |
| `body-md` | 商品説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.02em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em |
| `note` | アレルゲンなどの下線付きテキストリンク | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.08em |

- 欧文の見出しは、文字が溶けて垂れるディスプレイ書体にし、上方向へにじむ発光をつける。
- 見出し文字は 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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-e5231634`（元 LP の URL から採番）
- **元 LP**: https://www.starbucks.co.jp/cafe/melame-la/?nid=wh_00_pc
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。