---
version: alpha
name: Night Sky Blue Haircare LP
description: 深い群青の夜空グラデーションを全面に敷き、白文字と細い星線の装飾で夜間美容の世界観を表現したヘアケア商品 LP。明朝見出しと細身の欧文ラベル、半透明パネルの購入カルーセルが特徴。
colors:
  primary: '#3351AB'
  background: '#537CCE'
  dark-section: '#1C45AD'
  surface: '#2453B4'
  cta: '#14359B'
  on-cta: '#E8F4FE'
  text: '#E0DAE7'
  line: '#B4C9EB'
  accent-1: '#102D73'
  tint-1: '#F9E2F9'
  on-dark: '#3351AB'
  text-muted: '#9EB9DC'
  background-accessible: '#335EB3'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.08em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.08em
  accent:
    fontFamily: Josefin Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.9
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Josefin Sans
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  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}'
    height: 36px
  purchase-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 500px
  filter-tab:
    textColor: '{colors.text-muted}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 24px
  heading-starline:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 40px
  point-frame:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 400px
  free-badge:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 36px
  button-accordion:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 46px
  dose-circle:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 64px
  link-underline:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 28px
---

# DESIGN.md — 夜空の青と星線のナイトヘアケア LP（Night Sky Blue Haircare LP）

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

## Overview

- **業種**: ヘアケア・ボディケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
- **キーワード**: 夜空・群青グラデーション・星の細線・白文字・明朝・透明感
- **地の質感**: 雲や星屑がうっすら混じる夜空写真風のグラデーション地。面はほぼフラットで、半透明の濃紺パネルを重ねる。
- **形**: 角はほぼ直角。細い白線の枠・斜めの流れ星ライン・端の点や十字星で装飾する。
- **温度感**: 寒色で静か。最下部だけラベンダーピンクへ移り夜明けの柔らかさを出す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#3351AB` | 夜空の地色（群青） | 40% | 画素の主要色に補正 |
| `background` | `#537CCE` | 明るめの夜空地 | 25% | 画素の実測 |
| `dark-section` | `#1C45AD` | 濃い紺の上部・購入エリア地 | 10% | 画素の実測 |
| `surface` | `#2453B4` | 購入パネルの半透明面 | 5% | 画素の実測 |
| `cta` | `#14359B` | 購入ボタン面（濃紺） | 1% | 画素の実測 |
| `on-cta` | `#E8F4FE` | ボタン文字・白 | 1% | 画素の実測 |
| `text` | `#E0DAE7` | 見出し・本文の白文字 | 4% | 画素の主要色に補正 |
| `line` | `#B4C9EB` | 細い白線の枠・区切り | 1% | 画素の実測 |
| `accent-1` | `#102D73` | スライダー進捗のネイビー | 0% | 画素の主要色に補正 |
| `tint-1` | `#F9E2F9` | フッターのラベンダーピンク | 6% | 画素の実測 |
| `on-dark` | `#3351AB` | フッター上の紺文字・ロゴ | 0% | 画素の主要色に補正 |
| `text-muted` | `#9EB9DC` | 非選択タブ・注釈の淡色 | 0% | 画素の主要色に補正 |
| `background-accessible` | `#335EB3` | AA を満たす補正値（計算） |  | 計算 |

