---
version: alpha
name: Dusty Rose Romantic Fashion Lookbook LP
description: くすみピンクと白の地に、深いモーヴブラウンの帯を重ねたバレンタイン向けファッション特集 LP。写真は余白を広めにとって左右にずらして配置し、筆記体の欧文見出しと赤ワイン色のセリフ見出しで甘さと上品さを出す。商品名と価格は細い明朝の 1 行リストにまとめ、矢印リンクを付ける。
colors:
  primary: '#7B5457'
  background: '#FFFFFF'
  background-alt: '#F9E1E1'
  secondary: '#EDD3C5'
  accent-1: '#8E1F2A'
  text: '#7B3A3E'
  dark-section: '#7B5457'
  on-dark: '#FFFFFF'
  text-muted: '#C7A9AB'
  line: '#AE8A84'
  surface: '#EEECED'
typography:
  display:
    fontFamily: Pinyon Script
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.1
  headline-lg:
    fontFamily: Abril Fatface
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.01em
  headline-md:
    fontFamily: Playfair Display
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.04em
  body-md:
    fontFamily: Shippori Mincho
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.06em
  note:
    fontFamily: Noto Serif JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.04em
  accent:
    fontFamily: Cormorant Garamond
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  label-button:
    fontFamily: Cormorant Garamond
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.25em
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}'
  heart-frame-cta:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 300px
  price-list:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 20px
  script-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 80px
  serif-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    height: 70px
  photo-carousel:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-1}'
    rounded: '{rounded.full}'
    height: 180px
  offset-color-block:
    backgroundColor: '{colors.primary}'
    height: 300px
  credit-list:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 140px
  share-icons:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 80px
---

# DESIGN.md — くすみローズ×ピンクの甘いアパレル特集 LP（Dusty Rose Romantic Fashion Lookbook LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい
- **キーワード**: くすみピンク・モーヴブラウン・筆記体・ルックブック・リボン・非対称レイアウト
- **地の質感**: フラットな単色面。写真は白〜淡いグレーの背景で柔らかく撮る。
- **形**: 角丸なしの四角い写真を基本にする。アクセントとして円形の切り抜き、フリル付きハートの線画、少し傾けた写真を使う。
- **温度感**: 暖かく甘い。ただし彩度を抑えて大人っぽくする。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#7B5457` | ブランド帯・後半の地色（モーヴブラウン） | 27% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の地色（白） | 21% | 画素の実測 |
| `background-alt` | `#F9E1E1` | くすみピンクの地色セクション | 14% | 画素の実測 |
| `secondary` | `#EDD3C5` | 写真のベージュピンク | 11% | 画素の実測 |
| `accent-1` | `#8E1F2A` | 赤ワイン色の見出し・筆記体 | 1% | 推定 |
| `text` | `#7B3A3E` | 商品名・価格の文字 | 1% | 推定 |
| `dark-section` | `#7B5457` | 濃い帯の影の色 | 3% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 濃い地の上の文字 | 1% | 画素の主要色に補正 |
| `text-muted` | `#C7A9AB` | 濃い地の上の注釈・クレジット | 1% | 画素の実測 |
| `line` | `#AE8A84` | 濃い地の上の細い線・ハート枠 | 1% | 画素の主要色に補正 |
| `surface` | `#EEECED` | 商品写真の背景の淡いグレー | 4% | 画素の主要色に補正 |

- 地の色は白、くすみピンク、モーヴブラウンの 3 色を、セクションごとに切り替える。
- モーヴブラウンの面は写真の背面に、ずらした四角としても敷く。
- 見出しと価格の文字は赤ワイン色に統一する。黒は使わない。
- 濃い地の上の文字は白にし、補足は淡いローズグレーにする。
- 強い原色や派手なグラデーションは使わない。
- `credit-list` は文字 `#C7A9AB` × 背景 `#7B5457` のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 筆記体の欧文の大見出し | 欧文スクリプト | Pinyon Script | 400 | 44px | 1.1 | 0.0em |
| `headline-lg` | 太いセリフの欧文の見出し | 欧文セリフ | Abril Fatface | 400 | 28px | 1.15 | 0.01em |
| `headline-md` | 濃い地の上の欧文の小見出し | 欧文セリフ | Playfair Display | 400 | 18px | 1.4 | 0.04em |
| `body-md` | リード文・説明文 | 明朝 | Shippori Mincho | 500 | 13px | 2.0 | 0.06em |
| `note` | 商品名・価格・カラー展開 | 明朝 | Noto Serif JP | 400 | 11px | 1.7 | 0.04em |
| `accent` | 大きな日付の数字 | 欧文セリフ | Cormorant Garamond | 400 | 34px | 1.1 | 0.02em |
| `label-button` | 字間を広げた大文字のリンク | 欧文セリフ | Cormorant Garamond | 500 | 14px | 1.4 | 0.25em |

- 和文はすべて明朝で細く組み、行間を広くとる。
- 欧文の見出しは、筆記体と太いセリフ体を使い分ける。
- 価格は『商品名 ─ ¥価格 ↗』の形で 1 行にまとめる。
- カラー展開は大文字の欧文にし、価格の下に小さく置く。
- 見出しは右寄せや左右にずらした配置にして、動きを出す。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は 2 枚並びや左右にずらした配置を混ぜる。
- **本文ブロックの幅**: 画面幅の約 84%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- 写真は左右非対称に置き、余白を大きくとる。
- 商品の切り抜き写真の下に、価格リストを中央または右寄せで置く。
- 着用写真のカルーセルは画面の端まで広げ、左右に円形の矢印を置く。
- セクションの境界は色面の切り替えだけで表す。
- 写真をまたいで色面を重ね、奥行きを出す。

