生成り×オリーブの植物系美容液 LP

Natural Botanical Olive Serum LP

生成り地にオリーブグリーンと琥珀色を合わせたオーガニック美容液 LP。全幅写真の帯に「Point」番号付きの見出しを重ね、波形の境界で生成り地の成分説明へつなぐ。成分は丸い切り抜きアイコンを横に並べる。

化粧品・スキンケアナチュラルやさしい・柔らかい上品・高級清潔・爽やかSP

ダウンロード

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

COLORS

配色

地は生成りの #FFFFF2 だけで通し、真っ白は使わない
Point 帯ごとに写真の色を変える（黄・ピーチ・セージ・グレー）
強調語は黄土色の文字か、白ボックスに細い枠で囲む
タグは全部オリーブ色の面に白文字で統一する
文字は黒ではなく少し茶色がかった濃いグレーにする
ボトルの琥珀色は写真の中だけで使い、UI の色には使わない

TYPOGRAPHY

書体

displayFV の縦書き商品カテゴリゴシック／ Zen Kaku Gothic New 700 ／ 44px ／行間 1.1

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

headline-lgPoint 帯の大見出し（白フチ付き）ゴシック／ Zen Kaku Gothic New 700 ／ 28px ／行間 1.3

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

headline-md枠囲みの小見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.4

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

headline-smPoint 帯の上にのせるリードゴシック／ Noto Sans JP 700 ／ 16px ／行間 1.5

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

body-md本文・成分名ゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.8

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

note成分の注釈（※付き）ゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.6

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

accentPoint 番号・擬音の手書き文字手書き・筆／ Klee One 600 ／ 18px ／行間 1.2

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

label-button無添加タグ・英字ラベルゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.3

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

見出しは字間を 0.05〜0.1em 開ける
写真上の大見出しは白フチかシャドウを付けて読みやすくする
Point 番号は手書きの筆記体英字にして、斜めに傾けて置く
強調したい語だけ色を変えるか、枠で囲む
注釈は小さいグレーの文字にして、※番号で本文と対応させる

PAGE STRUCTURE

セクション構成

ファーストビュー商品カテゴリと悩みへの効果を示すグレーの台座の上にボトルの写真。左に縦書きの見出しと円形バッジを 2 つ置く
W 配合成分2 つの主成分を紹介する背景を左右で緑と黄に分割し、中央にボトル。各成分の名前と説明を左右に置く
Point1 ビタミン主な美容成分を訴求する黄色の帯の見出し、枠囲みの小見出し、丸い写真、プラス記号の順につなぐ
保湿成分保湿成分を補足する丸アイコンを 3 つ並べ、斜線下線の見出しと注釈を置く
Point2 テクスチャ使い心地を伝えるピーチの帯の後に、グレー地でボトルとしずくの写真、手書きの擬音を置く
Point3 オーガニック植物成分へのこだわりを示すセージの葉影の帯の後に、成分の丸アイコンを 4 列で並べる
香りアロマ成分を紹介する水彩の植物イラストを 3 つ横に並べ、名前を添える
Point4 無添加安心感を与える製品群の帯の後に、枠囲みの見出しとオリーブ色のタグの格子を置く
ラインナップ関連商品を紹介する英字ラベルと斜線下線。4 列の商品切り抜きを縦線で区切る

COMPONENTS

部品

Point 帯見出し point-band全幅の写真の上に、手書きの番号・リード・大見出しを重ねる。下端は波形にする
枠囲み小見出し boxed-heading数字と、細い線で囲んだ強調語を組み合わせた見出し
斜線下線見出し underline-heading黄土色の文字の下に、斜めストライプの下線を敷く
成分丸アイコン ingredient-circle正円の成分写真の下に、成分名を置く
無添加タグ free-tagオリーブ色の面に白文字。3 列の格子に並べる
FV 円形バッジ fv-badge白い正円の中に、悩みのワードとケア内容を 2 段で書く
ラインナップ列 lineup-column商品の切り抜き・品名・短い説明を縦に並べ、列の間を縦線で区切る
注釈 note-text※番号付きの小さいグレー文字

