深紅茶×くすみ青のカラーブロック服飾ルックブック LP

Editorial Lookbook Color-Block Apparel LP

シリーズごとに地の色を深い赤茶・くすみ青・生成り・黒へ切り替える雑誌風ルックブック。大きな人物写真を枠線つきで重ね、細長いコンデンス欧文の見出しで区切ります。購入の訴求は弱めで、最後のピル型アウトラインボタン 1 つだけです。

ファッション・アクセサリー上品・高級クール・先進的シンプル・ミニマルSP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

シリーズごとに地の色を変える（赤茶→白→くすみ青→生成り→白→黒→赤茶）
地の色はどれも単色で塗り、グラデーションは使わない
見出しの色は地の色と同系か、写真から拾った色にする
写真の背景色（青・赤）とセクションの地の色をそろえて一体感を出す
強調の赤は小さな文字だけに使い、ボタンは白地に黒のアウトラインにする
価格は淡い色で小さく置き、目立たせない

TYPOGRAPHY

書体

displayシリーズ名の大見出し欧文サンセリフ／ Bebas Neue 700 ／ 56px ／行間 0.95

あなたの LP を、もっと伝わる形に。Aa 123

headline-mdロゴ風の字間を広げた欧文欧文サンセリフ／ Montserrat 600 ／ 24px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

body-lg冒頭の和文リードゴシック／ Noto Sans JP 500 ／ 13px ／行間 2.3

あなたの LP を、もっと伝わる形に。Aa 123

body-mdシリーズ説明の英文欧文サンセリフ／ Oswald 400 ／ 13px ／行間 1.45

あなたの LP を、もっと伝わる形に。Aa 123

note品名と価格欧文サンセリフ／ Oswald 500 ／ 9px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

accent見出しの間に添える小さな筆記体欧文セリフ／ Playfair Display 400 ／ 10px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonボタンの文字欧文サンセリフ／ Oswald 600 ／ 13px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

見出しは縦長のコンデンス欧文を大文字で詰めて組み、2〜3 行に改行する
見出しは右寄せ・縦書き・中央寄せを、セクションごとに変える
和文は冒頭のリードだけにし、中央寄せで行間を広く取る
説明文は英文の短い段落にし、5〜6 行に収める
価格は品名を太字、金額を細字にする

PAGE STRUCTURE

セクション構成

ファーストビューブランドの世界観を提示するぼかした人物写真の上に、字間を広げた白いロゴ風欧文を置く
コンセプトリード企画の趣旨を伝える白地に和文 3 段落を中央寄せし、広い行間で組む
シリーズ1（赤茶）商品を紹介する白と赤茶の境目に青枠の写真をまたがせ、青いコンデンス見出しを右寄せで置く。英文と写真 2 枚を左右にずらして並べる
シリーズ1の価格価格を示す全幅写真の下に小さな価格行を置く
シリーズ2（くすみ青・生成り）商品を紹介する青地の写真に見出しを縦書きで添え、生成り地に写真 2 枚を積む
シリーズ3（白）商品を紹介する黒の大見出しと中央寄せの英文を置き、明るい写真と入れ子の写真を続ける
シリーズ4（黒帯・赤茶）人気シリーズを紹介する黒帯の白見出しの後、赤茶地に黒枠の写真を左右にずらして並べる
エンディング締めの印象を残す黒地にロゴ風見出しを置き、黒と白の境目に写真をまたがせる
CTA一覧ページへ送るアウトラインのピル型ボタンを 1 つだけ置く
クレジット制作スタッフを記す赤い小さな文字を中央寄せで並べる

COMPONENTS

部品

