金色の油滴とオリーブ色の上品スキンケアLP

Golden Oil Droplet Skincare LP

金色に光る油滴の写真を背景にした、クレンジングオイルのLPです。前半はベージュから金のグラデーション、後半はくすんだオリーブグリーンの地で組みます。オリーブ色の帯ラベル、×でつないだ成分カード、番号付きの体験ストーリーで技術の説得力を出し、上品で信頼感のある見た目に仕上げます。

化粧品・スキンケア上品・高級信頼・誠実清潔・爽やか情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

前半は白〜金ベージュのグラデーションと油滴の写真で光の印象を作る
後半のSPEC以降はオリーブ〜くすみグリーンの地に切り替える
成分ラベルはオリーブのグラデーション帯に白文字で載せる
技術の要点だけを金色の円と濃い茶の面で強調する
こだわりの章はグレージュのカードとブラウンの帯でまとめる
原色や高彩度の赤・青は使わない。金・茶・緑の範囲に収める

TYPOGRAPHY

書体

display章タイトルゴシック／ Zen Kaku Gothic New 400 ／ 32px ／行間 1.4

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

headline-lg訴求見出し（明朝で格調を出す）明朝／ Shippori Mincho 600 ／ 24px ／行間 1.5

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

headline-mdセクションの中見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.5

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

headline-sm帯ラベル・カード見出しゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.5

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

body-md本文ゴシック／ Noto Sans JP 400 ／ 14px ／行間 1.8

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

note注釈（※印）ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.5

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

accent大きな細字の番号・英字見出し欧文サンセリフ／ Montserrat 300 ／ 64px ／行間 1.0

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

label-buttonボタンの文字ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.4

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

見出しは中央揃えにし、2〜3行で区切る
核心の数値や技術名は明朝体で大きく組む
番号は細い欧文で大きく置き、見出しに半分重ねる
SPEC・REVIEWなどの英字見出しは字間を広げた太字にする
注釈の※番号は肩付きの小さな文字にし、ブロックの直下にまとめる
強調語は金茶色やマーカーの下線で示す

PAGE STRUCTURE

セクション構成

ファーストビュー新商品の世界観を伝える左に女性の横顔、右に金色の油滴を背景にした商品ボトル。縦書き風の短いコピーを添える
ページ内ナビ3つの章へ誘導する白地に縦線で区切った3つのリンクを置き、▼を添える
セット訴求お得なセットへの導線日付の丸バッジ、オリーブの帯、商品写真、アウトラインのボタン
共同開発と悩み信頼性と悩みへの対応を示すクリーム色のカードに帯見出しと濃い四角の悩みタグを3つ並べ、テクスチャ写真を置く
新基準の宣言技術の価値を打ち出す濃い茶の面に白文字を大きく置き、ボトルの周りに効果ワードを放射状に配置する
技術の解説超微粒子の仕組みを説明するグレーのグラデーションの面に明朝の大見出し、動画、金色の円の環状図
3つの瞬間使用中の体験を順に見せる大きな細字の番号とカード、帯ラベルの×図、使用前後の比較写真
こだわり開発背景と成分を紹介するグレージュのカードにブラウン帯、研究員の写真、円形の植物イラストの成分図
SPEC商品仕様と発売日を示すオリーブの地に白カード、ボトル写真、発売日のラベル
処方・便利ポイント安心感と使いやすさを伝える3列の細枠タイルと、円弧の線で囲んだOKの項目
お客様の声使用感を伝える線画の人物と白い吹き出し
使い方使用手順を示す動画と、顔の線画で描いた3ステップのカード
よくある質問不安を解消する白地に大きなQ&Aの見出しとアコーディオンの行

COMPONENTS

部品

