---
version: alpha
name: Watercolor Night Sky Wellness Drink LP
description: 水彩の空色グラデーションと雲・月・星のモチーフで、夜の休息を連想させる乳酸菌飲料 LP。藍色のパネルに月色の大きな数字で成分量を見せる。ランキング実績は金と赤、悩みのパートはグレーの質感地に切り替えて、流れに強弱をつけている。
colors:
  primary: '#2666A2'
  secondary: '#5083B2'
  background: '#DEF2FD'
  background-alt: '#85C5E9'
  tint-1: '#D5E6F3'
  accent-1: '#F8E384'
  tint-2: '#FFF4CB'
  dark-section: '#4B4B4B'
  accent-2: '#BB1202'
  accent-3: '#783A2F'
  text: '#1E2338'
  text-body: '#196392'
  on-dark: '#F6FCFE'
  surface: '#FCFEFD'
  secondary-accessible: '#4877A3'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Klee One
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  ingredient-tile:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    rounded: '{rounded.sm}'
    height: 100px
  ingredient-circle:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 150px
  ribbon-band:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 44px
  worry-bubble:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 150px
  pill-label:
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 32px
  strain-chip:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 34px
  ranking-badge:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 160px
  info-box:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 90px
---

# DESIGN.md — 水彩の夜空ブルー×月黄色の睡眠系サプリ LP（Watercolor Night Sky Wellness Drink LP）

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

## Overview

- **業種**: 健康食品・サプリメント ／ **雰囲気**: やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
- **キーワード**: 水彩の空・雲の境界・月と星・藍色パネル・月色の数字・夜の休息
- **地の質感**: 水彩のにじみ、紙のざらつき、星空のきらめき
- **形**: もこもこの雲形でセクションを区切る。角丸は控えめな長方形パネルと円形バッジ
- **温度感**: 涼しげな青を地にして、月の黄色で温かみを添える

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2666A2` | 藍色の成分パネル・見出し帯 | 6% | 画素の主要色に補正 |
| `secondary` | `#5083B2` | くすみ青のパネル・円形バッジ | 10% | 画素の主要色に補正 |
| `background` | `#DEF2FD` | ごく淡い水色の地 | 12% | 画素の実測 |
| `background-alt` | `#85C5E9` | 水彩の空色の地 | 12% | 画素の実測 |
| `tint-1` | `#D5E6F3` | 淡い青のカード地 | 7% | 画素の主要色に補正 |
| `accent-1` | `#F8E384` | 月色の数字・星・帯 | 6% | 画素の主要色に補正 |
| `tint-2` | `#FFF4CB` | クリーム色の実績セクション地 | 5% | 画素の実測 |
| `dark-section` | `#4B4B4B` | 悩み提起のグレー質感地 | 7% | 画素の実測 |
| `accent-2` | `#BB1202` | ランキング訴求の赤帯 | 2% | 画素の実測 |
| `accent-3` | `#783A2F` | 受賞バナーの金茶 | 5% | 画素の主要色に補正 |
| `text` | `#1E2338` | 見出しの紺色文字 | 2% | 画素の主要色に補正 |
| `text-body` | `#196392` | 本文の青文字 | 2% | 画素の実測 |
| `on-dark` | `#F6FCFE` | 濃色パネル上の白文字 | 2% | 画素の主要色に補正 |
| `surface` | `#FCFEFD` | 白い説明ボックス | 5% | 画素の実測 |
| `secondary-accessible` | `#4877A3` | AA を満たす補正値（計算） |  | 計算 |

