洋梨グリーン×金縁の高級アイス新商品 LP

Fresh Pear Green Premium Ice Cream LP

淡い水色からミルク白、黄緑へと移る背景に、シズル写真と緑の太字見出し、金の細線装飾を重ねたプレミアム季節限定アイスの縦長LP。円形の白パネルと金縁で上品さを出している。

菓子・スイーツ上品・高級清潔・爽やかナチュラルやさしい・柔らかいSPPC

ダウンロード

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

COLORS

配色

地は水色→ミルク白→黄緑→ピーチ・ミントの淡いグラデーションでつなぐ
文字は基本的に深い緑。本文も黒ではなく緑にする
金色はセクション見出し・区切り線・円パネルの縁だけに使う
CTAは黄緑の立体ボタンに深緑の文字
濃紺は期間限定バッジだけに使うアクセント
純黒は使わない

TYPOGRAPHY

書体

display商品名の大見出しゴシック／ Zen Kaku Gothic New 900 ／ 40px ／行間 1.2

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

accent商品名の英字サブ・Review表記欧文セリフ／ Playfair Display 400 ／ 16px ／行間 1.3

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

headline-lg手書き風のキャッチ丸ゴシック／ Zen Maru Gothic 900 ／ 22px ／行間 1.4

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

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

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

headline-sm金色のセクション見出しゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.4

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

body-lg中央揃えのリード文・レビュー本文ゴシック／ Noto Sans JP 700 ／ 15px ／行間 2.0

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

body-md特長の説明文ゴシック／ Noto Sans JP 500 ／ 11px ／行間 1.7

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

label-buttonCTAの文字ゴシック／ Noto Sans JP 900 ／ 16px ／行間 1.2

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

リード文とレビューは中央揃えで、短く改行して行間を広めにとる
特長の見出しは2行に分けて左揃えにする
和文見出しの下に欧文セリフのサブを添える
セクション見出しの下に短い金の横線を入れる
本文は太めのウェイトで緑にする

PAGE STRUCTURE

セクション構成

ファーストビュー商品の魅力と季節限定感を一目で伝える水色の地に、商品と果物・飛沫の写真を全面に配置。左上に短いキャッチ、中央下に緑の大きな商品名と英字、右に商品パッケージと丸バッジ
リード文味わいの世界観を伝える淡い水色の地に、緑の太字で6行ほど中央揃え。行間は広めにとる
特長（断面解説）層構造と素材のこだわりを説明する果物とミルクの写真の上に葉形バッジ。その下の大きな断面写真に、3つの注釈を左右交互にリード線で添える
開発のこだわり作り手の想いでプレミアム感を高めるステンドグラス柄の上に金縁の白い楕円を置き、金の見出し・区切り線と緑の中央揃え本文。果物写真を縁に重ねる
お客様の声共感と信頼を得るピーチ・ミント・黄色のグラデーション地に、金縁の白い円3つを互い違いに配置。左に見出しと注記
CTA・シェア他の商品への回遊とSNS拡散オリーブ色の地に立体ピルCTAを置き、その下にSNSの丸アイコンを3つ並べる

COMPONENTS

部品

立体ピルCTA button-primary黄緑のぷっくりしたピル型ボタン。右に矢印をつける
期間限定の丸バッジ badge-limited濃紺の円に白文字2行、白い縁取り
葉形の数値バッジ badge-leaf緑の葉の形に、白で大きな数値を入れる
断面注釈 annotation-callout緑の2行見出しと説明文から、グレーのL字線と点で写真の部位を指す
金縁の楕円パネル oval-panelステンドグラス柄の背景に白い楕円を置き、金の見出し・区切り線と中央揃えの本文を入れる
レビュー円 review-circle金縁の白い正円に、金のReview番号と短い区切り線、緑の2〜3行コメント
金見出し＋区切り線 heading-gold金色の見出しの下に短い金の横線
情報リンクピル info-pill右上に置く半透明グリーンの小さなピル型リンク