アウトラインのピルボタン button-outline-pill白地に細い枠線、右端に三角のアイコンを置くセット訴求ボタン
トップへもどるボタン back-to-top左端に茶色の丸い矢印アイコンを置いた小型のピルボタン
オリーブの帯ラベル label-bandオリーブのグラデーションの四角に白文字を載せ、×で2つ並べる
枠線の説明ボックス outline-box帯ラベルの下に置く白地の枠線ボックス
大きな細字の番号 big-number01〜03を細い線の欧文で大きく置き、カードに重ねる
金色の円図 gold-circle金色の円に濃い文字を入れ、矢印で環状につなぐ
ブラウン帯の見出し brown-headingグレージュのカードの上部に置く濃茶の横帯見出し
口コミの吹き出し speech-bubble線画の人物に白い角丸の吹き出しを添える
Q&Aの行 faq-row左にQ、右に▼を置き、上下を細線で区切るアコーディオン
フリー処方のタイル free-tile細枠の正方形に斜線と項目名を入れ、3列に並べる

守ること

金の光沢とくすみグリーンの2つの世界観を、ページの前半と後半で分ける
技術の主張は図解と注釈をセットで示す
番号付きのストーリーで使用中の体験を順に見せる
余白をたっぷり取り、カードは中央にまとめる

DON'T

避けること

ビビッドな色や赤い値引きバッジを使わない
カードを大きな角丸にしない
太い影や立体的なボタンを使わない
注釈を省いて効果表現だけを置かない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 金色の油滴とオリーブ色の上品スキンケアLP（Golden Oil Droplet Skincare LP）

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

Overview

業種: 化粧品・スキンケア／ 雰囲気: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型
キーワード: 金色の油滴・オリーブグリーン・ベージュグラデーション・大きな細字の番号・成分の掛け合わせ図・研究開発の信頼感
地の質感: 光沢のある金色の油滴ボケ写真とやわらかいグラデーション。カードはマットな単色で塗る。
形: 四角のカードとラベルが基本。角丸はボタンだけにする。円形の図と吹き出しをアクセントにする。
温度感: 暖かい金・ベージュから、落ち着いたくすみグリーンへ移っていく中間〜やや暖色

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#666E56`	ブランドのオリーブ色（帯ラベル・SPEC地）	8%	画素の実測
`secondary`	`#DDBC15`	金色の円図・強調面	3%	画素の実測
`background`	`#FFFFFF`	基本の白地	20%	画素の実測
`background-alt`	`#FAF4E4`	クリーム色のカード地	9%	画素の実測
`surface`	`#ECE8E9`	こだわりセクションのグレージュのカード	7%	画素の実測
`dark-section`	`#443F35`	技術解説の濃い面	5%	画素の主要色に補正
`on-dark`	`#FCFCFA`	濃い地の上の白文字	1%	画素の実測
`tint-1`	`#BABDAC`	後半のくすみグリーン地	10%	画素の実測
`tint-2`	`#E5CC8D`	前半の金ベージュのグラデーション地	7%	画素の主要色に補正
`accent-1`	`#52443C`	こだわり見出しのブラウン帯	1%	画素の実測
`accent-2`	`#9B9152`	見出し・強調に使う金茶色の文字	1%	画素の実測
`cta`	`#7B6C43`	セット訴求のアウトラインボタンの丸アイコン	1%	画素の主要色に補正
`text`	`#443F35`	見出し・本文の濃い文字	3%	画素の主要色に補正
`line`	`#EBE8E8`	細い区切り線・カードの枠線	1%	画素の主要色に補正

前半は白〜金ベージュのグラデーションと油滴の写真で光の印象を作る
後半のSPEC以降はオリーブ〜くすみグリーンの地に切り替える
成分ラベルはオリーブのグラデーション帯に白文字で載せる
技術の要点だけを金色の円と濃い茶の面で強調する
こだわりの章はグレージュのカードとブラウンの帯でまとめる
原色や高彩度の赤・青は使わない。金・茶・緑の範囲に収める

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	章タイトル	ゴシック	Zen Kaku Gothic New	400	32px	1.4	0.05em
`headline-lg`	訴求見出し（明朝で格調を出す）	明朝	Shippori Mincho	600	24px	1.5	0.03em
`headline-md`	セクションの中見出し	ゴシック	Noto Sans JP	700	20px	1.5	0.03em
`headline-sm`	帯ラベル・カード見出し	ゴシック	Noto Sans JP	700	15px	1.5	0.05em
`body-md`	本文	ゴシック	Noto Sans JP	400	14px	1.8	0.03em
`note`	注釈（※印）	ゴシック	Noto Sans JP	400	10px	1.5	0.0em
`accent`	大きな細字の番号・英字見出し	欧文サンセリフ	Montserrat	300	64px	1.0	0.1em
`label-button`	ボタンの文字	ゴシック	Noto Sans JP	700	14px	1.4	0.05em

