---
version: alpha
name: Night Blue Misty Skincare LP
description: くすんだブルーグレーと淡い水色のグラデーション地に、白カードと細い欧文見出しを重ねた夜用スキンケアLP。半円・大きな角丸の青パネルで特長を番号付きで区切る。泡のような円形画像で成分を見せる。購入導線は黄色のピル型ボタンで目立たせる。
colors:
  primary: '#84A4BD'
  background: '#F4FCFE'
  background-alt: '#DBE5E7'
  surface: '#FEFFFF'
  secondary: '#C3D4E3'
  text: '#0F3048'
  dark-section: '#0A172D'
  accent-1: '#242426'
  cta: '#EAE442'
  on-cta: '#29292D'
  on-primary: '#FFFFFF'
  marker: '#D5D946'
  accent-2: '#F2C59E'
  line: '#2E4458'
  primary-accessible: '#527998'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.12em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.15em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.08em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.05em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
rounded:
  sm: 8px
  md: 16px
  lg: 120px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 90px
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: 50px
  worry-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 110px
  feature-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.lg}'
    height: 250px
  section-title:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 70px
  ingredient-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 150px
  product-capsule:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 900px
  badge-dark:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 24px
  icon-circle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 70px
  diagram-arrow-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 24px
---

# DESIGN.md — 夜空ブルーグレーと霧の透明感スキンケアLP（Night Blue Misty Skincare LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、清潔・爽やか、やさしい・柔らかい、クール・先進的
- **キーワード**: 夜・透明感・ブルーグレー・霧・泡・静けさ
- **地の質感**: 白と水色がにじむ霧のようなグラデーション。泡のように光る円や、ぼかした光を重ねる。
- **形**: 大きな角丸のパネルと、片側が半円のパネル。円形の画像とアイコン、ピル型ボタン。
- **温度感**: 寒色寄りで落ち着いた温度。黄色のCTAだけが暖色のアクセントになる。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#84A4BD` | 特長パネル・悩み地のブルーグレー | 9% | 画素の実測 |
| `background` | `#F4FCFE` | メインの淡い水色地 | 18% | 画素の実測 |
| `background-alt` | `#DBE5E7` | 特長セクションの灰青地 | 12% | 画素の実測 |
| `surface` | `#FEFFFF` | カード・商品パネルの白 | 15% | 画素の実測 |
| `secondary` | `#C3D4E3` | 悩みセクションの中間ブルー | 6% | 画素の実測 |
| `text` | `#0F3048` | 見出し・本文の濃紺 | 2% | 画素の実測 |
| `dark-section` | `#0A172D` | 濃紺のラベル・帯・バナー地 | 4% | 画素の主要色に補正 |
| `accent-1` | `#242426` | ディテール用チャコール地 | 7% | 画素の実測 |
| `cta` | `#EAE442` | 購入ボタンの黄色 | 2% | 画素の実測 |
| `on-cta` | `#29292D` | 購入ボタン上の文字 | 0% | 画素の主要色に補正 |
| `on-primary` | `#FFFFFF` | 青パネル上の白文字 | 1% | 画素の主要色に補正 |
| `marker` | `#D5D946` | 見出しの黄色下線マーカー | 0% | 画素の実測 |
| `accent-2` | `#F2C59E` | 図解の肌色・オレンジ | 1% | 推定 |
| `line` | `#2E4458` | 見出し下の短い区切り線 | 0% | 推定 |
| `primary-accessible` | `#527998` | AA を満たす補正値（計算） |  | 計算 |

- 地は淡い水色から灰青までの寒色系にとどめ、白のにじみグラデーションでつなぐ。
- 特長の番号パネルはブルーグレーで塗り、文字は白にする。
- 黄色はCTAボタンと見出しの下線マーカーにだけ使う。
- 濃紺はラベルの帯、図解の矢印帯、価格周りの小バッジに使う。
- 製品のこだわりを見せるセクションだけチャコール地に切り替え、夜の雰囲気を出す。
- 図解は肌色オレンジと水色ラベルで、寒色地から浮き立たせる。
- `feature-panel` は文字 `#FFFFFF` × 背景 `#84A4BD` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#527998`、4.62:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのコピー | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.12em |
| `headline-lg` | セクションの欧文見出し | 欧文サンセリフ | Montserrat | 400 | 24px | 1.2 | 0.15em |
| `headline-md` | サブ見出し・特長タイトル | 明朝 | Noto Serif JP | 500 | 19px | 1.6 | 0.08em |
| `headline-sm` | 成分名・カード小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.05em |
| `body-md` | 本文・悩みカード | ゴシック | Zen Kaku Gothic New | 400 | 14px | 1.9 | 0.05em |
| `accent` | 特長の大きな番号 | 欧文セリフ | Cormorant Garamond | 400 | 40px | 1 | 0.02em |
| `note` | 注釈・イメージ表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em |
| `label-button` | 購入ボタン・バッジ | ゴシック | Noto Sans JP | 700 | 13px | 1.3 | 0.08em |

