黄緑グラデと紫文字の爽やか飲料 LP

Fresh Fruit Gradient Beverage LP

黄緑からクリームへ流れるグラデ地に、果実写真と円形の切り抜き、紫の文字を合わせた季節限定飲料の LP。水玉や筆で描いた輪の装飾を散らして、みずみずしく軽やかな印象にしている。

食品・飲料清潔・爽やかナチュラルやさしい・柔らかい上品・高級SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は黄緑→クリーム→黄緑のグラデで縦に流し、白一色の面は使わない
文字はすべて紫系で統一し、黒文字は使わない
金色は発売日など 1 か所だけのアクセントにする
深緑はロゴと SNS アイコンだけに使う
果実写真の黄緑と地のグラデを同じ色相でそろえる

TYPOGRAPHY

書体

display英字の商品名（大見出し）欧文セリフ／ Playfair Display 800 ／ 32px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg和文の商品名ゴシック／ Zen Kaku Gothic New 700 ／ 24px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-md素材名の見出しゴシック／ Zen Kaku Gothic New 700 ／ 22px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm素材のリード文・小見出しゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

body-lg中央寄せの導入コピーゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 2.2

あなたの LP を、もっと伝わる形に。Aa 123

accent発売日の数字欧文セリフ／ Playfair Display 700 ／ 24px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・販売情報ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-button詳細ボタンゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

英字の見出しは太いセリフ体、和文は太めのゴシックにする
コピーは中央寄せにして、行間を 2 倍以上とる
素材の見出しはリード文を小さく、素材名を大きくする 2 段構成
注釈は小さく、グレーで添える

PAGE STRUCTURE

セクション構成

ヘッダーブランドを認識させる左にロゴ、右にハンバーガーメニュー。背景は透過
ファーストビュー商品と発売日を印象づける商品パッケージを大きく見せ、下に金の日付と紫のセリフ体商品名を置く
導入コピー味わいのコンセプトを伝える紫の太字で 6 行前後を中央寄せにし、行間を広くとる
素材紹介3 つの素材の魅力を伝える円形写真とキャプションを左右交互に 3 つ並べる
飲用シーン飲む情景を想起させる手で持つ写真を大きな円弧で切り抜き、下に 3 行のコピーを置く
商品情報商品名と販売エリアを伝える商品の切り抜き写真、キャッチ、商品名、販売情報、ピル型ボタンの順に中央寄せで並べる
フッター問い合わせ先と SNS へ誘導する問い合わせ先のリンクの下に、深緑の SNS アイコンを並べる

COMPONENTS

部品

商品ヒーロー hero-product商品パッケージを大きく切り抜き、果実を周りに散らす
発売日と商品名 release-title金色の日付の下に、紫の英字セリフ見出しと和文の商品名を並べる
円形素材写真 circle-photo直径約 260px の円で素材を写す
素材キャプション ingredient-caption小さいリード文と、大きい紫の素材名の 2 段
詳細アコーディオンボタン button-outline紫の細線のピル型。右端に＋アイコンを置く
水玉と輪の装飾 deco-dots-ring緑の水玉ドットの集まりと、金色の筆で描いた輪を余白に散らす
SNS アイコン列 sns-icons深緑の円の中に白いアイコンを 5 つ横に並べる
注釈 note-text画像やデザインがイメージである旨を、小さいグレー文字で添える

守ること

地は必ず黄緑とクリームのグラデにする
文字色は紫で統一する
写真は円形か円弧で切り抜く
果実の切り抜きを画面の端に、はみ出させて置く
余白を広くとり、装飾を軽く散らす

DON'T

避けること

黒文字や濃いグレーの本文を使わない
四角い写真やカード枠を使わない
塗りの強いベタのボタンにしない
赤や青などの補色の強い色を足さない
装飾を文字の上に重ねない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 黄緑グラデと紫文字の爽やか飲料 LP（Fresh Fruit Gradient Beverage LP）

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

Overview