- 基本は淡い水色から空色のグラデーション地。雲形で区切って明度を切り替える。
- 成分量やデータは藍色・くすみ青のパネルに、月黄色の大きな数字で載せる。
- 白文字の大見出しは空色の地に置き、うっすら発光する影を付ける。
- 実績・ランキングは金と赤、販売数はクリーム色の地に限定し、ほかの青い世界と分ける。
- 悩みの提起だけはグレーの質感地にし、青い円の吹き出しで暗さを抑える。
- 黄色は数字・星・リボン帯だけに使い、面積を広げない。
- `ingredient-circle` は文字 `#F6FCFE` × 背景 `#5083B2` のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#4877A3`、4.56:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 成分量などの巨大数字 | 明朝 | Shippori Mincho | 700 | 44px | 1.1 | 0.0em |
| `headline-lg` | セクションの大見出し（白・発光） | 明朝 | Shippori Mincho | 700 | 28px | 1.4 | 0.08em |
| `headline-md` | 成分名・中見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.1em |
| `headline-sm` | リード見出し・帯の中の文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.1em |
| `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.05em |
| `note` | 注釈・算出根拠 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | 吹き出しの手書き風コメント | 手書き・筆 | Klee One | 600 | 18px | 1.5 | 0.05em |

- 数字は明朝で大きく、単位は小さく添えてサイズに差をつける。
- 見出しでは助詞を一回り小さくし、キーワードを目立たせる。
- 大見出しは字間を広めにし、白文字に青い光彩を付ける。
- 悩みの吹き出しや写真への添え書きには手書き風フォントを使う。
- 注釈は ※ 付きの小さい文字で、パネルの右下に置く。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。成分パネルは 2〜3 列のグリッド
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 中央揃えを基本にする。
- 成分量は 2 列 + 3 列のタイルで並べる。
- 主要成分 4 つは中央の円を囲むように配置する。
- 悩みは写真と円形の吹き出しを左右交互に置く。
- セクション間は下向き矢印でつなぎ、ストーリーの流れを出す。

## Elevation & Depth

- パネルは影なしのフラットにし、半透明の青を重ねる。
- 大見出しの白文字には柔らかい光彩を付ける。
- 商品パッケージには薄いドロップシャドウを付けて浮かせる。

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 人物は角丸の長方形か正円で切り抜く。商品は背景なしの切り抜き
- **セクション境界**: 水彩の雲形の波線と、和紙の破れ風の境界
- 成分パネルは角丸 4px 程度の長方形。
- 悩みの吹き出しは水彩の円にする。
- リボン帯は両端を切り欠いた黄色の帯にする。
- 見出し帯は片側を三角に切った旗形も使う。

## Components

- **成分量パネル**（`ingredient-tile`）: 藍色の地に、成分名を白で、量を月黄色の明朝で大きく載せる
- **成分の円形バッジ**（`ingredient-circle`）: くすみ青の正円に成分名・量・一言説明を入れ、中央の白いリングの周りに配置する
- **黄色リボン帯**（`ribbon-band`）: 両端を切り欠いた黄色の帯に、紺の太字でお試しの訴求を入れる
- **悩みの水彩吹き出し**（`worry-bubble`）: 青い水彩の円に白い手書き文字で悩みを書き、写真の横に重ねる
- **線囲みのリード見出し**（`pill-label`）: 細い線のピル枠や斜線で挟んで、大見出しの前置きを置く
- **菌種名チップ**（`strain-chip`）: 藍色の横長の帯に、菌の名前を白い明朝で 2 列に並べる
- **受賞メダル**（`ranking-badge`）: 赤い円と金のメダルを、きらめく金背景に置く
- **子供向けの補足ボックス**（`info-box`）: クリーム色の角丸ボックスに、写真と波線下線付きの青文字を入れる

## Do's and Don'ts

**Do**
- 空色の水彩グラデーションと雲形の区切りを、ページ全体で続ける。
- 数字は月黄色の明朝で大きく見せる。
- 星と三日月を余白に散らして、夜の世界観を保つ。
- パッケージ写真を何度も登場させ、記憶に残す。
- 注釈は小さく、パネルのそばに添える。

**Don't**
- 青の地に原色の赤やオレンジを広く使わない（ランキング部分は除く）。
- 角張った直線の区切り線は使わない。
- 数字をゴシックの細字にしない。
- 白地だけのフラットなセクションを続けない。
- 黄色を背景の大きな面に使わない。

## Page Structure

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

1. **ファーストビュー**（休息の世界観と商品の印象を伝える）: 大きな水彩の満月に縦書き風のコピーを載せ、雲の上で眠る人物写真とパッケージを重ねる
2. **成分量の要約**（主要成分の量をひと目で見せる）: 白い光彩付きの見出しの下に、藍色パネルを 2 列 + 3 列で並べる
3. **ランキング実績**（人気を示して信頼を得る）: 赤帯のお礼見出し、金のきらめく背景、メダル、ランキングのキャプチャ
4. **累計販売数**（シリーズ全体の実績を見せる）: クリーム色の地に大きな黄色の円と黒の大きな数字を置き、シリーズ商品を 4 つ並べる
5. **悩みの提起**（読み手の不調に共感する）: グレーの質感地に旗形の青い見出しを置き、写真と水彩の吹き出しを交互に並べる
6. **解決の提示**（商品を答えとして示す）: 斜線で挟んだ見出し、パッケージ、黄色リボン帯
7. **成分の解説**（成分ごとの役割を説明する）: 中央の白いリングの周りに円形バッジを 4 つ置き、素材写真を添える
8. **乳酸菌の解説**（整える仕組みを伝える）: 青い帯見出しの白いボックスに、黄色マーカー付きの大きな語とイラストを入れる
9. **イメージ訴求**（飲んだ後の前向きな姿を見せる）: 伸びをする人物の写真に、青い縦組み風のコピーを載せる
10. **数値の比較**（含有量の多さを実感させる）: 藍色パネルの上部に写真、下部に巨大な黄色数字と食品の換算を置く
11. **菌種の一覧**（配合内容を見せる）: イラストの円アイコン、下線付き見出し、菌種名チップのグリッド
12. **飲み方**（手軽さを伝える）: 手順写真、円形の人物写真、箇条書き、クリーム色の補足ボックス
13. **品質へのこだわり**（安心感を与える）: 濃い青の地に白い見出しを置き、研究者の写真と製造の説明を載せる

## Imagery

- 水彩でにじませた空・雲・満月の背景にする。
- 人物は白い服で、明るく自然光の中で撮る。眠る・飲む・伸びをするといった穏やかな動作にする。
- 黄色の星と三日月を、手描き風のアイコンとして散らす。
- 素材写真は白背景の切り抜きで、山盛りに見せる。
- イラストは線画に淡い塗りの、やさしいタッチにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- 元は縦長の 1 カラム画像 LP。PC では中央 750px 前後で固定し、左右は空色で塗り延ばす。
- SP では成分パネルの 2 列 + 3 列の構成を保ち、数字を 40px 前後にする。
- 円形の成分配置は SP でも維持する。狭い場合は 2×2 のグリッドにする。
- 雲形の区切りは横幅いっぱいに伸ばす。

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