- セクション見出しは細い欧文の大文字で、字間を広く取る。下に短い横線を置く。
- 情緒的なコピーは明朝体にして、字間を広めにする。
- 本文はゴシック体で、行間を広め(1.8以上)にする。
- 特長番号は細いセリフ体で大きく白抜きにし、縦書きの小さな欧文ラベルを添える。
- 注釈の※記号は上付きの小さな文字にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。成分やアイコンは 2〜3 個を円で散らす。
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
- 見出しは中央揃えにし、上下の余白を広く取る。
- 特長パネルは左右どちらかの端に寄せ、反対側を半円にする。
- 悩みカードは縦に6枚並べ、左に番号と文章、右に線画アイコンを置く。
- 商品カードは縦長のカプセル形にし、中に購入ボタンを3段積む。
- 図解は白カードに入れ、変化前と変化後の間を濃紺の帯と矢印でつなぐ。

## Elevation & Depth

- 白カードには淡い青みの広いぼかし影を付ける。
- 成分の円は白く光るにじみで、泡のように浮かせる。
- ボタンには影を付けず、フラットにする。

## Shapes

- **角丸**: 小 8px ／ 中 16px ／ 大 120px。ボタンはピル型。
- **写真の切り抜き**: 人物や肌の写真は大きな円か半円で切り抜く。成分写真は小さな正円にする。
- **セクション境界**: 直線で地色を切り替え、グラデーションでにじませる。商品カードの上部はアーチ形にする。
- 特長パネルは片側を大きな半円にする(端に寄せた非対称の形)。
- 商品カードは上下が丸い縦長のカプセル形にする。
- アイコンは白い正円の中に置く。
- 鋭い角は使わない。

## Components

- **黄色の購入ボタン**（`button-primary`）: 黄色のピル型ボタン。中にストアのロゴや名前を入れ、縦に3つ積む。
- **悩みカード**（`worry-card`）: 白い角丸カード。左上に小さな番号、左に悩みの文章、右に青い線画アイコンを置く。
- **番号付き特長パネル**（`feature-panel`）: ブルーグレーで片側が半円のパネル。大きな番号、縦書きラベル、白文字の見出しを入れる。
- **欧文セクション見出し**（`section-title`）: 細い大文字の欧文で中央に置き、下に短い線を添える。
- **成分の泡サークル**（`ingredient-bubble`）: 光る半透明の円に成分名を入れる。周りに小さな円形の写真を散らす。
- **商品カプセルカード**（`product-capsule`）: 上が濃紺のアーチの白い縦長カード。商品画像、バッジ、価格、購入ボタンを縦に並べる。
- **濃紺ピルバッジ**（`badge-dark`）: 限定商品などを示す小さな濃紺のピル。文字は白。
- **円形の特徴アイコン**（`icon-circle`）: 白い正円の中に青い線画や数字を入れ、下に2行の説明を置く。3つを横に並べる。
- **図解の変化帯**（`diagram-arrow-bar`）: 濃紺の角丸帯に白文字で変化を示す。下に矢印を付ける。

## Do's and Don'ts

**Do**
- 淡い水色と白のグラデーションを多めに使い、夜の霧のような透明感を保つ。
- 見出しは欧文と明朝を組み合わせて上品にまとめる。
- 特長は番号付きの半円パネルで、リズムよく左右交互に配置する。
- 購入導線は黄色のピルで、一目で分かるようにする。
- 写真の注釈と※の注記は小さく必ず添える。

**Don't**
- 赤やピンクの強い色を広い面に使わない。
- 太いゴシックの大見出しを多用しない。
- 黄色をボタン以外の広い面に使わない。
- 角張った箱型のレイアウトにしない。
- 地を真っ白一色にしない。

