---
version: alpha
name: Pastel Color-Block Character Loungewear Lookbook LP
description: マスタード・コバルトブルー・ベリーレッド・淡いブルーグレーの大きな色面を、セクションごとに切り替えるキャラクターコラボのルームウェア LP。写真はピル型・アーチ型に切り抜き、周りに白いアイテム名と価格を曲線に沿って配置する。丸みのある欧文サンセリフで擬音のような短い英語コピーを入れ、太い白縁取りのキャラクターイラストを写真の境目に重ねる。ポップでかわいい雑誌風のルックブック構成。
colors:
  primary: '#2A6CA0'
  secondary: '#EDC677'
  accent-1: '#B43349'
  background: '#F2EEEB'
  background-alt: '#CAD8E5'
  accent-2: '#A9BCD1'
  on-primary: '#F1F0EE'
  accent-3: '#E58AA6'
  text: '#AA3046'
  text-muted: '#E0C584'
  dark-section: '#C81928'
typography:
  display:
    fontFamily: M PLUS Rounded 1c
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.12em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0.02em
  body-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 800
    lineHeight: 2.2
    letterSpacing: 0.08em
  body-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 12px
    fontWeight: 700
    lineHeight: 2.1
    letterSpacing: 0.06em
  accent:
    fontFamily: M PLUS Rounded 1c
    fontSize: 12px
    fontWeight: 800
    lineHeight: 1.7
    letterSpacing: 0.04em
  note:
    fontFamily: M PLUS Rounded 1c
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1.8
    letterSpacing: 0.04em
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.04em
rounded:
  sm: 999px
  md: 160px
  lg: 200px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 0px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-grid:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    height: 450px
  category-pill:
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 30px
  arch-heading:
    textColor: '{colors.on-primary}'
    typography: '{typography.display}'
    height: 60px
  pill-photo:
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 400px
  onomatopoeia-copy:
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    height: 40px
  character-sticker:
    height: 180px
  price-caption:
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    height: 90px
  sound-toggle:
    textColor: '{colors.on-primary}'
    typography: '{typography.note}'
    height: 24px
---

# DESIGN.md — マスタード×青×赤のパステル色面ルックブック LP（Pastel Color-Block Character Loungewear Lookbook LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい
- **キーワード**: 色面ブロック・ピル型切り抜き・曲線テキスト・白縁キャラクター・ルックブック・もこもこ素材
- **地の質感**: フラットな単色の面。写真はもこもこニットの柔らかい質感で、スタジオのパステル背景で撮る
- **形**: 縦長のピル型、アーチ型、片側だけ丸い変形の楕円。ボタンはピル型の白枠
- **温度感**: 暖色（マスタード・赤）と寒色（青）を交互に並べる。全体はやや甘めで温かい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2A6CA0` | コバルトブルーのセクション地 | 14% | 画素の実測 |
| `secondary` | `#EDC677` | マスタードのセクション地 | 12% | 画素の実測 |
| `accent-1` | `#B43349` | ベリーレッドのセクション地 | 11% | 画素の実測 |
| `background` | `#F2EEEB` | 生成りグレーのページ地 | 14% | 画素の実測 |
| `background-alt` | `#CAD8E5` | 淡いブルーグレーのセクション地 | 12% | 画素の実測 |
| `accent-2` | `#A9BCD1` | リード文の淡い青文字 | 1% | 画素の主要色に補正 |
| `on-primary` | `#F1F0EE` | 色面と写真の上に置く白文字・白縁 | 2% | 画素の主要色に補正 |
| `accent-3` | `#E58AA6` | キャラクターや見出しのピンク | 1% | 推定 |
| `text` | `#AA3046` | 赤系の曲線見出し文字 | 0% | 画素の実測 |
| `text-muted` | `#E0C584` | クレジットのマスタード文字 | 0% | 画素の実測 |
| `dark-section` | `#C81928` | 最後の商品紹介に使う鮮やかな赤 | 3% | 画素の実測 |

