---
version: alpha
name: Mint Teal Gradient Night Supplement LP
description: ティールから黄緑へのグラデーション面と、白・薄グレーの地を交互に重ねた健康食品 LP。細い明朝寄りの軽いゴシック見出しに筆記体の英字を添えて、清潔さと上品さを出している。医師監修・数値・口コミで信頼を積み上げ、緑のピル型 CTA が付いたオファーカードを 3 回くり返す構成。
colors:
  primary: '#23C3BD'
  secondary: '#A8DCA0'
  cta: '#05C755'
  on-cta: '#FFFFFF'
  background: '#FEFEFF'
  background-alt: '#EEEEEE'
  tint-1: '#EDFCF9'
  dark-section: '#B5B5B5'
  text: '#4A4A4A'
  text-muted: '#8A8A8A'
  marker: '#DDE25C'
  line: '#D8DEDC'
  accent-1: '#CE9373'
  cta-accessible: '#03893A'
  primary-accessible: '#17827E'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0.12em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.08em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Dancing Script
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    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: 44px
  offer-card:
    textColor: '{colors.primary}'
    typography: '{typography.display}'
    rounded: '{rounded.md}'
    height: 340px
  badge-discount:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 80px
  heading-script:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 100px
  voice-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.lg}'
    height: 240px
  review-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 120px
  numbered-feature:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    height: 90px
  faq-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.body-lg}'
    height: 130px
---

# DESIGN.md — ミント×ティールのグラデ夜用サプリ LP（Mint Teal Gradient Night Supplement LP）

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

## Overview

- **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、上品・高級
- **キーワード**: ティールグラデ・医師監修・細字見出し・筆記体英字・白カード・夜の習慣
- **地の質感**: 透明感のあるグラデーションの面に、水泡（泡の玉）やタイル柄のうすい写真背景を重ねる。光が回ったソフトな質感。
- **形**: 角丸 12〜16px の白カード、ピル型 CTA、斜めのタブ、雲形の吹き出し、下向き矢印型の区切り。
- **温度感**: やや涼しめ。ミントグリーンで清涼感を出しつつ、白い余白でやさしく見せる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#23C3BD` | ブランドティール（強調文字・帯・タブ） | 8% | 画素の実測 |
| `secondary` | `#A8DCA0` | グラデーション終点の黄緑 | 6% | 推定 |
| `cta` | `#05C755` | 購入ボタンの緑 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 |
| `background` | `#FEFEFF` | 基本の地 | 28% | 画素の実測 |
| `background-alt` | `#EEEEEE` | 薄グレーの交互セクション地 | 14% | 画素の実測 |
| `tint-1` | `#EDFCF9` | 淡いミントの地 | 5% | 画素の実測 |
| `dark-section` | `#B5B5B5` | 悩み提起のグレー帯 | 2% | 画素の実測 |
| `text` | `#4A4A4A` | 見出し・本文の濃いグレー | 3% | 推定 |
| `text-muted` | `#8A8A8A` | 注釈の灰色 | 0% | 推定 |
| `marker` | `#DDE25C` | 黄色の帯・下線マーカー | 1% | 画素の実測 |
| `line` | `#D8DEDC` | 点線区切り・カード枠 | 0% | 画素の主要色に補正 |
| `accent-1` | `#CE9373` | SNS 動画エリアの暖色 | 6% | 画素の実測 |
| `cta-accessible` | `#03893A` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#17827E` | AA を満たす補正値（計算） |  | 計算 |

