白地×ビタミンオレンジの皮膚科学スキンケアLP

Clean White Vitamin-Orange Skincare LP

白い地にたっぷり余白をとり、オレンジや金の製品写真をきわ立たせたミニマルな化粧品LPです。中央揃えの短い見出しと細い灰色の本文で、上品で科学的な信頼感を出します。購入ボタンだけを赤いピル型にして、トライアル購入へ導きます。

化粧品・スキンケアシンプル・ミニマル上品・高級清潔・爽やか信頼・誠実PC

ダウンロード

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

COLORS

配色

地は白にし、色は製品写真のオレンジと金にまかせる
赤は購入ボタン・価格帯・ニュースレター帯だけに限る
文字色は見出しを黒に近い色、本文を中くらいのグレー、注釈を薄いグレーの3段階に分ける
サブボタンは白地に灰色の細い枠と黒い文字
フッターは暗い地に白い文字。最下部は赤い帯で締める

TYPOGRAPHY

書体

display動画の上に重ねる製品名明朝／ Noto Serif JP 500 ／ 28px ／行間 1.3

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

headline-lgセクションの中央見出しゴシック／ Noto Sans JP 500 ／ 22px ／行間 1.5

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

headline-mdキット名や商品群の見出しゴシック／ Noto Sans JP 500 ／ 17px ／行間 1.5

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

headline-sm商品カードの名前やQ&Aの質問ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.5

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

body-md中央揃えの説明文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 1.9

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

note成分の注釈や配合目的ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

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

accent欧文のキャッチやQ&Aなどの小見出し欧文サンセリフ／ Lato 500 ／ 16px ／行間 1.4

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

label-buttonボタンの文字ゴシック／ Noto Sans JP 500 ／ 13px ／行間 1.2

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

見出しは2〜3行に改行し、中央揃えにする
見出しは太くしすぎず、500程度の中くらいの太さにする
本文は行間を広めにとり、グレーで控えめに見せる
成分の注釈は、本文のすぐ下に小さい文字で必ず添える
製品名の大きな表示だけ明朝体を使い、高級感を出す

PAGE STRUCTURE

セクション構成

ファーストビュー製品の世界観を一瞬で伝える全幅の動画か写真に、製品ボトルと金の粒子を写す。下部に明朝体の製品名を白文字で重ねる
トライアルオファー最初の購入を促す左に商品写真と赤い価格帯、右にキット名・内容・赤ボタンを置く
ベネフィット提示使ってどうなれるかを伝える中央揃えの3行見出しと短い本文。下に注釈を添える
ビジュアル成分のイメージを見せる本文幅いっぱいの写真。製品のまわりに金の粒子が舞う
技術の説明独自技術で裏付ける中央の見出しと本文の下に、成分のイラストと肌の断面図を2枚並べる
トライアルオファー（再掲）読み進めた人を購入へ導く最初のオファーと同じ形に、短い本文と価格を足す
シリーズ商品の紹介ほかの商品へ広げる製品写真を3列のカードで並べ、それぞれに枠線ボタンを付ける
使用感の説明テクスチャの心地よさを伝える中央の見出しと、手のひらに液を出す全幅の写真
ブランドメッセージ憧れと共感を生む白背景で撮った女性モデルの写真と、中央揃えの見出し
デザインの刷新新しいデザインを訴える左にNEWバッジ付きの製品群の写真、右に見出しと枠線ボタン
よくある質問不安を解消する欧文の小見出しの下に、線で区切ったアコーディオンを並べる
ブランドバナーブランドの印象を締めくくる赤い背景にモデルと白い明朝体のコピー。下に欧文のキャッチとボタン
キャンペーン回遊させる正方形のバナーを3列に並べ、一覧を見るボタンを置く
フッターメルマガ登録とサイト内のリンク赤いメルマガ帯、暗い地のSNSアイコンとリンク、最下部の赤い帯

COMPONENTS

部品

