--- version: alpha name: Fresh Green Bio-Science Skincare LP description: 明るい黄緑のグラデーション背景に、ジェル状のカプセルや分子模型を浮かべたバイオサイエンス系のシートマスクLP。白い円形カードに緑ゴシックの見出しと黄色マーカーを重ね、欧文スクリプトで章タイトルを添えている。清潔感と先進性を両立させ、注釈も多めの訴求型。 colors: primary: '#0E9C0A' secondary: '#43C46B' cta: '#0BAB00' on-cta: '#FFFFFF' background: '#98E28A' background-alt: '#F6FBFE' surface: '#FFFFFF' tint-1: '#F0FBED' tint-2: '#C0E5BC' marker: '#F3FE6C' text-body: '#4C4B4A' accent-1: '#E8507A' line: '#444444' text-muted: '#666666' cta-accessible: '#098A00' primary-accessible: '#0C8208' typography: display: fontFamily: Montserrat fontSize: 34px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.12em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Lato fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 46px tag-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px heading-ruled: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 140px circle-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 420px marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 44px badge-circle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 130px band-heading: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 60px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 470px purchase-card: backgroundColor: '{colors.surface}' rounded: '{rounded.lg}' height: 260px accordion: typography: '{typography.body-md}' height: 44px --- # DESIGN.md — 黄緑グラデと透明カプセルのスキンケアLP（Fresh Green Bio-Science Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、クール・先進的、ナチュラル、情報量多め・訴求型 - **キーワード**: 黄緑グラデーション・透明ジェルカプセル・分子模型・円形カード・黄色マーカー・スクリプト欧文 - **地の質感**: みずみずしい透明感。ガラスやジェルの光沢、ボケた泡、淡い水色のシルク状の波を背景に使う - **形**: 大きな正円の白カード、縦長の角丸窓、細い線で囲んだ見出しボックス、ピル型のタグ - **温度感**: やや涼しげ。黄緑と水色寄りの白で、フレッシュな印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0E9C0A` | 見出し文字とブランドの緑 | 4% | 画素の実測 | | `secondary` | `#43C46B` | 成分紹介パネルの中緑 | 6% | 画素の実測 | | `cta` | `#0BAB00` | 購入ボタン・ピル型タグの濃い緑 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#98E28A` | 上部と購入エリアの黄緑グラデ地 | 25% | 画素の主要色に補正 | | `background-alt` | `#F6FBFE` | 中盤の淡い水色系の地 | 20% | 画素の実測 | | `surface` | `#FFFFFF` | 円形カード・商品カードの白 | 17% | 画素の実測 | | `tint-1` | `#F0FBED` | 使い方セクションの薄緑地 | 9% | 画素の実測 | | `tint-2` | `#C0E5BC` | 通常購入見出しの淡緑帯 | 1% | 画素の実測 | | `marker` | `#F3FE6C` | 見出しを強調する黄色マーカー | 2% | 画素の実測 | | `text-body` | `#4C4B4A` | 本文の濃いグレー | 3% | 画素の実測 | | `accent-1` | `#E8507A` | 数字・スクリプト装飾のピンク | 0% | 推定 | | `line` | `#444444` | 見出しの上下罫線とアコーディオン線 | 0% | 推定 | | `text-muted` | `#666666` | 注釈の灰色小文字 | 1% | 推定 | | `cta-accessible` | `#098A00` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#0C8208` | AA を満たす補正値（計算） | | 計算 | - 地は黄緑グラデと淡い水色白を交互に使い、セクションの区切りを色の移り変わりで見せる - 見出しはブランドの緑文字にし、キーワードの行だけ黄色マーカーを敷く - 白は円形カード・商品カードの面に使い、緑の地から浮かせる - ピンクは数字やスクリプト装飾など1画面に1か所までのアクセントに絞る - 購入ボタンは濃い緑のベタ塗りに白文字。ほかのボタンと色を変えない - 本文は濃いグレー、注釈は薄いグレーの小さい文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#0BAB00` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#098A00`、4.52:1）を使う。 - `tag-pill` は文字 `#FFFFFF` × 背景 `#0BAB00` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#098A00`、4.52:1）を使う。 - `marker-highlight` は文字 `#0E9C0A` × 背景 `#F3FE6C` のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0C8208`、4.56:1）を使う。 - `badge-circle` は文字 `#FFFFFF` × 背景 `#0BAB00` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#098A00`、4.52:1）を使う。 - `band-heading` は文字 `#FFFFFF` × 背景 `#0BAB00` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#098A00`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名・大きな欧文ロゴ | 欧文サンセリフ | Montserrat | 600 | 34px | 1.2 | 0.12em | | `headline-lg` | セクションの大見出し（緑） | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.4 | 0.08em | | `headline-md` | 小見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.08em | | `headline-sm` | カード名・英字ラベル | 欧文サンセリフ | Lato | 700 | 18px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2.0 | 0.1em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `accent` | 章タイトルの欧文スクリプト | 欧文スクリプト | Great Vibes | 400 | 40px | 1.2 | 0.0em | | `label-button` | ボタン・タグ文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.08em | - 見出しは字間を広め（0.08em前後）にした太ゴシックで中央揃え - 章の頭に細い欧文スクリプトを置き、その下に和文見出しを重ねる - 見出しでは英字と和文を縦線で区切って並べ、上下を罫線ではさむ - 本文は行間2.0で、ゆったり読ませる - ※の注釈番号は見出し内でも上付きの小文字で入れる - 背景には大きな欧文を薄い透かし文字として配置する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。使い方の手順だけ 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 円形カードは画面幅を少しはみ出すほど大きく取り、中に見出しと本文を収める - 成分カードは横スクロールのカルーセルにし、次のカードの端を見せる - セクション見出しは上下罫線ではさんだ中央揃えのブロックにする - 注釈は各セクションの最後にまとめて小さく置く - 購入エリアは白カードを縦に積む ## Elevation & Depth - カードは影をほぼ付けず、背景との色差で浮かせる - カプセルや泡の装飾には光沢とぼかしで奥行きを出す - 帯見出しには白い細線の二重枠を付けて立体感を出す - 使い方ボックスは枠線をずらして重ね、紙を重ねたように見せる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 成分写真は正円や縦長の角丸窓で切り抜く。カード写真は上部いっぱいの四角 - **セクション境界**: 直線では区切らず、グラデーションと透明な波の写真でなめらかにつなぐ - 購入ボタンは角丸がほぼない長方形 - タグや構造図のラベルはピル型 - 特徴のバッジは正円の緑ベタまたは半透明の白円 - 見出しの帯は四角い緑ベタに白い細線の内枠 ## Components - **購入ボタン**（`button-primary`）: 濃い緑のベタ塗り長方形に白い太字。カード幅いっぱいに置く - **効果タグ**（`tag-pill`）: 緑ベタのピル型に白文字。2つ横に並べる - **罫線見出し**（`heading-ruled`）: 上下を罫線ではさみ、欧文と縦線で区切った英字を並べ、その下に緑の和文見出しを置く - **円形アプローチカード**（`circle-card`）: 大きな白い正円に、スクリプト見出し・緑見出し・マーカー行・本文を入れる。外周を緑のジェル写真で縁取る - **黄色マーカー**（`marker-highlight`）: 見出しの2行目に黄色の帯を敷いて強調する - **円形バッジ**（`badge-circle`）: 緑ベタの正円に白い細線の内枠。短い実績を4行で入れる - **帯見出し**（`band-heading`）: 緑の四角い帯に白い二重線の枠を付け、白文字で書く - **成分カルーセルカード**（`ingredient-card`）: 上半分に写真と大きな白い欧文ラベル、下半分は白地に緑の見出しと本文。下にドットのページャーを置く - **購入カード**（`purchase-card`）: 白い角丸カード。上部に緑の見出し帯、中央に商品画像と価格、下部に購入ボタンを置く - **情報アコーディオン**（`accordion`）: 上下の罫線で区切った中央揃えの行。右端に＋アイコン ## Do's and Don'ts **Do** - 緑は黄緑から中緑の範囲で統一し、透明感のあるグラデにする - 強調語にはマーカーか※付きの上付き注釈を併用する - 装飾として透明ジェルカプセルや泡を画面の端に散らす - 章ごとに欧文スクリプトと罫線見出しを繰り返し、リズムを作る - 本文は短い行で中央か左揃えにし、行間は広く取る **Don't** - 濃い影や太い枠線を使わない - 赤や黒の大きな面を入れない - ピンクをボタンや大見出しに使わない - セクション境界を硬い直線の色帯で区切らない - 注釈を省いて効果を断定する見せ方をしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と主な効能を一目で伝える）: 黄緑グラデにパッケージ写真を大きく置く。上部に緑の見出しを白帯で、右に回転文字の円形バッジ、下に欧文の商品名とスクリプトを置く 2. **成分配合の訴求帯**（主成分の配合を強調する）: 半透明の緑ボックスに白文字の2段組み。下に注釈を入れる 3. **悩みの提起・コンセプト**（対象の悩みと解決の方向を示す）: ピル型タグ2つ、大きな緑見出し、中央揃えの緑の本文。成分名は明朝の大きな引用符で囲む 4. **特長（3つのアプローチ）**（効果の根拠を3点で説明する）: 分子模型の装飾の後に罫線見出しを置き、白い円形カードを3つ縦に並べる。各カードにマーカー見出しと円形バッジを入れる 5. **成分フォーカス**（主成分を詳しく解説する）: 背景に薄い大きな欧文。中緑の縦長パネルに白い細枠、縦長の角丸窓でボケ写真を見せ、下に白い本文を置く 6. **配合成分の紹介**（4種の成分を悩み別に紹介する）: 緑の帯見出しの下に、写真付きカードの横スクロールを2組置く 7. **シートの特長**（使い心地と構造を伝える）: とろけるマスクの写真を左に、縦長の本文を右に置く。下に3層構造の図とピル型のラベルを入れる 8. **低刺激の訴求**（安心して毎日使えることを示す）: 緑のボケ写真の背景に、ピンクの大きな数字とスクリプト、半透明の白円で4項目を2列に並べる 9. **使い方**（手順を4ステップで示す）: 薄緑の地。重ねた枠のタイトルボックスの下に、線画イラストと緑の大きな番号を2×2で並べ、最後に白いTipsボックスを置く 10. **購入CTA**（定期購入と通常購入へ誘導する）: FVと同じ黄緑グラデにパッケージを置き、白い角丸の購入カードを2つ縦に積む。割引はバッジで示す 11. **商品情報**（成分や注意事項を補足する）: 罫線区切りのアコーディオンを2行置く ## Imagery - 透明な緑のジェルカプセルを光沢とぼかしで描き、画面の四隅に浮かせる - 青みがかったガラス玉の分子模型を斜め上から写す - 成分写真は緑・ピンク・紫・水色の泡のマクロ撮影で、カードごとに色を変える - 背景には淡い水色白のシルクや水の波紋をぼかして敷く - 使い方は黒の太い線画に、マスク部分だけピンクの線を入れたシンプルなイラスト - 商品写真は白背景に切り抜いて浮かせ、周りに水滴を散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約900px幅の列を取り、背景のグラデと装飾を全幅に広げる - PCのFVは商品写真を左、縦書きのキャッチを右に置く - PCでは3つの円形カードを三角形の配置（上に2つ、下に1つ）にする - PCでは成分カードを2×2のグリッドにし、カルーセルにはしない - PCの低刺激4項目と使い方4ステップは横一列に並べる - PCの購入エリアは左に商品写真、右に購入カードの2カラムにする ## 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-d86984f9`（元 LP の URL から採番） - **元 LP**: https://lululun.com/shop/products/LUAA391113 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。