---
version: alpha
name: Monochrome Editorial Hair Care Diagnosis LP
description: 白・グレー・チャコールだけで組んだモノトーン基調のヘアケア LP。大理石テクスチャ、方眼の背景、網点の吹き出しで雑誌のような質感を出している。チェックリスト型の診断から 3 タイプの結果カード、商品紹介、特長、購入ボックスへと流れる。色を足すのはオレンジのカートボタンと成分図解だけ。
colors:
  primary: '#313131'
  background: '#FFFFFF'
  background-alt: '#F1F1F1'
  surface: '#F2F2F2'
  text: '#1B1A1F'
  text-muted: '#4C4948'
  on-dark: '#FDFDFD'
  cta: '#F4A20C'
  on-cta: '#FFFFFF'
  marker: '#D8DADA'
  line: '#A3ADB0'
  accent-1: '#3BAAAC'
  accent-2: '#7C8CD8'
  dark-section: '#4C4948'
  cta-accessible: '#A26B07'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Playfair Display
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Great Vibes
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.0
rounded:
  sm: 4px
  md: 16px
  lg: 170px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 70px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-cart:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 50px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 46px
  button-diagnosis:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 44px
  check-list:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 1100px
  result-clipboard:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 620px
  speech-halftone:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 110px
  comment-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 460px
  tag-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 22px
  price-box:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    rounded: '{rounded.lg}'
    height: 1150px
---

# DESIGN.md — モノクロ×大理石の髪質診断ヘアケア LP（Monochrome Editorial Hair Care Diagnosis LP）

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

## Overview

- **業種**: ヘアケア・ボディケア ／ **雰囲気**: シンプル・ミニマル、上品・高級、クール・先進的、情報量多め・訴求型
- **キーワード**: モノトーン・大理石テクスチャ・方眼紙・網点スクリーントーン・診断コンテンツ・エディトリアル
- **地の質感**: 白い大理石の地、方眼グリッド、斜線ハッチ、網点の吹き出しを重ねて紙の印刷物のような質感を出す
- **形**: 上が半円アーチの黒い箱、クリップボード型の結果カード、円形の商品紹介枠、ピル型ボタン
- **温度感**: クールで無彩色。人物写真と成分写真がわずかに温度を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#313131` | チャコールの主色（診断の箱・購入ボックス） | 14% | 画素の実測 |
| `background` | `#FFFFFF` | 白い地 | 34% | 画素の実測 |
| `background-alt` | `#F1F1F1` | 薄グレーの大理石・方眼の地 | 20% | 画素の実測 |
| `surface` | `#F2F2F2` | 図解カードの薄グレー面 | 6% | 画素の実測 |
| `text` | `#1B1A1F` | 見出し・本文の黒文字 | 3% | 画素の実測 |
| `text-muted` | `#4C4948` | 注釈のグレー文字 | 1% | 画素の主要色に補正 |
| `on-dark` | `#FDFDFD` | 黒い面の上の白文字 | 2% | 画素の実測 |
| `cta` | `#F4A20C` | カートボタンのオレンジ | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | カートボタンの文字 | 0% | 画素の主要色に補正 |
| `marker` | `#D8DADA` | 本文の強調に引くグレーのマーカー | 2% | 画素の主要色に補正 |
| `line` | `#A3ADB0` | 方眼・罫線のグレー | 4% | 画素の主要色に補正 |
| `accent-1` | `#3BAAAC` | 送料無料バナーのティール | 0% | 画素の実測 |
| `accent-2` | `#7C8CD8` | 成分図解の青紫 | 0% | 推定 |
| `dark-section` | `#4C4948` | FV写真上の暗いグレーの帯 | 2% | 画素の主要色に補正 |
| `cta-accessible` | `#A26B07` | AA を満たす補正値（計算） |  | 計算 |

