白地×くすみカラー写真のインナールックブック LP

Handsome Muted Color Lingerie Lookbook LP

白地にくすんだ色の背景で撮った大判モデル写真を並べる、雑誌風ルックブック型の下着 LP。写真の上に白い太字コピーと枠線ボタンを重ね、その下に商品写真 2 枚、明朝の商品名、サイズと価格、黒いピル型ボタンを置いて 1 商品とし、これを繰り返す。斜めに傾けた欧文ハッシュタグ見出しでカテゴリを区切る。

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

ダウンロード

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

COLORS

配色

地は白一色にし、色は写真の背景と商品の色で見せる
写真の背景はオリーブとライトグレーを交互に使ってリズムを作る
CTA は黒のピル型ボタンだけにし、有彩色の CTA は作らない
写真の上の文字は白にし、薄い暗めの影で読みやすくする
価格・サイズはグレーにして控えめに見せる
差し色は手書き注釈の青い線など、ごく小さな面だけに使う

TYPOGRAPHY

書体

displayファーストビューの縦組み欧文ロゴ欧文サンセリフ／ Roboto 500 ／ 56px ／行間 1.0

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

headline-lg斜めに傾けたハッシュタグ見出し欧文サンセリフ／ Roboto 500 ／ 36px ／行間 1.1

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

headline-md写真に重ねる 2 行の訴求コピーゴシック／ Noto Sans JP 700 ／ 18px ／行間 1.6

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

headline-sm商品名（2〜3 行）明朝／ Shippori Mincho 500 ／ 14px ／行間 1.7

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

body-md冒頭のリード文ゴシック／ Noto Sans JP 500 ／ 12px ／行間 2.2

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

noteサイズ・価格欧文サンセリフ／ Roboto 500 ／ 12px ／行間 1.4

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

label-buttonCHECK ボタン欧文サンセリフ／ Roboto 700 ／ 9px ／行間 1.0

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

accent写真上の手書き風注釈手書き・筆／ Klee One 600 ／ 16px ／行間 1.3

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

欧文はサンセリフで大きく、和文は小さく控えめにする
商品名は明朝にして、雑誌のキャプションのような品を出す
写真上のコピーは太いゴシックで 2 行にまとめる
ボタン文字は英大文字にし、字間を広めに取る
リード文は行間 2 倍以上で中央寄せのブロックにする

PAGE STRUCTURE

セクション構成

ファーストビュー世界観とシーズンを伝えるオリーブ背景の全幅モデル写真に、縦組みの大きな欧文ロゴとシーズン表記を重ねる
コンセプト文ブランドの思いを伝える白地の中央に 5 行の短いリード文を置き、行間を広く取る
カテゴリ誘導見たいカテゴリへ移動させる2 枚の写真タイルに # 付きの英字と下向き矢印を重ねる
カテゴリ見出し（トップス）章を区切る斜めの欧文ハッシュタグを写真の上端に重ねる
商品紹介の繰り返し商品の機能と購入への導線全幅写真に白いコピーと枠線ボタンを重ね、その下に商品ブロックを置く。これを 5 回ほど繰り返す
カテゴリ見出し（ショーツ）章を区切る前の章と同じく斜めのハッシュタグ見出しを置く
商品紹介の繰り返し（ショーツ）商品の訴求カラー展開を示す平置き写真と着用写真を並べる
カテゴリ見出し（セット）上下セットの提案斜めの見出し、全幅写真、商品ブロックの順に並べて締める

COMPONENTS

部品

黒ピルの CHECK ボタン button-primary商品の価格行の右端に置く、黒地に白い英字と小さな矢印のボタン
写真上の枠線ボタン button-ghost白い 1px 枠のピル型。透明地に白い英字
斜めハッシュタグ見出し hashtag-heading# 付きの英大文字を傾けて右寄せにし、下の写真に一部重ねる
写真重ねコピー photo-copy全幅写真の左下に置く、白太字 2 行のコピーと枠線ボタン
商品ブロック product-block段違いの写真 2 枚、明朝の商品名、グレーの価格、区切り線、黒ボタンの組み合わせ
カテゴリ誘導タイル category-link写真の上に # 付きの英字と二重の下向き山形矢印を重ね、カテゴリへ誘導する
手書き注釈 handwritten-note写真の上に手書き風の文字と青い曲線を添える