守ること

生成り地とくすんだ植物色だけでまとめる
Point 帯は番号付きにして、順番に登場させる
成分は写真を丸く切り抜いて並べ、名前を添える
効能の表現には※注釈を付ける
帯の境界は波形にして、やわらかく区切る

DON'T

避けること

鮮やかな原色や真っ白な地を使わない
角張った太いボタンを並べない
1 セクションに文章を詰め込まない
黒ベタの重い面を作らない
成分写真を四角いまま置かない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 生成り×オリーブの植物系美容液 LP（Natural Botanical Olive Serum LP）

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

Overview

業種: 化粧品・スキンケア／ 雰囲気: ナチュラル、やさしい・柔らかい、上品・高級、清潔・爽やか
キーワード: 生成り・オリーブ・琥珀ボトル・波形境界・丸切り抜き・手書き英字
地の質感: 写真のボケやしずくを使ったしっとりした質感。地はフラットな生成り色。
形: 丸い成分アイコン、角丸の大きいタグ、ゆるい波形の境界線
温度感: やや暖かい中間色。緑と黄色で植物っぽさを出す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#FFFFF2`	ページ地の生成り色	45%	画素の実測
`primary`	`#B7B28D`	オリーブ色のタグ・下線	4%	画素の主要色に補正
`secondary`	`#7E8A78`	Point3 帯のセージグリーン	5%	画素の主要色に補正
`accent-1`	`#9C9949`	強調見出しの黄土色の文字	1%	画素の実測
`accent-2`	`#ECCE7D`	ビタミン帯のレモンイエロー	4%	画素の主要色に補正
`accent-3`	`#815727`	ボトルの琥珀ブラウン	3%	画素の主要色に補正
`tint-1`	`#F3D4BB`	Point2 帯のピーチベージュ	3%	画素の実測
`tint-2`	`#E1E1E2`	とろみ紹介エリアの淡いグレー	6%	画素の実測
`text`	`#3C3D34`	見出しの濃いグレー文字	2%	画素の実測
`text-body`	`#4A4A44`	本文のグレー文字	2%	推定
`line`	`#92948D`	見出し枠・区切り線	1%	画素の主要色に補正
`on-primary`	`#FFFFFA`	タグ上の白文字	1%	画素の主要色に補正
`primary-accessible`	`#7C764E`	AA を満たす補正値（計算）		計算
`accent-1-accessible`	`#7B793A`	AA を満たす補正値（計算）		計算

地は生成りの #FFFFF2 だけで通し、真っ白は使わない
Point 帯ごとに写真の色を変える（黄・ピーチ・セージ・グレー）
強調語は黄土色の文字か、白ボックスに細い枠で囲む
タグは全部オリーブ色の面に白文字で統一する
文字は黒ではなく少し茶色がかった濃いグレーにする
ボトルの琥珀色は写真の中だけで使い、UI の色には使わない
free-tag は文字 #FFFFFA × 背景 #B7B28D のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7C764E、4.59:1）を使う。
fv-badge は文字 #9C9949 × 背景 #FFFFFA のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7B793A、4.51:1）を使う。

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FV の縦書き商品カテゴリ	ゴシック	Zen Kaku Gothic New	700	44px	1.1	0.05em
`headline-lg`	Point 帯の大見出し（白フチ付き）	ゴシック	Zen Kaku Gothic New	700	28px	1.3	0.08em
`headline-md`	枠囲みの小見出し	ゴシック	Noto Sans JP	700	20px	1.4	0.05em
`headline-sm`	Point 帯の上にのせるリード	ゴシック	Noto Sans JP	700	16px	1.5	0.1em
`body-md`	本文・成分名	ゴシック	Noto Sans JP	500	13px	1.8	0.08em
`note`	成分の注釈（※付き）	ゴシック	Noto Sans JP	400	9px	1.6	0.03em
`accent`	Point 番号・擬音の手書き文字	手書き・筆	Klee One	600	18px	1.2	0.05em
`label-button`	無添加タグ・英字ラベル	ゴシック	Noto Sans JP	500	14px	1.3	0.1em

