---
version: alpha
name: Pastel Scrapbook Picnic Fashion Editorial LP
description: ミント・ピンク・水色の3つの章で地色を切り替えるファッション特集LP。切り抜き写真のコラージュと手描きキャラクター、細い欧文セリフ見出しで、遊び心のある雑誌風の世界観をつくる。各章の最後は商品リストとBUYボタンで締めて購入へつなげる。後半はくすみモーヴの地に点線枠のキャンペーン情報を置き、最後はオレンジ地の目次で終わる。
colors:
  primary: '#EA5206'
  background: '#F7FFF0'
  background-alt: '#FFF5F3'
  tint-1: '#E1ECFE'
  dark-section: '#F1F2F5'
  accent-1: '#53A840'
  accent-2: '#C8A8A3'
  accent-3: '#7680C1'
  marker: '#C4FCCB'
  text: '#1E1E1E'
  cta: '#FCCCEC'
  on-cta: '#1E1E1E'
  secondary: '#E8383D'
  surface: '#FEFEFD'
  on-dark: '#FEFFFD'
  primary-accessible: '#CF4805'
typography:
  display:
    fontFamily: Italiana
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Playfair Display
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.1
  headline-md:
    fontFamily: Italiana
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: Italiana
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  accent:
    fontFamily: Josefin Sans
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0.08em
  label-button:
    fontFamily: Montserrat
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 90px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-buy:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 20px
  product-row:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 56px
  chapter-title:
    textColor: '{colors.accent-1}'
    typography: '{typography.display}'
    height: 90px
  marker-label:
    backgroundColor: '{colors.marker}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    height: 18px
  dotted-box:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 800px
  step-circle:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 56px
  item-link-list:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 100px
  recommend-carousel:
    textColor: '{colors.text}'
    typography: '{typography.note}'
    height: 180px
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 40px
  index-nav:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 600px
---

# DESIGN.md — パステル三色のコラージュ風アパレル特集 LP（Pastel Scrapbook Picnic Fashion Editorial LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい
- **キーワード**: コラージュ・切り抜き写真・パステル章分け・細い欧文セリフ・手描きキャラ・雑誌エディトリアル
- **地の質感**: 基本はフラットな淡色の面。方眼紙の柄、紙のような微細ノイズ、白フチのステッカー風切り抜きで手作り感を足す。
- **形**: 写真は不定形に切り抜き、白フチを付けて傾ける。BUYボタンは小さなピル型。キャンペーン枠は四角い点線。人物の顔写真は円形に切り抜く。
- **温度感**: 春らしい明るさと甘さ。ミントの温かみ、ピンクの柔らかさ、水色の涼しさを章ごとに切り替える。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#EA5206` | 目次エリアの地色とブランドロゴの色 | 4% | 画素の実測 |
| `background` | `#F7FFF0` | 緑の章の地色（淡いミント） | 12% | 画素の実測 |
| `background-alt` | `#FFF5F3` | ピンクの章の地色 | 16% | 画素の実測 |
| `tint-1` | `#E1ECFE` | 海の章の地色（淡い水色） | 20% | 画素の実測 |
| `dark-section` | `#F1F2F5` | キャンペーン情報エリアの、くすんだモーヴの地色 | 20% | 画素の実測 |
| `accent-1` | `#53A840` | 緑の章の見出し色とBUYボタンの塗り | 0% | 画素の実測 |
| `accent-2` | `#C8A8A3` | ピンクの章の見出し色 | 0% | 画素の実測 |
| `accent-3` | `#7680C1` | 海の章の見出し色とBUYボタンの塗り | 0% | 画素の実測 |
| `marker` | `#C4FCCB` | コラボ名ラベルの蛍光グリーンのマーカー | 0% | 画素の実測 |
| `text` | `#1E1E1E` | 見出しと本文の文字色 | 2% | 推定 |
| `cta` | `#FCCCEC` | BUYボタン（ピンクの章）の塗り | 0% | 画素の実測 |
| `on-cta` | `#1E1E1E` | BUYボタンの文字と枠線 | 0% | 推定 |
| `secondary` | `#E8383D` | セール価格の赤 | 0% | 推定 |
| `surface` | `#FEFEFD` | 白いボタンと円形写真の面 | 3% | 画素の実測 |
| `on-dark` | `#FEFFFD` | オレンジ地の上の白文字 | 0% | 画素の主要色に補正 |
| `primary-accessible` | `#CF4805` | AA を満たす補正値（計算） |  | 計算 |