見出しは中央揃えにし、2〜3行で区切る
核心の数値や技術名は明朝体で大きく組む
番号は細い欧文で大きく置き、見出しに半分重ねる
SPEC・REVIEWなどの英字見出しは字間を広げた太字にする
注釈の※番号は肩付きの小さな文字にし、ブロックの直下にまとめる
強調語は金茶色やマーカーの下線で示す
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。成分カードは 2 列、フリー処方は 3 列
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
カードは中央に置き、背景の写真やグラデーションを左右に見せる
成分カードは2つを×でつなぐ掛け合わせ図にする
各章の最後に『トップにもどる』の小さなピル型ボタンを置く
注釈はカードの外の直下に小さく並べる

Elevation & Depth

影はほぼ使わず、色面の重なりで階層を出す
白い吹き出しだけに薄い影をつけてよい

Shapes

角丸: 小 0px ／中 4px ／大 24px。ボタンはピル型。
写真の切り抜き: 四角で切り抜く。拡大の比較だけ小さな円にする
セクション境界: 直線の切り替え（グラデーションか色面）
カードとラベルは角丸なしの四角にする
ボタンはピル型のアウトラインにする
技術の図は金色の円を環状につなぐ
便利ポイントは細い円弧の線で囲む

Components

アウトラインのピルボタン（button-outline-pill）: 白地に細い枠線、右端に三角のアイコンを置くセット訴求ボタン
トップへもどるボタン（back-to-top）: 左端に茶色の丸い矢印アイコンを置いた小型のピルボタン
オリーブの帯ラベル（label-band）: オリーブのグラデーションの四角に白文字を載せ、×で2つ並べる
枠線の説明ボックス（outline-box）: 帯ラベルの下に置く白地の枠線ボックス
大きな細字の番号（big-number）: 01〜03を細い線の欧文で大きく置き、カードに重ねる
金色の円図（gold-circle）: 金色の円に濃い文字を入れ、矢印で環状につなぐ
ブラウン帯の見出し（brown-heading）: グレージュのカードの上部に置く濃茶の横帯見出し
口コミの吹き出し（speech-bubble）: 線画の人物に白い角丸の吹き出しを添える
Q&Aの行（faq-row）: 左にQ、右に▼を置き、上下を細線で区切るアコーディオン
フリー処方のタイル（free-tile）: 細枠の正方形に斜線と項目名を入れ、3列に並べる

Do's and Don'ts

Do - 金の光沢とくすみグリーンの2つの世界観を、ページの前半と後半で分ける - 技術の主張は図解と注釈をセットで示す - 番号付きのストーリーで使用中の体験を順に見せる - 余白をたっぷり取り、カードは中央にまとめる

Don't - ビビッドな色や赤い値引きバッジを使わない - カードを大きな角丸にしない - 太い影や立体的なボタンを使わない - 注釈を省いて効果表現だけを置かない

Page Structure

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