見出しは字間を 0.05〜0.1em 開ける
写真上の大見出しは白フチかシャドウを付けて読みやすくする
Point 番号は手書きの筆記体英字にして、斜めに傾けて置く
強調したい語だけ色を変えるか、枠で囲む
注釈は小さいグレーの文字にして、※番号で本文と対応させる
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。成分は 3〜4 列のアイコン並び
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
Point 帯は全幅の写真で、高さは約 200px
成分アイコンは 3 列か 4 列で横に均等に並べる
見出しは中央揃えにする
タグは 3 列の格子に並べる
ラインナップは 4 列にして、縦線で区切る

Elevation & Depth

基本はフラットで影を付けない
丸アイコンには薄い白い縁と、わずかな影を付ける
写真上の見出しには白いグロー状のシャドウを付ける

Shapes

角丸: 小 0px ／中 12px ／大 999px。ボタンはピル型。
写真の切り抜き: 成分写真は正円に切り抜き、商品は背景を抜いた切り抜きにする
セクション境界: Point 帯の下端は、ゆるい波形のカーブで生成り地につなぐ
見出し枠は角丸なしの細い線にする
タグは大きい角丸（片側だけ丸めた葉っぱ型）にする
FV のバッジは正円で、ずらした二重円にする

Components

Point 帯見出し（point-band）: 全幅の写真の上に、手書きの番号・リード・大見出しを重ねる。下端は波形にする
枠囲み小見出し（boxed-heading）: 数字と、細い線で囲んだ強調語を組み合わせた見出し
斜線下線見出し（underline-heading）: 黄土色の文字の下に、斜めストライプの下線を敷く
成分丸アイコン（ingredient-circle）: 正円の成分写真の下に、成分名を置く
無添加タグ（free-tag）: オリーブ色の面に白文字。3 列の格子に並べる
FV 円形バッジ（fv-badge）: 白い正円の中に、悩みのワードとケア内容を 2 段で書く
ラインナップ列（lineup-column）: 商品の切り抜き・品名・短い説明を縦に並べ、列の間を縦線で区切る
注釈（note-text）: ※番号付きの小さいグレー文字

Do's and Don'ts

Do - 生成り地とくすんだ植物色だけでまとめる - Point 帯は番号付きにして、順番に登場させる - 成分は写真を丸く切り抜いて並べ、名前を添える - 効能の表現には※注釈を付ける - 帯の境界は波形にして、やわらかく区切る

Don't - 鮮やかな原色や真っ白な地を使わない - 角張った太いボタンを並べない - 1 セクションに文章を詰め込まない - 黒ベタの重い面を作らない - 成分写真を四角いまま置かない

Page Structure

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

ファーストビュー（商品カテゴリと悩みへの効果を示す）: グレーの台座の上にボトルの写真。左に縦書きの見出しと円形バッジを 2 つ置く
W 配合成分（2 つの主成分を紹介する）: 背景を左右で緑と黄に分割し、中央にボトル。各成分の名前と説明を左右に置く
Point1 ビタミン（主な美容成分を訴求する）: 黄色の帯の見出し、枠囲みの小見出し、丸い写真、プラス記号の順につなぐ
保湿成分（保湿成分を補足する）: 丸アイコンを 3 つ並べ、斜線下線の見出しと注釈を置く
Point2 テクスチャ（使い心地を伝える）: ピーチの帯の後に、グレー地でボトルとしずくの写真、手書きの擬音を置く
Point3 オーガニック（植物成分へのこだわりを示す）: セージの葉影の帯の後に、成分の丸アイコンを 4 列で並べる
香り（アロマ成分を紹介する）: 水彩の植物イラストを 3 つ横に並べ、名前を添える
Point4 無添加（安心感を与える）: 製品群の帯の後に、枠囲みの見出しとオリーブ色のタグの格子を置く
ラインナップ（関連商品を紹介する）: 英字ラベルと斜線下線。4 列の商品切り抜きを縦線で区切る