守ること

写真を主役にし、文字は最小限にする
オリーブとグレーの背景写真を交互に並べる
商品ブロックの型（写真・明朝の名前・価格・黒ボタン）を毎回そろえる
余白をたっぷり取り、雑誌のようなリズムを作る
モデル写真は凛としたクールな表情とポーズにする

DON'T

避けること

派手な原色や赤い CTA を使わない
角丸カードや影を付けない
価格を大きく強調したりセール風のバッジを付けたりしない
文章を長く書かない
可愛らしいイラストを入れない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 白地×くすみカラー写真のインナールックブック LP（Handsome Muted Color Lingerie Lookbook LP）

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

Overview

業種: ファッション・アクセサリー／ 雰囲気: クール・先進的、シンプル・ミニマル、上品・高級
キーワード: ルックブック・雑誌風・くすみカラー・ハンサム・余白・欧文ハッシュタグ
地の質感: マットな単色背景で撮ったスタジオ写真。装飾は少なく、紙のように平らな白地
形: 写真は角丸なしの矩形。ボタンだけピル型。見出しは斜めに傾ける
温度感: ややクールな中間。オリーブ・テラコッタ・ブラウンの写真で温かみを足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#FEFEFE`	ページの地	30%	画素の実測
`primary`	`#BAB575`	写真背景のオリーブ（ブランドの空気感）	9%	画素の実測
`cta`	`#020202`	商品ボタンの黒	1%	画素の実測
`on-cta`	`#F9F9F9`	黒ボタン上の文字	0%	画素の実測
`text`	`#161616`	見出し・欧文ハッシュタグ	2%	画素の実測
`text-body`	`#3F4040`	リード文・商品名	1%	画素の実測
`text-muted`	`#7D7D7D`	サイズ・価格	0%	画素の実測
`line`	`#D0CDC7`	価格横の細い区切り線	0%	画素の主要色に補正
`background-alt`	`#CDCCD1`	写真背景のライトグレー	12%	画素の実測
`accent-1`	`#AC5A45`	テラコッタ（商品色）	4%	推定
`accent-2`	`#5A3C35`	ディープブラウン（商品色）	5%	画素の主要色に補正
`accent-3`	`#3A5BA8`	手書き注釈の青い線	0%	推定
`on-dark`	`#FFFFFF`	写真に重ねる白文字	0%	画素の主要色に補正

地は白一色にし、色は写真の背景と商品の色で見せる
写真の背景はオリーブとライトグレーを交互に使ってリズムを作る
CTA は黒のピル型ボタンだけにし、有彩色の CTA は作らない
写真の上の文字は白にし、薄い暗めの影で読みやすくする
価格・サイズはグレーにして控えめに見せる
差し色は手書き注釈の青い線など、ごく小さな面だけに使う

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューの縦組み欧文ロゴ	欧文サンセリフ	Roboto	500	56px	1.0	0.02em
`headline-lg`	斜めに傾けたハッシュタグ見出し	欧文サンセリフ	Roboto	500	36px	1.1	0.02em
`headline-md`	写真に重ねる 2 行の訴求コピー	ゴシック	Noto Sans JP	700	18px	1.6	0.05em
`headline-sm`	商品名（2〜3 行）	明朝	Shippori Mincho	500	14px	1.7	0.05em
`body-md`	冒頭のリード文	ゴシック	Noto Sans JP	500	12px	2.2	0.08em
`note`	サイズ・価格	欧文サンセリフ	Roboto	500	12px	1.4	0.05em
`label-button`	CHECK ボタン	欧文サンセリフ	Roboto	700	9px	1.0	0.12em
`accent`	写真上の手書き風注釈	手書き・筆	Klee One	600	16px	1.3	0.0em

