---
version: alpha
name: Clinical Teal Metallic Men's Haircare LP
description: 深い青緑とシルバーグレーの金属質感を基調にした男性向けシャンプーLPです。分子や六角形の網目模様で科学的な雰囲気を出し、明朝の大見出しで信頼感を演出しています。CTAには蛍光イエローグリーンを使い、強いコントラストで目立たせています。価格ブロックと購入ボタンを何度も繰り返す訴求型の構成です。
colors:
  primary: '#114152'
  dark-section: '#0A2331'
  secondary: '#437987'
  background: '#CBCDCD'
  background-alt: '#E7EAEB'
  surface: '#FFFFFF'
  tint-1: '#8FB7C3'
  cta: '#B5FF1C'
  on-cta: '#1A2A1A'
  text: '#1B2A36'
  text-body: '#49595C'
  marker: '#FEFD93'
  accent-1: '#C8692E'
  accent-2: '#D4A93A'
  on-dark: '#FAFEFE'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Serif JP
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.08em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    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: 56px
  price-block:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 110px
  heading-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 64px
  benefit-ribbon:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 44px
  point-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 280px
  check-list:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 150px
  award-badge:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 180px
  voice-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 130px
  step-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 150px
  note-text:
    typography: '{typography.note}'
    height: 30px
---

# DESIGN.md — 深青緑×銀メタリックの男性向けヘアケアLP（Clinical Teal Metallic Men's Haircare LP）

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

## Overview

- **業種**: ヘアケア・ボディケア ／ **雰囲気**: クール・先進的、信頼・誠実、情報量多め・訴求型、上品・高級
- **キーワード**: 深青緑・シルバーメタリック・分子モチーフ・クリニック発想・明朝×ゴシック・蛍光グリーンCTA
- **地の質感**: ヘアライン調の銀グレー地、六角形の網目、分子球体の3D表現、光の放射グラデーション
- **形**: 平行四辺形の見出し帯、六角形のラベル、ピル型CTA、角丸の白カード
- **温度感**: 寒色中心で冷たく清潔。CTAと金色のアワード部分だけを暖色や高彩度にする

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#114152` | ブランドの深青緑。見出し帯や濃色セクションに使う | 14% | 画素の実測 |
| `dark-section` | `#0A2331` | 最も濃いネイビーのセクション地 | 8% | 画素の主要色に補正 |
| `secondary` | `#437987` | 中間の青緑。帯や見出しの背景に使う | 9% | 画素の主要色に補正 |
| `background` | `#CBCDCD` | シルバーグレーのメタリック地 | 16% | 画素の主要色に補正 |
| `background-alt` | `#E7EAEB` | 明るい青白の地 | 12% | 画素の主要色に補正 |
| `surface` | `#FFFFFF` | 白のカード面 | 7% | 画素の実測 |
| `tint-1` | `#8FB7C3` | くすみ水色のセクション地 | 6% | 画素の実測 |
| `cta` | `#B5FF1C` | 蛍光イエローグリーンの購入ボタン | 2% | 画素の実測 |
| `on-cta` | `#1A2A1A` | CTAボタン上の文字色 | 0% | 推定 |
| `text` | `#1B2A36` | 見出しと価格の濃紺文字 | 2% | 画素の実測 |
| `text-body` | `#49595C` | 本文のグレー文字 | 2% | 画素の主要色に補正 |
| `marker` | `#FEFD93` | 黄色の蛍光マーカー | 0% | 画素の実測 |
| `accent-1` | `#C8692E` | 銅オレンジ。ビフォーアフターや強調ラベルに使う | 1% | 推定 |
| `accent-2` | `#D4A93A` | アワードの金色 | 1% | 推定 |
| `on-dark` | `#FAFEFE` | 濃色地の上の白文字 | 2% | 画素の実測 |