コンデンス見出し series-title大文字の欧文を 2〜3 段に組み、写真の端に重ねるか、縦書きで添える
枠付き写真 framed-photo細い色枠で囲んだ縦長写真。地の色の境目をまたいで置く
黒帯の見出し black-title-band黒地に白い大見出しを置き、左下に短い英文を添える
価格キャプション price-caption写真の下に左寄せで小さく置く、品名と価格の行
英文の説明ブロック series-copy色地の上に置く 5 行前後の英文段落
アウトラインのピル型ボタン button-primary白地に黒の 1.5px 枠を付けた全幅近いボタン。文字は大文字
スタッフクレジット staff-credit赤い文字を中央寄せで並べた制作クレジット

守ること

シリーズごとに地の色を変えて章立てを見せる
写真を主役にし、文字は最小限にする
写真の背景色と地の色をそろえる
余白を大きく取り、雑誌のようにゆったり組む

DON'T

避けること

角丸のカードや影を使わない
派手な塗りつぶしの CTA や割引バッジを置かない
和文の太い見出しを多用しない
1 つのセクションに地の色を 2 色以上混ぜない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 深紅茶×くすみ青のカラーブロック服飾ルックブック LP（Editorial Lookbook Color-Block Apparel LP）

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

Overview

業種: ファッション・アクセサリー／ 雰囲気: 上品・高級、クール・先進的、シンプル・ミニマル
キーワード: ルックブック・カラーブロック・コンデンス欧文・写真の重ね配置・冬のぬくもり・雑誌的余白
地の質感: フラットな単色面。質感は写真の起毛素材やニットにまかせる
形: 角のない矩形。写真は細い色枠で囲み、背景の色の境目をまたいで重ねる
温度感: 暖色の赤茶と寒色のくすみ青を交互に置き、温度差を出す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#411812`	シリーズ地の深い赤茶	18%	画素の実測
`secondary`	`#53749D`	くすみ青の地・見出し文字	10%	画素の実測
`accent-1`	`#8A9AC8`	赤茶地に乗る青紫の英文本文	1%	推定
`background`	`#FFFFFF`	基本の白地	20%	画素の実測
`background-alt`	`#F1F3E8`	生成りのシリーズ地	7%	画素の実測
`dark-section`	`#000000`	黒の見出し帯とクレジット帯	6%	画素の実測
`on-dark`	`#FFFFFF`	黒地の上の白い見出し	1%	画素の実測
`text`	`#020202`	見出し・本文の黒	2%	画素の実測
`accent-2`	`#D0353A`	赤の撮影背景・スタッフ表記	1%	推定
`accent-3`	`#CEBAB2`	見出しや注記に使う淡いピンクベージュ	1%	画素の主要色に補正
`text-muted`	`#CFC5C3`	価格表記の淡いグレー	0%	画素の実測
`line`	`#6F8FC4`	写真枠の細線（青・黒）	0%	推定
`cta`	`#FEFEFE`	アウトラインボタンの地	0%	画素の実測
`on-cta`	`#010101`	ボタンの文字と枠	0%	画素の実測

シリーズごとに地の色を変える（赤茶→白→くすみ青→生成り→白→黒→赤茶）
地の色はどれも単色で塗り、グラデーションは使わない
見出しの色は地の色と同系か、写真から拾った色にする
写真の背景色（青・赤）とセクションの地の色をそろえて一体感を出す
強調の赤は小さな文字だけに使い、ボタンは白地に黒のアウトラインにする
価格は淡い色で小さく置き、目立たせない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	シリーズ名の大見出し	欧文サンセリフ	Bebas Neue	700	56px	0.95	0.0em
`headline-md`	ロゴ風の字間を広げた欧文	欧文サンセリフ	Montserrat	600	24px	1.2	0.15em
`body-lg`	冒頭の和文リード	ゴシック	Noto Sans JP	500	13px	2.3	0.05em
`body-md`	シリーズ説明の英文	欧文サンセリフ	Oswald	400	13px	1.45	0.0em
`note`	品名と価格	欧文サンセリフ	Oswald	500	9px	1.5	0.08em
`accent`	見出しの間に添える小さな筆記体	欧文セリフ	Playfair Display	400	10px	1.2	0.0em
`label-button`	ボタンの文字	欧文サンセリフ	Oswald	600	13px	1.0	0.02em