業種: 食品・飲料／ 雰囲気: 清潔・爽やか、ナチュラル、やさしい・柔らかい、上品・高級
キーワード: 黄緑グラデーション・紫の見出し・円形写真・果実の散らし・水玉ドット・初夏の季節感
地の質感: 水彩のようなやわらかいグラデ地。マーブル状の淡いクリームが混ざる
形: 円形の写真と大きな円弧が中心。ボタンはアウトラインのピル型
温度感: 明るく爽やかな、少し暖かみのある初夏の空気感

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#814E9F`	見出し・本文の紫	3%	画素の実測
`background`	`#DBEEA4`	黄緑のグラデ地	35%	画素の実測
`background-alt`	`#FBEACE`	クリーム色のグラデ中間	25%	画素の実測
`secondary`	`#025B3C`	ロゴ・SNS アイコンの深緑	1%	画素の実測
`accent-1`	`#C7DA7E`	マスカットの黄緑	7%	画素の実測
`accent-2`	`#AE8A21`	発売日表示の金色	0%	画素の実測
`accent-3`	`#4FA68A`	ドット装飾の青緑	1%	推定
`text-muted`	`#6E6A66`	注釈のグレー	0%	推定
`line`	`#8A6AA8`	アウトラインボタンの紫線	0%	推定
`surface`	`#E9EBB5`	ボタンの淡い地	1%	画素の実測
`on-dark`	`#FFFFFF`	アイコン上の白	0%	推定

地は黄緑→クリーム→黄緑のグラデで縦に流し、白一色の面は使わない
文字はすべて紫系で統一し、黒文字は使わない
金色は発売日など 1 か所だけのアクセントにする
深緑はロゴと SNS アイコンだけに使う
果実写真の黄緑と地のグラデを同じ色相でそろえる

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	英字の商品名（大見出し）	欧文セリフ	Playfair Display	800	32px	1.1	0.0em
`headline-lg`	和文の商品名	ゴシック	Zen Kaku Gothic New	700	24px	1.4	0.03em
`headline-md`	素材名の見出し	ゴシック	Zen Kaku Gothic New	700	22px	1.4	0.08em
`headline-sm`	素材のリード文・小見出し	ゴシック	Zen Kaku Gothic New	700	16px	1.6	0.05em
`body-lg`	中央寄せの導入コピー	ゴシック	Zen Kaku Gothic New	700	16px	2.2	0.06em
`accent`	発売日の数字	欧文セリフ	Playfair Display	700	24px	1.2	0.0em
`note`	注釈・販売情報	ゴシック	Noto Sans JP	400	11px	1.6	0.02em
`label-button`	詳細ボタン	ゴシック	Noto Sans JP	500	14px	1.4	0.05em

英字の見出しは太いセリフ体、和文は太めのゴシックにする
コピーは中央寄せにして、行間を 2 倍以上とる
素材の見出しはリード文を小さく、素材名を大きくする 2 段構成
注釈は小さく、グレーで添える
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。素材紹介は円形写真を左右交互にずらして置く
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
カードの枠は使わず、写真とテキストを地の上に直接置く
円形写真は左右に寄せてジグザグに並べる
テキストは写真のずらした側の下に置く
余白を大きくとり、装飾を余白に散らす

Elevation & Depth

影はほぼ使わない
商品パッケージの写真にだけ、ごく薄い接地影をつける

Shapes

角丸: 小 4px ／中 16px ／大 200px。ボタンはピル型。
写真の切り抜き: 円形に切り抜くか、大きな円弧で上辺を切った半円にする
セクション境界: 線は引かず、グラデの色変化だけでつなぐ
写真は四角で見せない
ボタンは細線のピル型
SNS アイコンは深緑の円にする

Components

