---
version: alpha
name: Pastel Pink Holiday Cosmetics Collection LP
description: くすみピンクと白を基調に、筆記体の欧文見出しとリボン・封蝋モチーフで甘く上品に仕上げた限定コスメ LP。商品ごとにイメージ写真・色見本・目元/唇の着用写真をタイル状に並べ、色の違いを見せることに重点を置いている。
colors:
  primary: '#EEB2CB'
  background: '#FFFFFF'
  secondary: '#EABECF'
  background-alt: '#F3E4EB'
  tint-1: '#EAE7E2'
  accent-1: '#EEA3C1'
  text: '#4A4446'
  text-body: '#6A6466'
  accent-2: '#B26464'
  on-dark: '#FFFFFF'
  line: '#DFD9D6'
  secondary-accessible: '#F4DDE6'
  accent-1-accessible: '#D93174'
  accent-2-accessible: '#AF5F5F'
typography:
  display:
    fontFamily: Fraunces
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.1
  accent:
    fontFamily: Great Vibes
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Fraunces
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.3
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  label-button:
    fontFamily: Montserrat
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.3
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 60px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  script-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 60px
  product-intro-block:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-lg}'
    height: 760px
  shade-header:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    height: 130px
  swatch-grid:
    backgroundColor: '{colors.background}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 440px
  tag-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 32px
  layering-tile:
    backgroundColor: '{colors.accent-2}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 125px
  lip-swatch-stack:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 90px
---

# DESIGN.md — ミルキーピンクの限定コスメコレクション LP（Pastel Pink Holiday Cosmetics Collection LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、やさしい・柔らかい、上品・高級
- **キーワード**: くすみピンク・パステル・リボン・封蝋・スウォッチ・ホリデー
- **地の質感**: マットなパウダー感とオーガンジーの透け感。フラットな色面に、柔らかい光の写真を組み合わせる
- **形**: 四角いブロックと写真タイルが中心。角丸はほぼなく、FV だけ斜めの切り返しで封筒のフラップ風に見せる
- **温度感**: 暖かめのピンクベージュ。甘いけれど甘すぎない、ミルキーで落ち着いたトーン

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#EEB2CB` | ブランドピンク（欧文見出し・タグ帯） | 3% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の実測 |
| `secondary` | `#EABECF` | 商品紹介セクションのくすみピンク地 | 12% | 画素の実測 |
| `background-alt` | `#F3E4EB` | 色展開セクションの淡いピンク地 | 9% | 画素の実測 |
| `tint-1` | `#EAE7E2` | FV のグレージュ地 | 5% | 画素の実測 |
| `accent-1` | `#EEA3C1` | 筆記体の欧文見出し文字 | 1% | 画素の実測 |
| `text` | `#4A4446` | 見出し・商品名の濃いグレー | 1% | 推定 |
| `text-body` | `#6A6466` | 本文のグレー | 1% | 推定 |
| `accent-2` | `#B26464` | リップのモーヴローズ色面 | 2% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 色面上の白文字 | 1% | 画素の主要色に補正 |
| `line` | `#DFD9D6` | セクション区切りの薄線 | 1% | 画素の主要色に補正 |
| `secondary-accessible` | `#F4DDE6` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#D93174` | AA を満たす補正値（計算） |  | 計算 |
| `accent-2-accessible` | `#AF5F5F` | AA を満たす補正値（計算） |  | 計算 |

- 地は白・くすみピンク・淡いピンクの 3 色を交互に切り替え、セクションの区切りに使う
- 新商品の紹介ブロックはくすみピンク地に白枠の写真を置く
- 欧文見出しと色名はブランドピンクにし、日本語はグレーで添える
- 黒は使わない。文字は濃いグレーまで
- 濃い色は商品の色見本（リップ・シャドウ）だけに任せ、UI には使わない
- 色面の上に置く文字は白にし、写真の上には置かない
- `product-intro-block` は文字 `#6A6466` × 背景 `#EABECF` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#F4DDE6`、4.5:1）を使う。
- `shade-header` は文字 `#EEA3C1` × 背景 `#FFFFFF` のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D93174`、4.52:1）を使う。
- `layering-tile` は文字 `#FFFFFF` × 背景 `#B26464` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#AF5F5F`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV のコレクション名（太いセリフ欧文） | 欧文セリフ | Fraunces | 700 | 34px | 1.1 | 0.0em |
| `accent` | セクション見出しの筆記体欧文 | 欧文スクリプト | Great Vibes | 400 | 32px | 1.2 | 0.0em |
| `headline-md` | 色名の欧文（ピンク） | 欧文セリフ | Fraunces | 700 | 17px | 1.3 | 0.0em |
| `headline-sm` | 商品名・色名の日本語 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em |
| `body-lg` | 商品の特長をまとめたリード文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.05em |
| `body-md` | 使い方の説明・色見本の名前 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em |
| `label-button` | #付きのタグ見出し帯 | 欧文サンセリフ | Montserrat | 700 | 13px | 1.3 | 0.0em |

- 欧文の筆記体はセクション見出しにだけ使い、ピンク色で中央に置く
- 色名は欧文セリフ（ピンク）＋日本語ゴシック（グレー）の 2 段にする
- 日本語の本文は中央揃えで 2 行程度に短くまとめ、その下に太字の商品名を置く
- 文字は細めから中太にし、極太は使わない
- 写真の上に乗せる文字は白の小さな欧文ラベルにとどめる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。着用写真は 2 列、色見本は 3 列（質感・パレット・目元）のグリッド
- **本文ブロックの幅**: 画面幅の約 94%
- **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
- 写真タイルどうしの隙間は 2〜3px の白
- 商品の紹介ブロックは色面の地に、余白 24px をとって写真を内側に置く
- 色ごとのブロックはパレット画像（左）と色名（右）を横に並べて始める
- 見出しの上下には 40〜60px の余白をとる
- タグ見出し帯は写真グリッドと同じ幅にそろえる