守ること

果物・ミルク・果汁の飛沫写真を大きく使い、シズル感を出す
文字は緑、装飾は金に統一する
白い円や楕円のパネルで、文章を柔らかく囲む
背景は淡いグラデーションでセクションをつなぐ
写真はセクションの境界をまたいで置き、奥行きを出す

DON'T

避けること

黒い文字や濃い単色の帯は使わない
角張った四角いカードを並べない
原色の赤など強い警告色のCTAにしない
情報を詰め込まず、余白を広くとる
金色を本文に使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 洋梨グリーン×金縁の高級アイス新商品 LP（Fresh Pear Green Premium Ice Cream LP）

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

Overview

業種: 菓子・スイーツ／ 雰囲気: 上品・高級、清潔・爽やか、ナチュラル、やさしい・柔らかい
キーワード: シズル感・果実の瑞々しさ・ミルキー・金縁・季節限定・グラデーション背景
地の質感: 水しぶきやミルクの飛沫、水滴付きの果実写真で質感を出す。背景は柔らかいグラデーションで、ステンドグラス風のきらめく模様も使う
形: 大きな円形・楕円の白パネルに金の縁取り。リード線で断面図に注釈をつける。CTAはぷっくりした立体のピル型
温度感: 爽やかで少しひんやりした寒色寄り。後半は黄緑とピーチで温かみを加える

Colors

Token	HEX	役割	値の出どころ
`primary`	`#2E7A1E`	見出し・本文の緑	推定
`background`	`#E3F0F9`	ヒーロー下の淡い水色地	画素の主要色に補正
`background-alt`	`#F8F8F6`	断面図セクションのミルク白地	画素の主要色に補正
`surface`	`#F6FAFD`	円形パネルの白	画素の実測
`secondary`	`#B8913A`	金の見出し・縁取り	推定
`line`	`#7A7A7A`	注釈リード線のグレー	推定
`cta`	`#D1C373`	CTAボタンの黄緑	画素の主要色に補正
`on-cta`	`#1E5A14`	CTA文字の深緑	推定
`dark-section`	`#D1C373`	フッター付近のオリーブ地	画素の主要色に補正
`accent-1`	`#4FA632`	バッジの鮮やかな緑	推定
`accent-2`	`#1C3D8C`	期間限定バッジの濃紺	推定
`tint-1`	`#EDC9B3`	レビュー背景のピーチ	推定
`tint-2`	`#B9DCD2`	レビュー背景のミント	画素の主要色に補正
`text-muted`	`#B88F49`	注記の小文字	画素の実測

地は水色→ミルク白→黄緑→ピーチ・ミントの淡いグラデーションでつなぐ
文字は基本的に深い緑。本文も黒ではなく緑にする
金色はセクション見出し・区切り線・円パネルの縁だけに使う
CTAは黄緑の立体ボタンに深緑の文字
濃紺は期間限定バッジだけに使うアクセント
純黒は使わない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	商品名の大見出し	ゴシック	Zen Kaku Gothic New	900	40px	1.2	0.02em
`accent`	商品名の英字サブ・Review表記	欧文セリフ	Playfair Display	400	16px	1.3	0.03em
`headline-lg`	手書き風のキャッチ	丸ゴシック	Zen Maru Gothic	900	22px	1.4	0.05em
`headline-md`	特長の見出し	ゴシック	Zen Kaku Gothic New	700	22px	1.4	0.08em
`headline-sm`	金色のセクション見出し	ゴシック	Noto Sans JP	700	16px	1.4	0.05em
`body-lg`	中央揃えのリード文・レビュー本文	ゴシック	Noto Sans JP	700	15px	2.0	0.04em
`body-md`	特長の説明文	ゴシック	Noto Sans JP	500	11px	1.7	0.03em
`label-button`	CTAの文字	ゴシック	Noto Sans JP	900	16px	1.2	0.04em

