---
version: alpha
name: Pop Pink Mascot Cosmetics LP
description: ピンクとマゼンタを軸に、白い吹き出し、手書き風の文字、マスコットキャラクター、線画イラストを組み合わせた、元気でかわいい若年女性向けスキンケアLP。前半は使う場面と特長を感情に訴えるビジュアルで見せ、後半は商品スペック、オレンジのカートボタン、額縁風カードに入れた体験談で購入を後押しする。
colors:
  primary: '#EC74A2'
  accent-1: '#BB2B78'
  marker: '#CC0274'
  background: '#FFFFFE'
  background-alt: '#FEF4F2'
  tint-1: '#FCF3F4'
  surface: '#FEFDF2'
  line: '#E8C0CA'
  secondary: '#1F7AB8'
  cta: '#F08C1E'
  on-cta: '#FFFFFF'
  accent-2: '#3FA9B5'
  text-body: '#555555'
  cta-accessible: '#B1620C'
  accent-2-accessible: '#308089'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.2
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.35
    letterSpacing: 0.02em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.02em
  accent:
    fontFamily: Yomogi
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  button-cart:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 48px
  speech-bubble:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 120px
  feature-circle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 160px
  scene-label:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.on-cta}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 36px
  media-badge:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-sm}'
    height: 64px
  testimonial-frame:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 260px
  product-badge:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  tag-outline:
    textColor: '{colors.secondary}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 20px
---

# DESIGN.md — ピンク×手書き吹き出しの若年向けコスメLP（Pop Pink Mascot Cosmetics LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: ショッキングピンク・白い吹き出し・手書き風文字・マスコットキャラ・斜めストライプ・額縁風カード
- **地の質感**: 斜めストライプや淡い柄の地。写真に白フチと影を付け、紙を貼ったような立体感を出す
- **形**: 円・雲形の吹き出し、角丸の帯ラベル、少し傾けた写真フレーム、装飾的な額縁
- **温度感**: 暖色寄り。ピンクの甘さに、オレンジのCTAと青の見出しで締まりを加える

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#EC74A2` | ブランドピンク。特長セクションなどの全面の地 | 10% | 画素の実測 |
| `accent-1` | `#BB2B78` | 強調見出しのマゼンタ文字 | 2% | 画素の実測 |
| `marker` | `#CC0274` | 使う場面を示す帯ラベルの面 | 1% | 画素の実測 |
| `background` | `#FFFFFE` | 基本の白地 | 19% | 画素の実測 |
| `background-alt` | `#FEF4F2` | 淡いピンクのストライプ地 | 11% | 画素の実測 |
| `tint-1` | `#FCF3F4` | 濃いめの薄ピンク。ストライプや額縁の装飾 | 6% | 画素の実測 |
| `surface` | `#FEFDF2` | 体験談カードのクリーム色の面 | 4% | 画素の実測 |
| `line` | `#E8C0CA` | 額縁カードのピンクの縁取り線 | 1% | 画素の実測 |
| `secondary` | `#1F7AB8` | 商品名の見出しやFVの補足に使う青 | 0% | 推定 |
| `cta` | `#F08C1E` | カートに入れるボタンのオレンジ | 0% | 推定 |
| `on-cta` | `#FFFFFF` | CTAボタン上の白文字 | 0% | 画素の主要色に補正 |
| `accent-2` | `#3FA9B5` | メディア掲載バッジのティール | 0% | 推定 |
| `text-body` | `#555555` | 本文・スペック表のグレー文字 | 2% | 推定 |
| `cta-accessible` | `#B1620C` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#308089` | AA を満たす補正値（計算） |  | 計算 |

- 白地・淡いピンクのストライプ地・ピンクの全面地を交互に並べ、セクションの切り替わりを見せる
- ピンクの全面地の上では、白い吹き出しや白い円カードに濃いマゼンタ文字を置く
- 見出しで強調したい語だけをマゼンタにして大きくする
- 購入ボタンにはピンク系を使わずオレンジにして、ピンクの中でも目立たせる
- 商品名や小さな補足見出しには青を使い、甘さを引き締める
- 体験談はクリーム色の面にピンクの額縁を付け、本文の中の強調部分だけをピンク文字にする
- `button-cart` は文字 `#FFFFFF` × 背景 `#F08C1E` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B1620C`、4.54:1）を使う。
- `media-badge` は文字 `#FFFFFF` × 背景 `#3FA9B5` のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#308089`、4.59:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのメインコピー。白フチ付きの太字 | 丸ゴシック | M PLUS Rounded 1c | 900 | 34px | 1.2 | 0em |
| `headline-lg` | セクション見出し。強調語を大きくする | ゴシック | Noto Sans JP | 900 | 26px | 1.35 | 0.02em |
| `headline-md` | 特長の円カード内の見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.02em |
| `accent` | 吹き出しや写真に添える手書き風の文字 | 手書き・筆 | Yomogi | 400 | 18px | 1.4 | 0.05em |
| `headline-sm` | 商品名やリード文の青い見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0em |
| `body-md` | 本文・体験談 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.02em |
| `note` | 成分表・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0em |
| `label-button` | カートボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em |