カート追加ボタン button-primary赤い塗りのピル型で、白文字の購入ボタン
詳細を見るボタン button-outline白地に灰色の細い枠を付けたピル型のサブボタン
割引の価格帯 price-band商品写真の下端に重ねる赤い帯。割引率と価格を白い大きな文字で載せる
トライアル購入ブロック trial-block左に商品写真、右にキット名・内容リスト・赤ボタンを置く
商品カード product-card薄いグレー地の製品写真の下に、商品名・短い説明・注釈・枠線ボタンを縦に並べる
NEWバッジ badge-new写真の右上に置く、黒い小さな円に白文字のバッジ
Q&Aアコーディオン faq-accordion質問の行を細い線で区切り、右端に＋を置く
メルマガ登録帯 newsletter-band赤い帯に、白い入力欄と登録ボタンを並べる

守ること

白い余白をたっぷりとり、写真を主役にする
見出しは短く改行し、中央揃えにする
成分の説明には必ず小さい注釈を添える
赤は購入に関わる要素だけに使う
トライアルの購入導線は、ページの途中で繰り返す

DON'T

避けること

セクションごとに背景色を塗り分けない
グラデーションや影の強いボタンを使わない
見出しを極太にしたり、装飾の多い書体を使ったりしない
オレンジを文字色やボタン色に使わない
要素を詰め込み、余白を削らない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 白地×ビタミンオレンジの皮膚科学スキンケアLP（Clean White Vitamin-Orange Skincare LP）

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

Overview

業種: 化粧品・スキンケア／ 雰囲気: シンプル・ミニマル、上品・高級、清潔・爽やか、信頼・誠実
キーワード: 白余白・ビタミンオレンジ・金の粒子・中央揃え・皮膚科学・赤CTA
地の質感: 白地は均一なフラット。光沢のある製品写真と、はじける金の粒子の写真で質感を出す
形: 写真は角丸なしの矩形。ボタンは細い枠線か赤い塗りのピル型
温度感: 白地はクールでも、オレンジと金の写真が温かみを足す中間の温度感

Colors

Token	HEX	役割	面積の目安	値の出どころ
`background`	`#FFFFFF`	ページの基本の地	58%	画素の実測
`primary`	`#E8761E`	製品を象徴するビタミンオレンジ	4%	推定
`cta`	`#D20C15`	カート追加ボタンと価格帯	3%	画素の実測
`on-cta`	`#FFFFFF`	赤ボタン上の文字	0%	画素の主要色に補正
`text`	`#2A2927`	見出しの文字	2%	画素の実測
`text-body`	`#555555`	本文の文字	2%	推定
`text-muted`	`#999999`	注釈の小さい文字	0%	推定
`line`	`#DCD8D9`	Q&Aの区切り線とボタンの枠	1%	画素の主要色に補正
`background-alt`	`#F2F3FD`	写真の背景の薄いグレー	5%	画素の実測
`accent-1`	`#CC9F77`	金色の製品やシャンパンゴールド	4%	画素の主要色に補正
`tint-1`	`#FFFEFC`	肌の断面図に使う淡いベージュ	3%	画素の実測
`secondary`	`#C9102F`	ブランドの赤いバナーと帯	3%	画素の実測
`dark-section`	`#2A2623`	フッターの暗い地	4%	画素の実測
`on-dark`	`#FFFFFF`	フッターの文字	0%	画素の主要色に補正

地は白にし、色は製品写真のオレンジと金にまかせる
赤は購入ボタン・価格帯・ニュースレター帯だけに限る
文字色は見出しを黒に近い色、本文を中くらいのグレー、注釈を薄いグレーの3段階に分ける
サブボタンは白地に灰色の細い枠と黒い文字
フッターは暗い地に白い文字。最下部は赤い帯で締める

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	動画の上に重ねる製品名	明朝	Noto Serif JP	500	28px	1.3	0.02em
`headline-lg`	セクションの中央見出し	ゴシック	Noto Sans JP	500	22px	1.5	0.04em
`headline-md`	キット名や商品群の見出し	ゴシック	Noto Sans JP	500	17px	1.5	0.03em
`headline-sm`	商品カードの名前やQ&Aの質問	ゴシック	Noto Sans JP	500	14px	1.5	0.02em
`body-md`	中央揃えの説明文	ゴシック	Noto Sans JP	400	14px	1.9	0.04em
`note`	成分の注釈や配合目的	ゴシック	Noto Sans JP	400	10px	1.6	0.02em
`accent`	欧文のキャッチやQ&Aなどの小見出し	欧文サンセリフ	Lato	500	16px	1.4	0.02em
`label-button`	ボタンの文字	ゴシック	Noto Sans JP	500	13px	1.2	0.04em

