紺×ミルクベージュのフレーバープロテイン LP

Navy and Milk Beige Flavor Protein LP

深い紺の地に、シズル感のあるミルクティー写真と白い細長サンセリフの大きな英字を重ねた、ドリンク系プロテインの単品 LP。途中にミルクベージュの円弧セクションを挟んで価格を見せ、最後は成分表カードで締める。

健康食品・サプリメント上品・高級クール・先進的力強い・インパクトSP

ダウンロード

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

COLORS

配色

地はほぼ紺で通し、明るい面は価格セクションのベージュだけにする
紺地の文字は白。ベージュ地の文字は焦げ茶にする
黄色マーカーはキーワード 1 か所だけに使う
ボタンは白のピル型。紺地でもベージュ地でも同じ形で浮かせる
装飾の大英字は紺より少し明るいトーンにし、背景になじませる
成分表は薄グレーのカードに白とグレーの交互行を敷く

TYPOGRAPHY

書体

displayFV と区切りに入る大英字欧文サンセリフ／ Bebas Neue 400 ／ 96px ／行間 1.0

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

headline-lg商品名見出し（ベージュ地）欧文サンセリフ／ Oswald 600 ／ 44px ／行間 1.1

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

headline-md数値訴求の見出し（大きな数字＋和文）ゴシック／ Noto Sans JP 700 ／ 36px ／行間 1.3

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

headline-sm縦書きのキャッチ・縦書き見出しゴシック／ Zen Kaku Gothic New 500 ／ 26px ／行間 1.6

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

body-lg紺地のリード文（一部の語を大きくして強調）ゴシック／ Noto Sans JP 500 ／ 14px ／行間 2.3

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

body-md成分表・原材料の本文ゴシック／ Noto Sans JP 400 ／ 12px ／行間 1.8

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

accent価格の数字欧文サンセリフ／ Lato 700 ／ 36px ／行間 1.2

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

label-buttonボタンの英字ラベル欧文セリフ／ Playfair Display 700 ／ 17px ／行間 1.2

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

大英字は縦長の細いサンセリフで、画面幅いっぱいに置く
和文本文は字間を広め（0.15em）にし、行間 2 以上でゆったり組む
リード文では大事な語だけ 1.3 倍の大きさにする
キャッチは縦書きにし、横に大英字を縦向きで添える
数値は和文の約 1.5 倍の太字欧文にする

PAGE STRUCTURE

セクション構成

ファーストビュー味と商品を一目で伝える紺の地に、注がれるグラスとパッケージの写真。上下に白の大英字を置き、白ピルボタンを添える
キャッチコピーありきたりな飲み物との違いを印象づける白の縦書き 2 行と、半透明の縦向き英字。下にミルクのしぶき写真
コンセプト味へのこだわりを語る字間の広い白い本文を左寄せで置き、強調語を大きくし、1 語に黄色マーカーを引く
特長（数値）タンパク質量を示す俯瞰のグラス写真の下に、縦書きの項目名と大きな数値の見出しを置き、下線と説明文を続ける
特長（容量）試しやすさを伝えるパッケージとミルクのしぶき、縦の英字。数値見出しと下線、短い説明文
価格・購入価格を示して購入へ誘導する楕円弧のベージュ面。英字の商品名、パッケージ、大きな価格、白ピルボタン。茶葉の乗ったスプーン写真を添える
成分・原材料安心材料を細かく示す白の大英字見出しの下に角丸グレーカード。原材料の文章と、交互の色の栄養成分表
ブランドロゴ・フッターブランドを記憶させ、関連ページへ案内する紺地に白のロゴ。その下に白地のフッター（英字ナビ、SNS、規約、コピーライト）

COMPONENTS

部品