## Page Structure

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

1. **ファーストビュー**（使う場面と商品の世界観を伝える）: 夜景の写真に明朝の白いコピーを置き、商品を大きく見せる。下に字間の広い欧文の商品名を置く。
2. **悩みの提起**（寝る前のケアの悩みに共感する）: ブルーグレーのグラデーション地に、番号と線画アイコン付きの白カードを6枚縦に並べる。
3. **解決の提示**（商品で手軽になると示す）: 明朝のコピーと商品の切り抜きを重ねる。商品名には淡いグラデーションの色を付ける。
4. **商品概要**（主な価値を一目で伝える）: 青く光る背景に商品を置き、特徴の短い言葉を周りに散らす。下に円形アイコン3つを並べる。
5. **商品・購入**（価格と購入先を示す）: アーチ付きのカプセルカードに商品画像、バッジ、価格、黄色の購入ボタン3つを入れる。
6. **特長**（成分や使いやすさを5つの観点で説明する）: 番号付きの半円パネル、円で切り抜いた写真、泡の成分サークル、斜線入りの無添加円で構成する。
7. **技術**（独自技術の根拠を示す）: 白カードの中で、肌色の図解を変化前と変化後で比べる。間は濃紺の帯でつなぐ。
8. **使い方**（使う部位と注意点を伝える）: 白カードに使用写真を2枚並べ、黒丸の箇条書きで注意点を並べる。
9. **容器ディテール**（容器のこだわりを印象づける）: チャコール地に光る容器の写真を置き、引き出し線で部分を拡大して説明する。
10. **再CTA・関連商品**（購入と関連商品へ誘導する）: 商品カプセルカードを再び置き、続けて夜の森の写真を使った関連商品バナーを置く。
11. **SNS・フッター**（フォローと公式ストアへ誘導する）: 白地にセリフ体の見出しとSNSアイコンを置き、線で囲んだストアのロゴボタンを置く。

## Imagery

- 商品は銀色のスティック容器を寒色の光で撮り、映り込みを生かす。
- ファーストビューやバナーは夜空や夜の森など暗く静かな情景にする。
- 人物は目を閉じた寝顔や、目元のアップを柔らかい光で撮り、円形で切り抜く。
- 成分は水滴・オイル・植物のマクロ写真を小さな正円に入れる。
- 悩みのアイコンは青一色の細い線画で描く。
- 図解は肌の層を肌色オレンジで描き、ラベルは水色と橙の小さなタグにする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はSPと同じ幅の中央カラムをそのまま置き、両側を灰青の無地にする。
- PC の左側には縦書きの欧文の商品名を固定する。
- PC の右側には目次、黄色の購入ボタン、SNSアイコンを並べた固定サイドナビを置く。
- 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-4148f3ca`（元 LP の URL から採番）
- **元 LP**: https://isehanlab.com/suyaliserum/eyeserumstick/?utm_source=meta&utm_medium=meta_sponsored&utm_campaign=suyalieyeserum&fbclid=PAaWdyZAVC2hhleHRuA2FlbQEwAHBkb2YCYWRpZAGrNo5Qaik2c3J0YwZhcHBfaWQPNTY3MDY3MzQzMzUyNDI3AAGnmxFhVGJ4c9XjxfBMx1xWWPeONZ9J1SZE1Y51jmYx
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

:root {
  --color-primary: #84a4bd;
  --color-background: #f4fcfe;
  --color-background-alt: #dbe5e7;
  --color-surface: #feffff;
  --color-secondary: #c3d4e3;
  --color-text: #0f3048;
  --color-dark-section: #0a172d;
  --color-accent-1: #242426;
  --color-cta: #eae442;
  --color-on-cta: #29292d;
  --color-on-primary: #ffffff;
  --color-marker: #d5d946;
  --color-accent-2: #f2c59e;
  --color-line: #2e4458;
  --color-primary-accessible: #527998;
  --spacing-unit: 8px;
  --spacing-card: 20px;
  --spacing-section: 90px;
  --rounded-sm: 8px;
  --rounded-md: 16px;
  --rounded-lg: 120px;
  --rounded-full: 999px;
}

W3C のデザイントークンの形式（Design Tokens Format Module 2025.10）の JSON です。Figma のプラグインや Style Dictionary などで読み込めます。