欧文はサンセリフで大きく、和文は小さく控えめにする
商品名は明朝にして、雑誌のキャプションのような品を出す
写真上のコピーは太いゴシックで 2 行にまとめる
ボタン文字は英大文字にし、字間を広めに取る
リード文は行間 2 倍以上で中央寄せのブロックにする
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。商品写真だけ 2 枚を左右に並べ、片方を少し下にずらす
本文ブロックの幅: 画面幅の約 85%
余白: セクション間 100px、基本単位 8px、カード内 28px（375px 幅換算）
メイン写真は画面幅いっぱいの裁ち落としにする
商品ブロックは左右 28px の余白を取る
商品写真 2 枚は上端をずらして段違いに置く
価格行は左に価格、右に CHECK ボタン、間を細い線でつなぐ
商品とメイン写真の間には 100px 前後の大きな白い余白を取る
商品写真が 1 枚のときは、写真とテキストを左右に分ける

Elevation & Depth

影は使わない。フラットにする
写真上の文字にだけ薄いテキストシャドウを付ける

Shapes

角丸: 小 0px ／中 0px ／大 999px。ボタンはピル型。
写真の切り抜き: 角丸なしの矩形。メインは縦長の裁ち落とし、商品写真は 4:5 前後
セクション境界: 直線で切り替える。カテゴリの境目は斜めの欧文見出しを写真に少し重ねる
丸みはボタンだけにする
写真に枠線を付けない
見出しは -6° 前後傾けて右寄せにする

Components

黒ピルの CHECK ボタン（button-primary）: 商品の価格行の右端に置く、黒地に白い英字と小さな矢印のボタン
写真上の枠線ボタン（button-ghost）: 白い 1px 枠のピル型。透明地に白い英字
斜めハッシュタグ見出し（hashtag-heading）: # 付きの英大文字を傾けて右寄せにし、下の写真に一部重ねる
写真重ねコピー（photo-copy）: 全幅写真の左下に置く、白太字 2 行のコピーと枠線ボタン
商品ブロック（product-block）: 段違いの写真 2 枚、明朝の商品名、グレーの価格、区切り線、黒ボタンの組み合わせ
カテゴリ誘導タイル（category-link）: 写真の上に # 付きの英字と二重の下向き山形矢印を重ね、カテゴリへ誘導する
手書き注釈（handwritten-note）: 写真の上に手書き風の文字と青い曲線を添える

Do's and Don'ts

Do - 写真を主役にし、文字は最小限にする - オリーブとグレーの背景写真を交互に並べる - 商品ブロックの型（写真・明朝の名前・価格・黒ボタン）を毎回そろえる - 余白をたっぷり取り、雑誌のようなリズムを作る - モデル写真は凛としたクールな表情とポーズにする

Don't - 派手な原色や赤い CTA を使わない - 角丸カードや影を付けない - 価格を大きく強調したりセール風のバッジを付けたりしない - 文章を長く書かない - 可愛らしいイラストを入れない

Page Structure

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

ファーストビュー（世界観とシーズンを伝える）: オリーブ背景の全幅モデル写真に、縦組みの大きな欧文ロゴとシーズン表記を重ねる
コンセプト文（ブランドの思いを伝える）: 白地の中央に 5 行の短いリード文を置き、行間を広く取る
カテゴリ誘導（見たいカテゴリへ移動させる）: 2 枚の写真タイルに # 付きの英字と下向き矢印を重ねる
カテゴリ見出し（トップス）（章を区切る）: 斜めの欧文ハッシュタグを写真の上端に重ねる
商品紹介の繰り返し（商品の機能と購入への導線）: 全幅写真に白いコピーと枠線ボタンを重ね、その下に商品ブロックを置く。これを 5 回ほど繰り返す
カテゴリ見出し（ショーツ）（章を区切る）: 前の章と同じく斜めのハッシュタグ見出しを置く
商品紹介の繰り返し（ショーツ）（商品の訴求）: カラー展開を示す平置き写真と着用写真を並べる
カテゴリ見出し（セット）（上下セットの提案）: 斜めの見出し、全幅写真、商品ブロックの順に並べて締める