## Elevation & Depth

- 影は基本的に使わず、フラットにする。
- カルーセルの白い円形矢印だけ、ごく薄い影を付ける。
- 色面と写真をずらして重ね、レイヤー感を出す。

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸なしの長方形が基本。部分的に円形の切り抜きや、傾けた写真を使う。
- **セクション境界**: 直線の色面で切り替える。色面は写真の途中で切り替えてもよい。
- ボタンは塗りの箱にせず、テキストリンクと線の装飾で表す。
- フリル付きハートの線画を装飾枠に使う。
- 四隅だけの L 字の細いコーナー線で、領域を囲む。

## Components

- **ハート枠の一覧リンク**（`heart-frame-cta`）: 濃い地の上に、フリル付きハートの線画と L 字のコーナー線を置く。中に欧文の見出し、短い線、字間を広げた大文字のリンクを入れる。
- **商品価格リスト**（`price-list`）: 細い明朝で『商品名 ─ ¥価格 ↗』を縦に並べる。罫線でリーダーをつなぐ。
- **筆記体の見出し**（`script-heading`）: 赤ワイン色の筆記体を 2 行に分け、段差をつけてずらす。
- **太いセリフの見出し**（`serif-heading`）: 右寄せで 2〜3 行にし、上に小さなロゴ入りのハート装飾を添える。
- **着用写真カルーセル**（`photo-carousel`）: 縦長の写真を、画面端で途切れるように並べる。左右に白い円形の矢印ボタンを置く。
- **ずらし色面**（`offset-color-block`）: モーヴブラウンの四角を、写真の背後に一部だけ重ねて敷く。
- **クレジット表**（`credit-list`）: 中央の軸の左に役職を右寄せ、右に名前を左寄せで並べる 2 列の表。
- **SNS シェア**（`share-icons`）: 字間を広げた見出しの下に、白い SNS アイコンを 3 つ横に並べる。

## Do's and Don'ts

**Do**
- 和文は明朝で細く、行間を広く組む。
- 写真は余白を広めにとり、左右にずらして配置する。
- 地色の 3 色を交互に使い、リズムを作る。
- 装飾はリボンやハートの細い線画に限定する。
- 価格は 1 行のリンクにまとめ、控えめに見せる。

**Don't**
- 塗りの大きなボタンや角丸のピル型ボタンを使わない。
- 黒い文字や原色の赤を使わない。
- ゴシック体の太字で見出しを作らない。
- 写真に影や枠を付けすぎない。
- 情報を詰め込みすぎない。

## Page Structure

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

1. **ファーストビュー**（企画の世界観を伝える）: 全面にモデル写真を敷き、左側に筆記体のロゴ見出し、二重線、中央揃えの明朝のリード文を重ねる。
2. **ルック 1**（主力アイテムを着用写真で見せる）: くすみピンクの地に、大小の写真を非対称に配置する。右上に太いセリフの見出しと価格リストを置く。
3. **商品の切り抜き**（単品を見せる）: 切り抜き写真の下に、価格とカラー展開を中央揃えで置く。
4. **着用カルーセル**（コーディネートを複数見せる）: 白地に、画面の端まで広がるスライダーを置く。右下に価格リストを置く。
5. **ディテール**（素材やシルエットを強調する）: 円形に切り抜いた写真に、集中線の装飾を添える。単品写真を 2 つ並べる。
6. **コラボ紹介**（コラボアイテムを訴求する）: 筆記体の 2 行見出しの後に、写真とモーヴの色面をずらして重ねる。リボンのイラストを散らす。
7. **メッセージと小物**（小物を紹介する）: 白地の右上に、筆記体と太いセリフの英文メッセージを置く。小物は左右にずらして配置する。
8. **一覧への誘導**（全商品ページへ送る）: 濃い地に、ハート枠のリンクと注釈を置く。
9. **ノベルティ告知**（購入特典を伝える）: 線の枠の中に、傾けた写真を置く。白い筆記体の大見出し、大きな日付、条件文を続ける。
10. **パートナー紹介**（コラボ先を紹介する）: 左に線の枠で囲んだロゴ、右に見出しと明朝の本文、外部リンクを置く。
11. **シェア・クレジット**（拡散を促し、制作者を記載する）: 短い区切り線の後に SNS アイコン、2 列のクレジット、コピーライトを続ける。

## Imagery

- 淡いグレーの白壁と、ふわふわのラグの上で撮った柔らかい自然光の人物写真。
- ピンク、ベージュ、白の服とリボン小物でまとめ、ゆるいポーズで撮る。
- 商品は白背景の切り抜き写真にする。
- リボンの小さなイラストを、薄い紫で散らす。
- フリル付きハートの線画と、手描き風の集中線を装飾にする。
- 俯瞰で撮った写真を少し傾けて、遊びを出す。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央約 70% 幅のコンテンツで、写真を左右にずらした非対称配置にしている。
- SP では写真を 90% 幅前後で縦に積み、ずらし幅は小さくする。
- 2 枚並びの写真は SP でも 2 列のまま維持する。
- カルーセルは SP では 1.3 枚見せにし、スワイプで操作する。
- パートナー紹介の 2 列は、SP では縦に積む。
- クレジット表は SP でも中央の軸で 2 列のまま維持する。

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