見出しは縦長のコンデンス欧文を大文字で詰めて組み、2〜3 行に改行する
見出しは右寄せ・縦書き・中央寄せを、セクションごとに変える
和文は冒頭のリードだけにし、中央寄せで行間を広く取る
説明文は英文の短い段落にし、5〜6 行に収める
価格は品名を太字、金額を細字にする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。写真は全幅と左右にずらした 75〜85% 幅を混ぜる
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 120px、基本単位 8px、カード内 12px（375px 幅換算）
写真を左右交互にずらし、上下の写真を少し重ねる
写真をセクションの色の境目にまたがせて置く
シリーズ同士の間には 100px 以上の余白を取る
テキストは左右 12〜16px の余白で左寄せを基本にする
大きな写真の上に小さな写真を重ねる入れ子の配置も使う

Elevation & Depth

影は使わない
奥行きは写真の重なりと細い枠線だけで表す

Shapes

角丸: 小 0px ／中 0px ／大 0px。ボタンはピル型。
写真の切り抜き: 縦長の矩形。一部の写真には 2px の色枠を付ける
セクション境界: 直線で地の色を切り替える
写真もパネルも角丸にしない
丸いのは最後の CTA ボタンだけにする
枠線は写真の背景色か黒の細線にする

Components

コンデンス見出し（series-title）: 大文字の欧文を 2〜3 段に組み、写真の端に重ねるか、縦書きで添える
枠付き写真（framed-photo）: 細い色枠で囲んだ縦長写真。地の色の境目をまたいで置く
黒帯の見出し（black-title-band）: 黒地に白い大見出しを置き、左下に短い英文を添える
価格キャプション（price-caption）: 写真の下に左寄せで小さく置く、品名と価格の行
英文の説明ブロック（series-copy）: 色地の上に置く 5 行前後の英文段落
アウトラインのピル型ボタン（button-primary）: 白地に黒の 1.5px 枠を付けた全幅近いボタン。文字は大文字
スタッフクレジット（staff-credit）: 赤い文字を中央寄せで並べた制作クレジット

Do's and Don'ts

Do - シリーズごとに地の色を変えて章立てを見せる - 写真を主役にし、文字は最小限にする - 写真の背景色と地の色をそろえる - 余白を大きく取り、雑誌のようにゆったり組む

Don't - 角丸のカードや影を使わない - 派手な塗りつぶしの CTA や割引バッジを置かない - 和文の太い見出しを多用しない - 1 つのセクションに地の色を 2 色以上混ぜない

Page Structure

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

ファーストビュー（ブランドの世界観を提示する）: ぼかした人物写真の上に、字間を広げた白いロゴ風欧文を置く
コンセプトリード（企画の趣旨を伝える）: 白地に和文 3 段落を中央寄せし、広い行間で組む
シリーズ1（赤茶）（商品を紹介する）: 白と赤茶の境目に青枠の写真をまたがせ、青いコンデンス見出しを右寄せで置く。英文と写真 2 枚を左右にずらして並べる
シリーズ1の価格（価格を示す）: 全幅写真の下に小さな価格行を置く
シリーズ2（くすみ青・生成り）（商品を紹介する）: 青地の写真に見出しを縦書きで添え、生成り地に写真 2 枚を積む
シリーズ3（白）（商品を紹介する）: 黒の大見出しと中央寄せの英文を置き、明るい写真と入れ子の写真を続ける
シリーズ4（黒帯・赤茶）（人気シリーズを紹介する）: 黒帯の白見出しの後、赤茶地に黒枠の写真を左右にずらして並べる
エンディング（締めの印象を残す）: 黒地にロゴ風見出しを置き、黒と白の境目に写真をまたがせる
CTA（一覧ページへ送る）: アウトラインのピル型ボタンを 1 つだけ置く
クレジット（制作スタッフを記す）: 赤い小さな文字を中央寄せで並べる