- 見出しは1行の中で文字の大きさを変え、強調語だけを大きくする
- 写真の上に置く見出しには白い太フチを付けて読みやすくする
- 手書き風の文字は吹き出しと補足だけに使い、本文には使わない
- 見出しはマゼンタと濃いグレーを使い分ける
- 本文は短く改行し、1行に15〜18字程度に収める
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長の円カードは 2 列×2 段も可
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- セクションごとに地の色を全幅で切り替える
- 人物写真と吹き出しを重ね、斜めに流れるように配置する
- 使う場面は、中央のキャラを4つのイラストと帯ラベルで囲む
- 商品スペックは、商品画像の下に情報とボタンを縦に積む
- 体験談は額縁カードを縦に並べ、写真とテキストを左右交互にする

## Elevation & Depth

- 写真フレームには白フチと柔らかい影を付け、少し傾ける
- 吹き出しと円カードには薄い影を付けて、地から浮かせる
- CTAボタンは下側を濃い色にして、立体的に見せる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物は切り抜きか円形にし、雑誌などは傾けた四角に白フチを付ける
- **セクション境界**: 基本は全幅で直線に切り替える。一部は吹き出しのしっぽで次のセクションへつなぐ
- 特長は大きな白い正円カードで見せる
- 悩みと声は雲形・楕円の吹き出しにする
- 帯ラベルは角丸の小さい長方形にする
- 体験談はレース風の額縁で囲む

## Components

- **カート追加ボタン**（`button-cart`）: オレンジのグラデーション。左にカートアイコンを置く
- **吹き出し**（`speech-bubble`）: 白の雲形・楕円の吹き出しに、マゼンタの見出しや手書き風の文字を入れる
- **特長の円カード**（`feature-circle`）: ピンク地の上に白い正円。見出しはマゼンタ、本文はグレー
- **場面の帯ラベル**（`scene-label`）: マゼンタ地に白文字の小さな帯で、線画イラストに添える
- **メディア掲載バッジ**（`media-badge`）: ティールの六角形バッジ。雑誌のコラージュに重ねる
- **体験談の額縁カード**（`testimonial-frame`）: クリーム色の面をピンクのレース風の枠で囲み、人物写真と肩書きを添える
- **商品の円形バッジ**（`product-badge`）: 商品画像に重ねる白い円。特長を短い言葉で書く
- **テスト済みのタグ**（`tag-outline`）: 青い細枠の小さなタグ

## Do's and Don'ts

**Do**
- 強調語はマゼンタで大きくし、見出しに抑揚を付ける
- マスコットキャラを各セクションの端に置いて、つながりを出す
- 人物の表情写真と手書き風の吹き出しで、感情に訴える
- 購入ボタンはオレンジで統一する
- 地の色はセクションごとに交互に変える

**Don't**
- CTAをピンク系にして地に埋もれさせない
- 暗い色や黒の地を使わない
- 角張った硬いカードやフラットすぎるUIにしない
- 手書き風の書体で長い本文を組まない
- 余白を詰めすぎて吹き出しどうしを重ねない

## Page Structure

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

1. **ファーストビュー**（商品と主な特長を一目で伝える）: 淡いグレーの地に、笑顔の人物と商品パッケージ2種、白フチの大きな見出し、新しさを示す丸バッジ、購入リンク、キャラを置く
2. **悩みの提起と解決**（手間がかかるという悩みに共感し、使い方の簡単さを見せる）: ピンクの全面地に、悩む人物、手書き風の吹き出し、円形の手元写真、笑顔の人物を斜めに配置する
3. **仕組みの紹介**（容器の機能を説明する）: ストライプ地に傾けた写真フレームを置き、白背景の帯で文章を重ね、キャラと丸バッジを添える
4. **利用シーン**（日常のどこでも使えることを伝える）: 中央にキャラの顔、周りに4つの線画イラストとマゼンタの帯ラベルを置く
5. **使用感**（仕上がりの質感を伝える）: ぼかした商品写真の地にモデル写真を置き、青い見出し、小さな図解3点、本文を添える
6. **特長**（成分と安全性の訴求）: ピンクのストライプ地の中央に商品を置き、その周りに白い円カードを4つ配置する
7. **メディア掲載**（信頼性を示す）: ベージュ地に雑誌のコラージュを置き、ティールのバッジと桜形の吹き出しを重ねる
8. **商品詳細・購入**（仕様を示し、購入へつなげる）: 白地で、左に商品画像と円形バッジ、右に青い商品名、番号リスト、タグ、成分、オレンジのボタン
9. **お客様の声**（モデルの体験談で後押しする）: ピンクの斜め見出しの下に、額縁カードを3枚縦に並べ、写真の左右を入れ替える
10. **フッター**（会社情報とリンク）: 白地に、リンクの小さな文字と会社の問い合わせ先を置く

## Imagery

- 人物は10〜20代の女性で、明るい表情か悩む表情。背景は白か切り抜き
- 日常の場面は、手描き風の細い線画イラストでモノクロにする
- 丸い目のシンプルなマスコットを、ピンクと白で描く
- 手元の使い方を寄りで撮り、円形に切り抜く
- 雑誌の誌面を傾けて重ね、コラージュにする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCは中央に固定幅で組む。SPでは1カラムにして、写真と吹き出しを縦に積む
- 特長の円カード4つは、SPでは2列×2段にする
- 商品詳細の左右2列は、SPでは画像→情報→ボタンの順に縦に積む
- カートボタンはSPでは横幅いっぱいにする
- 体験談カードは、SPでは写真を上、テキストを下にする

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