ファーストビュー（新商品の世界観を伝える）: 左に女性の横顔、右に金色の油滴を背景にした商品ボトル。縦書き風の短いコピーを添える
ページ内ナビ（3つの章へ誘導する）: 白地に縦線で区切った3つのリンクを置き、▼を添える
セット訴求（お得なセットへの導線）: 日付の丸バッジ、オリーブの帯、商品写真、アウトラインのボタン
共同開発と悩み（信頼性と悩みへの対応を示す）: クリーム色のカードに帯見出しと濃い四角の悩みタグを3つ並べ、テクスチャ写真を置く
新基準の宣言（技術の価値を打ち出す）: 濃い茶の面に白文字を大きく置き、ボトルの周りに効果ワードを放射状に配置する
技術の解説（超微粒子の仕組みを説明する）: グレーのグラデーションの面に明朝の大見出し、動画、金色の円の環状図
3つの瞬間（使用中の体験を順に見せる）: 大きな細字の番号とカード、帯ラベルの×図、使用前後の比較写真
こだわり（開発背景と成分を紹介する）: グレージュのカードにブラウン帯、研究員の写真、円形の植物イラストの成分図
SPEC（商品仕様と発売日を示す）: オリーブの地に白カード、ボトル写真、発売日のラベル
処方・便利ポイント（安心感と使いやすさを伝える）: 3列の細枠タイルと、円弧の線で囲んだOKの項目
お客様の声（使用感を伝える）: 線画の人物と白い吹き出し
使い方（使用手順を示す）: 動画と、顔の線画で描いた3ステップのカード
よくある質問（不安を解消する）: 白地に大きなQ&Aの見出しとアコーディオンの行

Imagery

金色のオイル滴が浮かぶボケのあるマクロ写真を背景に使う
琥珀色のボトルを白〜グレーのグラデーション背景で撮る
目を閉じた女性の素肌をクローズアップし、明るく柔らかい光で撮る
成分は白い円の中に植物の水彩風イラストで描く
使い方と口コミは細い黒線のシンプルな顔の線画にする
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PCも中央に約430px幅のSP的なカラムを置き、左右は背景写真やグラデーションで埋める
SPでは同じ構成をそのまま全幅にし、カードの幅を88%にする
ファーストビューはSPで写真を縦長に組み直す
3列のタイルはSPでも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: Golden Oil Droplet Skincare LP
description: 金色に光る油滴の写真を背景にした、クレンジングオイルのLPです。前半はベージュから金のグラデーション、後半はくすんだオリーブグリーンの地で組みます。オリーブ色の帯ラベル、×でつないだ成分カード、番号付きの体験ストーリーで技術の説得力を出し、上品で信頼感のある見た目に仕上げます。
colors:
  primary: '#666E56'
  secondary: '#DDBC15'
  background: '#FFFFFF'
  background-alt: '#FAF4E4'
  surface: '#ECE8E9'
  dark-section: '#443F35'
  on-dark: '#FCFCFA'
  tint-1: '#BABDAC'
  tint-2: '#E5CC8D'
  accent-1: '#52443C'
  accent-2: '#9B9152'
  cta: '#7B6C43'
  text: '#443F35'
  line: '#EBE8E8'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.03em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0.1em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 4px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-outline-pill:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  back-to-top:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 28px
  label-band:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 56px
  outline-box:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 56px
  big-number:
    textColor: '{colors.line}'
    typography: '{typography.accent}'
    height: 80px
  gold-circle:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 80px
  brown-heading:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    height: 40px
  speech-bubble:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 100px
  faq-row:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 56px
  free-tile:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 72px
---

# DESIGN.md — 金色の油滴とオリーブ色の上品スキンケアLP（Golden Oil Droplet Skincare LP）

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

## Overview