- 白と薄グレーのセクションを交互に置き、区切りを明確にする
- 見出し帯・オファー面にはティールから黄緑への斜めグラデーションを使う
- 本文で強調する語はティールの太字にする
- 黄色は『限定』帯と下線マーカーだけに使う
- 購入ボタンだけを鮮やかな緑にして、ティールと区別する
- 価格の数字はティールの特大文字、定価はグレーの取り消し線
- `button-primary` は文字 `#FFFFFF` × 背景 `#05C755` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#03893A`、4.52:1）を使う。
- `faq-item` は文字 `#23C3BD` × 背景 `#FEFEFF` のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#17827E`、4.6:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の縦書きコピー | ゴシック | Zen Kaku Gothic New | 700 | 40px | 1.2 | 0.05em |
| `headline-lg` | セクション見出し（細字） | ゴシック | Zen Kaku Gothic New | 300 | 32px | 1.4 | 0.12em |
| `headline-md` | 帯見出し・番号付き特長 | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em |
| `body-lg` | 点線区切りの中央そろえリード | ゴシック | Noto Sans JP | 500 | 17px | 2.0 | 0.08em |
| `body-md` | 本文・FAQ 回答 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | 見出し横に重ねる筆記体の英字 | 欧文スクリプト | Dancing Script | 400 | 34px | 1.0 | 0.0em |
| `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 700 | 16px | 1.0 | 0.05em |

- セクション見出しは細字・広めの字間で、静かに見せる
- 見出しの右下に、淡いティールの筆記体英字を半透明で重ねる
- リード文は中央そろえにし、行ごとに点線を引く
- 数値は欧文の細字で大きく、単位は小さく
- 強調はティールの太字か黄色の下線マーカー
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。2 枚並びの比較カードのみ 2 カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
- セクションの上下の余白は 60〜80px
- カードの左右は 20px あける
- オファーブロックは FV 直後・中盤・FAQ 後に同じ形で 3 回置く
- 口コミカードは左右に交互にずらす
- FAQ は Q を区切り線付きの見出しにし、回答を下に置く

## Elevation & Depth

- 影は基本的に使わず、フラットに作る
- カードは白地の面か、細い線の枠で区切る
- 浮き感を出すのは、透明な泡の装飾の重なりで

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 人物は背景を抜いてカードからはみ出させる。商品は白背景の切り抜きにする。
- **セクション境界**: 直線の切り替えが基本。下向き矢印（V字）と雲形のふくらみも使う
- 肩書きラベルは片側を斜めにカットしたティールのタブにする
- 割引バッジは波形（ギザ）の円にティールのグラデーション
- 医師監修バッジは吹き出し形

## Components

- **購入ボタン**（`button-primary`）: 横幅いっぱいの緑のピル型。右端に白い三角。
- **価格オファーカード**（`offer-card`）: グラデ地に白カードを載せる。上部に黄色の限定帯、中に商品写真・取り消し線の定価・特大価格・割引バッジ。
- **割引バッジ**（`badge-discount`）: 波形の円にティールのグラデ、白文字で大きく ％OFF。
- **英字添え見出し**（`heading-script`）: 細字の日本語見出しに、筆記体の英字を斜め下に重ねる。
- **インフルエンサー声カード**（`voice-card`）: 細い枠の角丸カードに人物の切り抜きを片側に配置。下端にティールの斜めタブで肩書きを置く。
- **口コミカード**（`review-card`）: 白カードにティールの丸いアイコンの線画イラスト。角を 1 か所斜めにカット。
- **番号付き成分**（`numbered-feature`）: 大きな斜体の細い番号と、ティール帯の白抜きの見出し、その下に説明文。
- **FAQ 項目**（`faq-item`）: Q はティール文字＋右端に▼、下にティールの線。回答は本文色。

## Do's and Don'ts

**Do**
- グラデーションは、ティールから黄緑への同じ組み合わせだけを使う
- 見出しは細字にして余白を広く取る
- 数値・監修・調査を根拠として目立たせる
- 注釈は※付きで小さく近くに添える
- オファーは同じデザインでくり返す

**Don't**
- 赤やオレンジの強い煽り色は使わない
- 見出しを極太にしすぎない
- 濃い影や立体的なボタンは使わない
- 黄色を広い面に使わない
- 写真を暗く落とさない（SNS 動画の部分は例外）

## Page Structure

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

1. **ファーストビュー**（効果のイメージと商品を一目で伝える）: 伸びをする人物の写真に、縦書きのティールの白抜きコピー。成分量を示す黄色の丸バッジ、監修の吹き出し、下部のグラデにロゴ。
2. **オファー**（初回価格で購入を促す）: グラデ地に特典の訴求、白カード、緑の CTA。
3. **医師監修**（専門家による信頼づけ）: グラデ背景に医師の切り抜き、白い枠のラベルで肩書き、白カードの解説文。
4. **専門家の声**（第三者の愛用を示す）: タイル柄の背景に声カードを 2 枚、左右交互に。
5. **調査データ**（継続しやすさを数値で示す）: 淡いミント地に大きな円グラフと特大の％、写真を角に添える。
6. **メディア掲載**（権威づけ）: 雑誌の表紙と記事を斜めに、ジグザグに配置。ティールのラベルで誌名を示す。
7. **SNS 動画**（使用シーンを見せる）: グレー地の見出しと、全幅の縦長動画。
8. **悩みの提起**（共感）: グレー帯の見出し、チェックボックス付きの 3 項目、雲形の吹き出しで原因を示す。
9. **解決策**（医師の回答）: グラデ地に吹き出しと医師の写真。
10. **成分解説・比較**（仕組みの理解）: 点線区切りのリード文と一覧カード、写真 2 枚を並べた比較と丸ラベル。
11. **選ばれる理由**（特長の訴求）: グラデの帯見出し、番号付きの成分、縦のティール帯、泡の装飾、V字の矢印。
12. **味・イメージ**（飲みやすさと情緒）: 果物の切り抜き、女性の写真に縦書きの白い帯コピー。
13. **口コミ**（一般ユーザーの評価）: グレー地にイラストアイコン付きの白カードを 3 枚。
14. **よくある質問・CTA・フッター**（不安の解消と最後の購入導線）: FAQ を 7 問、オファーの再掲、グレー地のテキストリンク。

## Imagery

- 人物は白・ベージュの部屋着で、自然光の明るい室内。背景を抜いて使う
- 商品はパステルミントのパッケージを白背景で撮る
- 透明な水泡やガラス玉を装飾として散らす
- 口コミのアイコンは、ティールの丸に描いた単線の人物イラスト
- 淡いタイル柄や、ぼかした光の写真をうすく敷く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は SP 幅（約 375px）のカラムを中央に置くだけ
- 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-d2a4008f`（元 LP の URL から採番）
- **元 LP**: https://sb-nomtan-eaa.service-info.jp/ab/ad_meta_01?utm_medium=paid&utm_id=120238159739120018_v2_s07&utm_content=120238460293940018&utm_term=120238159739210018&utm_campaign=120238159739120018&fbclid=PAaWdyZAQZKLJleHRuA2FlbQEwAGFkaWQBqyw-GyEe0nNydGMGYXBwX2l
- **解析に使った画像**: 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/）からご連絡ください。