商品ヒーロー（hero-product）: 商品パッケージを大きく切り抜き、果実を周りに散らす
発売日と商品名（release-title）: 金色の日付の下に、紫の英字セリフ見出しと和文の商品名を並べる
円形素材写真（circle-photo）: 直径約 260px の円で素材を写す
素材キャプション（ingredient-caption）: 小さいリード文と、大きい紫の素材名の 2 段
詳細アコーディオンボタン（button-outline）: 紫の細線のピル型。右端に＋アイコンを置く
水玉と輪の装飾（deco-dots-ring）: 緑の水玉ドットの集まりと、金色の筆で描いた輪を余白に散らす
SNS アイコン列（sns-icons）: 深緑の円の中に白いアイコンを 5 つ横に並べる
注釈（note-text）: 画像やデザインがイメージである旨を、小さいグレー文字で添える

Do's and Don'ts

Do - 地は必ず黄緑とクリームのグラデにする - 文字色は紫で統一する - 写真は円形か円弧で切り抜く - 果実の切り抜きを画面の端に、はみ出させて置く - 余白を広くとり、装飾を軽く散らす

Don't - 黒文字や濃いグレーの本文を使わない - 四角い写真やカード枠を使わない - 塗りの強いベタのボタンにしない - 赤や青などの補色の強い色を足さない - 装飾を文字の上に重ねない

Page Structure

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

ヘッダー（ブランドを認識させる）: 左にロゴ、右にハンバーガーメニュー。背景は透過
ファーストビュー（商品と発売日を印象づける）: 商品パッケージを大きく見せ、下に金の日付と紫のセリフ体商品名を置く
導入コピー（味わいのコンセプトを伝える）: 紫の太字で 6 行前後を中央寄せにし、行間を広くとる
素材紹介（3 つの素材の魅力を伝える）: 円形写真とキャプションを左右交互に 3 つ並べる
飲用シーン（飲む情景を想起させる）: 手で持つ写真を大きな円弧で切り抜き、下に 3 行のコピーを置く
商品情報（商品名と販売エリアを伝える）: 商品の切り抜き写真、キャッチ、商品名、販売情報、ピル型ボタンの順に中央寄せで並べる
フッター（問い合わせ先と SNS へ誘導する）: 問い合わせ先のリンクの下に、深緑の SNS アイコンを並べる

Imagery

果実はみずみずしい光沢のある切り抜きにし、画面の端に配置する
素材は真上や寄りで撮り、円形に切り抜く
ミルクは白いスプラッシュの動きを見せる
水玉ドットと筆で描いた輪を装飾に使う
シーン写真は明るい自然光で、緑のボケ背景にする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はファーストビューを左に商品、右に商品名の 2 カラムにする
PC の素材紹介は円形写真を小さくし、ジグザグに配置する
PC はシーン写真を右、コピーを左に並べる
PC はヘッダーにテキストメニューと SNS アイコンを並べる
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 行書くと起動時に読み込まれる。

---
version: alpha
name: Fresh Fruit Gradient Beverage LP
description: 黄緑からクリームへ流れるグラデ地に、果実写真と円形の切り抜き、紫の文字を合わせた季節限定飲料の LP。水玉や筆で描いた輪の装飾を散らして、みずみずしく軽やかな印象にしている。
colors:
  primary: '#814E9F'
  background: '#DBEEA4'
  background-alt: '#FBEACE'
  secondary: '#025B3C'
  accent-1: '#C7DA7E'
  accent-2: '#AE8A21'
  accent-3: '#4FA68A'
  text-muted: '#6E6A66'
  line: '#8A6AA8'
  surface: '#E9EBB5'
  on-dark: '#FFFFFF'
typography:
  display:
    fontFamily: Playfair Display
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 2.2
    letterSpacing: 0.06em
  accent:
    fontFamily: Playfair Display
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 16px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  hero-product:
    backgroundColor: '{colors.background}'
    height: 460px
  release-title:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    height: 130px
  circle-photo:
    rounded: '{rounded.full}'
    height: 260px
  ingredient-caption:
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 80px
  button-outline:
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  deco-dots-ring:
    backgroundColor: '{colors.accent-3}'
    rounded: '{rounded.full}'
    height: 80px
  sns-icons:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    rounded: '{rounded.full}'
    height: 40px
  note-text:
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 16px
---