- **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型
- **キーワード**: 金色の油滴・オリーブグリーン・ベージュグラデーション・大きな細字の番号・成分の掛け合わせ図・研究開発の信頼感
- **地の質感**: 光沢のある金色の油滴ボケ写真とやわらかいグラデーション。カードはマットな単色で塗る。
- **形**: 四角のカードとラベルが基本。角丸はボタンだけにする。円形の図と吹き出しをアクセントにする。
- **温度感**: 暖かい金・ベージュから、落ち着いたくすみグリーンへ移っていく中間〜やや暖色

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#666E56` | ブランドのオリーブ色（帯ラベル・SPEC地） | 8% | 画素の実測 |
| `secondary` | `#DDBC15` | 金色の円図・強調面 | 3% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 20% | 画素の実測 |
| `background-alt` | `#FAF4E4` | クリーム色のカード地 | 9% | 画素の実測 |
| `surface` | `#ECE8E9` | こだわりセクションのグレージュのカード | 7% | 画素の実測 |
| `dark-section` | `#443F35` | 技術解説の濃い面 | 5% | 画素の主要色に補正 |
| `on-dark` | `#FCFCFA` | 濃い地の上の白文字 | 1% | 画素の実測 |
| `tint-1` | `#BABDAC` | 後半のくすみグリーン地 | 10% | 画素の実測 |
| `tint-2` | `#E5CC8D` | 前半の金ベージュのグラデーション地 | 7% | 画素の主要色に補正 |
| `accent-1` | `#52443C` | こだわり見出しのブラウン帯 | 1% | 画素の実測 |
| `accent-2` | `#9B9152` | 見出し・強調に使う金茶色の文字 | 1% | 画素の実測 |
| `cta` | `#7B6C43` | セット訴求のアウトラインボタンの丸アイコン | 1% | 画素の主要色に補正 |
| `text` | `#443F35` | 見出し・本文の濃い文字 | 3% | 画素の主要色に補正 |
| `line` | `#EBE8E8` | 細い区切り線・カードの枠線 | 1% | 画素の主要色に補正 |

- 前半は白〜金ベージュのグラデーションと油滴の写真で光の印象を作る
- 後半のSPEC以降はオリーブ〜くすみグリーンの地に切り替える
- 成分ラベルはオリーブのグラデーション帯に白文字で載せる
- 技術の要点だけを金色の円と濃い茶の面で強調する
- こだわりの章はグレージュのカードとブラウンの帯でまとめる
- 原色や高彩度の赤・青は使わない。金・茶・緑の範囲に収める

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 章タイトル | ゴシック | Zen Kaku Gothic New | 400 | 32px | 1.4 | 0.05em |
| `headline-lg` | 訴求見出し（明朝で格調を出す） | 明朝 | Shippori Mincho | 600 | 24px | 1.5 | 0.03em |
| `headline-md` | セクションの中見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.03em |
| `headline-sm` | 帯ラベル・カード見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em |
| `note` | 注釈（※印） | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `accent` | 大きな細字の番号・英字見出し | 欧文サンセリフ | Montserrat | 300 | 64px | 1.0 | 0.1em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em |

- 見出しは中央揃えにし、2〜3行で区切る
- 核心の数値や技術名は明朝体で大きく組む
- 番号は細い欧文で大きく置き、見出しに半分重ねる
- SPEC・REVIEWなどの英字見出しは字間を広げた太字にする
- 注釈の※番号は肩付きの小さな文字にし、ブロックの直下にまとめる
- 強調語は金茶色やマーカーの下線で示す
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。成分カードは 2 列、フリー処方は 3 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
- カードは中央に置き、背景の写真やグラデーションを左右に見せる
- 成分カードは2つを×でつなぐ掛け合わせ図にする
- 各章の最後に『トップにもどる』の小さなピル型ボタンを置く
- 注釈はカードの外の直下に小さく並べる

## Elevation & Depth

- 影はほぼ使わず、色面の重なりで階層を出す
- 白い吹き出しだけに薄い影をつけてよい

## Shapes

- **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 四角で切り抜く。拡大の比較だけ小さな円にする
- **セクション境界**: 直線の切り替え（グラデーションか色面）
- カードとラベルは角丸なしの四角にする
- ボタンはピル型のアウトラインにする
- 技術の図は金色の円を環状につなぐ
- 便利ポイントは細い円弧の線で囲む

## Components