## Elevation & Depth

- 影はほとんど使わず、フラットな面で構成する
- 影がつくのは商品パレットの切り抜き画像のごく弱い影だけ
- 階層の差は、地の色の切り替えと白い枠で表す

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真は直角の矩形。商品は背景を抜いた切り抜き画像
- **セクション境界**: 基本は直線の色面切り替え。FV だけ封筒のフラップのような斜めの V 字にする
- 角丸は使わずシャープな矩形にする
- 丸い封蝋のモチーフを FV の中央にアクセントとして置く
- リップの色見本はなめらかな筆跡の形で重ねて見せる

## Components

- **筆記体セクション見出し**（`script-heading`）: ピンクの筆記体欧文を中央に置く見出し。装飾の線は付けない
- **商品紹介ブロック**（`product-intro-block`）: くすみピンク地に、2 行のリード文、太字の商品名、余白付きの大きなイメージ写真を順に置く
- **色名ヘッダー**（`shade-header`）: 左にパレットの切り抜き画像、右に欧文の色名（ピンク）と日本語の色名（グレー）を置く
- **色見本グリッド**（`swatch-grid`）: 横 1 行に「質感スウォッチ・パレットの崩し・目元の着用写真」の 3 枚を並べ、4 行重ねる。白文字の欧文ラベル付き
- **#タグ見出し帯**（`tag-band`）: ピンクの帯の左側に「#英語」の見出しを置き、すぐ下に写真グリッドを続ける
- **重ね付け色面タイル**（`layering-tile`）: 唇の写真の横に、リップの色面と白文字の「A + B」を並べる
- **リップ色の筆跡スウォッチ**（`lip-swatch-stack`）: 筆跡の形をした色面を斜めに重ね、中央に白い欧文と日本語の色名を入れる

## Do's and Don'ts

**Do**
- 地はピンク系と白を交互に使い、全体を淡くまとめる
- 色ごとに目元・唇の着用写真を必ず添える
- リボン・オーガンジー・封蝋などのギフト小物で世界観を出す
- 欧文見出しはピンクの筆記体かセリフ体にする
- 写真は高い明度で、柔らかい拡散光にする

**Don't**
- 真っ黒の文字や濃い色の背景を使わない
- ボタンやバッジを派手に増やして訴求型にしない
- 角丸のカードや強い影を使わない
- 原色の赤や青のアクセントを入れない
- 長い文章を入れない

## Page Structure

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

1. **ファーストビュー**（季節限定コレクションの世界観を伝える）: モデルのアップ写真に筆記体のタイトルを重ね、封筒フラップ風の斜めの切り替えと封蝋を置く。その下にコンセプトの一文とコレクション名、商品の集合写真を続ける
2. **商品紹介（アイシャドウ）**（1 つめの商品を紹介する）: くすみピンク地にリード文 2 行と太字の商品名、白枠付きのイメージ写真を置く
3. **カラー一覧**（全色を一目で比べてもらう）: 筆記体の見出しの下に、腕に塗った全色のスウォッチ写真を置き、色名を縦書きで添える
4. **色ごとの詳細**（色ごとの質感と仕上がりを見せる）: 色名ヘッダー、目元の写真 2 枚、3 列の色見本グリッドの組み合わせを色の数だけ繰り返す
5. **使い方**（塗り方を伝える）: 筆記体の見出しの下に、ブラシと指で塗る写真を 2 列で並べ、1 行の説明を添える
6. **商品紹介（リップ）**（2 つめの商品を紹介する）: くすみピンク地に、リード文・商品名・イメージ写真を置く
7. **リップのカラー展開**（色の違いと重ね付けの方法を伝える）: 淡いピンク地に、筆跡スウォッチの重ね、#タグ帯付きの唇写真 2×2 グリッド、重ね付けの色面タイルを置く
8. **商品紹介（チーク）**（3 つめの商品を紹介する）: くすみピンク地に、リード文・商品名・イメージ写真を置く
9. **チークの色詳細**（質感と組み合わせを見せる）: 白地に色名とパレット画像、肌の写真と質感写真の非対称グリッド、3 つの円形スウォッチを並べる

## Imagery

- モデルは透明感のある肌のアップで、ピンクのメイクにリボンやシュシュを合わせる
- 商品は白〜生成りの布の上に置き、オーガンジーのリボンとピンクの封蝋を散らして俯瞰で撮る
- 目元・唇の接写は明るく均一な光で撮り、色が正しく見えるようにする
- スウォッチは肌や紙の上に平塗りし、ラメは粒子感が見えるまで寄って撮る
- 全体を淡いピンクの色かぶりに統一し、彩度は控えめにする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央に 600〜750px 幅の 1 カラムを置き、左右は淡いピンクか白で埋める
- 色見本グリッドは PC でも 3 列を保ち、写真を拡大して見せる
- 着用写真は PC で 4 列に広げてもよい
- 見出しのサイズは PC で 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-176373b5`（元 LP の URL から採番）
- **元 LP**: https://www.etudehouse.com/jp/ja/event/detail/586/sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。