# DESIGN.md — 黄緑グラデと紫文字の爽やか飲料 LP（Fresh Fruit Gradient Beverage LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 清潔・爽やか、ナチュラル、やさしい・柔らかい、上品・高級
- **キーワード**: 黄緑グラデーション・紫の見出し・円形写真・果実の散らし・水玉ドット・初夏の季節感
- **地の質感**: 水彩のようなやわらかいグラデ地。マーブル状の淡いクリームが混ざる
- **形**: 円形の写真と大きな円弧が中心。ボタンはアウトラインのピル型
- **温度感**: 明るく爽やかな、少し暖かみのある初夏の空気感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#814E9F` | 見出し・本文の紫 | 3% | 画素の実測 |
| `background` | `#DBEEA4` | 黄緑のグラデ地 | 35% | 画素の実測 |
| `background-alt` | `#FBEACE` | クリーム色のグラデ中間 | 25% | 画素の実測 |
| `secondary` | `#025B3C` | ロゴ・SNS アイコンの深緑 | 1% | 画素の実測 |
| `accent-1` | `#C7DA7E` | マスカットの黄緑 | 7% | 画素の実測 |
| `accent-2` | `#AE8A21` | 発売日表示の金色 | 0% | 画素の実測 |
| `accent-3` | `#4FA68A` | ドット装飾の青緑 | 1% | 推定 |
| `text-muted` | `#6E6A66` | 注釈のグレー | 0% | 推定 |
| `line` | `#8A6AA8` | アウトラインボタンの紫線 | 0% | 推定 |
| `surface` | `#E9EBB5` | ボタンの淡い地 | 1% | 画素の実測 |
| `on-dark` | `#FFFFFF` | アイコン上の白 | 0% | 推定 |

- 地は黄緑→クリーム→黄緑のグラデで縦に流し、白一色の面は使わない
- 文字はすべて紫系で統一し、黒文字は使わない
- 金色は発売日など 1 か所だけのアクセントにする
- 深緑はロゴと SNS アイコンだけに使う
- 果実写真の黄緑と地のグラデを同じ色相でそろえる

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 英字の商品名（大見出し） | 欧文セリフ | Playfair Display | 800 | 32px | 1.1 | 0.0em |
| `headline-lg` | 和文の商品名 | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.03em |
| `headline-md` | 素材名の見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.08em |
| `headline-sm` | 素材のリード文・小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.6 | 0.05em |
| `body-lg` | 中央寄せの導入コピー | ゴシック | Zen Kaku Gothic New | 700 | 16px | 2.2 | 0.06em |
| `accent` | 発売日の数字 | 欧文セリフ | Playfair Display | 700 | 24px | 1.2 | 0.0em |
| `note` | 注釈・販売情報 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em |
| `label-button` | 詳細ボタン | ゴシック | Noto Sans JP | 500 | 14px | 1.4 | 0.05em |

- 英字の見出しは太いセリフ体、和文は太めのゴシックにする
- コピーは中央寄せにして、行間を 2 倍以上とる
- 素材の見出しはリード文を小さく、素材名を大きくする 2 段構成
- 注釈は小さく、グレーで添える
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。素材紹介は円形写真を左右交互にずらして置く
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
- カードの枠は使わず、写真とテキストを地の上に直接置く
- 円形写真は左右に寄せてジグザグに並べる
- テキストは写真のずらした側の下に置く
- 余白を大きくとり、装飾を余白に散らす

## Elevation & Depth

- 影はほぼ使わない
- 商品パッケージの写真にだけ、ごく薄い接地影をつける

## Shapes

- **角丸**: 小 4px ／ 中 16px ／ 大 200px。ボタンはピル型。
- **写真の切り抜き**: 円形に切り抜くか、大きな円弧で上辺を切った半円にする
- **セクション境界**: 線は引かず、グラデの色変化だけでつなぐ
- 写真は四角で見せない
- ボタンは細線のピル型
- SNS アイコンは深緑の円にする

## Components

