ラベンダー夜空とぼかし玉のリラックスケア LP

Dreamy Lavender Night Relax Care LP

紫の夜空グラデーションと白地を交互に置き、有機的な曲線で区切るリラックス系日用品 LP。細い字間広めのゴシックと欧文ラベルを使い、ぼかした光の玉とゆるいキャラクターイラストで、やわらかく夢見るような雰囲気にしている。

日用品・生活雑貨やさしい・柔らかい上品・高級かわいいシンプル・ミニマルSP

ダウンロード

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

COLORS

配色

地は白と紫の夜空グラデーションを交互に並べる
紫の面は上を明るく、下を濃く(#7060B0〜#5040C0)して星屑を散らす
紫地の上の文字はすべて白の細字にする
白地の見出しは濃いグレー、欧文ラベルは紺紫にする
ピンクは商品バリエーションと円弧の装飾にだけ使う
強い原色や太い塗りの CTA は使わない

TYPOGRAPHY

書体

displayファーストビューの縦書き欧文ロゴ風タイトル欧文サンセリフ／ Josefin Sans 300 ／ 64px ／行間 1.0

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

headline-lgセクションの大見出し(2 行)ゴシック／ Zen Kaku Gothic New 400 ／ 24px ／行間 1.6

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

headline-sm紫地の特長のリード文ゴシック／ Zen Kaku Gothic New 400 ／ 17px ／行間 1.5

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

body-md見出し下の説明文ゴシック／ Zen Kaku Gothic New 400 ／ 12px ／行間 1.6

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

accent横線付きの欧文セクションラベル欧文サンセリフ／ Josefin Sans 400 ／ 13px ／行間 1.2

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

headline-mdサイズ表など英字の大見出し欧文サンセリフ／ Josefin Sans 300 ／ 24px ／行間 1.2

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

note注釈(※付き)ゴシック／ Noto Sans JP 400 ／ 8px ／行間 1.4

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

全体を細いウェイトで字間広めに組み、ゆったり見せる
太字は使わない。強調は数字を大きくするだけにする
見出しは 2 行に分け、左寄せか右寄せで交互に置く
欧文ラベルは細い横線とセットで見出しの上に置く
イラストのつぶやきは縦書きの小さな手書き風で入れる

PAGE STRUCTURE

セクション構成

ファーストビュー使っているシーンで世界観を伝える紫グラデーションの上に人物写真を置く。左に縦書きの欧文タイトル。下端は S 字カーブで区切る
ブランドコンセプトご褒美のようなひとときを提案する欧文ラベルと 2 行見出しを置き、曲線で切り抜いた商品の写真を重ねる
バリエーション紹介香りの種類を見せるパッケージ 2 つを上下にずらして並べ、それぞれに円弧線と種類名を付ける
こだわり(特長)温かさと素材の良さを伝える星屑を散らした紫地に、円形のイラストと写真、キャプション帯、キャラクターを互い違いに置く
フィット感調整できる仕様を説明する白地に右寄せの見出しを置き、商品を画面幅いっぱいに大きく見せる。点線で切り取り位置を示す
利用シーン毎日の気分転換を想像させる左寄せの見出しの下に、雲形で切り抜いた屋外の人物写真を置き、月のイラストを添える
サイズ・仕様商品の寸法を伝える中央に横線付きの英字見出しを置き、パッケージと本体を重ねた写真、罫線の表を並べる

COMPONENTS

部品

横線付き欧文ラベル section-label細い横線の横に紺紫の欧文を置く。見出しの上に付ける
円弧線のバリエーション表示 variant-badge商品の斜め上に、途切れた細い円弧線と色付きの文字を置く
写真上のキャプション帯 photo-caption-bar写真に重ねる半透明の黒い帯。白の細字で特長を短く入れる
曲線で切り抜いた写真 blob-photo片側を画面端まで裁ち落とし、反対側は曲線で切り抜いた写真
キャラクターのつぶやき mascot-whisperゆるい動物のイラストに、縦書きの短いひとことを添える
サイズ表 spec-table罫線だけで作る 2 列の表。左に項目、右に数値を置く
ぼかし玉 bokeh-dotピンクとラベンダーのぼかした円を背景に散らす

守ること

紫の夜空と白地を交互に並べ、境界は曲線にする
文字は細字で字間を広くとる
ぼかし玉と星を余白に散らす
ゆるいキャラクターで親しみを足す
見出しの左右の位置を交互に変えてリズムを作る

DON'T

避けること

太字や原色の目立つボタンを使わない
直線で区切ったセクションを並べない
情報を詰め込んだ訴求バナーを入れない
文字の影や枠付きの見出しを使わない
紫地の上に濃い色の文字を置かない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — ラベンダー夜空とぼかし玉のリラックスケア LP（Dreamy Lavender Night Relax Care LP）

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

Overview

業種: 日用品・生活雑貨／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、シンプル・ミニマル
キーワード: 夜空グラデーション・ラベンダー・ぼかし玉・曲線の切り抜き・細字の字間広め・ゆるキャラ
地の質感: 紫の面に星屑のような細かい粒子を散らす。白地にはピンクや青紫のぼかした光の玉を浮かべる
形: 波のような曲線や雲のような形で写真を切り抜く。細い円弧の線、細い横線付きの欧文ラベル
温度感: やや涼しげな紫に、温かみのあるコーラルピンクを差し色にする

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#7470B3`	夜空セクションの紫の地	12%	画素の主要色に補正
`background`	`#FFFFFF`	ページの白地	37%	画素の実測
`background-alt`	`#F5F5F7`	淡いグレーの地	4%	画素の主要色に補正
`text`	`#322229`	見出しと本文の濃いグレー	3%	画素の主要色に補正
`secondary`	`#535B89`	欧文ラベルと細線の紺紫	1%	画素の主要色に補正
`accent-1`	`#DB9281`	コーラルピンクの差し色	3%	画素の主要色に補正
`tint-1`	`#FEBBC5`	ぼかし玉の淡いピンク	2%	画素の実測
`tint-2`	`#C8C3EC`	曲線の縁取りの淡いラベンダー	3%	推定
`dark-section`	`#322229`	写真上のキャプション帯	1%	画素の主要色に補正
`on-dark`	`#FFFFFF`	紫地とキャプション帯の上の白文字	1%	画素の主要色に補正
`line`	`#BBB3BB`	表の区切り線	1%	画素の主要色に補正
`accent-2`	`#EDDF62`	イラストの月の黄色	1%	画素の実測

地は白と紫の夜空グラデーションを交互に並べる
紫の面は上を明るく、下を濃く(#7060B0〜#5040C0)して星屑を散らす
紫地の上の文字はすべて白の細字にする
白地の見出しは濃いグレー、欧文ラベルは紺紫にする
ピンクは商品バリエーションと円弧の装飾にだけ使う
強い原色や太い塗りの CTA は使わない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	ファーストビューの縦書き欧文ロゴ風タイトル	欧文サンセリフ	Josefin Sans	300	64px	1.0	0.05em
`headline-lg`	セクションの大見出し(2 行)	ゴシック	Zen Kaku Gothic New	400	24px	1.6	0.15em
`headline-sm`	紫地の特長のリード文	ゴシック	Zen Kaku Gothic New	400	17px	1.5	0.1em
`body-md`	見出し下の説明文	ゴシック	Zen Kaku Gothic New	400	12px	1.6	0.15em
`accent`	横線付きの欧文セクションラベル	欧文サンセリフ	Josefin Sans	400	13px	1.2	0.12em
`headline-md`	サイズ表など英字の大見出し	欧文サンセリフ	Josefin Sans	300	24px	1.2	0.1em
`note`	注釈(※付き)	ゴシック	Noto Sans JP	400	8px	1.4	0.03em

全体を細いウェイトで字間広めに組み、ゆったり見せる
太字は使わない。強調は数字を大きくするだけにする
見出しは 2 行に分け、左寄せか右寄せで交互に置く
欧文ラベルは細い横線とセットで見出しの上に置く
イラストのつぶやきは縦書きの小さな手書き風で入れる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。写真や切り抜き画像は端まで裁ち落とす
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
見出しブロックは左寄せと右寄せをセクションごとに切り替える
写真は片側の画面端まで裁ち落とし、反対側に文字を置く
イラストと写真を互い違いに重ねて斜めの視線の流れを作る
余白は広くとり、ぼかし玉を散らして間を埋める

Elevation & Depth

影はほぼ使わずフラットにする
商品パッケージの写真にだけ自然な接地影を付ける
奥行きはぼかし玉と曲線の重なりで出す

Shapes

角丸: 小 4px ／中 12px ／大 40px。ボタンは角丸の長方形。
写真の切り抜き: 波打つ曲線や雲のような有機的な形で切り抜く。円形の切り抜きも使う
セクション境界: 大きなゆるい S 字カーブ。縁に淡いラベンダーの帯を重ねる
直線的なセクション境界は避ける
円は細い 1px の円弧線で描き、閉じずに途切れさせる
キャプション帯は角丸なしの半透明の黒にする

Components

横線付き欧文ラベル（section-label）: 細い横線の横に紺紫の欧文を置く。見出しの上に付ける
円弧線のバリエーション表示（variant-badge）: 商品の斜め上に、途切れた細い円弧線と色付きの文字を置く
写真上のキャプション帯（photo-caption-bar）: 写真に重ねる半透明の黒い帯。白の細字で特長を短く入れる
曲線で切り抜いた写真（blob-photo）: 片側を画面端まで裁ち落とし、反対側は曲線で切り抜いた写真
キャラクターのつぶやき（mascot-whisper）: ゆるい動物のイラストに、縦書きの短いひとことを添える
サイズ表（spec-table）: 罫線だけで作る 2 列の表。左に項目、右に数値を置く
ぼかし玉（bokeh-dot）: ピンクとラベンダーのぼかした円を背景に散らす

Do's and Don'ts

Do - 紫の夜空と白地を交互に並べ、境界は曲線にする - 文字は細字で字間を広くとる - ぼかし玉と星を余白に散らす - ゆるいキャラクターで親しみを足す - 見出しの左右の位置を交互に変えてリズムを作る

Don't - 太字や原色の目立つボタンを使わない - 直線で区切ったセクションを並べない - 情報を詰め込んだ訴求バナーを入れない - 文字の影や枠付きの見出しを使わない - 紫地の上に濃い色の文字を置かない

Page Structure

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

ファーストビュー（使っているシーンで世界観を伝える）: 紫グラデーションの上に人物写真を置く。左に縦書きの欧文タイトル。下端は S 字カーブで区切る
ブランドコンセプト（ご褒美のようなひとときを提案する）: 欧文ラベルと 2 行見出しを置き、曲線で切り抜いた商品の写真を重ねる
バリエーション紹介（香りの種類を見せる）: パッケージ 2 つを上下にずらして並べ、それぞれに円弧線と種類名を付ける
こだわり(特長)（温かさと素材の良さを伝える）: 星屑を散らした紫地に、円形のイラストと写真、キャプション帯、キャラクターを互い違いに置く
フィット感（調整できる仕様を説明する）: 白地に右寄せの見出しを置き、商品を画面幅いっぱいに大きく見せる。点線で切り取り位置を示す
利用シーン（毎日の気分転換を想像させる）: 左寄せの見出しの下に、雲形で切り抜いた屋外の人物写真を置き、月のイラストを添える
サイズ・仕様（商品の寸法を伝える）: 中央に横線付きの英字見出しを置き、パッケージと本体を重ねた写真、罫線の表を並べる

Imagery

人物写真は紫やピンクの環境光を当て、柔らかくぼかした背景で撮る
商品写真は淡い室内で、植物を添えた落ち着いた画にする
イラストは太めの線と淡い塗りのゆるい漫画調にする
動物のキャラクターに目を隠したり、月に乗ったりするしぐさをさせる
装飾には星、ぼかし玉、星屑の粒子を使う
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は幅 420〜480px の中央カラムに SP デザインを置き、左右を淡い紫のグラデーションで埋めるのがおすすめ
PC に広げる場合は、写真と文字を 2 カラムで左右交互に並べる
曲線の区切りは画面幅に合わせて横に伸ばす
見出しサイズは PC では 1.3 倍程度にする

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: Dreamy Lavender Night Relax Care LP
description: 紫の夜空グラデーションと白地を交互に置き、有機的な曲線で区切るリラックス系日用品 LP。細い字間広めのゴシックと欧文ラベルを使い、ぼかした光の玉とゆるいキャラクターイラストで、やわらかく夢見るような雰囲気にしている。
colors:
  primary: '#7470B3'
  background: '#FFFFFF'
  background-alt: '#F5F5F7'
  text: '#322229'
  secondary: '#535B89'
  accent-1: '#DB9281'
  tint-1: '#FEBBC5'
  tint-2: '#C8C3EC'
  dark-section: '#322229'
  on-dark: '#FFFFFF'
  line: '#BBB3BB'
  accent-2: '#EDDF62'
typography:
  display:
    fontFamily: Josefin Sans
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.15em
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.1em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.15em
  accent:
    fontFamily: Josefin Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.12em
  headline-md:
    fontFamily: Josefin Sans
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.1em
  note:
    fontFamily: Noto Sans JP
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.03em
rounded:
  sm: 4px
  md: 12px
  lg: 40px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-label:
    textColor: '{colors.secondary}'
    typography: '{typography.accent}'
    height: 20px
  variant-badge:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 80px
  photo-caption-bar:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 36px
  blob-photo:
    rounded: '{rounded.lg}'
    height: 320px
  mascot-whisper:
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    height: 160px
  spec-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 48px
  bokeh-dot:
    backgroundColor: '{colors.tint-1}'
    rounded: '{rounded.full}'
    height: 40px
---

# DESIGN.md — ラベンダー夜空とぼかし玉のリラックスケア LP（Dreamy Lavender Night Relax Care LP）

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

## Overview

- **業種**: 日用品・生活雑貨 ／ **雰囲気**: やさしい・柔らかい、上品・高級、かわいい、シンプル・ミニマル
- **キーワード**: 夜空グラデーション・ラベンダー・ぼかし玉・曲線の切り抜き・細字の字間広め・ゆるキャラ
- **地の質感**: 紫の面に星屑のような細かい粒子を散らす。白地にはピンクや青紫のぼかした光の玉を浮かべる
- **形**: 波のような曲線や雲のような形で写真を切り抜く。細い円弧の線、細い横線付きの欧文ラベル
- **温度感**: やや涼しげな紫に、温かみのあるコーラルピンクを差し色にする

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#7470B3` | 夜空セクションの紫の地 | 12% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | ページの白地 | 37% | 画素の実測 |
| `background-alt` | `#F5F5F7` | 淡いグレーの地 | 4% | 画素の主要色に補正 |
| `text` | `#322229` | 見出しと本文の濃いグレー | 3% | 画素の主要色に補正 |
| `secondary` | `#535B89` | 欧文ラベルと細線の紺紫 | 1% | 画素の主要色に補正 |
| `accent-1` | `#DB9281` | コーラルピンクの差し色 | 3% | 画素の主要色に補正 |
| `tint-1` | `#FEBBC5` | ぼかし玉の淡いピンク | 2% | 画素の実測 |
| `tint-2` | `#C8C3EC` | 曲線の縁取りの淡いラベンダー | 3% | 推定 |
| `dark-section` | `#322229` | 写真上のキャプション帯 | 1% | 画素の主要色に補正 |
| `on-dark` | `#FFFFFF` | 紫地とキャプション帯の上の白文字 | 1% | 画素の主要色に補正 |
| `line` | `#BBB3BB` | 表の区切り線 | 1% | 画素の主要色に補正 |
| `accent-2` | `#EDDF62` | イラストの月の黄色 | 1% | 画素の実測 |

- 地は白と紫の夜空グラデーションを交互に並べる
- 紫の面は上を明るく、下を濃く(#7060B0〜#5040C0)して星屑を散らす
- 紫地の上の文字はすべて白の細字にする
- 白地の見出しは濃いグレー、欧文ラベルは紺紫にする
- ピンクは商品バリエーションと円弧の装飾にだけ使う
- 強い原色や太い塗りの CTA は使わない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの縦書き欧文ロゴ風タイトル | 欧文サンセリフ | Josefin Sans | 300 | 64px | 1.0 | 0.05em |
| `headline-lg` | セクションの大見出し(2 行) | ゴシック | Zen Kaku Gothic New | 400 | 24px | 1.6 | 0.15em |
| `headline-sm` | 紫地の特長のリード文 | ゴシック | Zen Kaku Gothic New | 400 | 17px | 1.5 | 0.1em |
| `body-md` | 見出し下の説明文 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 1.6 | 0.15em |
| `accent` | 横線付きの欧文セクションラベル | 欧文サンセリフ | Josefin Sans | 400 | 13px | 1.2 | 0.12em |
| `headline-md` | サイズ表など英字の大見出し | 欧文サンセリフ | Josefin Sans | 300 | 24px | 1.2 | 0.1em |
| `note` | 注釈(※付き) | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.03em |

- 全体を細いウェイトで字間広めに組み、ゆったり見せる
- 太字は使わない。強調は数字を大きくするだけにする
- 見出しは 2 行に分け、左寄せか右寄せで交互に置く
- 欧文ラベルは細い横線とセットで見出しの上に置く
- イラストのつぶやきは縦書きの小さな手書き風で入れる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。写真や切り抜き画像は端まで裁ち落とす
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- 見出しブロックは左寄せと右寄せをセクションごとに切り替える
- 写真は片側の画面端まで裁ち落とし、反対側に文字を置く
- イラストと写真を互い違いに重ねて斜めの視線の流れを作る
- 余白は広くとり、ぼかし玉を散らして間を埋める

## Elevation & Depth

- 影はほぼ使わずフラットにする
- 商品パッケージの写真にだけ自然な接地影を付ける
- 奥行きはぼかし玉と曲線の重なりで出す

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンは角丸の長方形。
- **写真の切り抜き**: 波打つ曲線や雲のような有機的な形で切り抜く。円形の切り抜きも使う
- **セクション境界**: 大きなゆるい S 字カーブ。縁に淡いラベンダーの帯を重ねる
- 直線的なセクション境界は避ける
- 円は細い 1px の円弧線で描き、閉じずに途切れさせる
- キャプション帯は角丸なしの半透明の黒にする

## Components

- **横線付き欧文ラベル**（`section-label`）: 細い横線の横に紺紫の欧文を置く。見出しの上に付ける
- **円弧線のバリエーション表示**（`variant-badge`）: 商品の斜め上に、途切れた細い円弧線と色付きの文字を置く
- **写真上のキャプション帯**（`photo-caption-bar`）: 写真に重ねる半透明の黒い帯。白の細字で特長を短く入れる
- **曲線で切り抜いた写真**（`blob-photo`）: 片側を画面端まで裁ち落とし、反対側は曲線で切り抜いた写真
- **キャラクターのつぶやき**（`mascot-whisper`）: ゆるい動物のイラストに、縦書きの短いひとことを添える
- **サイズ表**（`spec-table`）: 罫線だけで作る 2 列の表。左に項目、右に数値を置く
- **ぼかし玉**（`bokeh-dot`）: ピンクとラベンダーのぼかした円を背景に散らす

## Do's and Don'ts

**Do**
- 紫の夜空と白地を交互に並べ、境界は曲線にする
- 文字は細字で字間を広くとる
- ぼかし玉と星を余白に散らす
- ゆるいキャラクターで親しみを足す
- 見出しの左右の位置を交互に変えてリズムを作る

**Don't**
- 太字や原色の目立つボタンを使わない
- 直線で区切ったセクションを並べない
- 情報を詰め込んだ訴求バナーを入れない
- 文字の影や枠付きの見出しを使わない
- 紫地の上に濃い色の文字を置かない

## Page Structure

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

1. **ファーストビュー**（使っているシーンで世界観を伝える）: 紫グラデーションの上に人物写真を置く。左に縦書きの欧文タイトル。下端は S 字カーブで区切る
2. **ブランドコンセプト**（ご褒美のようなひとときを提案する）: 欧文ラベルと 2 行見出しを置き、曲線で切り抜いた商品の写真を重ねる
3. **バリエーション紹介**（香りの種類を見せる）: パッケージ 2 つを上下にずらして並べ、それぞれに円弧線と種類名を付ける
4. **こだわり(特長)**（温かさと素材の良さを伝える）: 星屑を散らした紫地に、円形のイラストと写真、キャプション帯、キャラクターを互い違いに置く
5. **フィット感**（調整できる仕様を説明する）: 白地に右寄せの見出しを置き、商品を画面幅いっぱいに大きく見せる。点線で切り取り位置を示す
6. **利用シーン**（毎日の気分転換を想像させる）: 左寄せの見出しの下に、雲形で切り抜いた屋外の人物写真を置き、月のイラストを添える
7. **サイズ・仕様**（商品の寸法を伝える）: 中央に横線付きの英字見出しを置き、パッケージと本体を重ねた写真、罫線の表を並べる

## Imagery

- 人物写真は紫やピンクの環境光を当て、柔らかくぼかした背景で撮る
- 商品写真は淡い室内で、植物を添えた落ち着いた画にする
- イラストは太めの線と淡い塗りのゆるい漫画調にする
- 動物のキャラクターに目を隠したり、月に乗ったりするしぐさをさせる
- 装飾には星、ぼかし玉、星屑の粒子を使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は幅 420〜480px の中央カラムに SP デザインを置き、左右を淡い紫のグラデーションで埋めるのがおすすめ
- PC に広げる場合は、写真と文字を 2 カラムで左右交互に並べる
- 曲線の区切りは画面幅に合わせて横に伸ばす
- 見出しサイズは PC では 1.3 倍程度にする

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

SOURCE

出典と注意

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

似た LP の design.md

日用品・生活雑貨赤黄青緑のレトロポップな雑貨コラボLPRetro Pop City Character Goods LP 日用品・生活雑貨グレー×水色の清潔な生活雑貨 LPClean Gray and Aqua Household Goods LP 日用品・生活雑貨生成り×焦げ茶のアウトドア用品 LPRugged Outdoor Kraft Gear LP 日用品・生活雑貨くすみパステル×欧文タイポのインテリア雑貨LPPastel Color Block Editorial Product LP 日用品・生活雑貨生成り×くすみ青の北欧調キッズ用品 LPSoft Nordic Pastel Kids Product LP 日用品・生活雑貨生成り×グレージュの収納雑貨 LPWarm Greige Lifestyle Storage LP