---
version: alpha
name: Magenta Gold Premium Beauty Drink LP
description: 深いマゼンタのグラデーションと金色の明朝見出しを組み合わせた、大人の女性向け美容ドリンクの LP です。白とごく薄いラベンダーグレーを地にして、金線の花のイラストやゆるい波形の区切りで高級感と柔らかさを出しています。ボタンは白地に細い枠線を付けた控えめな作りで、価格ブロックとタブだけをマゼンタで強めています。
colors:
  primary: '#C10D53'
  secondary: '#AB0D61'
  accent-1: '#AB995C'
  accent-2: '#DEC49F'
  accent-3: '#FEF38B'
  background: '#FFFFFF'
  background-alt: '#FDFDFD'
  surface: '#FEFEFC'
  text: '#222222'
  text-muted: '#838383'
  line: '#999999'
  marker: '#8C0A4B'
  on-primary: '#FFFFFF'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Playfair Display
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.03em
rounded:
  sm: 0px
  md: 4px
  lg: 9999px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 80px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 36px
  badge-medal:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 90px
  pill-label:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 40px
  ingredient-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    height: 90px
  voice-bubble:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 140px
  flavor-tab:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    height: 56px
  price-plan:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    height: 260px
  faq-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 62px
---

# DESIGN.md — マゼンタ×金の上品な美容ドリンク LP（Magenta Gold Premium Beauty Drink LP）

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

## Overview

- **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、やさしい・柔らかい、信頼・誠実
- **キーワード**: マゼンタグラデーション・金色の明朝見出し・金線の花・波形の区切り・黄金色の液体・細枠ボタン
- **地の質感**: 白〜薄いラベンダーグレーの地に、絹のような光沢グラデーションと金色のリボン状の曲線を重ねる
- **形**: 直線的な細枠ボックスと、円形の写真・吹き出しを組み合わせる。セクションの境目はゆるい波形
- **温度感**: 華やかで少し暖かい（マゼンタ＋金）

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#C10D53` | ブランドのマゼンタ（ファーストビューの地、価格見出しの帯） | 7% | 画素の主要色に補正 |
| `secondary` | `#AB0D61` | 深いワインマゼンタ（グラデーションの暗い側） | 4% | 画素の実測 |
| `accent-1` | `#AB995C` | 金色の見出し文字 | 2% | 画素の実測 |
| `accent-2` | `#DEC49F` | シャンパンゴールドの線・メダル | 4% | 画素の主要色に補正 |
| `accent-3` | `#FEF38B` | 黄金色の液体写真の黄色 | 4% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 42% | 画素の実測 |
| `background-alt` | `#FDFDFD` | 薄いラベンダーグレーのセクション地 | 7% | 画素の実測 |
| `surface` | `#FEFEFC` | ファーストビュー上の白いピル型ラベル | 1% | 画素の実測 |
| `text` | `#222222` | 本文・小見出しの黒文字 | 3% | 推定 |
| `text-muted` | `#838383` | 注釈のグレー文字 | 1% | 画素の実測 |
| `line` | `#999999` | ボタンの細い枠線 | 0% | 推定 |
| `marker` | `#8C0A4B` | 強調文字・グラフの点・Q マーク・吹き出し枠 | 0% | 画素の実測 |
| `on-primary` | `#FFFFFF` | マゼンタ地の上の白文字 | 0% | 画素の主要色に補正 |

