---
version: alpha
name: Cool Blue Brushstroke Hair Color LP
description: 白地に水色の刷毛ストロークを散らし、黒の帯とビビッドピンクの強調で若々しくクールに見せるヘアカラー LP。縦長の細い欧文見出しと大きな温度数字がインパクトを出す。
colors:
  primary: '#029BFD'
  background: '#FFFFFF'
  dark-section: '#000000'
  on-dark: '#E6E7E7'
  cta: '#010101'
  on-cta: '#FBFDFB'
  accent-1: '#CD4683'
  background-alt: '#F2F2F2'
  tint-1: '#E4F2FE'
  secondary: '#B09050'
  text: '#030102'
  accent-2: '#8C8C8C'
  line: '#333333'
  surface: '#FEFEFE'
  primary-accessible: '#016BAF'
typography:
  display:
    fontFamily: Oswald
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Oswald
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.1
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Oswald
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
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: 52px
  button-list:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 40px
  heading-en:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 50px
  label-vertical:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.accent}'
    height: 260px
  card-expert:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 360px
  table-compare:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 290px
  button-shop:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    height: 40px
  banner-link:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 36px
---

# DESIGN.md — 水色ブラシ筆致×黒のクール系ヘアカラーLP（Cool Blue Brushstroke Hair Color LP）

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

## Overview

- **業種**: ヘアケア・ボディケア ／ **雰囲気**: クール・先進的、力強い・インパクト、清潔・爽やか、情報量多め・訴求型
- **キーワード**: 刷毛ストローク・水色×黒×ピンク・縦長コンデンス欧文・大きな数値訴求・ストリート感
- **地の質感**: 白地に水色・グレーの擦れたブラシ跡を重ねるペイント質感。写真は空色背景のモデルポートレート。
- **形**: 角丸なしの直線的な矩形。黒い縦帯やラベル、細い黒枠のリストボタン。
- **温度感**: 寒色寄りで涼しげ。ピンクを差し色にして元気さを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#029BFD` | ブラシ装飾・温度差バーの水色 | 7% | 画素の実測 |
| `background` | `#FFFFFF` | 基本背景 | 42% | 画素の実測 |
| `dark-section` | `#000000` | 購入帯・フッター・CTA帯の黒 | 8% | 画素の実測 |
| `on-dark` | `#E6E7E7` | 黒地上の白文字 | 1% | 画素の実測 |
| `cta` | `#010101` | 主CTAボタン（黒） | 1% | 画素の実測 |
| `on-cta` | `#FBFDFB` | CTAボタンの文字 | 0% | 画素の実測 |
| `accent-1` | `#CD4683` | 強調文字・見出し頭文字のピンク | 1% | 画素の実測 |
| `background-alt` | `#F2F2F2` | ブランド紹介セクションの薄グレー | 6% | 画素の実測 |
| `tint-1` | `#E4F2FE` | 淡い水色のブラシ跡 | 4% | 画素の実測 |
| `secondary` | `#B09050` | ファーストビューの金色帯 | 3% | 推定 |
| `text` | `#030102` | 見出し・本文の黒文字 | 3% | 画素の実測 |
| `accent-2` | `#8C8C8C` | グレーの刷毛装飾 | 2% | 推定 |
| `line` | `#333333` | リストボタンの細枠 | 0% | 推定 |
| `surface` | `#FEFEFE` | 専門家コメントカードの白 | 5% | 画素の実測 |
| `primary-accessible` | `#016BAF` | AA を満たす補正値（計算） |  | 計算 |

- 地は白。装飾として水色の刷毛ストロークを斜めに散らす。
- 購入導線とフッターは黒の全幅帯にする。
- 本文中の重要フレーズはピンク文字で強調する。
- 英字見出しは頭文字1文字だけピンク、残りは黒。
- 数値の強調は白文字を水色/黒の帯の上に置く。
- ブランド紹介など落ち着いたブロックは薄グレー地。
- `table-compare` は文字 `#E6E7E7` × 背景 `#029BFD` のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#016BAF`、4.55:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV・写真上の大きな温度数値 | 欧文サンセリフ | Oswald | 500 | 56px | 1.0 | -0.02em |
| `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Oswald | 600 | 30px | 1.1 | 0.0em |
| `headline-md` | 日本語の見出し | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.02em |
| `headline-sm` | コメントカード見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em |
| `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em |
| `accent` | 黒縦帯の繰り返しラベル・商品名 | 欧文サンセリフ | Oswald | 500 | 13px | 1.2 | 0.02em |
| `label-button` | CTA・リストボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.04em |

- 英字はすべて縦長のコンデンス書体で大文字。
- 数値は特大、単位は小さめに添える。
- 日本語本文は細めのゴシック、行間はゆったり。
- 強調は太字＋ピンク色で行う。
- 注釈は※付きで極小サイズ。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、温度比較表のみ 6 列
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- 商品写真ブロックは中央寄せで幅約70%、下にボタンを縦積み。
- 写真の左右どちらかに黒の縦帯ラベルを付けて交互に配置。
- 英字見出しは左寄せ、一部は右寄せで変化を付ける。
- 購入帯は全幅の黒、内側に白ボタンを縦3つ。