- 大きな単色面を 3〜5 シーンごとに切り替えて、章立てにする（マスタード→青→淡青→赤）
- 色面の上の文字は白だけにする。地色と同じ系統の色を文字に使わない
- 生成りの地では、文字にパステルの青・マスタード・赤を使う。黒文字は使わない
- 写真の背景は、色面と同じ系統のパステル色でそろえる
- キャラクターは青系かピンク系の単色トーンにし、白い太縁を付ける

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 曲線に沿わせる英字の章見出し | 欧文サンセリフ | M PLUS Rounded 1c | 800 | 28px | 1.2 | 0.12em |
| `headline-lg` | 擬音や感情を表す短い英語コピー | 欧文サンセリフ | M PLUS Rounded 1c | 800 | 22px | 1.2 | 0.02em |
| `body-lg` | 色面上の中央揃えリード文 | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 2.2 | 0.08em |
| `body-md` | 生成り地の淡い青の説明文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 12px | 2.1 | 0.06em |
| `accent` | アイテム名と価格（曲線または左寄せ） | 欧文サンセリフ | M PLUS Rounded 1c | 800 | 12px | 1.7 | 0.04em |
| `note` | クレジットとコピーライト | 欧文サンセリフ | M PLUS Rounded 1c | 700 | 10px | 1.8 | 0.04em |
| `label-button` | カテゴリのピル型ボタン | 欧文サンセリフ | M PLUS Rounded 1c | 800 | 14px | 1.0 | 0.04em |

- 書体は丸みのある極太の書体 1 種類だけにして、明朝体は使わない
- 英語コピーは擬音や感情を表す短い一言にして、写真の上か色面の左上・右上に置く
- 章見出しは円弧に沿って曲げ、両端にドットを付ける
- 価格表記は『カテゴリ_アイテム名 価格yen』の形式で白文字にし、写真の下端かピル型の外周に沿わせる
- 日本語のリード文は中央揃えにし、行間を広くとる（2 倍以上）
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は全幅か、幅 80% のピル型
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 0px、基本単位 8px、カード内 20px（375px 幅換算）
- セクション間に余白を入れず、色面と写真を隙間なく縦に積む
- ピル型の写真は左右どちらかに寄せ、反対側の空きにキャラクターを重ねる
- 擬音コピーのあとに 300px 前後の色面の余白を取り、そこにキャラクターを 1 体置く
- 全幅写真の下端の中で、価格を左寄せか右寄せで重ねる
- カテゴリボタンは中央揃えで 2〜3 個ずつ折り返して並べる

## Elevation & Depth

- 影はまったく使わない。フラットにする
- 奥行きは写真・キャラクター・色面の重なりだけで出す
- キャラクターには白い太縁（4〜6px）を付け、ステッカー風にする

## Shapes

- **角丸**: 小 999px ／ 中 160px ／ 大 200px。ボタンはピル型。
- **写真の切り抜き**: 縦長ピル型、上だけ丸いアーチ型、片側だけ大きく丸めた変形の楕円、全幅の矩形
- **セクション境界**: 直線で色を切り替える。カテゴリ部分だけは大きなアーチ型の色面で始める
- 写真の角は、完全な半円になるくらい大きく丸める
- ボタンは白い 2px の枠線と白文字のピル型にする
- 矩形の写真は全幅で使い、角丸を付けない

## Components

- **FV の 2×2 写真グリッド**（`hero-grid`）: 正方形の写真を 4 枚並べ、中央にロゴの白い矩形パネルを重ねる
- **カテゴリのピル型ボタン**（`category-pill`）: マスタードのアーチ型の色面上に、白枠と白文字のピル型ボタンを置く
- **円弧の英字見出し**（`arch-heading`）: 大文字の英字を円弧に沿って並べ、両端に丸いドットを付ける
- **ピル型の写真フレーム**（`pill-photo`）: 縦長のピル型に切り抜いた写真。外周に白いアイテム名と価格を沿わせる
- **擬音コピー**（`onomatopoeia-copy`）: 感情を表す短い英語を、色面上に白の極太文字で置く
- **白縁のキャラクター**（`character-sticker`）: 単色トーンのキャラクターに白い太縁を付け、写真の境目にはみ出させて重ねる
- **価格キャプション**（`price-caption`）: 写真の下端に、アイテム名と価格を白文字で複数行重ねる
- **動画の音声切替**（`sound-toggle`）: 動画ブロックの右下に、音符アイコンと ON/OFF の小さな白文字を置く