- 基本は白・薄グレー・チャコールの無彩色だけで組む
- 黒い面は診断チェック・購入ボックス・ボタンに限って使う
- 鮮やかな色はカートボタンのオレンジだけにする
- 本文の強調は色を変えず、グレーのマーカー帯と太字で行う
- 成分図解の青紫・ティールは図の中でだけ使う
- ページ最下部の送料バナーだけをティールの帯にする
- `button-cart` は文字 `#FFFFFF` × 背景 `#F4A20C` のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A26B07`、4.52:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のキャッチ（反転帯つき） | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.4 | 0.05em |
| `headline-lg` | セクション見出し・訴求コピー | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.08em |
| `headline-md` | 吹き出し内の見出し・商品名 | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.05em |
| `accent` | Check / COMMENT などの欧文見出し・価格の数字 | 欧文セリフ | Playfair Display | 700 | 40px | 1.1 | 0.0em |
| `body-md` | 本文・解説 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em |
| `note` | 注釈・成分表 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 500 | 16px | 1.2 | 0.1em |
| `headline-sm` | 診断の A/B/C 記号（筆記体風） | 欧文スクリプト | Great Vibes | 400 | 36px | 1.0 | 0.0em |

- 和文は太めのゴシックで統一する
- 欧文の見出しと数字はハイコントラストのセリフ体にする
- 強調したい語は網点の背景つきの太字にする
- 見出しの導入句は左右に斜線を置いた小見出し（＼〇〇／）にする
- 本文は行間を約 1.9 と広めに取る
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真ギャラリーだけ非対称のコラージュにする
- **本文ブロックの幅**: 画面幅の約 86%
- **余白**: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
- セクション境界には中央で下向きに折れる V 字の細い線を置く
- 診断の結果は クリップボードカード → 円形の商品紹介 → 写真コラージュ → コメント → 特長 → 購入ボックス の順で 3 回繰り返す
- 写真コラージュは大小の写真を斜めにずらして重ねる
- 購入ボックスは上辺を半円アーチにした黒い面にする
- 各ブロックの終わりにアウトラインのピル型「詳しく見る」ボタンを置く

## Elevation & Depth

- 影はほとんど使わず、平面で構成する
- クリップボードカードは太い黒枠と、ずらした黒い面で立体感を出す
- 写真は細い黒枠で囲む

## Shapes

- **角丸**: 小 4px ／ 中 16px ／ 大 170px。ボタンはピル型。
- **写真の切り抜き**: 商品写真は角丸なしの矩形に細い黒枠。成分写真は正円。人物写真は全幅で、斜めの線で切る
- **セクション境界**: 中央が V 字に下がる細線。黒いセクションは上辺を半円アーチにする
- 診断の箱と購入ボックスは上辺をアーチにする
- 結果カードはクリップ付きのボードの形にする
- 吹き出しは網点の塗りに黒い太枠をつけ、しっぽを下に出す
- 商品紹介は大きな円形の白い枠で囲む

## Components

- **カートボタン**（`button-cart`）: オレンジのピル型ボタン。右端に白丸に入った矢印アイコンを置く
- **詳しく見るボタン**（`button-outline`）: 白地に黒い細枠のピル型ボタン
- **診断結果ボタン**（`button-diagnosis`）: 黒いピル型ボタン。筆記体のタイプ記号と白文字を並べる
- **チェックリスト**（`check-list`）: アーチ型の黒い箱に、白丸・斜体の Q 番号・白文字の設問を並べる。グループの間は菱形の連続線で区切る
- **タイプ結果カード**（`result-clipboard`）: 方眼の地に置く黒枠のクリップボード。タイプ名は黒い帯に白抜き文字、動物のイラストを添え、本文には罫線を引く
- **網点吹き出し**（`speech-halftone`）: 網点の塗りに黒枠をつけた角丸の吹き出し。右上に円弧状の欧文ラベルを添える
- **お客様コメント**（`comment-block`）: 上下を斜線ハッチの波括弧で挟む。線画の人物イラストを置き、本文の一部にマーカーを引く
- **成分タグ**（`tag-label`）: 黒いピル型の小さなラベルに白文字
- **購入ボックス**（`price-box`）: 黒い面に、商品写真・セリフ体の大きな価格・成分表・数量選択・カートボタンを縦に並べる

## Do's and Don'ts

**Do**
- 無彩色を守り、強調はマーカー帯・網点・黒い帯で行う
- 欧文のセリフ体と太いゴシックの組み合わせで雑誌風にする
- 診断から結果、商品紹介への流れはどのタイプも同じ型で繰り返す
- セクション境界は V 字の細線で区切る
- 注釈の※は小さいグレー文字で添える

**Don't**
- 鮮やかな色を面に広く使わない
- グラデーションや強いドロップシャドウを使わない
- 丸ゴシックやポップな書体にしない
- 写真の角を丸くしない
- CTA 以外にオレンジを使わない

## Page Structure

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

1. **ファーストビュー**（商品の世界観と、診断で選べることを伝える）: 石と大理石の上に商品を並べたグレーの写真。キャッチは暗い帯に白抜きで載せ、円形のバッジで診断へ誘導する
2. **悩みの提起**（商品の違いがわからないという迷いに共感する）: モノクロの髪の写真に、雲形の吹き出しと黒い帯の大見出しを重ねる
3. **解決の提示と専門家**（髪質に合わせて選ぶ意義を示し、権威づけする）: 大理石の地に、網点で強調した見出しを置く。専門家の丸い写真と、カギ括弧枠のコメントを添える
4. **髪質チェック**（当てはまる項目を選ばせ、自分ごと化させる）: アーチ型の黒い箱に、A/B/C 各 4 問のチェックリストを並べる
5. **診断結果ボタン**（結果のタイプへ移動させる）: 方眼の地に、黒いピル型ボタンを 3 つ縦に並べる
6. **タイプ結果**（髪質をタイプ別に解説する）: クリップボード型のカードに、動物イラストとタイプ名の黒い帯を載せる
7. **おすすめ商品**（タイプに合う商品を提案する）: アーチ状の欧文見出しの下に、円形の白い枠で商品写真と説明を並べ、続けて写真コラージュを置く
8. **お客様の声**（使用感を伝える）: 斜線ハッチの括弧で挟み、線画の人物イラストを添える
9. **特長**（成分と処方の根拠を示す）: 人物写真に縦書きの見出しと大きな番号を重ねる。網点の吹き出し、成分の図解、検査写真、成分を丸写真で並べたリストで説明する
10. **購入**（そのまま購入させる）: アーチ型の黒いボックスに価格・成分表・数量・オレンジのカートボタンを置く
11. **送料案内とフッター**（購入を後押しし、法定表記を載せる）: ティールの帯にトラックのアイコンを置き、その下は白地に小さなロゴとリンクだけにする

## Imagery

- 商品写真は砂紋・石・流木・白い布の上に置き、自然光でグレートーンに撮る
- 人物写真は白い服でツヤのある黒髪を見せ、彩度を抑える
- 動物はちぎり絵のような質感の顔イラストにする
- お客様の人物は太い線画のモノクロイラストにする
- 成分の断面図は立体的な 3D イラストに、青紫と水色の凡例をつける
- 装飾は大理石・方眼・網点・斜線ハッチを使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に SP 幅（約 640px）のカラムを置き、左右に大理石の背景を敷く
- 写真コラージュは PC では横に広げ、2 カラムにしてもよい
- 診断ボタンは PC では横並びにしてもよい
- 見出しの文字サイズは SP の 1.3 倍程度までにとどめる

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