Imagery

人物 1 人を、単色の背景紙（くすみ青・赤・白）の前で撮る
椅子・チェック柄のブランケット・花などの小物を少し添える
起毛やニットの質感が伝わる柔らかい自然光で撮る
シャボン玉などの軽い演出や、モノクロのぼかし写真を背景に重ねる
全身・ひざ上・顔のアップを組み合わせてリズムを作る
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC 画像がないため推奨を示す。コンテンツ幅は最大 1000px 前後にする
PC では写真を 2 カラムでずらして配置し、見出しを写真の横に置く
地の色はブラウザの全幅に広げる
見出しは 1.6 倍程度まで拡大する

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Editorial Lookbook Color-Block Apparel LP
description: シリーズごとに地の色を深い赤茶・くすみ青・生成り・黒へ切り替える雑誌風ルックブック。大きな人物写真を枠線つきで重ね、細長いコンデンス欧文の見出しで区切ります。購入の訴求は弱めで、最後のピル型アウトラインボタン 1 つだけです。
colors:
  primary: '#411812'
  secondary: '#53749D'
  accent-1: '#8A9AC8'
  background: '#FFFFFF'
  background-alt: '#F1F3E8'
  dark-section: '#000000'
  on-dark: '#FFFFFF'
  text: '#020202'
  accent-2: '#D0353A'
  accent-3: '#CEBAB2'
  text-muted: '#CFC5C3'
  line: '#6F8FC4'
  cta: '#FEFEFE'
  on-cta: '#010101'
typography:
  display:
    fontFamily: Bebas Neue
    fontSize: 56px
    fontWeight: 700
    lineHeight: 0.95
  headline-md:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.15em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.3
    letterSpacing: 0.05em
  body-md:
    fontFamily: Oswald
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  note:
    fontFamily: Oswald
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.08em
  accent:
    fontFamily: Playfair Display
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
  label-button:
    fontFamily: Oswald
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.02em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 120px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
  series-title:
    textColor: '{colors.secondary}'
    typography: '{typography.display}'
    height: 160px
  framed-photo:
    height: 460px
  black-title-band:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 190px
  price-caption:
    textColor: '{colors.text-muted}'
    typography: '{typography.note}'
    height: 40px
  series-copy:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.accent-1}'
    typography: '{typography.body-md}'
    height: 130px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 36px
  staff-credit:
    backgroundColor: '{colors.background}'
    textColor: '{colors.accent-2}'
    typography: '{typography.note}'
    height: 200px
---

# DESIGN.md — 深紅茶×くすみ青のカラーブロック服飾ルックブック LP（Editorial Lookbook Color-Block Apparel LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: 上品・高級、クール・先進的、シンプル・ミニマル
- **キーワード**: ルックブック・カラーブロック・コンデンス欧文・写真の重ね配置・冬のぬくもり・雑誌的余白
- **地の質感**: フラットな単色面。質感は写真の起毛素材やニットにまかせる
- **形**: 角のない矩形。写真は細い色枠で囲み、背景の色の境目をまたいで重ねる
- **温度感**: 暖色の赤茶と寒色のくすみ青を交互に置き、温度差を出す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#411812` | シリーズ地の深い赤茶 | 18% | 画素の実測 |
| `secondary` | `#53749D` | くすみ青の地・見出し文字 | 10% | 画素の実測 |
| `accent-1` | `#8A9AC8` | 赤茶地に乗る青紫の英文本文 | 1% | 推定 |
| `background` | `#FFFFFF` | 基本の白地 | 20% | 画素の実測 |
| `background-alt` | `#F1F3E8` | 生成りのシリーズ地 | 7% | 画素の実測 |
| `dark-section` | `#000000` | 黒の見出し帯とクレジット帯 | 6% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 黒地の上の白い見出し | 1% | 画素の実測 |
| `text` | `#020202` | 見出し・本文の黒 | 2% | 画素の実測 |
| `accent-2` | `#D0353A` | 赤の撮影背景・スタッフ表記 | 1% | 推定 |
| `accent-3` | `#CEBAB2` | 見出しや注記に使う淡いピンクベージュ | 1% | 画素の主要色に補正 |
| `text-muted` | `#CFC5C3` | 価格表記の淡いグレー | 0% | 画素の実測 |
| `line` | `#6F8FC4` | 写真枠の細線（青・黒） | 0% | 推定 |
| `cta` | `#FEFEFE` | アウトラインボタンの地 | 0% | 画素の実測 |
| `on-cta` | `#010101` | ボタンの文字と枠 | 0% | 画素の実測 |