リード文とレビューは中央揃えで、短く改行して行間を広めにとる
特長の見出しは2行に分けて左揃えにする
和文見出しの下に欧文セリフのサブを添える
セクション見出しの下に短い金の横線を入れる
本文は太めのウェイトで緑にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム（特長は左右にずらして配置）
本文ブロックの幅: 画面幅の約 84%
余白: セクション間 64px、基本単位 8px、カード内 32px（375px 幅換算）
ヒーローは写真を全面に敷いて、商品名を中央下に重ねる
特長は大きな断面写真の上に、テキストを左右交互に置いてリード線で指し示す
こだわりは画面幅いっぱいの楕円白パネルに中央揃えの文章
レビューは3つの円を互い違いに少し重ねて配置
最後に全幅のCTAとSNSアイコンを中央に並べる

Elevation & Depth

CTAは上側にハイライト、下側に影をつけて立体感を出す
円パネルは金の縁取りでわずかに浮かせる
果物写真は切り抜いて、セクションの境界をまたいで配置する

Shapes

角丸: 小 4px ／中 16px ／大 999px。ボタンはピル型。
写真の切り抜き: 果物・商品の写真は背景を抜いて、飛沫ごと自由に配置する
セクション境界: グラデーションで継ぎ目なく移る。こだわりのセクションだけ金線で上下を区切る
パネルは正円か楕円にして、角のある箱は使わない
縁は金の二重線か太線にする
注釈はL字のリード線の先に丸い点をつける
バッジは円形か葉の形にする

Components

立体ピルCTA（button-primary）: 黄緑のぷっくりしたピル型ボタン。右に矢印をつける
期間限定の丸バッジ（badge-limited）: 濃紺の円に白文字2行、白い縁取り
葉形の数値バッジ（badge-leaf）: 緑の葉の形に、白で大きな数値を入れる
断面注釈（annotation-callout）: 緑の2行見出しと説明文から、グレーのL字線と点で写真の部位を指す
金縁の楕円パネル（oval-panel）: ステンドグラス柄の背景に白い楕円を置き、金の見出し・区切り線と中央揃えの本文を入れる
レビュー円（review-circle）: 金縁の白い正円に、金のReview番号と短い区切り線、緑の2〜3行コメント
金見出し＋区切り線（heading-gold）: 金色の見出しの下に短い金の横線
情報リンクピル（info-pill）: 右上に置く半透明グリーンの小さなピル型リンク

Do's and Don'ts

Do - 果物・ミルク・果汁の飛沫写真を大きく使い、シズル感を出す - 文字は緑、装飾は金に統一する - 白い円や楕円のパネルで、文章を柔らかく囲む - 背景は淡いグラデーションでセクションをつなぐ - 写真はセクションの境界をまたいで置き、奥行きを出す

Don't - 黒い文字や濃い単色の帯は使わない - 角張った四角いカードを並べない - 原色の赤など強い警告色のCTAにしない - 情報を詰め込まず、余白を広くとる - 金色を本文に使わない

Page Structure

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

ファーストビュー（商品の魅力と季節限定感を一目で伝える）: 水色の地に、商品と果物・飛沫の写真を全面に配置。左上に短いキャッチ、中央下に緑の大きな商品名と英字、右に商品パッケージと丸バッジ
リード文（味わいの世界観を伝える）: 淡い水色の地に、緑の太字で6行ほど中央揃え。行間は広めにとる
特長（断面解説）（層構造と素材のこだわりを説明する）: 果物とミルクの写真の上に葉形バッジ。その下の大きな断面写真に、3つの注釈を左右交互にリード線で添える
開発のこだわり（作り手の想いでプレミアム感を高める）: ステンドグラス柄の上に金縁の白い楕円を置き、金の見出し・区切り線と緑の中央揃え本文。果物写真を縁に重ねる
お客様の声（共感と信頼を得る）: ピーチ・ミント・黄色のグラデーション地に、金縁の白い円3つを互い違いに配置。左に見出しと注記
CTA・シェア（他の商品への回遊とSNS拡散）: オリーブ色の地に立体ピルCTAを置き、その下にSNSの丸アイコンを3つ並べる