白ピルボタン button-primary白地に紺の細い枠のピル型ボタン。中央にセリフ体の英字ラベル、右端に細い矢印、下に影
大英字ヒーロー hero-displayグラス写真の上下に、画面幅いっぱいの白い大英字を重ねる
縦書きキャッチ vertical-copy白の縦書き 2 行のキャッチと、半透明の縦向き英字を並べる
黄色マーカー marker-highlightキーワードを黄色のベタ面で囲み、紺の文字で載せる
数値見出し＋下線 stat-heading縦書きの項目名の横に大きな数字の見出しを置き、下に細い線を右端まで引く
価格ブロック price-blockベージュの弧の面に、英字の商品名・パッケージ・大きな価格・ボタンを縦に並べる
成分表カード nutrition-card角丸のグレーカード。上に原材料の文章、下に白とグレーの交互行で 2 列の表
白フッター footer-nav小さな英字ナビを 4 列、その下に SNS アイコン、規約リンク、ロゴ、コピーライト

守ること

紺の地を基本にし、明るい面は 1 か所に絞る
液体のしぶきや注ぐ瞬間の写真でシズル感を出す
大英字は画面の端まで大きく置く
本文は字間を広くとり、短い行で余白を多めにする
どのボタンも同じ白ピル型にそろえる

DON'T

避けること

赤や蛍光色の派手な CTA にしない
四角い帯の見出しや吹き出しを多用しない
写真を四角い枠に収めない
太い角ゴシックの和文見出しをたくさん並べない
マーカーを何か所にも使わない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 紺×ミルクベージュのフレーバープロテイン LP（Navy and Milk Beige Flavor Protein LP）

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

Overview

業種: 健康食品・サプリメント／ 雰囲気: 上品・高級、クール・先進的、力強い・インパクト
キーワード: 深い紺・ミルクティー色・液体のシズル・細長い大英字・縦書きコピー・余白多め
地の質感: マットな紺の単色地に、光沢ある液体写真と飛び散るしぶきを切り抜いて重ねる
形: ピル型の白いボタン、大きな楕円弧で切り抜いたベージュ面、角丸の成分表カード
温度感: 紺で冷たく締め、ミルクティーの暖色写真で温度を足す中間〜やや暖色

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#2B3364`	メイン地色の紺	45%	画素の実測
`on-primary`	`#EEF2F9`	紺地上の白文字	4%	画素の実測
`secondary`	`#E6D1B2`	ミルクベージュの価格セクション地	15%	画素の実測
`text`	`#3D310F`	ベージュ地上の焦げ茶見出し	1%	画素の実測
`cta`	`#F6FDFD`	白いピル型ボタン面	1%	画素の実測
`on-cta`	`#1A1F34`	ボタン文字・矢印	0%	画素の主要色に補正
`marker`	`#F4E46B`	キーワードの黄色マーカー	0%	画素の実測
`surface`	`#E9EAEE`	成分表カード地	13%	画素の実測
`background-alt`	`#FAFBFC`	成分表の交互行の白	4%	画素の実測
`background`	`#FFFFFF`	フッター地の白	8%	画素の実測
`text-body`	`#393A3D`	成分表の本文文字	1%	画素の実測
`accent-1`	`#565E88`	背景に敷く半透明の大英字	1%	画素の実測
`line`	`#C8CBDA`	紺地上の細い区切り線	0%	推定

地はほぼ紺で通し、明るい面は価格セクションのベージュだけにする
紺地の文字は白。ベージュ地の文字は焦げ茶にする
黄色マーカーはキーワード 1 か所だけに使う
ボタンは白のピル型。紺地でもベージュ地でも同じ形で浮かせる
装飾の大英字は紺より少し明るいトーンにし、背景になじませる
成分表は薄グレーのカードに白とグレーの交互行を敷く

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV と区切りに入る大英字	欧文サンセリフ	Bebas Neue	400	96px	1.0	0.02em
`headline-lg`	商品名見出し（ベージュ地）	欧文サンセリフ	Oswald	600	44px	1.1	0.02em
`headline-md`	数値訴求の見出し（大きな数字＋和文）	ゴシック	Noto Sans JP	700	36px	1.3	0.08em
`headline-sm`	縦書きのキャッチ・縦書き見出し	ゴシック	Zen Kaku Gothic New	500	26px	1.6	0.15em
`body-lg`	紺地のリード文（一部の語を大きくして強調）	ゴシック	Noto Sans JP	500	14px	2.3	0.15em
`body-md`	成分表・原材料の本文	ゴシック	Noto Sans JP	400	12px	1.8	0.03em
`accent`	価格の数字	欧文サンセリフ	Lato	700	36px	1.2	0.0em
`label-button`	ボタンの英字ラベル	欧文セリフ	Playfair Display	700	17px	1.2	0.06em