## Elevation & Depth

- 影はほぼ使わない。
- 写真は白フチと軽い影でポラロイド風に傾けて重ねる。
- 奥行きはブラシ装飾を写真の背後に敷いて作る。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの矩形。一部は白フチで傾けた写真。人物の丸型アイコンのみ円形。
- **セクション境界**: 直線で切り替え。境界をブラシ跡がまたぐ。
- ボタンは角丸なしの矩形。右端に黒い丸の矢印アイコン。
- 黒帯の端を筆でかすれさせて切る（PC）。
- 装飾ブラシは斜め20〜30度で配置。

## Components

- **黒の購入CTA**（`button-primary`）: 上段に小さく販売先を並べ、下段に太字で購入を促す。右端に白丸の矢印。
- **商品リストボタン**（`button-list`）: 白地に細い黒枠。英字商品名を大きく、下に日本語名と区分の小枠バッジ。右に黒丸矢印。
- **英字セクション見出し**（`heading-en`）: 大文字コンデンス体、頭文字だけピンク。下に小さく日本語訳、背景に水色ブラシ。
- **黒の縦帯ラベル**（`label-vertical`）: 写真の縁に沿う黒帯に白とピンクで英字を繰り返す。
- **専門家コメントカード**（`card-expert`）: 白カード上部に円形の人物写真をはみ出させ、見出し・本文・肩書き氏名を置く。
- **温度比較表**（`table-compare`）: 色名ラベル列、写真、サーモ画像、水色帯に白の数値を並べた6列表。
- **通販ロゴボタン**（`button-shop`）: 黒帯内の白い矩形にロゴを中央配置。右下に別窓アイコン。
- **商品バナー＋リンク帯**（`banner-link`）: 全幅バナー画像の下にグレーのかすれ帯、中央に誘導文、右に黒丸矢印。

## Do's and Don'ts

**Do**
- 水色の刷毛ストロークを各セクションの背景に必ず散らす。
- 数値は縦長書体で特大にして写真に重ねる。
- 強調フレーズはピンク太字で本文中に入れる。
- ボタンは角のない矩形と黒丸矢印で統一する。
- 注釈は※で根拠を小さく添える。

**Don't**
- 角丸やピル型のボタンにしない。
- 暖色の地色や大きなグラデーションを使わない。
- ピンクを面で多用しない（文字と頭文字のみ）。
- 丸ゴシックや明朝で見出しを作らない。
- 装飾ブラシをきれいな幾何図形に置き換えない。

## Page Structure

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

1. **ファーストビュー**（訴求を一目で伝える）: 空色背景のモデル写真をグリッド状に並べ、各写真に大きな数値。中央に金帯の白コピー。
2. **購入CTA**（早めの購入導線）: 黒の矩形ボタンを全幅近くに1つ。
3. **問題提起・新提案**（悩みと解決の考え方を示す）: 下線マーカー付き見出しと本文。重要語はピンク。
4. **検証データ**（数値で根拠を示す）: 6列の比較表とサーモ画像、水色帯に数値。
5. **専門家コメント**（第三者の信頼性）: 円形写真付き白カードを2枚、水色ブラシ背景の上に。
6. **商品ラインナップ**（色ごとに商品を紹介）: 写真＋黒縦帯ラベル＋数値、下にリストボタンを縦積みで繰り返す。
7. **動画**（CM動画を見せる）: 英字見出しの下に16:9の埋め込み。
8. **技術の説明**（ダメージ軽減技術を伝える）: 傾けた写真2枚、右寄せ英字見出し、比較写真とグレーブラシ。
9. **ブランド紹介**（実績と世界観）: 薄グレー地に写真と短文、出典注釈。
10. **購入先一覧**（通販へ誘導）: 黒全幅帯に白ロゴボタンを縦3つ。
11. **関連商品バナー**（他商品へ回遊）: バナー画像＋グレーのかすれリンク帯を縦に並べる。
12. **注意事項・フッター**（使用上の注意と締め）: 黒枠の開閉ボタン、黒フッターにロゴと著作権表示。

## Imagery

- 空色の無地背景で撮った、鮮やかな髪色のモデルの胸から上の写真。
- 目線は上やカメラ。サングラスなどで遊び心を出す。
- 商品パッケージを写真の右下に合成する。
- 水色・淡水色・グレーの擦れた刷毛ストロークを装飾に使う。
- 白フチ付きのスナップ写真を傾けて重ねる。
- サーモグラフィ画像でデータの説得力を出す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC のFVは大きな写真1枚と小さな写真4枚のグリッド、コピーは横1行の金帯。
- PC の専門家カードは横長で左右交互に配置し、縦書きの英字を添える。
- PC の商品ブロックは左右にずらしたジグザグ配置。
- PC の通販ボタンは横3列、関連バナーは2×2のグリッド。
- PC の本文幅は約70%で中央寄せ。

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