--- version: alpha name: Gold Black Lemon Lavender Serum Mask LP description: 金色グラデと黒の高級感で始まり、2 種の商品をレモン黄と藤色のセクションで色分けして見せるシートマスク LP。明朝の見出しと細い欧文ラベルで上品にまとめ、後半は白地に線画アイコンでシンプルに締める。 colors: primary: '#C9A040' background: '#FFFFFF' dark-section: '#000000' on-dark: '#FFFFFF' accent-1: '#FBE601' accent-2: '#C3B7E9' secondary: '#9C8FD0' text: '#000000' text-body: '#3D342D' cta: '#C8C8C1' on-cta: '#FFFFFF' background-alt: '#FEFEFE' line: '#C8C8C1' text-muted: '#70706F' cta-accessible: '#77776A' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Josefin Sans fontSize: 15px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.25em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-buy: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 36px section-label: textColor: '{colors.text}' typography: '{typography.accent}' height: 24px ingredient-ribbon: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px concern-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 260px check-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 26px effect-headline: textColor: '{colors.text}' typography: '{typography.display}' height: 80px info-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 340px step-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 200px --- # DESIGN.md — 金×黒にレモン黄と藤色の美容液マスク LP（Gold Black Lemon Lavender Serum Mask LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、清潔・爽やか - **キーワード**: 金色グラデ・黒の没入感・商品色で色分け・明朝見出し・分子構造モチーフ・広い余白 - **地の質感**: 光の粒や分子ネットワークのボケ写真を背景にし、金の帯はメタリックなグラデ。後半は白とごく薄いグレーのフラットな面。 - **形**: 角丸はほぼなし。黒セクションの上端は中央が下がるV字の切り込み。番号リストは右端が矢羽根形のリボン。 - **温度感**: 前半は暖かい金、商品パートは黄と藤色の対比、後半は無彩色で落ち着いた温度。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C9A040` | 金グラデの帯（コンセプト見出し背景） | 7% | 推定 | | `background` | `#FFFFFF` | ページの地 | 35% | 画素の実測 | | `dark-section` | `#000000` | 成分訴求の黒セクション | 7% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#FBE601` | 商品A（黄）セクションの地 | 14% | 画素の実測 | | `accent-2` | `#C3B7E9` | 商品B（藤色）セクションの地 | 13% | 画素の実測 | | `secondary` | `#9C8FD0` | 藤色の悩みチェック帯 | 1% | 推定 | | `text` | `#000000` | 見出し・本文の文字 | 3% | 画素の主要色に補正 | | `text-body` | `#3D342D` | 金帯上の説明文 | 1% | 画素の主要色に補正 | | `cta` | `#C8C8C1` | 購入先ボタン | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#FEFEFE` | 処方説明パネルの地 | 5% | 画素の実測 | | `line` | `#C8C8C1` | パネル見出し帯 | 1% | 画素の主要色に補正 | | `text-muted` | `#70706F` | 注釈・小さな文字 | 0% | 画素の実測 | | `cta-accessible` | `#77776A` | AA を満たす補正値（計算） | | 計算 | - 冒頭は金グラデ→黒で高級感を出し、無彩色の白文字は黒地のみで使う。 - 2 商品はそれぞれ黄と藤色の専用セクションで色分けし、混ぜない。 - 各商品の番号リストやチェック帯は、その商品の色を濃くした色で塗る。 - 後半の比較・購入・使い方は白と薄いグレーだけで落ち着かせる。 - 購入ボタンは目立たせすぎないグレーの面に白文字。 - 金はアクセントの帯や細い矢羽根ラインに限定する。 - `button-buy` は文字 `#FFFFFF` × 背景 `#C8C8C1` のコントラスト比が 1.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#77776A`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品の効果を大きく見せる見出し | 明朝 | Shippori Mincho | 700 | 40px | 1.2 | 0.02em | | `headline-lg` | コンセプト見出し | 明朝 | Noto Serif JP | 600 | 24px | 1.5 | 0.08em | | `headline-md` | 特長・悩みの見出し | 明朝 | Noto Serif JP | 600 | 19px | 1.5 | 0.05em | | `accent` | セクションの欧文ラベル・大きな欧文ロゴ文字 | 欧文サンセリフ | Josefin Sans | 500 | 15px | 1.3 | 0.25em | | `body-md` | 本文・説明 | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.05em | | `headline-sm` | 番号リストの成分名 | 明朝 | Noto Serif JP | 600 | 15px | 1.4 | 0.05em | | `note` | 注釈・米印 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | 購入ボタン・商品名・価格 | ゴシック | Noto Sans JP | 400 | 13px | 1.4 | 0.02em | - 日本語見出し・本文は明朝で統一し、上品さを出す。 - セクションラベルは字間の広い細めの欧文大文字。 - 効果見出しは 1〜2 文字を極端に大きく、後ろに小さな文字を添える。 - 注釈は米印付きの小さなゴシックで右下や下部に置く。 - 価格・ボタンだけはゴシックで実用的に。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。後半の 2 商品比較・処方パネルは SP で縦積み - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 見出しはセクション中央揃え。 - 商品セクションは商品画像と効果テキストを左右交互に組む。 - 悩みカードは白い箱に写真とチェック帯を並べ、色地の上に浮かせる。 - 使い方は線画と短い文の 3 ステップ。 - 余白を広く取り、1 画面に要素を詰めない。 ## Elevation & Depth - 影はほぼ使わずフラット。 - 白い悩みカードは色地との対比だけで浮かせる。 - 奥行きは背景のボケ写真や光の粒で出す。 ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角の切り抜き。人物写真は 2 枚をずらして重ねる。商品は切り抜きのパッケージ画像 - **セクション境界**: 黒セクション上端は中央が下がるV字。それ以外は直線で切り替える - ボタン・パネルは角丸なしの四角。 - 番号リストは右端を矢羽根形に切った白い帯。 - 丸数字は細線の円で囲む。 - 金色の細い山形ラインを区切りに使う。 ## Components - **購入先ボタン**（`button-buy`）: 通販サイトごとのグレーの四角ボタンを縦に 3 つ並べる - **欧文セクションラベル**（`section-label`）: 字間の広い欧文大文字を中央に置く - **成分番号リボン**（`ingredient-ribbon`）: 丸数字＋成分名と小さな配合表記。右端が矢羽根の白帯 - **悩み別おすすめカード**（`concern-card`）: 白い箱に明朝の見出し、右に肌の写真、下に丸印付きの色帯チェックを 3 本 - **悩みチェック帯**（`check-band`）: 白抜きの丸印と悩み文を商品色の帯にのせる - **効果の大見出し**（`effect-headline`）: 大きな明朝の漢字に小さな添え文字。上に欧文の商品タイプ名を白で置く - **処方説明パネル**（`info-panel`）: グレーの見出し帯の下に、薄グレー地で線画アイコンや×印の円を並べる - **使い方ステップ**（`step-item`）: 線画の顔イラストにSTEP番号の円バッジ、下に短い説明文 ## Do's and Don'ts **Do** - 冒頭は金と黒で高級感を出し、明朝の見出しを中央に置く。 - 商品ごとに専用の色地セクションを作り、リストや帯もその色でそろえる。 - 背景には分子構造や光の粒のボケ写真をうすく敷く。 - 後半は白地と線画アイコンでシンプルにする。 - 成分や効果には米印の注釈を必ず添える。 **Don't** - ピル型ボタンや大きな角丸は使わない。 - ゴシックの太字見出しで硬くしない。 - 黄と藤色を同じセクションで混ぜない。 - ドロップシャドウを多用しない。 - 購入ボタンを派手な原色にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドとページ内リンクを示す）: 金グラデの帯に左ロゴ、右に欧文ナビとSNSアイコン 2. **ファーストビュー**（商品と世界観を一目で伝える）: 金と青の光の粒の背景に 2 商品と金色の雫のマスク。下部に字間の広い大きな欧文 3. **コンセプト**（商品の核となる価値を伝える）: 金グラデ地に明朝の 2 行見出しと短い説明。下端はV字で黒へ 4. **成分訴求**（独自処方を印象づける）: 黒地に白い明朝 2 行、中央に金の雫とマスクのビジュアル、丸い吹き出しバッジ 5. **特長**（シートの使用感を示す）: 白地に欧文ラベル、ずらして重ねた写真 2 枚と明朝見出し 6. **商品A紹介**（悩み別の 1 品目を説明）: 黄色の分子写真地に商品画像、大きな効果見出し、番号リボン 5 本、悩みカード 7. **商品B紹介**（悩み別の 2 品目を説明）: 藤色地で左右を反転した同じ構成。金の山形ラインで悩みカードへつなぐ 8. **処方・手軽さ**（無添加と時短を伝える）: グレー見出し帯のパネル 2 枚。×印の円と線画アイコン 9. **ラインナップ**（購入へ導く）: 商品画像、商品名、価格、グレーの購入ボタン 3 つを 2 列 10. **使い方**（使用手順を示す）: 線画イラストとSTEPバッジの 3 ステップ 11. **フッター**（会社情報）: 金と青の光の粒の背景に白い小文字を中央揃え ## Imagery - 金と青の光の粒や線がつながるネットワーク模様のボケ背景。 - 金色の液体の雫が落ちるマスクの 3D ビジュアル。 - 商品色に染めた分子構造ガラス球のボケ写真。 - 白い背景で撮った、マスクをつけた女性や肌に触れるクローズアップ。 - 細い黒の線画で描いた顔イラストと容器アイコン。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 80% 幅。SP は 1 カラムで左右に余白 6% 程度。 - 商品セクションの左右配置は SP では画像→見出し→リストの縦積み。 - ラインナップと処方パネルの 2 列は SP では縦に並べる。 - 使い方 3 ステップは SP では縦並びか横スクロール。 - 大きな欧文は SP では画面幅いっぱいに縮小する。 ## 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-55c11e19`（元 LP の URL から採番） - **元 LP**: https://www.c-roland.co.jp/products/bample_mask/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。