Imagery

ボトルは透明なアクリル台やグレー地で、自然光で撮る
背景にはしずく・泡・とろみのマクロ写真を使い、ボケを効かせる
植物の葉影を落とした、くすんだ緑の写真を使う
成分は白背景の素材写真を正円に切り抜く
香りの植物は淡い水彩タッチのイラストにする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は中央 750px 前後のカラムに SP の構成をそのまま置く
カラムの左右は生成り地で埋める
Point 帯は PC でも全幅の写真にする
成分アイコンは PC でも 1 行に並べる

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: Natural Botanical Olive Serum LP
description: 生成り地にオリーブグリーンと琥珀色を合わせたオーガニック美容液 LP。全幅写真の帯に「Point」番号付きの見出しを重ね、波形の境界で生成り地の成分説明へつなぐ。成分は丸い切り抜きアイコンを横に並べる。
colors:
  background: '#FFFFF2'
  primary: '#B7B28D'
  secondary: '#7E8A78'
  accent-1: '#9C9949'
  accent-2: '#ECCE7D'
  accent-3: '#815727'
  tint-1: '#F3D4BB'
  tint-2: '#E1E1E2'
  text: '#3C3D34'
  text-body: '#4A4A44'
  line: '#92948D'
  on-primary: '#FFFFFA'
  primary-accessible: '#7C764E'
  accent-1-accessible: '#7B793A'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.08em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.1em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.08em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.03em
  accent:
    fontFamily: Klee One
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 12px
  lg: 999px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  point-band:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 200px
  boxed-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 36px
  underline-heading:
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    height: 32px
  ingredient-circle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.full}'
    height: 120px
  free-tag:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.lg}'
    height: 30px
  fv-badge:
    backgroundColor: '{colors.on-primary}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 100px
  lineup-column:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 300px
  note-text:
    typography: '{typography.note}'
    height: 30px
---

# DESIGN.md — 生成り×オリーブの植物系美容液 LP（Natural Botanical Olive Serum LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: ナチュラル、やさしい・柔らかい、上品・高級、清潔・爽やか
- **キーワード**: 生成り・オリーブ・琥珀ボトル・波形境界・丸切り抜き・手書き英字
- **地の質感**: 写真のボケやしずくを使ったしっとりした質感。地はフラットな生成り色。
- **形**: 丸い成分アイコン、角丸の大きいタグ、ゆるい波形の境界線
- **温度感**: やや暖かい中間色。緑と黄色で植物っぽさを出す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFFFF2` | ページ地の生成り色 | 45% | 画素の実測 |
| `primary` | `#B7B28D` | オリーブ色のタグ・下線 | 4% | 画素の主要色に補正 |
| `secondary` | `#7E8A78` | Point3 帯のセージグリーン | 5% | 画素の主要色に補正 |
| `accent-1` | `#9C9949` | 強調見出しの黄土色の文字 | 1% | 画素の実測 |
| `accent-2` | `#ECCE7D` | ビタミン帯のレモンイエロー | 4% | 画素の主要色に補正 |
| `accent-3` | `#815727` | ボトルの琥珀ブラウン | 3% | 画素の主要色に補正 |
| `tint-1` | `#F3D4BB` | Point2 帯のピーチベージュ | 3% | 画素の実測 |
| `tint-2` | `#E1E1E2` | とろみ紹介エリアの淡いグレー | 6% | 画素の実測 |
| `text` | `#3C3D34` | 見出しの濃いグレー文字 | 2% | 画素の実測 |
| `text-body` | `#4A4A44` | 本文のグレー文字 | 2% | 推定 |
| `line` | `#92948D` | 見出し枠・区切り線 | 1% | 画素の主要色に補正 |
| `on-primary` | `#FFFFFA` | タグ上の白文字 | 1% | 画素の主要色に補正 |
| `primary-accessible` | `#7C764E` | AA を満たす補正値（計算） |  | 計算 |
| `accent-1-accessible` | `#7B793A` | AA を満たす補正値（計算） |  | 計算 |