Imagery

ショートヘアの中性的なモデルを、無地の壁の前で撮る
背景はオリーブやライトグレーの単色にし、柔らかい自然光で撮る
ゴールドのアクセサリーで抜け感を出す
商品写真は白背景で、カラー展開を扇状に重ねた平置きにする
生地を伸ばす手元カットで機能を見せる
写真の彩度は少し抑え、マットな色調にそろえる
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央にスマホ幅のカラムを置き、左右に固定の写真とナビを配置する
PC の左右の余白には、別カットのモデル写真と淡いグラデーション地の目次パネルを置く
PC のファーストビューは写真 3 枚を横に並べたタイル構成にする
中央カラムには細いグレーの線で枠を付ける
中央カラムの中身は SP と同じ並びにする

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: Handsome Muted Color Lingerie Lookbook LP
description: 白地にくすんだ色の背景で撮った大判モデル写真を並べる、雑誌風ルックブック型の下着 LP。写真の上に白い太字コピーと枠線ボタンを重ね、その下に商品写真 2 枚、明朝の商品名、サイズと価格、黒いピル型ボタンを置いて 1 商品とし、これを繰り返す。斜めに傾けた欧文ハッシュタグ見出しでカテゴリを区切る。
colors:
  background: '#FEFEFE'
  primary: '#BAB575'
  cta: '#020202'
  on-cta: '#F9F9F9'
  text: '#161616'
  text-body: '#3F4040'
  text-muted: '#7D7D7D'
  line: '#D0CDC7'
  background-alt: '#CDCCD1'
  accent-1: '#AC5A45'
  accent-2: '#5A3C35'
  accent-3: '#3A5BA8'
  on-dark: '#FFFFFF'
typography:
  display:
    fontFamily: Roboto
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Roboto
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Shippori Mincho
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.7
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 2.2
    letterSpacing: 0.08em
  note:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.05em
  label-button:
    fontFamily: Roboto
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.12em
  accent:
    fontFamily: Klee One
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.3
rounded:
  sm: 0px
  md: 0px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 28px
  section: 100px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 20px
  button-ghost:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 20px
  hashtag-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 60px
  photo-copy:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 100px
  product-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-sm}'
    height: 420px
  category-link:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 235px
  handwritten-note:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 40px
---

# DESIGN.md — 白地×くすみカラー写真のインナー ルックブック LP（Handsome Muted Color Lingerie Lookbook LP）

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

## Overview

- **業種**: ファッション・アクセサリー ／ **雰囲気**: クール・先進的、シンプル・ミニマル、上品・高級
- **キーワード**: ルックブック・雑誌風・くすみカラー・ハンサム・余白・欧文ハッシュタグ
- **地の質感**: マットな単色背景で撮ったスタジオ写真。装飾は少なく、紙のように平らな白地
- **形**: 写真は角丸なしの矩形。ボタンだけピル型。見出しは斜めに傾ける
- **温度感**: ややクールな中間。オリーブ・テラコッタ・ブラウンの写真で温かみを足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FEFEFE` | ページの地 | 30% | 画素の実測 |
| `primary` | `#BAB575` | 写真背景のオリーブ（ブランドの空気感） | 9% | 画素の実測 |
| `cta` | `#020202` | 商品ボタンの黒 | 1% | 画素の実測 |
| `on-cta` | `#F9F9F9` | 黒ボタン上の文字 | 0% | 画素の実測 |
| `text` | `#161616` | 見出し・欧文ハッシュタグ | 2% | 画素の実測 |
| `text-body` | `#3F4040` | リード文・商品名 | 1% | 画素の実測 |
| `text-muted` | `#7D7D7D` | サイズ・価格 | 0% | 画素の実測 |
| `line` | `#D0CDC7` | 価格横の細い区切り線 | 0% | 画素の主要色に補正 |
| `background-alt` | `#CDCCD1` | 写真背景のライトグレー | 12% | 画素の実測 |
| `accent-1` | `#AC5A45` | テラコッタ（商品色） | 4% | 推定 |
| `accent-2` | `#5A3C35` | ディープブラウン（商品色） | 5% | 画素の主要色に補正 |
| `accent-3` | `#3A5BA8` | 手書き注釈の青い線 | 0% | 推定 |
| `on-dark` | `#FFFFFF` | 写真に重ねる白文字 | 0% | 画素の主要色に補正 |