- 地は白と薄いラベンダーグレーを交互に使い、マゼンタのグラデーション地はファーストビューと最後の CTA だけに使う。
- 大見出しはすべて金色の明朝にする。黒は小見出しと本文だけに使う。
- マゼンタは価格の見出し帯、選択中のタブ、強調文字、Q マーク、外枠に絞って使う。
- 金色は線・メダル・花の線画・波形の区切りに使い、面を塗らない。
- ボタンは白地にグレーの細枠、文字は黒とし、マゼンタで塗りつぶさない。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチコピー（金色） | 明朝 | Shippori Mincho | 500 | 52px | 1.3 | 0.05em |
| `headline-lg` | セクションの大見出し（金色・やや斜体風） | 明朝 | Shippori Mincho | 500 | 28px | 1.5 | 0.04em |
| `headline-md` | 成分名の見出し（金色） | 明朝 | Noto Serif JP | 500 | 22px | 1.4 | 0.03em |
| `headline-sm` | 成分見出しの上に置く黒い小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.02em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em |
| `note` | ※付きの注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em |
| `accent` | 成分名の英字ラベル（マゼンタ） | 欧文スクリプト | Playfair Display | 400 | 13px | 1.2 | 0.0em |
| `label-button` | 細枠ボタンのラベル | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.03em |

- 大見出しは金色の明朝を中央揃えにし、2〜3 行に改行する。
- 成分ブロックは、英字のスクリプトラベル → 黒いゴシックの小見出し → 金色の明朝の成分名、の 3 段で重ねる。
- 価格の数字は太いサンセリフ（Barlow など）で約 40px、「円」は数字の半分ほどの大きさにする。
- 強調したい語句はマゼンタの文字色だけで示し、マーカーは引かない。
- 注釈は 9〜10px のグレーで、関係するブロックのすぐ下に置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。価格エリアの切り替えタブだけ 2 列
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
- 見出し・本文・ボタンはすべて中央揃えにする（本文は左揃えでもよい）。
- 成分ブロックは、見出し → 本文 → 写真 → 図 → 細枠ボタンの順で縦に積む。
- 写真は本文と同じ幅（約 84%）で四角く置く。
- 価格エリアは太いマゼンタ枠の箱で囲み、プランを縦に並べる。
- 大きなセクションの間は 80px 前後空けて、ゆとりを持たせる。

## Elevation & Depth

- 影はほとんど使わない。
- 円形の吹き出しにだけ、ごく薄いピンクのぼかし影を付ける。
- ファーストビューの白いピル型ラベルには、ほんの少しだけ影を付ける。

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 9999px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は四角のまま使う。成分の写真や吹き出しは正円で切り抜く。
- **セクション境界**: 金色の細い線が付いた、ゆるい波形の区切り
- ボタン・FAQ・価格の箱は角丸なしの直角にする。
- ファーストビューの成分ラベルだけはピル型にする。
- 実績の数値は金色の円形メダルで見せる。
- お客様の声は、マゼンタの細枠を付けた白い円形の吹き出しにする。

## Components

- **細枠ボタン**（`button-outline`）: 白地にグレーの 1px 枠を付け、右端に「>」を置く。詳細へのリンクや購入ボタンに共通で使う。
- **金メダル型の実績バッジ**（`badge-medal`）: 金色のグラデーションの円の中に、明朝の数値を入れる。3 つを横に並べる。
- **成分ラベル**（`pill-label`）: マゼンタ地の上に、白いピル型のラベルを 3 つ並べる。
- **成分の見出しセット**（`ingredient-heading`）: マゼンタの英字スクリプトに細い曲線を添え、黒の小見出し、金色の明朝の成分名を続ける。
- **円形のお客様の声**（`voice-bubble`）: マゼンタの細枠を付けた白い円の中に、短い感想と年代を書く。左右にずらして配置する。
- **味の切り替えタブ**（`flavor-tab`）: 選択中はマゼンタで塗り、白文字にする。選んでいない方は白地の細枠にする。
- **価格プランのブロック**（`price-plan`）: マゼンタの帯に白文字のプラン名、商品写真、割引率、大きな価格、送料の小箱を並べる。単発購入のプランはマゼンタの細枠の帯にする。
- **FAQ アコーディオン**（`faq-item`）: マゼンタの細枠の箱に、太字マゼンタの「Q.」、質問文、右端に「＋」を置く。

## Do's and Don'ts