- **アウトラインのピルボタン**（`button-outline-pill`）: 白地に細い枠線、右端に三角のアイコンを置くセット訴求ボタン
- **トップへもどるボタン**（`back-to-top`）: 左端に茶色の丸い矢印アイコンを置いた小型のピルボタン
- **オリーブの帯ラベル**（`label-band`）: オリーブのグラデーションの四角に白文字を載せ、×で2つ並べる
- **枠線の説明ボックス**（`outline-box`）: 帯ラベルの下に置く白地の枠線ボックス
- **大きな細字の番号**（`big-number`）: 01〜03を細い線の欧文で大きく置き、カードに重ねる
- **金色の円図**（`gold-circle`）: 金色の円に濃い文字を入れ、矢印で環状につなぐ
- **ブラウン帯の見出し**（`brown-heading`）: グレージュのカードの上部に置く濃茶の横帯見出し
- **口コミの吹き出し**（`speech-bubble`）: 線画の人物に白い角丸の吹き出しを添える
- **Q&Aの行**（`faq-row`）: 左にQ、右に▼を置き、上下を細線で区切るアコーディオン
- **フリー処方のタイル**（`free-tile`）: 細枠の正方形に斜線と項目名を入れ、3列に並べる

## Do's and Don'ts

**Do**
- 金の光沢とくすみグリーンの2つの世界観を、ページの前半と後半で分ける
- 技術の主張は図解と注釈をセットで示す
- 番号付きのストーリーで使用中の体験を順に見せる
- 余白をたっぷり取り、カードは中央にまとめる

**Don't**
- ビビッドな色や赤い値引きバッジを使わない
- カードを大きな角丸にしない
- 太い影や立体的なボタンを使わない
- 注釈を省いて効果表現だけを置かない

## Page Structure

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

1. **ファーストビュー**（新商品の世界観を伝える）: 左に女性の横顔、右に金色の油滴を背景にした商品ボトル。縦書き風の短いコピーを添える
2. **ページ内ナビ**（3つの章へ誘導する）: 白地に縦線で区切った3つのリンクを置き、▼を添える
3. **セット訴求**（お得なセットへの導線）: 日付の丸バッジ、オリーブの帯、商品写真、アウトラインのボタン
4. **共同開発と悩み**（信頼性と悩みへの対応を示す）: クリーム色のカードに帯見出しと濃い四角の悩みタグを3つ並べ、テクスチャ写真を置く
5. **新基準の宣言**（技術の価値を打ち出す）: 濃い茶の面に白文字を大きく置き、ボトルの周りに効果ワードを放射状に配置する
6. **技術の解説**（超微粒子の仕組みを説明する）: グレーのグラデーションの面に明朝の大見出し、動画、金色の円の環状図
7. **3つの瞬間**（使用中の体験を順に見せる）: 大きな細字の番号とカード、帯ラベルの×図、使用前後の比較写真
8. **こだわり**（開発背景と成分を紹介する）: グレージュのカードにブラウン帯、研究員の写真、円形の植物イラストの成分図
9. **SPEC**（商品仕様と発売日を示す）: オリーブの地に白カード、ボトル写真、発売日のラベル
10. **処方・便利ポイント**（安心感と使いやすさを伝える）: 3列の細枠タイルと、円弧の線で囲んだOKの項目
11. **お客様の声**（使用感を伝える）: 線画の人物と白い吹き出し
12. **使い方**（使用手順を示す）: 動画と、顔の線画で描いた3ステップのカード
13. **よくある質問**（不安を解消する）: 白地に大きなQ&Aの見出しとアコーディオンの行

## Imagery

- 金色のオイル滴が浮かぶボケのあるマクロ写真を背景に使う
- 琥珀色のボトルを白〜グレーのグラデーション背景で撮る
- 目を閉じた女性の素肌をクローズアップし、明るく柔らかい光で撮る
- 成分は白い円の中に植物の水彩風イラストで描く
- 使い方と口コミは細い黒線のシンプルな顔の線画にする
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCも中央に約430px幅のSP的なカラムを置き、左右は背景写真やグラデーションで埋める
- SPでは同じ構成をそのまま全幅にし、カードの幅を88%にする
- ファーストビューはSPで写真を縦長に組み直す
- 3列のタイルはSPでも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-de301872`（元 LP の URL から採番）
- **元 LP**: https://www.orbis.co.jp/small/1201053/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 中（9/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.orbis.co.jp/small/1201053/（公開状況により表示できない場合があります）
この 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