- 章ごとに地色と見出しの強調色を一組にする（ミント×緑、ピンク×サーモン、水色×青紫）。
- BUYボタンの塗りは、その章の強調色を淡くしたものに揃える。
- 本文はどの章でもほぼ黒の一色で書く。
- セール価格は、元値に打ち消し線を引き、赤で並べて書く。
- キャンペーン情報はくすんだモーヴの地に、黒い点線の枠で区切る。
- ページの最後だけ鮮やかなオレンジを全面に敷き、締めのアクセントにする。
- `index-nav` は文字 `#FEFFFD` × 背景 `#EA5206` のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CF4805`、4.57:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 章タイトルの欧文（小文字と大文字を混ぜて大きく書く） | 欧文セリフ | Italiana | 400 | 40px | 1.1 | -0.01em |
| `headline-lg` | ファーストビューの、斜体の欧文キャッチ | 欧文セリフ | Playfair Display | 400 | 34px | 1.1 | 0.0em |
| `headline-md` | キャンペーンやイベントの欧文見出し | 欧文セリフ | Italiana | 400 | 30px | 1.2 | 0.0em |
| `headline-sm` | 「おすすめ」などの小見出し（章の強調色で書く） | 欧文セリフ | Italiana | 400 | 18px | 1.3 | 0.0em |
| `body-md` | リード文とキャンペーンの説明文（中央揃え） | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.05em |
| `note` | 商品のブランド名・商品名・価格、注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em |
| `accent` | 写真に沿って弧を描く欧文の飾り文字 | 欧文サンセリフ | Josefin Sans | 300 | 22px | 1.0 | 0.08em |
| `label-button` | BUYボタンと目次の項目名 | 欧文サンセリフ | Montserrat | 700 | 10px | 1.0 | 0.02em |

- 見出しは細い欧文セリフを主役にし、日本語の見出しは最小限にする。
- 章タイトルは、小さい前置詞と大きい名詞の2段構成でサイズ差を付ける。
- 本文は中央揃えにして、行間を広めに取る。
- 飾りの欧文は写真の輪郭に沿って曲げて配置する。
- 商品情報は小さな文字で、ブランド名・商品名・価格の3行に並べる。
- 目次だけは太い欧文サンセリフの大文字にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は画面の幅いっぱいまで、または端からはみ出させて自由に配置する。
- **本文ブロックの幅**: 画面幅の約 85%
- **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
- 章の最初に左寄せの大きな欧文タイトルを置き、その下にメインの写真を置く。
- 商品リストは、左にサムネイル・中央に商品情報・右にBUYボタンの横並びを6〜8行重ねる。
- おすすめ商品は、横にスクロールするカードを4枚並べる。
- コラージュ部分では写真を互い違いに置き、重ねたり上下反転させたりする。
- キャンペーン情報は点線で囲んだ箱に縦積みし、内側に約24pxの余白を取る。

## Elevation & Depth

- 影はほとんど使わない。
- 切り抜き写真には白フチと淡いドロップシャドウを付け、ステッカー風にする。
- カードは影を付けず、枠線か地色の差だけで区切る。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 人物は輪郭に沿った不定形に切り抜き、白フチを付ける。写真は長方形か角丸の長方形にする。プロフィール写真や景品写真は円形にする。
- **セクション境界**: 境界は地色を直線で切り替えるだけにする。目次の上には白い雲形のラベルを置き、区切りには細い波線を使う。
- BUYボタンは高さ約18pxの小さなピル型にし、黒の細い枠を付ける。
- キャンペーンの箱は角丸なしで、1pxの黒い点線で囲む。
- STEPの番号は細い線の円で囲む。

## Components

- **BUYボタン**（`button-buy`）: 商品行の右端に置く小さなピル型ボタン。章の色を淡くした塗りに黒い細枠を付ける。
- **商品リストの行**（`product-row`）: 約48pxの正方形サムネイル、ブランド名・商品名・価格の3行、BUYボタンを横に並べる。
- **章タイトル**（`chapter-title`）: 黒の短い欧文の下に、章の色で前置詞（小）と名詞（大）を2段で組む。
- **コラボ名のマーカーラベル**（`marker-label`）: 蛍光グリーンの帯の上に、手書き風の大文字で書く。
- **点線のキャンペーン枠**（`dotted-box`）: モーヴ地の上に黒い点線の箱を置き、欧文見出し・説明・円形写真・注釈を中に入れる。
- **手順の番号**（`step-circle`）: 細い線の円の中に小文字の欧文で手順番号を書き、手順の間を▼でつなぐ。
- **価格付きの下線リンク**（`item-link-list`）: アイテム名と価格を太字にして下線を引き、文章のように続けて並べる。
- **おすすめ商品のカルーセル**（`recommend-carousel`）: 縦長の写真カードを横にスクロールさせる。右下に「すべて見る」の下線リンクを置く。
- **白いボックスボタン**（`button-secondary`）: 白い長方形のボタンに黒文字で書き、文末に「＞」を付ける。
- **オレンジの目次**（`index-nav`）: オレンジ地に白い太字の欧文を2列で並べる。項目の頭に丸い矢印を付け、グループの間は細い白線で区切る。

## Do's and Don'ts

**Do**
- 章ごとに地色と強調色を一組で切り替える。
- 人物写真は白フチ付きの不定形に切り抜き、少し傾けて重ねる。
- お菓子やグミなどの切り抜き素材を、画面の端からはみ出させて散らす。
- 手描きの白いキャラクターを余白にちりばめる。
- どの章も、最後は商品リストとBUYボタンで締める。
- 見出しは細い欧文セリフで、軽く上品にまとめる。

**Don't**
- 太いゴシックの大見出しや、濃い色の帯は使わない。
- BUYボタンを大きく派手にしない。
- 写真をすべて同じ大きさの四角で整列させない。
- 影の強いカードUIにしない。
- 1つの章の中で複数の強調色を混ぜない。

## Page Structure

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

1. **ファーストビュー**（特集の世界観とテーマを提示する）: 淡い黄緑のグラデーションの地にメイン写真を置き、お菓子の切り抜きを重ねる。下に斜体の欧文キャッチと日本語タイトルを置く。
2. **リード文**（企画の概要を伝える）: 中央揃えの本文を8行ほど、行間を広く組む。
3. **キャンペーン概要**（特典を早めに知らせる）: 白地に黒い細枠の箱を置き、マーカーラベル・欧文見出し・vol別の条件・下線リンクを入れる。
4. **章の目次**（3つの章へ誘導する）: 方眼紙の地に、白フチの切り抜き写真3枚とそれぞれの曲線欧文を互い違いに置く。
5. **章1（緑）**（1つ目のコーディネートを紹介して販売する）: ミントの地に章タイトル・写真・商品リストを置き、続けてコラージュ、アイテムの平置き写真と下線リンク、おすすめカルーセルを並べる。
6. **章2（ピンク）**（2つ目のコーディネートを紹介して販売する）: ピンクの地に同じ構成で並べる。雲や花の切り抜き、文字の弧、アイス柄の繰り返しを加える。
7. **章3（海）**（3つ目のコーディネートを紹介して販売する）: 水色の地に同じ構成で並べる。水面の不定形の切り抜き、反転させた写真、ヤシの木などの夏の素材を使う。
8. **雑貨への導線**（ページ内に登場した雑貨へ誘導する）: 中央に白いボックスボタンを置く。
9. **キャンペーン詳細**（特典・応募方法・期間を伝える）: モーヴの地に点線の箱を置き、円形の景品写真、手順番号、【】で囲んだ見出しで期間を示す。
10. **イベント情報**（関連イベントを告知する）: 点線の箱の中に、説明文・円形写真・会場情報の表を入れる。
11. **プロフィール**（関係する人物やキャラクターを紹介する）: 波線で区切り、欧文見出し・円形の顔写真・左揃えの経歴文を置く。
12. **目次**（関連する企画へ回遊させる）: オレンジの全面地に雲形のラベルを置き、白い太字の欧文で2列の目次とバナー2枚を並べる。

## Imagery

- 人物は自然光で明るく撮った全身やバストアップを使い、背景はセットや空、水面にする。
- 人物は輪郭に沿って切り抜き、白フチと淡い影を付けたステッカー風にする。
- お菓子・グミ・フルーツ・花の切り抜きを画面の端に散らす。
- 線画の白いゆるキャラを、ハートなどと一緒に添える。
- アイテムは、地色に合う背景の上に平置きのコラージュでまとめる。
- 景品や人物の写真は白い円の中に収める。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC版の画像はない。PCでは本文の幅を約600〜720pxにし、中央に寄せて置くことを推奨する。
- コラージュは左右の余白にも切り抜き素材を広げ、はみ出し感を保つ。
- 商品リストは、PCでは2カラムのグリッドにしてもよい。
- おすすめのカルーセルは、PCでは4〜5枚を一度に見せる。
- 地色の切り替えは、PCでも画面の端から端まで全幅で行う。

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