## Do's and Don'ts

**Do**
- 感情ごとに色面の色を決め、シーン単位で切り替える
- 写真はピル型やアーチ型に切り抜き、左右に寄せてリズムを付ける
- 白縁のキャラクターを写真や色面の境目にはみ出させて置く
- 価格は英語表記にして、写真の上に白文字で添える
- 写真はパステル背景のスタジオで撮り、色面の色と合わせる

**Don't**
- 黒い文字や濃いグレーの文字を使わない
- 影やグラデーション、立体的な装飾を使わない
- 角の小さい四角いカードで商品を並べない
- 長い日本語の説明文を何度も入れない
- 原色の CTA ボタンを何度も差し込まない
- 細い明朝体や硬いゴシック体を混ぜない

## Page Structure

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

1. **ファーストビュー**（コラボの世界観と、主なアイテムを一目で伝える）: 2×2 の写真グリッドの中央に、ロゴの白いパネルを重ねる
2. **コンセプト導入**（4 つの感情をテーマにしたコンセプトを示す）: 赤い色面に白い中央揃えの 4 行。続けて生成り地に淡い青のリード文を置く
3. **カテゴリナビ**（対象別のアイテムへ誘導する）: マスタードのアーチ型の色面に円弧の見出しとピル型ボタンを置く
4. **ムービー**（感情の流れを動画で見せる）: 色面の中に、色の違う帯の動画を縦に並べる。擬音コピーと音声切替を添える
5. **感情別ルック（喜）**（明るいアイテムを紹介する）: マスタードの地に、全幅写真・擬音コピー・ピル型写真・キャラクターを積む
6. **感情別ルック（怒）**（メンズとキッズのアイテムを紹介する）: コバルトブルーの地に、全幅写真とピル型写真を交互に並べる
7. **感情別ルック（哀）**（寝具や小物を紹介する）: 淡いブルーグレーの地に、変形の楕円写真と曲線の価格表記を置く
8. **感情別ルック（楽）**（ペット用や雑貨を紹介する）: ベリーレッドの地に、ピル型写真とピンクのキャラクターを置く
9. **スペシャルコレクション**（目玉商品を特別に見せる）: 生成り地に、赤い円弧の見出し・アーチ型写真・短い告知文を置く
10. **クレジット**（全アイテムへの導線と制作スタッフを示す）: マスタードの円弧見出しの下に、マスタード文字のスタッフ一覧を中央揃えで並べる
11. **締めの商品とフッター**（最後に雑貨を見せ、コピーライトを表示する）: 鮮やかな赤の地に、物撮り写真と白い小さなコピーライトを置く

## Imagery

- 写真は無地のパステル背景のスタジオで撮る。モデルの表情は笑う・すねる・泣きまねなどを大げさにする
- もこもこのニットや起毛素材の質感が伝わるように、柔らかい自然光で撮る
- 犬や子どもを登場させ、家族の生活感を出す
- キャラクターのイラストは、青系かピンク系の 2〜3 色で描き、白い太縁を付ける
- 小道具（溶けたアイス・本・椅子など）は、ストーリーを感じさせるものをワンポイントで置く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC では、中央に SP 幅（約 48%）のカラムを置き、SP と同じ縦の流れをそのまま見せる
- PC の左右の余白は、セクションに合わせて生成り・淡青・青・赤の帯に切り替える
- PC のカテゴリナビは左の余白に縦に置き、右の余白にピル型の一覧ボタンを置く
- FV は PC では 4 枚を横 1 列に並べ、下中央にロゴのパネルを置く

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