見出しは2〜3行に改行し、中央揃えにする
見出しは太くしすぎず、500程度の中くらいの太さにする
本文は行間を広めにとり、グレーで控えめに見せる
成分の注釈は、本文のすぐ下に小さい文字で必ず添える
製品名の大きな表示だけ明朝体を使い、高級感を出す
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。商品紹介は横スクロールか縦積み。PC は中央寄せの 1 カラムで、画像と文字の 2 分割や 3 列カードを使う
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
セクションの間は大きな余白で区切り、背景色は切り替えない
文字のブロックは中央揃えで、幅を狭めにとる
写真は本文と同じ幅いっぱいに大きく配置する
トライアルの購入ブロックは、ページの途中と後半の2回入れる

Elevation & Depth

影はほぼ使わず、フラットに仕上げる
立体感は製品写真に写る影や反射だけで出す
ボタンにも影を付けない

Shapes

角丸: 小 0px ／中 4px ／大 8px。ボタンはピル型。
写真の切り抜き: 角丸なしの矩形。製品の切り抜き写真は、白か薄いグレーの背景に置く
セクション境界: 線や形は使わず、余白だけで区切る
ボタンはすべてピル型にする
NEWバッジは黒い円形にする
写真やカードは直角のままにする

Components

カート追加ボタン（button-primary）: 赤い塗りのピル型で、白文字の購入ボタン
詳細を見るボタン（button-outline）: 白地に灰色の細い枠を付けたピル型のサブボタン
割引の価格帯（price-band）: 商品写真の下端に重ねる赤い帯。割引率と価格を白い大きな文字で載せる
トライアル購入ブロック（trial-block）: 左に商品写真、右にキット名・内容リスト・赤ボタンを置く
商品カード（product-card）: 薄いグレー地の製品写真の下に、商品名・短い説明・注釈・枠線ボタンを縦に並べる
NEWバッジ（badge-new）: 写真の右上に置く、黒い小さな円に白文字のバッジ
Q&Aアコーディオン（faq-accordion）: 質問の行を細い線で区切り、右端に＋を置く
メルマガ登録帯（newsletter-band）: 赤い帯に、白い入力欄と登録ボタンを並べる

Do's and Don'ts

Do - 白い余白をたっぷりとり、写真を主役にする - 見出しは短く改行し、中央揃えにする - 成分の説明には必ず小さい注釈を添える - 赤は購入に関わる要素だけに使う - トライアルの購入導線は、ページの途中で繰り返す

Don't - セクションごとに背景色を塗り分けない - グラデーションや影の強いボタンを使わない - 見出しを極太にしたり、装飾の多い書体を使ったりしない - オレンジを文字色やボタン色に使わない - 要素を詰め込み、余白を削らない

Page Structure

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