**Do**
- 大見出しは必ず金色の明朝で、中央揃えにする。
- 白とラベンダーグレーの地を交互に使い、境目は金線付きの波形にする。
- 背景の隅に、金色の線画の花をうっすら散らす。
- 数値の根拠は※の注釈で、関係するブロックのすぐ下に添える。
- ボタンは控えめな細枠で統一する。

**Don't**
- ボタンをビビッドな色で塗りつぶしたり、ピル型にしたりしない。
- 金色以外の色で大見出しを書かない。
- マゼンタの面をページの途中で多用しない。
- 丸ゴシックやポップな書体を使わない。
- 濃い影や立体的な装飾を付けない。

## Page Structure

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

1. **ファーストビュー**（印象的なコピーで心をつかみ、実績で信頼を示す。）: マゼンタのグラデーション地に、金色の明朝の大きなコピー、金メダル 3 つ、商品ボトル、成分のピル型ラベル、注釈を置く。下端は金色の波形にする。
2. **購入バナー**（早い段階で購入への入口を用意する。）: マゼンタの横長バナーに、商品写真、短いコピー、白いボタンを並べる。
3. **コンセプト**（成分の組み合わせという価値を伝える。）: 白地に、金色の明朝の大見出しと短い本文を中央揃えで置く。
4. **成分の解説（3 つ）**（各成分の権威性と働きを説明する。）: 成分の見出しセット、本文、黄金色の液体の写真、グラフや図、細枠ボタンの順で、成分ごとに繰り返す。
5. **配合の説明**（独自の配合の全体像を見せる。）: ラベンダーグレーの地に、商品を中心として成分の円形写真を円周上に配置する。
6. **お客様の声**（満足度と実感で後押しする。）: 金色のリングで満足度の数値を見せ、まわりに円形の吹き出しを散らす。背景には英字ロゴを縦書きで薄く置く。
7. **フレーバーの紹介**（選ぶ楽しさを伝える。）: グリーン地とピンク地の写真で味を 2 つ縦に並べ、英字の味名を縦書きで重ねる。
8. **価格・購入**（プランを比べて購入してもらう。）: 味のタブを置き、マゼンタの太枠の箱の中にプランを縦に並べる。注釈と細枠の購入ボタンを添える。
9. **成分のまとめ**（成分を改めて覚えてもらう。）: 商品を中心にして、3 つの円を金線でつないだ図にする。
10. **ブランドのこだわり・評価**（企業の研究力と、モデルによる信頼感を伝える。）: 金色の明朝の見出しと、グラスの写真、白い服を着た女性たちの写真を組み合わせる。
11. **よくある質問**（購入前の不安を解消する。）: 金色の明朝の見出しの下に、マゼンタ細枠の FAQ を 3 つ並べる。
12. **最後の CTA**（最後にもう一度購入を促す。）: マゼンタのグラデーションの波形地に、商品、金色のコピー、白いボタンを置く。

## Imagery

- 黄金色の液体、気泡、滴の王冠をマクロで撮った明るい写真を使う。
- 商品のボトルは、背景を抜いた切り抜きで正面から見せる。
- 金色の細い線画で描いた花（桜や花びら）を、背景の隅に透かして置く。
- モデルは白い服を着た大人の女性たちで、白い背景に溶け込ませる。
- フレーバー写真はパステルの単色背景に、金のリボンとガラス玉を添えて撮る。
- グラフや図はマゼンタの点と細い線だけで、シンプルに描く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では上部にテキストだけのナビゲーションを横一列に並べる。
- PC のファーストビューは、左にコピー、右にメダルと商品を置く 2 カラムにする。
- PC の成分ブロックは、本文と写真の 2 カラム、または成分 2 つを横に並べる。
- PC の価格エリアは、プランを 2 列に並べる。
- PC のお客様の声は、満足度のリングの左右に吹き出しを配置する。
- PC でもコンテンツ幅は 960px 前後に抑え、余白を広く取る。

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