- 地は白一色にし、色は写真の背景と商品の色で見せる
- 写真の背景はオリーブとライトグレーを交互に使ってリズムを作る
- CTA は黒のピル型ボタンだけにし、有彩色の CTA は作らない
- 写真の上の文字は白にし、薄い暗めの影で読みやすくする
- 価格・サイズはグレーにして控えめに見せる
- 差し色は手書き注釈の青い線など、ごく小さな面だけに使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの縦組み欧文ロゴ | 欧文サンセリフ | Roboto | 500 | 56px | 1.0 | 0.02em |
| `headline-lg` | 斜めに傾けたハッシュタグ見出し | 欧文サンセリフ | Roboto | 500 | 36px | 1.1 | 0.02em |
| `headline-md` | 写真に重ねる 2 行の訴求コピー | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.05em |
| `headline-sm` | 商品名（2〜3 行） | 明朝 | Shippori Mincho | 500 | 14px | 1.7 | 0.05em |
| `body-md` | 冒頭のリード文 | ゴシック | Noto Sans JP | 500 | 12px | 2.2 | 0.08em |
| `note` | サイズ・価格 | 欧文サンセリフ | Roboto | 500 | 12px | 1.4 | 0.05em |
| `label-button` | CHECK ボタン | 欧文サンセリフ | Roboto | 700 | 9px | 1.0 | 0.12em |
| `accent` | 写真上の手書き風注釈 | 手書き・筆 | Klee One | 600 | 16px | 1.3 | 0.0em |

- 欧文はサンセリフで大きく、和文は小さく控えめにする
- 商品名は明朝にして、雑誌のキャプションのような品を出す
- 写真上のコピーは太いゴシックで 2 行にまとめる
- ボタン文字は英大文字にし、字間を広めに取る
- リード文は行間 2 倍以上で中央寄せのブロックにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品写真だけ 2 枚を左右に並べ、片方を少し下にずらす
- **本文ブロックの幅**: 画面幅の約 85%
- **余白**: セクション間 100px、基本単位 8px、カード内 28px（375px 幅換算）
- メイン写真は画面幅いっぱいの裁ち落としにする
- 商品ブロックは左右 28px の余白を取る
- 商品写真 2 枚は上端をずらして段違いに置く
- 価格行は左に価格、右に CHECK ボタン、間を細い線でつなぐ
- 商品とメイン写真の間には 100px 前後の大きな白い余白を取る
- 商品写真が 1 枚のときは、写真とテキストを左右に分ける

## Elevation & Depth

- 影は使わない。フラットにする
- 写真上の文字にだけ薄いテキストシャドウを付ける

## Shapes

- **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 角丸なしの矩形。メインは縦長の裁ち落とし、商品写真は 4:5 前後
- **セクション境界**: 直線で切り替える。カテゴリの境目は斜めの欧文見出しを写真に少し重ねる
- 丸みはボタンだけにする
- 写真に枠線を付けない
- 見出しは -6° 前後傾けて右寄せにする

## Components