Imagery

果物は水滴がついた瑞々しい状態で切り抜き、断面も見せる
ミルクの王冠状の飛沫や、黄金色の果汁がうねるスプラッシュを組み合わせる
商品の断面は大きくクローズアップして、層の質感を見せる
パステルカラーのきらめく三角片でステンドグラス風の柄を作る
背景は柔らかくぼかしたパステルのグラデーション
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCでは約430px幅のSP版を中央に置いて、1カラムのまま見せる
PCの左右には、果物と飛沫の写真パターンを繰り返し敷き詰める
中央カラムに軽い影をつけて、背景から浮かせる
文字サイズや構成はSPと同じにする

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 Pear Green Premium Ice Cream LP
description: 淡い水色からミルク白、黄緑へと移る背景に、シズル写真と緑の太字見出し、金の細線装飾を重ねたプレミアム季節限定アイスの縦長LP。円形の白パネルと金縁で上品さを出している。
colors:
  primary: '#2E7A1E'
  background: '#E3F0F9'
  background-alt: '#F8F8F6'
  surface: '#F6FAFD'
  secondary: '#B8913A'
  line: '#7A7A7A'
  cta: '#D1C373'
  on-cta: '#1E5A14'
  dark-section: '#D1C373'
  accent-1: '#4FA632'
  accent-2: '#1C3D8C'
  tint-1: '#EDC9B3'
  tint-2: '#B9DCD2'
  text-muted: '#B88F49'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  accent:
    fontFamily: Playfair Display
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.03em
  headline-lg:
    fontFamily: Zen Maru Gothic
    fontSize: 22px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.03em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 4px
  md: 16px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 32px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 52px
  badge-limited:
    backgroundColor: '{colors.accent-2}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 44px
  badge-leaf:
    backgroundColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.lg}'
    height: 72px
  annotation-callout:
    textColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 140px
  oval-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.full}'
    height: 560px
  review-circle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.full}'
    height: 220px
  heading-gold:
    textColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    height: 50px
  info-pill:
    backgroundColor: '{colors.accent-1}'
    rounded: '{rounded.full}'
    height: 24px
---

# DESIGN.md — 洋梨グリーン×金縁の高級アイス新商品 LP（Fresh Pear Green Premium Ice Cream LP）

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

## Overview

- **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、清潔・爽やか、ナチュラル、やさしい・柔らかい
- **キーワード**: シズル感・果実の瑞々しさ・ミルキー・金縁・季節限定・グラデーション背景
- **地の質感**: 水しぶきやミルクの飛沫、水滴付きの果実写真で質感を出す。背景は柔らかいグラデーションで、ステンドグラス風のきらめく模様も使う
- **形**: 大きな円形・楕円の白パネルに金の縁取り。リード線で断面図に注釈をつける。CTAはぷっくりした立体のピル型
- **温度感**: 爽やかで少しひんやりした寒色寄り。後半は黄緑とピーチで温かみを加える

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2E7A1E` | 見出し・本文の緑 |  | 推定 |
| `background` | `#E3F0F9` | ヒーロー下の淡い水色地 |  | 画素の主要色に補正 |
| `background-alt` | `#F8F8F6` | 断面図セクションのミルク白地 |  | 画素の主要色に補正 |
| `surface` | `#F6FAFD` | 円形パネルの白 |  | 画素の実測 |
| `secondary` | `#B8913A` | 金の見出し・縁取り |  | 推定 |
| `line` | `#7A7A7A` | 注釈リード線のグレー |  | 推定 |
| `cta` | `#D1C373` | CTAボタンの黄緑 |  | 画素の主要色に補正 |
| `on-cta` | `#1E5A14` | CTA文字の深緑 |  | 推定 |
| `dark-section` | `#D1C373` | フッター付近のオリーブ地 |  | 画素の主要色に補正 |
| `accent-1` | `#4FA632` | バッジの鮮やかな緑 |  | 推定 |
| `accent-2` | `#1C3D8C` | 期間限定バッジの濃紺 |  | 推定 |
| `tint-1` | `#EDC9B3` | レビュー背景のピーチ |  | 推定 |
| `tint-2` | `#B9DCD2` | レビュー背景のミント |  | 画素の主要色に補正 |
| `text-muted` | `#B88F49` | 注記の小文字 |  | 画素の実測 |