- シリーズごとに地の色を変える（赤茶→白→くすみ青→生成り→白→黒→赤茶）
- 地の色はどれも単色で塗り、グラデーションは使わない
- 見出しの色は地の色と同系か、写真から拾った色にする
- 写真の背景色（青・赤）とセクションの地の色をそろえて一体感を出す
- 強調の赤は小さな文字だけに使い、ボタンは白地に黒のアウトラインにする
- 価格は淡い色で小さく置き、目立たせない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | シリーズ名の大見出し | 欧文サンセリフ | Bebas Neue | 700 | 56px | 0.95 | 0.0em |
| `headline-md` | ロゴ風の字間を広げた欧文 | 欧文サンセリフ | Montserrat | 600 | 24px | 1.2 | 0.15em |
| `body-lg` | 冒頭の和文リード | ゴシック | Noto Sans JP | 500 | 13px | 2.3 | 0.05em |
| `body-md` | シリーズ説明の英文 | 欧文サンセリフ | Oswald | 400 | 13px | 1.45 | 0.0em |
| `note` | 品名と価格 | 欧文サンセリフ | Oswald | 500 | 9px | 1.5 | 0.08em |
| `accent` | 見出しの間に添える小さな筆記体 | 欧文セリフ | Playfair Display | 400 | 10px | 1.2 | 0.0em |
| `label-button` | ボタンの文字 | 欧文サンセリフ | Oswald | 600 | 13px | 1.0 | 0.02em |

- 見出しは縦長のコンデンス欧文を大文字で詰めて組み、2〜3 行に改行する
- 見出しは右寄せ・縦書き・中央寄せを、セクションごとに変える
- 和文は冒頭のリードだけにし、中央寄せで行間を広く取る
- 説明文は英文の短い段落にし、5〜6 行に収める
- 価格は品名を太字、金額を細字にする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真は全幅と左右にずらした 75〜85% 幅を混ぜる
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 120px、基本単位 8px、カード内 12px（375px 幅換算）
- 写真を左右交互にずらし、上下の写真を少し重ねる
- 写真をセクションの色の境目にまたがせて置く
- シリーズ同士の間には 100px 以上の余白を取る
- テキストは左右 12〜16px の余白で左寄せを基本にする
- 大きな写真の上に小さな写真を重ねる入れ子の配置も使う

## Elevation & Depth

- 影は使わない
- 奥行きは写真の重なりと細い枠線だけで表す

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
- **写真の切り抜き**: 縦長の矩形。一部の写真には 2px の色枠を付ける
- **セクション境界**: 直線で地の色を切り替える
- 写真もパネルも角丸にしない
- 丸いのは最後の CTA ボタンだけにする
- 枠線は写真の背景色か黒の細線にする

## Components