- 地は全面を群青〜青の夜空グラデーションにし、白地セクションは作らない。
- 文字はほぼ白一色。色で強調せず、サイズと書体で階層をつける。
- 購入エリアは地よりわずかに濃い半透明紺パネルで区切る。
- 線・枠は白〜淡い青の 1px 細線で統一。
- ページ最下部のみラベンダーピンクへ移行し、フッターは紺文字にする。
- 暖色は写真の植物・果実だけに留める。
- `page` は文字 `#E0DAE7` × 背景 `#537CCE` のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#335EB3`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | コンセプト大見出し | 明朝 | Shippori Mincho | 600 | 30px | 1.6 | 0.08em |
| `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 22px | 1.5 | 0.08em |
| `headline-md` | 小見出し・リード | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.08em |
| `accent` | 英字ラベル（POINT・STEP・HOW TO 等） | 欧文サンセリフ | Josefin Sans | 400 | 24px | 1.3 | 0.1em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 12px | 1.9 | 0.08em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 8px | 1.6 | 0.04em |
| `headline-sm` | 手順の番号（01 02 03） | 欧文サンセリフ | Josefin Sans | 400 | 26px | 1.2 | 0.05em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.1em |

- 感情的な見出しは明朝、説明はゴシックで役割を分ける。
- 英字ラベルは細身の幾何学サンセリフで大きく、和文見出しを上下に添える。
- 全体に字間を 0.08em 前後広げて静かな印象にする。
- 注釈は ※ で小さく本文直下に置く。
- 文字はすべて中央または左揃えの白、太字の使いすぎは避ける。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム（購入は横スクロールカルーセル）
- **本文ブロックの幅**: 画面幅の約 82%
- **余白**: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
- セクション間は大きく空け、夜空の地を見せる余白を確保する。
- 見出し→英字ラベル→写真→本文→注釈の順で縦に積む。
- 写真は本文幅いっぱいの横長で配置。
- フリー処方などは 2 列の細線ボックスで並べる。
- 手順は番号＋見出し横並び、その下に説明。

## Elevation & Depth

- 影はほぼ使わずフラット。
- 購入パネルは半透明の濃紺面で地から浮かせる。
- 成分画像は透明な球体（シャボン玉風）に入れて光沢で立体感を出す。

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 横長の長方形、角丸なし。香りは三角形、成分は円形の泡で切り抜く。
- **セクション境界**: 直線の境界なし。グラデーションで連続させ、斜めの流れ星ラインで区切りを示す。
- ボタン・枠は直角か極小の角丸。
- 線の端に点や十字星を付ける。
- 写真の角に斜めの細線を 2 本重ねる。

## Components

- **購入ボタン**（`button-primary`）: 濃紺の長方形にカートアイコンと白文字。上下に細線、角に点と十字星を付ける。
- **購入カルーセルパネル**（`purchase-panel`）: 半透明紺の箱に見出し・絞り込みタブ・商品カード横スクロール・白い進捗バー。
- **絞り込みタブ**（`filter-tab`）: 細線枠の小さな四角タブ。選択中は白枠白文字、他は淡色。
- **流れ星ライン見出し**（`heading-starline`）: 明朝見出しの左右・斜めに細い白線を引く装飾。
- **ポイント枠**（`point-frame`）: 上辺に見出しが割り込む白い細線枠の中に写真と本文。
- **フリー処方ボックス**（`free-badge`）: 細線枠の 2 列ボックスに斜線を 1 本入れ、中央に白文字。
- **全成分アコーディオン**（`button-accordion`）: 幅いっぱいの細線枠に中央文字と右端の＋。
- **使用量の円**（`dose-circle`）: 細線の円に数字と単位、左右に小さな星を付けて 3 つ並べる。
- **矢印下線リンク**（`link-underline`）: 白太字テキストの下に右端が矢印になった細線。

## Do's and Don'ts

**Do**
- 地は常に夜空の青グラデーションと薄い雲・星屑で統一する。
- 装飾は白の細線・点・十字星に限定する。
- 見出しは明朝、ラベルは細身の欧文で上品にまとめる。
- 購入導線をページ上部と手順の後の 2 回置く。
- 注釈は本文直下に小さく必ず添える。

**Don't**
- 白や明るい色のベタ地セクションを途中に挟まない。
- 赤・オレンジなどの暖色ボタンを使わない。
- 太い枠線や強いドロップシャドウを付けない。
- ピル型や大きな角丸のボタンにしない。
- 装飾を詰め込み余白を潰さない。

## Page Structure

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

1. **ファーストビュー**（商品と世界観の提示）: 夜空背景に商品ボトル、英字の商品ライン名と短い説明を白で配置。
2. **購入エリア**（すぐ買える導線）: 半透明パネルに絞り込みタブと商品カード横スクロール、購入ボタン。
3. **ポイント**（主要成分の訴求）: 英字ラベル＋明朝見出しが上辺に乗る細線枠、内側に横長写真と本文。
4. **コンセプト**（仕上がりの約束）: 大きな明朝 3 行を中央に、斜めの流れ星線と英字サブ。
5. **処方の特長**（補修処方の説明）: 見出し・リード・商品写真・本文・注釈を縦に積む。
6. **美容成分**（成分の可視化）: 成分画像を透明な泡に入れ 1-2-2 で散らして配置。
7. **泡の質**（使用感の訴求）: 大明朝見出しと泡を持つ手の写真、本文。
8. **香り**（香調の説明）: 左に TOP/MIDDLE/LAST のリスト、右に細線三角形の中に花と果実の写真。
9. **フリー処方**（安心感）: 2×2 の細線ボックスと全成分アコーディオン。
10. **ステップ**（シリーズ併用の提案）: 菱形番号の進行インジケーターと商品スライド。
11. **使い方**（使用方法の説明）: 英字見出しを星線で挟み、大きな番号付き手順と使用量の円。
12. **購入エリア（再掲）**（最終の購入導線）: 上部と同じ購入パネル。
13. **店舗・FAQ 導線**（補足情報への誘導）: 英字見出し、写真、矢印下線リンク。
14. **フッター**（ブランド情報）: 流れる英字パンくず、ラベンダーピンク地に紺のロゴ・SNS・リンク。

## Imagery

- 背景は星屑と薄い雲が混じる群青の夜空テクスチャ。
- 商品写真はボトル切り抜き、または白タイル浴室で柔らかい自然光。
- 成分は花・果実を透明な泡の中に浮かべる合成。
- 質感カットは暗い髪のマクロ、泡を持つ手など寄りの写真。
- 装飾は白の細い斜線（流れ星）・点・十字の星。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC はコンテンツを中央 約 60% 幅に収め、両側も夜空背景を見せる。
- PC のファーストビューは左に商品、右に英字見出しと説明の 2 カラム。
- 購入カルーセルは PC で 5 商品を横一列に表示。
- ポイント枠は PC で写真左・本文右の横並び。
- 使い方はシャンプーとトリートメントを PC で 2 カラム並列。
- 店舗一覧と FAQ は PC で横 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-9c96ac93`（元 LP の URL から採番）
- **元 LP**: https://yolu.jp/product/mellow_night/shampoo_treatment/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。