- 地は水色→ミルク白→黄緑→ピーチ・ミントの淡いグラデーションでつなぐ
- 文字は基本的に深い緑。本文も黒ではなく緑にする
- 金色はセクション見出し・区切り線・円パネルの縁だけに使う
- CTAは黄緑の立体ボタンに深緑の文字
- 濃紺は期間限定バッジだけに使うアクセント
- 純黒は使わない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品名の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.2 | 0.02em |
| `accent` | 商品名の英字サブ・Review表記 | 欧文セリフ | Playfair Display | 400 | 16px | 1.3 | 0.03em |
| `headline-lg` | 手書き風のキャッチ | 丸ゴシック | Zen Maru Gothic | 900 | 22px | 1.4 | 0.05em |
| `headline-md` | 特長の見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.08em |
| `headline-sm` | 金色のセクション見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.05em |
| `body-lg` | 中央揃えのリード文・レビュー本文 | ゴシック | Noto Sans JP | 700 | 15px | 2.0 | 0.04em |
| `body-md` | 特長の説明文 | ゴシック | Noto Sans JP | 500 | 11px | 1.7 | 0.03em |
| `label-button` | CTAの文字 | ゴシック | Noto Sans JP | 900 | 16px | 1.2 | 0.04em |

- リード文とレビューは中央揃えで、短く改行して行間を広めにとる
- 特長の見出しは2行に分けて左揃えにする
- 和文見出しの下に欧文セリフのサブを添える
- セクション見出しの下に短い金の横線を入れる
- 本文は太めのウェイトで緑にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム（特長は左右にずらして配置）
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 64px、基本単位 8px、カード内 32px（375px 幅換算）
- ヒーローは写真を全面に敷いて、商品名を中央下に重ねる
- 特長は大きな断面写真の上に、テキストを左右交互に置いてリード線で指し示す
- こだわりは画面幅いっぱいの楕円白パネルに中央揃えの文章
- レビューは3つの円を互い違いに少し重ねて配置
- 最後に全幅のCTAとSNSアイコンを中央に並べる

## Elevation & Depth

- CTAは上側にハイライト、下側に影をつけて立体感を出す
- 円パネルは金の縁取りでわずかに浮かせる
- 果物写真は切り抜いて、セクションの境界をまたいで配置する

## Shapes

- **角丸**: 小 4px ／ 中 16px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 果物・商品の写真は背景を抜いて、飛沫ごと自由に配置する
- **セクション境界**: グラデーションで継ぎ目なく移る。こだわりのセクションだけ金線で上下を区切る
- パネルは正円か楕円にして、角のある箱は使わない
- 縁は金の二重線か太線にする
- 注釈はL字のリード線の先に丸い点をつける
- バッジは円形か葉の形にする

## Components

- **立体ピルCTA**（`button-primary`）: 黄緑のぷっくりしたピル型ボタン。右に矢印をつける
- **期間限定の丸バッジ**（`badge-limited`）: 濃紺の円に白文字2行、白い縁取り
- **葉形の数値バッジ**（`badge-leaf`）: 緑の葉の形に、白で大きな数値を入れる
- **断面注釈**（`annotation-callout`）: 緑の2行見出しと説明文から、グレーのL字線と点で写真の部位を指す
- **金縁の楕円パネル**（`oval-panel`）: ステンドグラス柄の背景に白い楕円を置き、金の見出し・区切り線と中央揃えの本文を入れる
- **レビュー円**（`review-circle`）: 金縁の白い正円に、金のReview番号と短い区切り線、緑の2〜3行コメント
- **金見出し＋区切り線**（`heading-gold`）: 金色の見出しの下に短い金の横線
- **情報リンクピル**（`info-pill`）: 右上に置く半透明グリーンの小さなピル型リンク