ファーストビュー（製品の世界観を一瞬で伝える）: 全幅の動画か写真に、製品ボトルと金の粒子を写す。下部に明朝体の製品名を白文字で重ねる
トライアルオファー（最初の購入を促す）: 左に商品写真と赤い価格帯、右にキット名・内容・赤ボタンを置く
ベネフィット提示（使ってどうなれるかを伝える）: 中央揃えの3行見出しと短い本文。下に注釈を添える
ビジュアル（成分のイメージを見せる）: 本文幅いっぱいの写真。製品のまわりに金の粒子が舞う
技術の説明（独自技術で裏付ける）: 中央の見出しと本文の下に、成分のイラストと肌の断面図を2枚並べる
トライアルオファー（再掲）（読み進めた人を購入へ導く）: 最初のオファーと同じ形に、短い本文と価格を足す
シリーズ商品の紹介（ほかの商品へ広げる）: 製品写真を3列のカードで並べ、それぞれに枠線ボタンを付ける
使用感の説明（テクスチャの心地よさを伝える）: 中央の見出しと、手のひらに液を出す全幅の写真
ブランドメッセージ（憧れと共感を生む）: 白背景で撮った女性モデルの写真と、中央揃えの見出し
デザインの刷新（新しいデザインを訴える）: 左にNEWバッジ付きの製品群の写真、右に見出しと枠線ボタン
よくある質問（不安を解消する）: 欧文の小見出しの下に、線で区切ったアコーディオンを並べる
ブランドバナー（ブランドの印象を締めくくる）: 赤い背景にモデルと白い明朝体のコピー。下に欧文のキャッチとボタン
キャンペーン（回遊させる）: 正方形のバナーを3列に並べ、一覧を見るボタンを置く
フッター（メルマガ登録とサイト内のリンク）: 赤いメルマガ帯、暗い地のSNSアイコンとリンク、最下部の赤い帯

Imagery

製品は白か淡いグレーの背景で撮り、光沢と柔らかい影を見せる
金色の液体の粒がはじけるCGで、ビタミンらしさを出す
女性モデルは白い服で、ナチュラルなメイクと明るいライティング
手元の写真は白背景で、液体が落ちる瞬間をとらえる
成分の説明は、光沢のあるオレンジの球体と線画の肌の断面図で描く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SPは1カラムにし、トライアルブロックは写真の下に文字を置く
商品カード3列は、SPでは縦積みか横スクロールにする
キャンペーンのバナーは、SPでは1〜2列にする
PCは本文幅を約75%に抑え、左右に白い余白を残す
SPの見出しは22px前後で、2〜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: Clean White Vitamin-Orange Skincare LP
description: 白い地にたっぷり余白をとり、オレンジや金の製品写真をきわ立たせたミニマルな化粧品LPです。中央揃えの短い見出しと細い灰色の本文で、上品で科学的な信頼感を出します。購入ボタンだけを赤いピル型にして、トライアル購入へ導きます。
colors:
  background: '#FFFFFF'
  primary: '#E8761E'
  cta: '#D20C15'
  on-cta: '#FFFFFF'
  text: '#2A2927'
  text-body: '#555555'
  text-muted: '#999999'
  line: '#DCD8D9'
  background-alt: '#F2F3FD'
  accent-1: '#CC9F77'
  tint-1: '#FFFEFC'
  secondary: '#C9102F'
  dark-section: '#2A2623'
  on-dark: '#FFFFFF'
typography:
  display:
    fontFamily: Noto Serif JP
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.04em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.04em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.02em
  accent:
    fontFamily: Lato
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 0px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 80px
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: 44px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  price-band:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-lg}'
    height: 48px
  trial-block:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    height: 300px
  product-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 420px
  badge-new:
    backgroundColor: '{colors.text}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 36px
  faq-accordion:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 44px
  newsletter-band:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 90px
---

# DESIGN.md — 白地×ビタミンオレンジの皮膚科学スキンケアLP（Clean White Vitamin-Orange Skincare LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: シンプル・ミニマル、上品・高級、清潔・爽やか、信頼・誠実
- **キーワード**: 白余白・ビタミンオレンジ・金の粒子・中央揃え・皮膚科学・赤CTA
- **地の質感**: 白地は均一なフラット。光沢のある製品写真と、はじける金の粒子の写真で質感を出す
- **形**: 写真は角丸なしの矩形。ボタンは細い枠線か赤い塗りのピル型
- **温度感**: 白地はクールでも、オレンジと金の写真が温かみを足す中間の温度感

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#FFFFFF` | ページの基本の地 | 58% | 画素の実測 |
| `primary` | `#E8761E` | 製品を象徴するビタミンオレンジ | 4% | 推定 |
| `cta` | `#D20C15` | カート追加ボタンと価格帯 | 3% | 画素の実測 |
| `on-cta` | `#FFFFFF` | 赤ボタン上の文字 | 0% | 画素の主要色に補正 |
| `text` | `#2A2927` | 見出しの文字 | 2% | 画素の実測 |
| `text-body` | `#555555` | 本文の文字 | 2% | 推定 |
| `text-muted` | `#999999` | 注釈の小さい文字 | 0% | 推定 |
| `line` | `#DCD8D9` | Q&Aの区切り線とボタンの枠 | 1% | 画素の主要色に補正 |
| `background-alt` | `#F2F3FD` | 写真の背景の薄いグレー | 5% | 画素の実測 |
| `accent-1` | `#CC9F77` | 金色の製品やシャンパンゴールド | 4% | 画素の主要色に補正 |
| `tint-1` | `#FFFEFC` | 肌の断面図に使う淡いベージュ | 3% | 画素の実測 |
| `secondary` | `#C9102F` | ブランドの赤いバナーと帯 | 3% | 画素の実測 |
| `dark-section` | `#2A2623` | フッターの暗い地 | 4% | 画素の実測 |
| `on-dark` | `#FFFFFF` | フッターの文字 | 0% | 画素の主要色に補正 |