大英字は縦長の細いサンセリフで、画面幅いっぱいに置く
和文本文は字間を広め（0.15em）にし、行間 2 以上でゆったり組む
リード文では大事な語だけ 1.3 倍の大きさにする
キャッチは縦書きにし、横に大英字を縦向きで添える
数値は和文の約 1.5 倍の太字欧文にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム
本文ブロックの幅: 画面幅の約 82%
余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
写真は画面幅いっぱいか左右にはみ出させる
本文は左寄せで、左右に約 9% の余白をとる
見出しの下に右へ伸びる細い線を引いて区切る
装飾の英字を画面の端で縦向きに切って置く
成分表カードは左右 24px 内側に置く

Elevation & Depth

ボタンは白地に紺の細い枠線を入れ、下に柔らかい影を付ける
商品パッケージには落ち影を付けて浮かせる
カードには影を付けず、色の差だけで分ける

Shapes

角丸: 小 4px ／中 12px ／大 16px。ボタンはピル型。
写真の切り抜き: 液体・グラス・パッケージは背景を抜いた切り抜き。しぶきは画面外へはみ出させる
セクション境界: ベージュ面は上下を大きな楕円の弧で切り、紺地に浮かぶ形にする
直線の帯は使わず、弧と切り抜きで動きを出す
ボタンは二重線風のピル型にし、右端に細い山形の矢印を置く
成分表カードの角丸は 12〜16px

Components

白ピルボタン（button-primary）: 白地に紺の細い枠のピル型ボタン。中央にセリフ体の英字ラベル、右端に細い矢印、下に影
大英字ヒーロー（hero-display）: グラス写真の上下に、画面幅いっぱいの白い大英字を重ねる
縦書きキャッチ（vertical-copy）: 白の縦書き 2 行のキャッチと、半透明の縦向き英字を並べる
黄色マーカー（marker-highlight）: キーワードを黄色のベタ面で囲み、紺の文字で載せる
数値見出し＋下線（stat-heading）: 縦書きの項目名の横に大きな数字の見出しを置き、下に細い線を右端まで引く
価格ブロック（price-block）: ベージュの弧の面に、英字の商品名・パッケージ・大きな価格・ボタンを縦に並べる
成分表カード（nutrition-card）: 角丸のグレーカード。上に原材料の文章、下に白とグレーの交互行で 2 列の表
白フッター（footer-nav）: 小さな英字ナビを 4 列、その下に SNS アイコン、規約リンク、ロゴ、コピーライト

Do's and Don'ts

Do - 紺の地を基本にし、明るい面は 1 か所に絞る - 液体のしぶきや注ぐ瞬間の写真でシズル感を出す - 大英字は画面の端まで大きく置く - 本文は字間を広くとり、短い行で余白を多めにする - どのボタンも同じ白ピル型にそろえる

Don't - 赤や蛍光色の派手な CTA にしない - 四角い帯の見出しや吹き出しを多用しない - 写真を四角い枠に収めない - 太い角ゴシックの和文見出しをたくさん並べない - マーカーを何か所にも使わない

Page Structure

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

ファーストビュー（味と商品を一目で伝える）: 紺の地に、注がれるグラスとパッケージの写真。上下に白の大英字を置き、白ピルボタンを添える
キャッチコピー（ありきたりな飲み物との違いを印象づける）: 白の縦書き 2 行と、半透明の縦向き英字。下にミルクのしぶき写真
コンセプト（味へのこだわりを語る）: 字間の広い白い本文を左寄せで置き、強調語を大きくし、1 語に黄色マーカーを引く
特長（数値）（タンパク質量を示す）: 俯瞰のグラス写真の下に、縦書きの項目名と大きな数値の見出しを置き、下線と説明文を続ける
特長（容量）（試しやすさを伝える）: パッケージとミルクのしぶき、縦の英字。数値見出しと下線、短い説明文
価格・購入（価格を示して購入へ誘導する）: 楕円弧のベージュ面。英字の商品名、パッケージ、大きな価格、白ピルボタン。茶葉の乗ったスプーン写真を添える
成分・原材料（安心材料を細かく示す）: 白の大英字見出しの下に角丸グレーカード。原材料の文章と、交互の色の栄養成分表
ブランドロゴ・フッター（ブランドを記憶させ、関連ページへ案内する）: 紺地に白のロゴ。その下に白地のフッター（英字ナビ、SNS、規約、コピーライト）