## Do's and Don'ts

**Do**
- 果物・ミルク・果汁の飛沫写真を大きく使い、シズル感を出す
- 文字は緑、装飾は金に統一する
- 白い円や楕円のパネルで、文章を柔らかく囲む
- 背景は淡いグラデーションでセクションをつなぐ
- 写真はセクションの境界をまたいで置き、奥行きを出す

**Don't**
- 黒い文字や濃い単色の帯は使わない
- 角張った四角いカードを並べない
- 原色の赤など強い警告色のCTAにしない
- 情報を詰め込まず、余白を広くとる
- 金色を本文に使わない

## Page Structure

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

1. **ファーストビュー**（商品の魅力と季節限定感を一目で伝える）: 水色の地に、商品と果物・飛沫の写真を全面に配置。左上に短いキャッチ、中央下に緑の大きな商品名と英字、右に商品パッケージと丸バッジ
2. **リード文**（味わいの世界観を伝える）: 淡い水色の地に、緑の太字で6行ほど中央揃え。行間は広めにとる
3. **特長（断面解説）**（層構造と素材のこだわりを説明する）: 果物とミルクの写真の上に葉形バッジ。その下の大きな断面写真に、3つの注釈を左右交互にリード線で添える
4. **開発のこだわり**（作り手の想いでプレミアム感を高める）: ステンドグラス柄の上に金縁の白い楕円を置き、金の見出し・区切り線と緑の中央揃え本文。果物写真を縁に重ねる
5. **お客様の声**（共感と信頼を得る）: ピーチ・ミント・黄色のグラデーション地に、金縁の白い円3つを互い違いに配置。左に見出しと注記
6. **CTA・シェア**（他の商品への回遊とSNS拡散）: オリーブ色の地に立体ピルCTAを置き、その下にSNSの丸アイコンを3つ並べる

## Imagery

- 果物は水滴がついた瑞々しい状態で切り抜き、断面も見せる
- ミルクの王冠状の飛沫や、黄金色の果汁がうねるスプラッシュを組み合わせる
- 商品の断面は大きくクローズアップして、層の質感を見せる
- パステルカラーのきらめく三角片でステンドグラス風の柄を作る
- 背景は柔らかくぼかしたパステルのグラデーション
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは約430px幅のSP版を中央に置いて、1カラムのまま見せる
- PCの左右には、果物と飛沫の写真パターンを繰り返し敷き詰める
- 中央カラムに軽い影をつけて、背景から浮かせる
- 文字サイズや構成はSPと同じにする

## 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-ee3e98a8`（元 LP の URL から採番）
- **元 LP**: https://www.haagen-dazs.co.jp/products/special/pear-and-milk/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（2/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

SOURCE

出典と注意

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

似た LP の design.md

菓子・スイーツ山吹色×えんじの絵本風お菓子 LPWarm Picture-Book Confectionery Campaign LP 菓子・スイーツピンク×水色ストライプのポップなスイーツ LPPop Pastel Stripe Dessert Topping LP 菓子・スイーツ桃色×金箔の季節限定スイーツドリンク LPPeach Pink and Gold Premium Dessert Drink LP 菓子・スイーツ金色きらめきの新作フローズンスイーツ LPGolden Shimmer Frozen Dessert LP 菓子・スイーツクラフト紙とチョコ色のサステナ菓子 LPKraft Chocolate Sustainability LP 菓子・スイーツ星空ネイビー×ゴールドのコラボスイーツ LPCosmic Night Collab Dessert Campaign LP