- **商品ヒーロー**（`hero-product`）: 商品パッケージを大きく切り抜き、果実を周りに散らす
- **発売日と商品名**（`release-title`）: 金色の日付の下に、紫の英字セリフ見出しと和文の商品名を並べる
- **円形素材写真**（`circle-photo`）: 直径約 260px の円で素材を写す
- **素材キャプション**（`ingredient-caption`）: 小さいリード文と、大きい紫の素材名の 2 段
- **詳細アコーディオンボタン**（`button-outline`）: 紫の細線のピル型。右端に＋アイコンを置く
- **水玉と輪の装飾**（`deco-dots-ring`）: 緑の水玉ドットの集まりと、金色の筆で描いた輪を余白に散らす
- **SNS アイコン列**（`sns-icons`）: 深緑の円の中に白いアイコンを 5 つ横に並べる
- **注釈**（`note-text`）: 画像やデザインがイメージである旨を、小さいグレー文字で添える

## Do's and Don'ts

**Do**
- 地は必ず黄緑とクリームのグラデにする
- 文字色は紫で統一する
- 写真は円形か円弧で切り抜く
- 果実の切り抜きを画面の端に、はみ出させて置く
- 余白を広くとり、装飾を軽く散らす

**Don't**
- 黒文字や濃いグレーの本文を使わない
- 四角い写真やカード枠を使わない
- 塗りの強いベタのボタンにしない
- 赤や青などの補色の強い色を足さない
- 装飾を文字の上に重ねない

## Page Structure

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

1. **ヘッダー**（ブランドを認識させる）: 左にロゴ、右にハンバーガーメニュー。背景は透過
2. **ファーストビュー**（商品と発売日を印象づける）: 商品パッケージを大きく見せ、下に金の日付と紫のセリフ体商品名を置く
3. **導入コピー**（味わいのコンセプトを伝える）: 紫の太字で 6 行前後を中央寄せにし、行間を広くとる
4. **素材紹介**（3 つの素材の魅力を伝える）: 円形写真とキャプションを左右交互に 3 つ並べる
5. **飲用シーン**（飲む情景を想起させる）: 手で持つ写真を大きな円弧で切り抜き、下に 3 行のコピーを置く
6. **商品情報**（商品名と販売エリアを伝える）: 商品の切り抜き写真、キャッチ、商品名、販売情報、ピル型ボタンの順に中央寄せで並べる
7. **フッター**（問い合わせ先と SNS へ誘導する）: 問い合わせ先のリンクの下に、深緑の SNS アイコンを並べる

## Imagery

- 果実はみずみずしい光沢のある切り抜きにし、画面の端に配置する
- 素材は真上や寄りで撮り、円形に切り抜く
- ミルクは白いスプラッシュの動きを見せる
- 水玉ドットと筆で描いた輪を装飾に使う
- シーン写真は明るい自然光で、緑のボケ背景にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はファーストビューを左に商品、右に商品名の 2 カラムにする
- PC の素材紹介は円形写真を小さくし、ジグザグに配置する
- PC はシーン写真を右、コピーを左に並べる
- PC はヘッダーにテキストメニューと SNS アイコンを並べる
- 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-71d3f8f4`（元 LP の URL から採番）
- **元 LP**: https://enjoystarbuckschilled.jp/earlgreymuscattealatte.html
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://enjoystarbuckschilled.jp/earlgreymuscattealatte.html（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

食品・飲料木目×ミルクベージュのカフェ風紅茶 LPWarm Wood Cafe Milk Tea LP 食品・飲料はちみつ色グラデの季節ドリンク LPHoney Gradient Seasonal Drink LP 食品・飲料レモン黄×銀灰の左右分割コラボ飲料 LPLemon Yellow Split Collab Beverage LP 食品・飲料赤白テントの食品ギフトブーケ LPRed Awning Gift Bouquet Food Shop LP 食品・飲料白地×赤細線の明朝縦書き食品記念日LPRed Hairline Editorial Food Heritage LP 食品・飲料オレンジと湯気の鍋レシピ食品 LPWarm Orange Hot-Pot Food Brand LP