- 地は生成りの #FFFFF2 だけで通し、真っ白は使わない
- Point 帯ごとに写真の色を変える（黄・ピーチ・セージ・グレー）
- 強調語は黄土色の文字か、白ボックスに細い枠で囲む
- タグは全部オリーブ色の面に白文字で統一する
- 文字は黒ではなく少し茶色がかった濃いグレーにする
- ボトルの琥珀色は写真の中だけで使い、UI の色には使わない
- `free-tag` は文字 `#FFFFFA` × 背景 `#B7B28D` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#7C764E`、4.59:1）を使う。
- `fv-badge` は文字 `#9C9949` × 背景 `#FFFFFA` のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#7B793A`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の縦書き商品カテゴリ | ゴシック | Zen Kaku Gothic New | 700 | 44px | 1.1 | 0.05em |
| `headline-lg` | Point 帯の大見出し（白フチ付き） | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.3 | 0.08em |
| `headline-md` | 枠囲みの小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.05em |
| `headline-sm` | Point 帯の上にのせるリード | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.1em |
| `body-md` | 本文・成分名 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.08em |
| `note` | 成分の注釈（※付き） | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.03em |
| `accent` | Point 番号・擬音の手書き文字 | 手書き・筆 | Klee One | 600 | 18px | 1.2 | 0.05em |
| `label-button` | 無添加タグ・英字ラベル | ゴシック | Noto Sans JP | 500 | 14px | 1.3 | 0.1em |

- 見出しは字間を 0.05〜0.1em 開ける
- 写真上の大見出しは白フチかシャドウを付けて読みやすくする
- Point 番号は手書きの筆記体英字にして、斜めに傾けて置く
- 強調したい語だけ色を変えるか、枠で囲む
- 注釈は小さいグレーの文字にして、※番号で本文と対応させる
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。成分は 3〜4 列のアイコン並び
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- Point 帯は全幅の写真で、高さは約 200px
- 成分アイコンは 3 列か 4 列で横に均等に並べる
- 見出しは中央揃えにする
- タグは 3 列の格子に並べる
- ラインナップは 4 列にして、縦線で区切る

## Elevation & Depth

- 基本はフラットで影を付けない
- 丸アイコンには薄い白い縁と、わずかな影を付ける
- 写真上の見出しには白いグロー状のシャドウを付ける

## Shapes

- **角丸**: 小 0px ／ 中 12px ／ 大 999px。ボタンはピル型。
- **写真の切り抜き**: 成分写真は正円に切り抜き、商品は背景を抜いた切り抜きにする
- **セクション境界**: Point 帯の下端は、ゆるい波形のカーブで生成り地につなぐ
- 見出し枠は角丸なしの細い線にする
- タグは大きい角丸（片側だけ丸めた葉っぱ型）にする
- FV のバッジは正円で、ずらした二重円にする

## Components

- **Point 帯見出し**（`point-band`）: 全幅の写真の上に、手書きの番号・リード・大見出しを重ねる。下端は波形にする
- **枠囲み小見出し**（`boxed-heading`）: 数字と、細い線で囲んだ強調語を組み合わせた見出し
- **斜線下線見出し**（`underline-heading`）: 黄土色の文字の下に、斜めストライプの下線を敷く
- **成分丸アイコン**（`ingredient-circle`）: 正円の成分写真の下に、成分名を置く
- **無添加タグ**（`free-tag`）: オリーブ色の面に白文字。3 列の格子に並べる
- **FV 円形バッジ**（`fv-badge`）: 白い正円の中に、悩みのワードとケア内容を 2 段で書く
- **ラインナップ列**（`lineup-column`）: 商品の切り抜き・品名・短い説明を縦に並べ、列の間を縦線で区切る
- **注釈**（`note-text`）: ※番号付きの小さいグレー文字

