--- version: alpha name: Fresh Green Bio-Science Skincare LP description: 若葉色のグラデーションと水滴・ジェルの3D素材で、みずみずしさと生命科学っぽさを両立させたフェイスマスクの LP。円形の白い窓、黄緑のマーカー、細い罫線で挟んだ英字ラベルで成分の訴求を整理し、最後は購入情報のカードで締める。 colors: primary: '#169A15' secondary: '#43C36B' cta: '#0BAB02' on-cta: '#FFFFFF' background: '#EAF4FA' background-alt: '#F0FBED' tint-1: '#9EE58F' tint-2: '#D8EDD4' marker: '#F3FE6C' surface: '#FEFEFE' text-body: '#333333' accent-1: '#E8668A' line: '#555555' primary-accessible: '#128112' cta-accessible: '#098A02' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em accent: fontFamily: Great Vibes fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-sm: fontFamily: Lato fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 2px md: 8px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' circle-approach: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 400px marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px ruled-label: typography: '{typography.headline-sm}' height: 50px band-heading: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 46px badge-round: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 130px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 360px pill-layer: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px step-number: textColor: '{colors.primary}' typography: '{typography.display}' height: 50px purchase-card: backgroundColor: '{colors.surface}' rounded: '{rounded.md}' height: 260px --- # 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` | `#169A15` | 見出し文字・ブランドグリーン | 4% | 画素の実測 | | `secondary` | `#43C36B` | 成分紹介パネルの中間グリーン面 | 6% | 画素の実測 | | `cta` | `#0BAB02` | 濃緑の帯見出し・強調ピル・バッジ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 濃緑面の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#EAF4FA` | 淡い水色がかった白の地 | 25% | 画素の実測 | | `background-alt` | `#F0FBED` | 使い方セクションの淡緑地 | 10% | 画素の実測 | | `tint-1` | `#9EE58F` | ヒーロー周辺の明るい若葉グラデ地 | 15% | 画素の主要色に補正 | | `tint-2` | `#D8EDD4` | 円形アイコン・ハイライト箱の淡緑 | 5% | 画素の主要色に補正 | | `marker` | `#F3FE6C` | 見出しの黄緑マーカー | 1% | 画素の実測 | | `surface` | `#FEFEFE` | 円窓・カードの白面 | 15% | 画素の実測 | | `text-body` | `#333333` | 本文のダークグレー | 3% | 推定 | | `accent-1` | `#E8668A` | 日付・イラストのローズピンク | 1% | 推定 | | `line` | `#555555` | 見出しを挟む細い罫線 | 0% | 推定 | | `primary-accessible` | `#128112` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#098A02` | AA を満たす補正値（計算） | | 計算 | - 地は淡い水色がかった白と、若葉色のグラデーションを交互に置く - 見出しは緑の文字にする。キーワードだけ黄緑のマーカーを敷く - 濃緑の面は帯見出し・バッジ・強調ピルに限って使う - ピンクはイラストの線、日付、筆記体の数字など、ごく一部のアクセントにだけ使う - 本文はダークグレーにし、黒ベタは避ける - 白の円窓とカードは、写真やグラデの上に置いて読みやすさを確保する - `marker-heading` は文字 `#169A15` × 背景 `#F3FE6C` のコントラスト比が 3.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#128112`、4.6:1）を使う。 - `band-heading` は文字 `#FFFFFF` × 背景 `#0BAB02` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#098A02`、4.52:1）を使う。 - `badge-round` は文字 `#FFFFFF` × 背景 `#0BAB02` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#098A02`、4.52:1）を使う。 - `pill-layer` は文字 `#169A15` × 背景 `#FEFEFE` のコントラスト比が 3.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#128112`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.5 | 0.1em | | `headline-lg` | アプローチ見出し（マーカー付き） | ゴシック | Noto Sans JP | 700 | 28px | 1.4 | 0.08em | | `headline-md` | セクションのリード見出し | ゴシック | Noto Sans JP | 500 | 22px | 1.6 | 0.1em | | `accent` | 筆記体の英字飾り | 欧文スクリプト | Great Vibes | 400 | 44px | 1.1 | 0.0em | | `headline-sm` | 罫線で挟む英字ラベル・ワイド英字 | 欧文サンセリフ | Lato | 700 | 20px | 1.3 | 0.05em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 15px | 2.0 | 0.08em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | 帯見出し・ピルラベル | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.08em | - 和文見出しは字間を広め（0.08〜0.1em）にして中央に揃える - 見出しの上に筆記体の英字を重ね、柔らかさを出す - ブランド名を英字で置くときは、字間0.3em以上のワイドなサンセリフにする - 本文は行間2.0でゆったり組む - ※の注釈番号は上付きの小さな文字にし、注釈はセクション末にまとめる - 背景には大きな欧文セリフの英字を薄く敷いて透かす - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。使い方だけ 2 列グリッド、成分カードは横スライダー - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しも本文も中央揃えを基本にする - 円窓は画面幅いっぱい近くまで広げ、隣と少し重ねて縦に並べる - 英字ラベルは上下の細い罫線で挟み、縦線で 2 つに区切る - 成分カードは次のカードを少しはみ出させ、横にスクロールできることを示す - 注釈はセクション末に小さな文字で置く ## Elevation & Depth - 影はほぼ使わない。白い面とグラデ地のコントラストで奥行きを出す - ジェル粒と水滴の3D素材をセクションの境界にまたがせて、浮いて見せる - 外枠を二重の細線にし、紙を重ねたような段差をつける ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 正円、縦長のカプセル窓、四角いカード上部の写真 - **セクション境界**: ガラスの波のような曲線、または円が重なる境界 - 主役の面は正円にする - ラベルは枠線または塗りのピル型 - 帯見出しは角の小さい矩形に、白い内枠線を入れる - カードは角丸を小さく抑える ## Components - **円形アプローチ窓**（`circle-approach`）: 白い大きな正円の中に、筆記体の番号・見出し・本文を収める。外周にはジェル素材の写真リングを付ける - **マーカー見出し**（`marker-heading`）: 緑の太字の下半分に黄緑のマーカーを敷く - **罫線ラベル**（`ruled-label`）: 上下の細い罫線で挟み、縦線で左右に分ける英字ラベル。直下に緑の見出しを置く - **濃緑帯見出し**（`band-heading`）: 濃緑の矩形に白い内枠線を入れ、白文字を載せる - **丸バッジ**（`badge-round`）: 濃緑の正円に白文字で試験済みなどの情報を載せる。円窓の端に重ねて置く - **成分スライドカード**（`ingredient-card`）: 上半分に写真を置き、その下端に大きな白い英字を重ねる。写真の下は白地で、緑の見出しと本文。下にドットのページャーを付ける - **構造ピル**（`pill-layer`）: 緑の枠線のピルと、緑で塗ったピルを並べ、図解へ引き出し線でつなぐ - **ステップ番号**（`step-number`）: 緑の大きな数字の左右に細い横線を引き、上に線画のイラストを置く - **販売情報カード**（`purchase-card`）: 濃緑のヘッダー帯の下に白い本体を置き、商品の小画像・価格・ピンクの日付を載せる ## Do's and Don'ts **Do** - ジェル粒・水滴・分子モデルの素材を、余白のあちこちに散らす - 白の円窓とグラデ地のコントラストで、情報のまとまりを見せる - セクションの頭には、筆記体の英字か罫線ラベルを必ず付ける - 成分名などのキーワードは黄緑のマーカーで強調する - 地は淡く明るく保ち、透明感を守る **Don't** - 黒や濃い色のベタ地のセクションを入れない - 赤やオレンジの強い CTA 色を使わない - 影の濃いカードや立体ボタンを使わない - ピンクを面積の大きい場所に使わない - 本文を左右いっぱいに詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と効果の方向性を一目で伝える）: 若葉グラデの地の中央に商品パッケージを置き、上に縦書き風の大見出し、右上に回転テキスト付きの丸バッジ、下に配合成分の緑グラデの帯を配置する 2. **悩みの提起・コンセプト**（対象の悩みと解決の方向を示す）: 緑の中央揃えの見出しの後にグレーの本文を続け、最後にセリフ体の大きな成分名で締める 3. **ポイント導入**（3つのアプローチを予告する）: 分子モデルの画像の下に筆記体の英字を置き、罫線ラベルと緑の見出しを続ける 4. **特長（3アプローチ）**（成分ごとの訴求）: 白い大円窓を縦に3つ並べ、筆記体の番号、マーカー見出し、本文、丸バッジを入れる 5. **成分詳細**（主成分の解説）: 薄い大きな英字の上に緑の縦長パネルを置き、中にカプセル形の写真窓と白い本文を収める 6. **成分ラインナップ**（4成分を悩み別に紹介する）: 濃緑の帯見出しごとに写真カードの横スライダーを置く 7. **シートの特長**（使用感と構造を伝える）: とろけるマスクの写真の横に筆記体の英字と本文を置き、下にピル型ラベルと円形の断面図で構造を図解する 8. **低刺激処方**（安心感を伝える）: 緑のボケ写真を全面に敷き、ピンクの大きな数字と淡緑の円を2×2で並べる 9. **使い方**（手順を4ステップで説明する）: 淡緑の地に二重枠のタイトル箱を置く。線画イラストと番号を2列グリッドで並べ、最後に白い補足ボックスを付ける 10. **購入情報**（価格と販売開始の告知）: ファーストビューと同じ地に、ワイド英字のロゴ、商品画像、濃緑ヘッダーの販売カードを置く ## Imagery - 光沢のある半透明の緑のジェル粒（豆のような形）を、余白に浮かせる - 青みがかったガラス玉の分子モデルで、科学感を出す - 緑のボケ玉やバブルのマクロ写真を、窓の中や背景に使う - 成分写真は、緑・ピンク・紫の泡のマクロで色分けする - 使い方の手順は、黒の太線とピンクのマスクで描いた線画イラストにする - 白い液体が垂れるシートで、とろみを表現する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は幅およそ 960px の中央寄せで、背景のグラデと素材は全幅に広げる - PC のファーストビューは、商品を中央に置き、見出しを左右に振り分ける - PC の円窓は3つを三角形に並べ、サイズを小さくする - PC の成分パネルは、写真窓と本文を横に並べる - PC の成分カードと使い方は 2〜4 列のグリッドにし、スライダーは使わない - PC の購入情報は、商品画像と販売カードを左右に並べる ## 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-7f9042f4`（元 LP の URL から採番） - **元 LP**: https://lululun.com/shop/products/LUAB391111 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。