Imagery

グラスに注ぐ瞬間やミルクが渦巻く様子を高速シャッターで撮り、背景を抜く
しぶきやミルクの帯を画面の端から斜めに流し込む
黒いマットなパッケージを正面から撮り、影を付けて置く
茶葉やスプーンなど素材の写真を小物として添える
背景は無地の紺かベージュにし、柄やテクスチャは入れない
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC では紺の地を全幅に敷き、本文は中央の 1000px 前後に収める
FV は左に写真、右に大英字と縦書きコピーを置く 2 カラムにしてもよい
数値の特長は写真と文を左右交互に並べる
成分表カードは最大 720px で中央に置く
大英字は vw 単位で画面幅に合わせて大きくする

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: Navy and Milk Beige Flavor Protein LP
description: 深い紺の地に、シズル感のあるミルクティー写真と白い細長サンセリフの大きな英字を重ねた、ドリンク系プロテインの単品 LP。途中にミルクベージュの円弧セクションを挟んで価格を見せ、最後は成分表カードで締める。
colors:
  primary: '#2B3364'
  on-primary: '#EEF2F9'
  secondary: '#E6D1B2'
  text: '#3D310F'
  cta: '#F6FDFD'
  on-cta: '#1A1F34'
  marker: '#F4E46B'
  surface: '#E9EAEE'
  background-alt: '#FAFBFC'
  background: '#FFFFFF'
  text-body: '#393A3D'
  accent-1: '#565E88'
  line: '#C8CBDA'
typography:
  display:
    fontFamily: Bebas Neue
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Oswald
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.15em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 2.3
    letterSpacing: 0.15em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  accent:
    fontFamily: Lato
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.2
  label-button:
    fontFamily: Playfair Display
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.06em
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 62px
  hero-display:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 700px
  vertical-copy:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    height: 300px
  marker-highlight:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.primary}'
    typography: '{typography.body-lg}'
    height: 28px
  stat-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 80px
  price-block:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 800px
  nutrition-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 1400px
  footer-nav:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    height: 400px
---

# DESIGN.md — 紺×ミルクベージュのフレーバープロテイン LP（Navy and Milk Beige Flavor Protein LP）

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

## Overview

- **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、クール・先進的、力強い・インパクト
- **キーワード**: 深い紺・ミルクティー色・液体のシズル・細長い大英字・縦書きコピー・余白多め
- **地の質感**: マットな紺の単色地に、光沢ある液体写真と飛び散るしぶきを切り抜いて重ねる
- **形**: ピル型の白いボタン、大きな楕円弧で切り抜いたベージュ面、角丸の成分表カード
- **温度感**: 紺で冷たく締め、ミルクティーの暖色写真で温度を足す中間〜やや暖色

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2B3364` | メイン地色の紺 | 45% | 画素の実測 |
| `on-primary` | `#EEF2F9` | 紺地上の白文字 | 4% | 画素の実測 |
| `secondary` | `#E6D1B2` | ミルクベージュの価格セクション地 | 15% | 画素の実測 |
| `text` | `#3D310F` | ベージュ地上の焦げ茶見出し | 1% | 画素の実測 |
| `cta` | `#F6FDFD` | 白いピル型ボタン面 | 1% | 画素の実測 |
| `on-cta` | `#1A1F34` | ボタン文字・矢印 | 0% | 画素の主要色に補正 |
| `marker` | `#F4E46B` | キーワードの黄色マーカー | 0% | 画素の実測 |
| `surface` | `#E9EAEE` | 成分表カード地 | 13% | 画素の実測 |
| `background-alt` | `#FAFBFC` | 成分表の交互行の白 | 4% | 画素の実測 |
| `background` | `#FFFFFF` | フッター地の白 | 8% | 画素の実測 |
| `text-body` | `#393A3D` | 成分表の本文文字 | 1% | 画素の実測 |
| `accent-1` | `#565E88` | 背景に敷く半透明の大英字 | 1% | 画素の実測 |
| `line` | `#C8CBDA` | 紺地上の細い区切り線 | 0% | 推定 |