## Do's and Don'ts

**Do**
- 生成り地とくすんだ植物色だけでまとめる
- Point 帯は番号付きにして、順番に登場させる
- 成分は写真を丸く切り抜いて並べ、名前を添える
- 効能の表現には※注釈を付ける
- 帯の境界は波形にして、やわらかく区切る

**Don't**
- 鮮やかな原色や真っ白な地を使わない
- 角張った太いボタンを並べない
- 1 セクションに文章を詰め込まない
- 黒ベタの重い面を作らない
- 成分写真を四角いまま置かない

## Page Structure

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

1. **ファーストビュー**（商品カテゴリと悩みへの効果を示す）: グレーの台座の上にボトルの写真。左に縦書きの見出しと円形バッジを 2 つ置く
2. **W 配合成分**（2 つの主成分を紹介する）: 背景を左右で緑と黄に分割し、中央にボトル。各成分の名前と説明を左右に置く
3. **Point1 ビタミン**（主な美容成分を訴求する）: 黄色の帯の見出し、枠囲みの小見出し、丸い写真、プラス記号の順につなぐ
4. **保湿成分**（保湿成分を補足する）: 丸アイコンを 3 つ並べ、斜線下線の見出しと注釈を置く
5. **Point2 テクスチャ**（使い心地を伝える）: ピーチの帯の後に、グレー地でボトルとしずくの写真、手書きの擬音を置く
6. **Point3 オーガニック**（植物成分へのこだわりを示す）: セージの葉影の帯の後に、成分の丸アイコンを 4 列で並べる
7. **香り**（アロマ成分を紹介する）: 水彩の植物イラストを 3 つ横に並べ、名前を添える
8. **Point4 無添加**（安心感を与える）: 製品群の帯の後に、枠囲みの見出しとオリーブ色のタグの格子を置く
9. **ラインナップ**（関連商品を紹介する）: 英字ラベルと斜線下線。4 列の商品切り抜きを縦線で区切る

## Imagery

- ボトルは透明なアクリル台やグレー地で、自然光で撮る
- 背景にはしずく・泡・とろみのマクロ写真を使い、ボケを効かせる
- 植物の葉影を落とした、くすんだ緑の写真を使う
- 成分は白背景の素材写真を正円に切り抜く
- 香りの植物は淡い水彩タッチのイラストにする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央 750px 前後のカラムに SP の構成をそのまま置く
- カラムの左右は生成り地で埋める
- Point 帯は PC でも全幅の写真にする
- 成分アイコンは PC でも 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-8dc13585`（元 LP の URL から採番）
- **元 LP**: https://item.rakuten.co.jp/tsurunishi/905b0cg9ddbcb/?sp=1
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 中（5/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/tsurunishi/905b0cg9ddbcb/?sp=1（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

化粧品・スキンケア生成り×モカと葉・真珠の上品カラコンLPPearl Ivory Botanical Beauty Lens LP 化粧品・スキンケア朱赤×肌色ベージュの化粧下地訴求 LPCoral Red Beauty Primer Appeal LP 化粧品・スキンケア赤い有機形と白地のアスリート起用スキンケアLPRed Blob Athlete Muse Skincare LP 化粧品・スキンケアパステル市松×Y2Kステッカーのカラコン LPPastel Y2K Checker Color Contact LP 化粧品・スキンケア紫×深緑と淡いグラデの植物系スキンケアLPBotanical Purple Cleansing Skincare LP 化粧品・スキンケアくすみモーヴ×キャンディ質感のリップ LPDreamy Mauve Candy Cosmetics LP