- **黒ピルの CHECK ボタン**（`button-primary`）: 商品の価格行の右端に置く、黒地に白い英字と小さな矢印のボタン
- **写真上の枠線ボタン**（`button-ghost`）: 白い 1px 枠のピル型。透明地に白い英字
- **斜めハッシュタグ見出し**（`hashtag-heading`）: # 付きの英大文字を傾けて右寄せにし、下の写真に一部重ねる
- **写真重ねコピー**（`photo-copy`）: 全幅写真の左下に置く、白太字 2 行のコピーと枠線ボタン
- **商品ブロック**（`product-block`）: 段違いの写真 2 枚、明朝の商品名、グレーの価格、区切り線、黒ボタンの組み合わせ
- **カテゴリ誘導タイル**（`category-link`）: 写真の上に # 付きの英字と二重の下向き山形矢印を重ね、カテゴリへ誘導する
- **手書き注釈**（`handwritten-note`）: 写真の上に手書き風の文字と青い曲線を添える

## Do's and Don'ts

**Do**
- 写真を主役にし、文字は最小限にする
- オリーブとグレーの背景写真を交互に並べる
- 商品ブロックの型（写真・明朝の名前・価格・黒ボタン）を毎回そろえる
- 余白をたっぷり取り、雑誌のようなリズムを作る
- モデル写真は凛としたクールな表情とポーズにする

**Don't**
- 派手な原色や赤い CTA を使わない
- 角丸カードや影を付けない
- 価格を大きく強調したりセール風のバッジを付けたりしない
- 文章を長く書かない
- 可愛らしいイラストを入れない

## Page Structure

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

1. **ファーストビュー**（世界観とシーズンを伝える）: オリーブ背景の全幅モデル写真に、縦組みの大きな欧文ロゴとシーズン表記を重ねる
2. **コンセプト文**（ブランドの思いを伝える）: 白地の中央に 5 行の短いリード文を置き、行間を広く取る
3. **カテゴリ誘導**（見たいカテゴリへ移動させる）: 2 枚の写真タイルに # 付きの英字と下向き矢印を重ねる
4. **カテゴリ見出し（トップス）**（章を区切る）: 斜めの欧文ハッシュタグを写真の上端に重ねる
5. **商品紹介の繰り返し**（商品の機能と購入への導線）: 全幅写真に白いコピーと枠線ボタンを重ね、その下に商品ブロックを置く。これを 5 回ほど繰り返す
6. **カテゴリ見出し（ショーツ）**（章を区切る）: 前の章と同じく斜めのハッシュタグ見出しを置く
7. **商品紹介の繰り返し（ショーツ）**（商品の訴求）: カラー展開を示す平置き写真と着用写真を並べる
8. **カテゴリ見出し（セット）**（上下セットの提案）: 斜めの見出し、全幅写真、商品ブロックの順に並べて締める

## Imagery

- ショートヘアの中性的なモデルを、無地の壁の前で撮る
- 背景はオリーブやライトグレーの単色にし、柔らかい自然光で撮る
- ゴールドのアクセサリーで抜け感を出す
- 商品写真は白背景で、カラー展開を扇状に重ねた平置きにする
- 生地を伸ばす手元カットで機能を見せる
- 写真の彩度は少し抑え、マットな色調にそろえる
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央にスマホ幅のカラムを置き、左右に固定の写真とナビを配置する
- PC の左右の余白には、別カットのモデル写真と淡いグラデーション地の目次パネルを置く
- PC のファーストビューは写真 3 枚を横に並べたタイル構成にする
- 中央カラムには細いグレーの線で枠を付ける
- 中央カラムの中身は SP と同じ並びにする

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

SOURCE

出典と注意

元の LP: https://www.felissimo.co.jp/flufeel/contents01_fl/handsome_fl?tid=dbn_fl_HANDSOME（公開状況により表示できない場合があります）
この 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

配色

書体

セクション構成

部品

守ること

避けること

design.md 全文

DESIGN.md — 白地×くすみカラー写真のインナー ルックブック LP（Handsome Muted Color Lingerie Lookbook LP）

Overview

Colors

Typography

Layout

Elevation & Depth

Shapes

Components

Do's and Don'ts

Page Structure

Imagery

Responsive Behavior

Agent Prompt Guide

出典と注意

似た LP の design.md

DESIGN.md — 白地×くすみカラー写真のインナールックブック LP（Handsome Muted Color Lingerie Lookbook LP）