- 地はほぼ紺で通し、明るい面は価格セクションのベージュだけにする
- 紺地の文字は白。ベージュ地の文字は焦げ茶にする
- 黄色マーカーはキーワード 1 か所だけに使う
- ボタンは白のピル型。紺地でもベージュ地でも同じ形で浮かせる
- 装飾の大英字は紺より少し明るいトーンにし、背景になじませる
- 成分表は薄グレーのカードに白とグレーの交互行を敷く

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV と区切りに入る大英字 | 欧文サンセリフ | Bebas Neue | 400 | 96px | 1.0 | 0.02em |
| `headline-lg` | 商品名見出し（ベージュ地） | 欧文サンセリフ | Oswald | 600 | 44px | 1.1 | 0.02em |
| `headline-md` | 数値訴求の見出し（大きな数字＋和文） | ゴシック | Noto Sans JP | 700 | 36px | 1.3 | 0.08em |
| `headline-sm` | 縦書きのキャッチ・縦書き見出し | ゴシック | Zen Kaku Gothic New | 500 | 26px | 1.6 | 0.15em |
| `body-lg` | 紺地のリード文（一部の語を大きくして強調） | ゴシック | Noto Sans JP | 500 | 14px | 2.3 | 0.15em |
| `body-md` | 成分表・原材料の本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.03em |
| `accent` | 価格の数字 | 欧文サンセリフ | Lato | 700 | 36px | 1.2 | 0.0em |
| `label-button` | ボタンの英字ラベル | 欧文セリフ | Playfair Display | 700 | 17px | 1.2 | 0.06em |

- 大英字は縦長の細いサンセリフで、画面幅いっぱいに置く
- 和文本文は字間を広め（0.15em）にし、行間 2 以上でゆったり組む
- リード文では大事な語だけ 1.3 倍の大きさにする
- キャッチは縦書きにし、横に大英字を縦向きで添える
- 数値は和文の約 1.5 倍の太字欧文にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 写真は画面幅いっぱいか左右にはみ出させる
- 本文は左寄せで、左右に約 9% の余白をとる
- 見出しの下に右へ伸びる細い線を引いて区切る
- 装飾の英字を画面の端で縦向きに切って置く
- 成分表カードは左右 24px 内側に置く

## Elevation & Depth

- ボタンは白地に紺の細い枠線を入れ、下に柔らかい影を付ける
- 商品パッケージには落ち影を付けて浮かせる
- カードには影を付けず、色の差だけで分ける

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 液体・グラス・パッケージは背景を抜いた切り抜き。しぶきは画面外へはみ出させる
- **セクション境界**: ベージュ面は上下を大きな楕円の弧で切り、紺地に浮かぶ形にする
- 直線の帯は使わず、弧と切り抜きで動きを出す
- ボタンは二重線風のピル型にし、右端に細い山形の矢印を置く
- 成分表カードの角丸は 12〜16px

## Components

- **白ピルボタン**（`button-primary`）: 白地に紺の細い枠のピル型ボタン。中央にセリフ体の英字ラベル、右端に細い矢印、下に影
- **大英字ヒーロー**（`hero-display`）: グラス写真の上下に、画面幅いっぱいの白い大英字を重ねる
- **縦書きキャッチ**（`vertical-copy`）: 白の縦書き 2 行のキャッチと、半透明の縦向き英字を並べる
- **黄色マーカー**（`marker-highlight`）: キーワードを黄色のベタ面で囲み、紺の文字で載せる
- **数値見出し＋下線**（`stat-heading`）: 縦書きの項目名の横に大きな数字の見出しを置き、下に細い線を右端まで引く
- **価格ブロック**（`price-block`）: ベージュの弧の面に、英字の商品名・パッケージ・大きな価格・ボタンを縦に並べる
- **成分表カード**（`nutrition-card`）: 角丸のグレーカード。上に原材料の文章、下に白とグレーの交互行で 2 列の表
- **白フッター**（`footer-nav`）: 小さな英字ナビを 4 列、その下に SNS アイコン、規約リンク、ロゴ、コピーライト