- 地は白にし、色は製品写真のオレンジと金にまかせる
- 赤は購入ボタン・価格帯・ニュースレター帯だけに限る
- 文字色は見出しを黒に近い色、本文を中くらいのグレー、注釈を薄いグレーの3段階に分ける
- サブボタンは白地に灰色の細い枠と黒い文字
- フッターは暗い地に白い文字。最下部は赤い帯で締める

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 動画の上に重ねる製品名 | 明朝 | Noto Serif JP | 500 | 28px | 1.3 | 0.02em |
| `headline-lg` | セクションの中央見出し | ゴシック | Noto Sans JP | 500 | 22px | 1.5 | 0.04em |
| `headline-md` | キット名や商品群の見出し | ゴシック | Noto Sans JP | 500 | 17px | 1.5 | 0.03em |
| `headline-sm` | 商品カードの名前やQ&Aの質問 | ゴシック | Noto Sans JP | 500 | 14px | 1.5 | 0.02em |
| `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.04em |
| `note` | 成分の注釈や配合目的 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em |
| `accent` | 欧文のキャッチやQ&Aなどの小見出し | 欧文サンセリフ | Lato | 500 | 16px | 1.4 | 0.02em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.2 | 0.04em |

- 見出しは2〜3行に改行し、中央揃えにする
- 見出しは太くしすぎず、500程度の中くらいの太さにする
- 本文は行間を広めにとり、グレーで控えめに見せる
- 成分の注釈は、本文のすぐ下に小さい文字で必ず添える
- 製品名の大きな表示だけ明朝体を使い、高級感を出す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。商品紹介は横スクロールか縦積み。PC は中央寄せの 1 カラムで、画像と文字の 2 分割や 3 列カードを使う
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションの間は大きな余白で区切り、背景色は切り替えない
- 文字のブロックは中央揃えで、幅を狭めにとる
- 写真は本文と同じ幅いっぱいに大きく配置する
- トライアルの購入ブロックは、ページの途中と後半の2回入れる

## Elevation & Depth

- 影はほぼ使わず、フラットに仕上げる
- 立体感は製品写真に写る影や反射だけで出す
- ボタンにも影を付けない

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。
- **写真の切り抜き**: 角丸なしの矩形。製品の切り抜き写真は、白か薄いグレーの背景に置く
- **セクション境界**: 線や形は使わず、余白だけで区切る
- ボタンはすべてピル型にする
- NEWバッジは黒い円形にする
- 写真やカードは直角のままにする

## Components

- **カート追加ボタン**（`button-primary`）: 赤い塗りのピル型で、白文字の購入ボタン
- **詳細を見るボタン**（`button-outline`）: 白地に灰色の細い枠を付けたピル型のサブボタン
- **割引の価格帯**（`price-band`）: 商品写真の下端に重ねる赤い帯。割引率と価格を白い大きな文字で載せる
- **トライアル購入ブロック**（`trial-block`）: 左に商品写真、右にキット名・内容リスト・赤ボタンを置く
- **商品カード**（`product-card`）: 薄いグレー地の製品写真の下に、商品名・短い説明・注釈・枠線ボタンを縦に並べる
- **NEWバッジ**（`badge-new`）: 写真の右上に置く、黒い小さな円に白文字のバッジ
- **Q&Aアコーディオン**（`faq-accordion`）: 質問の行を細い線で区切り、右端に＋を置く
- **メルマガ登録帯**（`newsletter-band`）: 赤い帯に、白い入力欄と登録ボタンを並べる

## Do's and Don'ts

**Do**
- 白い余白をたっぷりとり、写真を主役にする
- 見出しは短く改行し、中央揃えにする
- 成分の説明には必ず小さい注釈を添える
- 赤は購入に関わる要素だけに使う
- トライアルの購入導線は、ページの途中で繰り返す

**Don't**
- セクションごとに背景色を塗り分けない
- グラデーションや影の強いボタンを使わない
- 見出しを極太にしたり、装飾の多い書体を使ったりしない
- オレンジを文字色やボタン色に使わない
- 要素を詰め込み、余白を削らない

## Page Structure

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

1. **ファーストビュー**（製品の世界観を一瞬で伝える）: 全幅の動画か写真に、製品ボトルと金の粒子を写す。下部に明朝体の製品名を白文字で重ねる
2. **トライアルオファー**（最初の購入を促す）: 左に商品写真と赤い価格帯、右にキット名・内容・赤ボタンを置く
3. **ベネフィット提示**（使ってどうなれるかを伝える）: 中央揃えの3行見出しと短い本文。下に注釈を添える
4. **ビジュアル**（成分のイメージを見せる）: 本文幅いっぱいの写真。製品のまわりに金の粒子が舞う
5. **技術の説明**（独自技術で裏付ける）: 中央の見出しと本文の下に、成分のイラストと肌の断面図を2枚並べる
6. **トライアルオファー（再掲）**（読み進めた人を購入へ導く）: 最初のオファーと同じ形に、短い本文と価格を足す
7. **シリーズ商品の紹介**（ほかの商品へ広げる）: 製品写真を3列のカードで並べ、それぞれに枠線ボタンを付ける
8. **使用感の説明**（テクスチャの心地よさを伝える）: 中央の見出しと、手のひらに液を出す全幅の写真
9. **ブランドメッセージ**（憧れと共感を生む）: 白背景で撮った女性モデルの写真と、中央揃えの見出し
10. **デザインの刷新**（新しいデザインを訴える）: 左にNEWバッジ付きの製品群の写真、右に見出しと枠線ボタン
11. **よくある質問**（不安を解消する）: 欧文の小見出しの下に、線で区切ったアコーディオンを並べる
12. **ブランドバナー**（ブランドの印象を締めくくる）: 赤い背景にモデルと白い明朝体のコピー。下に欧文のキャッチとボタン
13. **キャンペーン**（回遊させる）: 正方形のバナーを3列に並べ、一覧を見るボタンを置く
14. **フッター**（メルマガ登録とサイト内のリンク）: 赤いメルマガ帯、暗い地のSNSアイコンとリンク、最下部の赤い帯

## Imagery

- 製品は白か淡いグレーの背景で撮り、光沢と柔らかい影を見せる
- 金色の液体の粒がはじけるCGで、ビタミンらしさを出す
- 女性モデルは白い服で、ナチュラルなメイクと明るいライティング
- 手元の写真は白背景で、液体が落ちる瞬間をとらえる
- 成分の説明は、光沢のあるオレンジの球体と線画の肌の断面図で描く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPは1カラムにし、トライアルブロックは写真の下に文字を置く
- 商品カード3列は、SPでは縦積みか横スクロールにする
- キャンペーンのバナーは、SPでは1〜2列にする
- PCは本文幅を約75%に抑え、左右に白い余白を残す
- SPの見出しは22px前後で、2〜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-e6d2a904`（元 LP の URL から採番）
- **元 LP**: https://www.ci-labo.com/feature/vc100lotion.html
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中
- **生成**: 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.ci-labo.com/feature/vc100lotion.html（公開状況により表示できない場合があります）
この 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