- 濃色の深青緑・ネイビーのセクションと、銀グレーや青白のセクションを交互に並べる
- CTAは蛍光イエローグリーンだけにする。ほかの要素にはこの色を使わない
- 強調ワードには黄色マーカーか、青緑の帯に白文字を使う
- 金色はアワード・実績・保証バッジだけに使う
- 銅オレンジは比較の「良い状態」ラベルやパッケージ訴求の差し色に絞る
- 注釈は小さいグレー文字で、濃色地では白の半透明にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューのキャッチ。白い帯の上に置く | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.25 | -0.02em |
| `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 600 | 32px | 1.35 | 0.04em |
| `headline-md` | カード見出し・特長のタイトル | 明朝 | Noto Serif JP | 600 | 24px | 1.4 | 0.03em |
| `headline-sm` | 帯ラベル・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.04em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0em |
| `accent` | 英字見出しと価格の数字 | 欧文サンセリフ | Montserrat | 500 | 30px | 1.1 | 0.08em |
| `label-button` | 購入ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1 | 0.05em |

- 大見出しは明朝体にする。助詞はひと回り小さくし、緩急を付ける
- 英字見出しは字間を広めにした細いサンセリフの大文字にする
- 価格は大きなサンセリフ数字にし、「税込」「円」は小さく添える
- 強調したい語に傍点（・）やマーカーを重ねる
- 注釈は※付きの小さい文字で、セクション末尾にまとめる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。チェックリストや成分アイコンだけ 2〜7 列のグリッドにする
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションは全幅の背景色や画像で区切る
- 商品画像の横に訴求帯を縦に 3 本並べる
- 価格ブロックの直下に必ず CTA を置く
- 訴求の重要な位置でセット商品の価格ブロックを繰り返す
- 手順は番号付きで、左に図・右に文を置く

## Elevation & Depth

- 白カードには淡いドロップシャドウ（0 4px 16px rgba(0,0,0,.12)）を付ける
- CTAボタンは下方向の影と上部のハイライトで立体的に見せる
- 訴求帯にも薄い影を付け、銀地から浮かせる

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: 商品は切り抜きで光沢を見せる。人物は斜めにトリミングするか六角形・円形に切り抜く。成分写真は円形にする
- **セクション境界**: 基本は直線で切り替える。一部は斜めの帯や三角の矢印で次へつなぐ
- 見出し帯は両端を斜めに切った平行四辺形にする
- 訴求の帯は両端を矢羽型（六角形風）にする
- CTAは横長のピル型にする
- 番号は濃色の円の中に白数字を入れる

## Components

- **購入CTAボタン**（`button-primary`）: 蛍光イエローグリーンのグラデーションのピル型ボタン。影付きで、幅は約70%
- **価格表示**（`price-block`）: 通常価格と定期購入を 2 段で並べる。ラベルは下線付きの小さい文字、数字は大きなサンセリフ
- **見出し帯**（`heading-band`）: 全幅の深青緑の帯に、ロゴ風の英字と明朝の見出しを白で載せる
- **効果訴求リボン**（`benefit-ribbon`）: 両端を矢羽型にした帯を縦に 3 本重ねる。白地なら明朝の濃紺文字、青緑地なら白文字
- **POINT特長カード**（`point-card`）: POINT と大きな番号、濃色の小見出し帯、明朝の大見出し、本文を白カードにまとめる
- **悩みチェックリスト**（`check-list`）: 白枠の中にチェックボックス付きの悩みを 2 列 × 3 行で並べ、語に黄色マーカーを引く
- **月桂樹アワードバッジ**（`award-badge`）: 金色の月桂冠と王冠で実績の数字を囲む。背景には紙吹雪を散らす
- **お客様の声カード**（`voice-card`）: 六角形に切り抜いた人物写真と白カードを交互に配置する。見出しには黄色マーカー、属性は濃色の小さいラベルで示す
- **使い方ステップ**（`step-item`）: 濃色の円に番号、線画イラスト、右側に説明文を置き、下向きの三角でつなぐ
- **注釈**（`note-text`）: ※付きの小さいグレー文字。ブロックの末尾に置く

## Do's and Don'ts

**Do**
- 濃色の青緑セクションと銀グレーのセクションを交互に置き、リズムを作る
- 分子球体・六角形の網目・光の放射を背景に敷き、科学的な雰囲気を出す
- 大見出しは明朝、ラベルや本文はゴシックで使い分ける
- 価格ブロックと購入CTAをセットで何度も繰り返す
- 数値（満足度・割合）はとても大きく見せ、注釈で根拠を添える

**Don't**
- 暖色やパステルを地色に使わない
- CTA以外に蛍光グリーンを使わない
- 丸ゴシックや手書き書体を使わない
- 背景を質感のない真っ白なフラットな面にしない
- 注釈を省略して効果を断定しない

## Page Structure

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

1. **ファーストビュー**（新しさと先進性を一目で伝える）: 青緑の分子背景に斜めに置いた商品ボトル。左上に白帯の極太キャッチ、黄緑の六角バッジで成分を訴求する
2. **商品と価格（単品）**（効果と価格をすぐ伝える）: 銀グレー地に見出し帯、商品画像と訴求リボン 3 本、価格ブロック、CTA を並べる
3. **悩みの提起**（なんとなく選んでいる層に気づかせる）: スモーク調の暗い背景に考え込む男性の写真。斜めの帯に問いかけを入れ、下に 2 列のチェックリストを置く
4. **独自理論**（科学的な根拠を示す）: 濃い青緑地に六角網目の背景と毛髪のワイヤーフレーム図。オレンジの帯と白の明朝見出しを載せる
5. **開発背景**（専門クリニック発の信頼を伝える）: 院内写真の角丸カードに月桂樹の見出しを載せ、マーカー付きの本文と医師の写真を続ける
6. **満足度・実績**（社会的証明）: 光の放射背景に大きな％の数字と 2 本並べた商品。濃紺地で金の月桂冠アワードと紙吹雪を見せる
7. **セット価格CTA**（セット購入へ誘導する）: 光を背負った 2 本の商品、セットの価格ブロック、CTA、注釈を置く
8. **セット使いの仕組み**（併用する理由を説明する）: 左右から矢印が向かう 2 本の商品と＋記号。白カードに明朝の説明を入れる
9. **特長（POINT）**（成分と機能を詳しく伝える）: 濃色地に POINT 番号付きの白カード、ビフォーアフター図、円形の成分写真グリッドを置く
10. **使い方**（正しい使い方で効果を感じてもらう）: 英字見出しに人物写真、番号付きの 3 ステップを線画で示す
11. **香り・無添加**（使い心地と安心感を伝える）: 果実を添えた商品写真。白カードに斜線入りの円で無添加項目を 5 つ並べる
12. **ラインナップ**（つめかえ用の継続購入を促す）: 台形タブの英字見出しと吹き出しバッジ、パウチ 2 種、価格、CTA を置く
13. **異性の意識調査・お客様の声**（購入の動機付けと共感）: 大きな円グラフと％。六角形の人物写真付きの声カードを左右交互に並べる
14. **返金保証**（購入の不安を取り除く）: 金のリボンバッジと濃色の帯見出し。黄色マーカーで期間を強調し、注意事項の枠と電話番号を載せる

## Imagery

- 商品はメタリックな質感の 3D レンダリングにし、光沢とハイライトを強めに出す
- 背景にはガラスのような分子球体や結合モデル、六角形の網目を散らす
- 人物は 30〜40 代の男性ビジネスマン。清潔感のある自然光で撮る
- 使い方の図は細い黒の線画イラストにする
- 成分は植物を真上から撮った写真を円形に切り抜き、グリッドに並べる
- 実績の演出には金の月桂冠・王冠・紙吹雪を使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に 750px 前後の SP デザインを置き、左右に濃色または銀グレーの背景を広げる
- PC では商品画像と訴求リボンを左右に並べ、余白を広く取る
- POINT カードとお客様の声は PC で 2 カラムにしてよい
- CTA の幅は PC で最大 480px 程度に抑える

## 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-e8d41bac`（元 LP の URL から採番）
- **元 LP**: https://scalp-d.com/brand/hair_root/product/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（7/15 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-22、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。

:root {
  --color-primary: #114152;
  --color-dark-section: #0a2331;
  --color-secondary: #437987;
  --color-background: #cbcdcd;
  --color-background-alt: #e7eaeb;
  --color-surface: #ffffff;
  --color-tint-1: #8fb7c3;
  --color-cta: #b5ff1c;
  --color-on-cta: #1a2a1a;
  --color-text: #1b2a36;
  --color-text-body: #49595c;
  --color-marker: #fefd93;
  --color-accent-1: #c8692e;
  --color-accent-2: #d4a93a;
  --color-on-dark: #fafefe;
  --spacing-unit: 8px;
  --spacing-card: 20px;
  --spacing-section: 48px;
  --rounded-sm: 4px;
  --rounded-md: 12px;
  --rounded-lg: 20px;
  --rounded-full: 999px;
}

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