- **コンデンス見出し**（`series-title`）: 大文字の欧文を 2〜3 段に組み、写真の端に重ねるか、縦書きで添える
- **枠付き写真**（`framed-photo`）: 細い色枠で囲んだ縦長写真。地の色の境目をまたいで置く
- **黒帯の見出し**（`black-title-band`）: 黒地に白い大見出しを置き、左下に短い英文を添える
- **価格キャプション**（`price-caption`）: 写真の下に左寄せで小さく置く、品名と価格の行
- **英文の説明ブロック**（`series-copy`）: 色地の上に置く 5 行前後の英文段落
- **アウトラインのピル型ボタン**（`button-primary`）: 白地に黒の 1.5px 枠を付けた全幅近いボタン。文字は大文字
- **スタッフクレジット**（`staff-credit`）: 赤い文字を中央寄せで並べた制作クレジット

## Do's and Don'ts

**Do**
- シリーズごとに地の色を変えて章立てを見せる
- 写真を主役にし、文字は最小限にする
- 写真の背景色と地の色をそろえる
- 余白を大きく取り、雑誌のようにゆったり組む

**Don't**
- 角丸のカードや影を使わない
- 派手な塗りつぶしの CTA や割引バッジを置かない
- 和文の太い見出しを多用しない
- 1 つのセクションに地の色を 2 色以上混ぜない

## Page Structure

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

1. **ファーストビュー**（ブランドの世界観を提示する）: ぼかした人物写真の上に、字間を広げた白いロゴ風欧文を置く
2. **コンセプトリード**（企画の趣旨を伝える）: 白地に和文 3 段落を中央寄せし、広い行間で組む
3. **シリーズ1（赤茶）**（商品を紹介する）: 白と赤茶の境目に青枠の写真をまたがせ、青いコンデンス見出しを右寄せで置く。英文と写真 2 枚を左右にずらして並べる
4. **シリーズ1の価格**（価格を示す）: 全幅写真の下に小さな価格行を置く
5. **シリーズ2（くすみ青・生成り）**（商品を紹介する）: 青地の写真に見出しを縦書きで添え、生成り地に写真 2 枚を積む
6. **シリーズ3（白）**（商品を紹介する）: 黒の大見出しと中央寄せの英文を置き、明るい写真と入れ子の写真を続ける
7. **シリーズ4（黒帯・赤茶）**（人気シリーズを紹介する）: 黒帯の白見出しの後、赤茶地に黒枠の写真を左右にずらして並べる
8. **エンディング**（締めの印象を残す）: 黒地にロゴ風見出しを置き、黒と白の境目に写真をまたがせる
9. **CTA**（一覧ページへ送る）: アウトラインのピル型ボタンを 1 つだけ置く
10. **クレジット**（制作スタッフを記す）: 赤い小さな文字を中央寄せで並べる

## Imagery

- 人物 1 人を、単色の背景紙（くすみ青・赤・白）の前で撮る
- 椅子・チェック柄のブランケット・花などの小物を少し添える
- 起毛やニットの質感が伝わる柔らかい自然光で撮る
- シャボン玉などの軽い演出や、モノクロのぼかし写真を背景に重ねる
- 全身・ひざ上・顔のアップを組み合わせてリズムを作る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像がないため推奨を示す。コンテンツ幅は最大 1000px 前後にする
- PC では写真を 2 カラムでずらして配置し、見出しを写真の横に置く
- 地の色はブラウザの全幅に広げる
- 見出しは 1.6 倍程度まで拡大する

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

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

ファッション・アクセサリー桜色×淡青の雑誌風ベビー服 LPSoft Pastel Editorial Baby Apparel LP ファッション・アクセサリーミントティール×黒の機能性サンダル LPTeal Glass Active Footwear LP ファッション・アクセサリー7色帯で切り替えるTシャツ特集LPColor-Block Category Catalog Apparel LP ファッション・アクセサリーくすみブルー×液体シェイプのネイル・アクセ LPPastel Fluid Shapes Accessory & Nail LP ファッション・アクセサリースマイル花柄×原色ポップのアパレルコラボLPMaximal Happy Pop Fashion Collab LP ファッション・アクセサリー生成り×ボルドーのバレンタイン部屋着特集 LPValentine Burgundy Editorial Roomwear LP