## Do's and Don'ts

**Do**
- 紺の地を基本にし、明るい面は 1 か所に絞る
- 液体のしぶきや注ぐ瞬間の写真でシズル感を出す
- 大英字は画面の端まで大きく置く
- 本文は字間を広くとり、短い行で余白を多めにする
- どのボタンも同じ白ピル型にそろえる

**Don't**
- 赤や蛍光色の派手な CTA にしない
- 四角い帯の見出しや吹き出しを多用しない
- 写真を四角い枠に収めない
- 太い角ゴシックの和文見出しをたくさん並べない
- マーカーを何か所にも使わない

## Page Structure

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

1. **ファーストビュー**（味と商品を一目で伝える）: 紺の地に、注がれるグラスとパッケージの写真。上下に白の大英字を置き、白ピルボタンを添える
2. **キャッチコピー**（ありきたりな飲み物との違いを印象づける）: 白の縦書き 2 行と、半透明の縦向き英字。下にミルクのしぶき写真
3. **コンセプト**（味へのこだわりを語る）: 字間の広い白い本文を左寄せで置き、強調語を大きくし、1 語に黄色マーカーを引く
4. **特長（数値）**（タンパク質量を示す）: 俯瞰のグラス写真の下に、縦書きの項目名と大きな数値の見出しを置き、下線と説明文を続ける
5. **特長（容量）**（試しやすさを伝える）: パッケージとミルクのしぶき、縦の英字。数値見出しと下線、短い説明文
6. **価格・購入**（価格を示して購入へ誘導する）: 楕円弧のベージュ面。英字の商品名、パッケージ、大きな価格、白ピルボタン。茶葉の乗ったスプーン写真を添える
7. **成分・原材料**（安心材料を細かく示す）: 白の大英字見出しの下に角丸グレーカード。原材料の文章と、交互の色の栄養成分表
8. **ブランドロゴ・フッター**（ブランドを記憶させ、関連ページへ案内する）: 紺地に白のロゴ。その下に白地のフッター（英字ナビ、SNS、規約、コピーライト）

## Imagery

- グラスに注ぐ瞬間やミルクが渦巻く様子を高速シャッターで撮り、背景を抜く
- しぶきやミルクの帯を画面の端から斜めに流し込む
- 黒いマットなパッケージを正面から撮り、影を付けて置く
- 茶葉やスプーンなど素材の写真を小物として添える
- 背景は無地の紺かベージュにし、柄やテクスチャは入れない
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では紺の地を全幅に敷き、本文は中央の 1000px 前後に収める
- FV は左に写真、右に大英字と縦書きコピーを置く 2 カラムにしてもよい
- 数値の特長は写真と文を左右交互に並べる
- 成分表カードは最大 720px で中央に置く
- 大英字は vw 単位で画面幅に合わせて大きくする

## 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-09dc16d6`（元 LP の URL から採番）
- **元 LP**: https://ultora.co.jp/lp?u=new-milktea?sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中
- **生成**: 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

健康食品・サプリメントピンク×抹茶グリーンのイラスト系スムージー LPSoft Pink and Matcha Green Illustrated Smoothie LP 健康食品・サプリメントマゼンタ×黒金の訴求型ボディサプリ LPHot Pink and Gold Body Supplement Sales LP 健康食品・サプリメント若草緑×オレンジの置き換えスムージー LPFresh Green Smoothie Diet LP 健康食品・サプリメントクリーム×テラコッタの子ども向け栄養食品 LPWarm Cream Family Nutrition LP 健康食品・サプリメント朱色×栄養素別カラーの女性向けプロテインLPWarm Orange Multi-Color Nutrition Supplement LP 健康食品・サプリメント淡いセージ緑と手書き感の家族向け青汁 LPSoft Sage Family Green Juice LP