--- version: alpha name: Black and Gold Premium Sheet Mask LP description: チャコールから漆黒へのグラデーション地に、金のグラデーションで見出しやボタンを光らせた高級スキンケアの通販 LP。白いカードの購入ブロックと定期特典ブロックを何度も挟み、明朝体の上品さとゴシック体の読みやすさを組み合わせている。 colors: background: '#090909' dark-section: '#3F3F3E' primary: '#A2916E' cta: '#E3BC3C' on-cta: '#2A2929' surface: '#FEFEFE' background-alt: '#FBFBFB' tint-1: '#FBF9EC' on-dark: '#DDDDDD' accent-1: '#4A7FCF' accent-2: '#767676' text: '#333333' accent-3: '#7A2E45' line: '#A2916E' background-accessible: '#9C9C9C' primary-accessible: '#A99979' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 48px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 12px 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-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 56px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' height: 900px benefit-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px point-label: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.accent}' height: 30px highlight-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px worry-bubble: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 90px step-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 130px faq-item: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 48px badge-round: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px --- # DESIGN.md — 黒×金の高級感あるシートマスク LP（Black and Gold Premium Sheet Mask LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、情報量多め・訴求型 - **キーワード**: 黒地・金グラデーション・ご褒美感・夜のケア・通販定期 - **地の質感**: 黒いマット地に星屑のような光の粒、水滴の玉、黒大理石の質感を重ねる。金は平塗りにせず、光沢のあるグラデーションにする - **形**: 基本は角ばった四角形。ボタンだけピル型、成分の写真は円で切り抜き、セクションの境目は斜めのカットや V 字にする - **温度感**: 暗めで落ち着いた温度感。金色でほんのり暖かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#090909` | ページの主な地（黒） | 40% | 画素の実測 | | `dark-section` | `#3F3F3E` | チャコールのグラデーション地 | 18% | 画素の主要色に補正 | | `primary` | `#A2916E` | ブランドの金（見出し・ラベル） | 5% | 画素の主要色に補正 | | `cta` | `#E3BC3C` | 購入ボタンの金グラデーション | 2% | 画素の実測 | | `on-cta` | `#2A2929` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 購入カード・説明カードの白 | 9% | 画素の実測 | | `background-alt` | `#FBFBFB` | 成分セクションの明るいグレー地 | 8% | 画素の実測 | | `tint-1` | `#FBF9EC` | 希少成分ボックスの生成り地 | 2% | 画素の実測 | | `on-dark` | `#DDDDDD` | 黒地の上の白文字 | 3% | 画素の実測 | | `accent-1` | `#4A7FCF` | 特典を強調する青のマーカー | 1% | 推定 | | `accent-2` | `#767676` | 成分グループカードのグレー | 4% | 画素の実測 | | `text` | `#333333` | 明るい地の上の本文 | 2% | 画素の主要色に補正 | | `accent-3` | `#7A2E45` | 定期購入の補足に使うワイン色 | 0% | 推定 | | `line` | `#A2916E` | 金の細い罫線・カードの枠線 | 0% | 画素の主要色に補正 | | `background-accessible` | `#9C9C9C` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#A99979` | AA を満たす補正値（計算） | | 計算 | - 地は黒とチャコールのグラデーションを基本にし、セクションごとに明度を少しずつ変えて区切る - 金はグラデーションで使い、見出しの文字・CTA・番号バッジ・王冠の装飾だけに絞る - 購入ブロックは白いカードにして暗い地から浮かせ、何度出てきても同じ見た目にする - 成分の説明だけは明るいグレーと生成りの地に切り替え、清潔感を出す - 青は特典の数字を強調するときだけに限って使う - 黒地のキーワードは白い箱に黒文字で囲み、マーカーのように見せる - `page` は文字 `#333333` × 背景 `#090909` のコントラスト比が 1.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#9C9C9C`、4.6:1）を使う。 - `point-label` は文字 `#333333` × 背景 `#A2916E` のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A99979`、4.52:1）を使う。 - `badge-round` は文字 `#DDDDDD` × 背景 `#A2916E` のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A99979`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（金グラデの明朝） | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.05em | | `headline-lg` | セクションの大見出し（白・太いゴシック） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.12em | | `headline-md` | ポイントごとの見出し（明朝） | 明朝 | Noto Serif JP | 500 | 22px | 1.5 | 0.08em | | `headline-sm` | カード見出し・小見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.08em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.05em | | `accent` | 欧文の飾り文字（POINT・FAQ・番号の 01 など） | 欧文セリフ | Cormorant Garamond | 500 | 48px | 1.0 | 0.02em | | `label-button` | CTA ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.2 | 0.1em | - キャッチと商品名は明朝体＋金グラデ、説明はゴシック体にする - 黒地の本文は字間を広めに取り、中央揃えにする - 大きな欧文は薄いグレーで透かし、見出しの背景や縦書きの飾りとして置く - 強調したい語は白い箱で囲むか、金の帯に乗せる - 注釈は※を付けた 10px 前後のグレー文字で、本文のすぐ下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分紹介は写真とテキストを左右交互に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右 16px の余白をとった幅で配置する - 購入ブロックと特典ブロックはセットにして、ページの中で 4 回繰り返す - 人物写真は画面幅いっぱいに裁ち落とす - 見出しのまわりには上下 40px 以上の余白をとる - 悩みは吹き出しを左右にずらし、ジグザグに並べる ## Elevation & Depth - 白いカードには黒地の上で柔らかく大きな影を付ける - CTA には下方向に落ちる影を付けて立体感を出す - 番号付きの特典リボンは影で浮かせる - 水滴の玉や光のフレアは装飾として半透明で重ねる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 人物・使用シーンは四角く裁ち落とし、成分は円形に切り抜く。訴求ワードは金の円形バッジにする - **セクション境界**: 斜めのカット、V 字の切り込み、金の細い罫線 - CTA と単品購入ボタンはピル型 - カードの角丸は 4〜8px の控えめな四角 - 特典番号は金のリボン型の旗 - セクションラベルは両端を斜めに切った金のプレート ## Components - **金グラデの購入ボタン**（`button-primary`）: ピル型で、左にカートアイコン、右に矢印。全体を金の光沢グラデで塗る - **単品購入ボタン**（`button-secondary`）: 白地にグレーの枠線のピル型。左に価格、縦線で区切って右にボタン名を置く - **購入カード**（`price-card`）: 金の見出し帯の下に、黒大理石の商品写真、取り消し線付きの通常価格、金グラデの大きな特別価格、丸い割引バッジを並べる - **特典リスト**（`benefit-list`）: 月桂樹で囲んだ見出しの下に、金のリボン番号と白い枠のカードを 5 つ並べる。数字は青いマーカーで強調する - **ポイント見出しプレート**（`point-label`）: 王冠のアイコンを乗せた金プレートと、横に伸びる金の罫線。背景に大きな欧文数字を透かす - **キーワード囲み**（`highlight-box`）: 黒地の中で、強調語を白い箱に黒文字で入れる - **悩みの雲形吹き出し**（`worry-bubble`）: 暗いグレーの雲形の上に白文字を置き、強調語は白い箱で囲む。上に渦巻きアイコンを添える - **使い方ステップ**（`step-card`）: 金のタブに Step 番号、黒いカードに線画イラストと説明を入れ、カードの間を下向き矢印でつなぐ - **FAQ アコーディオン**（`faq-item`）: チャコールの帯に Q. と質問を置き、右端にプラス記号を付ける - **金の丸バッジ**（`badge-round`）: 金グラデの円に白文字で、無添加の項目や効果ワードを入れる ## Do's and Don'ts **Do** - 金はグラデーションで光沢を出す - 黒地と白カードのコントラストで購入導線を目立たせる - 見出しの背景に欧文の大きな透かし文字を置く - 注釈を丁寧に添えて、表現の根拠を示す - 購入ブロックは複数回、同じデザインで繰り返す **Don't** - 金を平坦な黄色で塗らない - ビビッドな原色を多用しない（青は特典の強調だけ） - 大きな角丸やポップなイラストで柔らかくしすぎない - 黒地に細く小さな文字を詰め込みすぎない - 明朝体を本文の長文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（高級感と商品を一目で伝える）: チャコール地に光の粒を散らす。NEW バッジ、金明朝のキャッチ、大きな商品写真、割引の吹き出し、金の CTA の順に並べる 2. **悩みの提起**（対象となる人の悩みに共感する）: 白いピル型ラベルと大見出しの下に、雲形の吹き出しを 4 つジグザグに置き、最後に人物写真を入れる 3. **ブランドの背景**（母体ブランドの実績で信頼を得る）: 黒い帯を敷いた白い見出し、既存商品の写真、白い箱で強調した一文 4. **コンセプト**（やさしさと贅沢さの両立を訴える）: 人物写真に縦書きのコピーを重ね、強調語は金の帯にする 5. **商品紹介**（商品の特長を要約する）: 商品写真の左右に、白い球体のバッジで特長を配置する 6. **購入・定期特典**（価格と特典で購入へ導く）: 白カードに価格と CTA、続けて月桂樹付きの特典リスト 5 項目 7. **3 つのポイント**（機能の根拠を示す）: 王冠付きの金プレート、透かし数字、写真、白い説明カードで構成する 8. **成分紹介**（配合成分の価値を伝える）: 明るいグレー地に、写真とテキストを左右交互に配置する。グレーのカードに円形写真を並べ、生成りの枠で希少成分を囲む 9. **低刺激処方**（安心感を与える）: 人物写真の上に、金の丸バッジを 6 つ並べる 10. **ブランドストーリー**（開発の想いを伝える）: 縦書きの欧文透かし、引用符付きの見出し、白い箱で強調したキーワード 11. **比較表**（シリーズ内での位置づけを示す）: 暗いグレーと白の 2 列表にし、おすすめの列は金の見出しで目立たせる 12. **定期便のしくみ**（継続購入のメリットを示す）: 金の細枠で囲んだ黒カードに、欧文イタリックの番号と金の見出しを付ける 13. **使い方**（使用手順を説明する）: 円形写真を添えた見出し、金タブ付きの線画ステップを 4 つ 14. **よくある質問**（購入前の不安を解消する）: 透かしの FAQ 文字と金ラベル、アコーディオン 4 項目 ## Imagery - 人物は青みグレーの背景で、目を閉じてリラックスした横顔にする。肌を明るく柔らかく写す - 商品は黒大理石の上に置き、黒いリボンを掛けてギフト感を出す - 成分はマクロ写真（黒い真珠・水滴・オイルの波紋・果実）を円か四角で切り抜く - 装飾として光のフレア、星屑、水滴の玉を半透明で散らす - 使い方は白い細線の人物線画で描く - 動物モチーフはモノクロの写実的なイラストにし、気品を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版は中央に SP 幅（約 375〜420px）のカラムをそのまま置き、左右はダークグレーの地にする - PC の左側の余白にはブランドのロゴを置く - PC の右側には、ナビゲーション目次と商品画像、CTA を固定表示する - PC 用に広げる場合も、カードや表は 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-e3a20103`（元 LP の URL から採番） - **元 LP**: https://shop.e-nepia.com/lp?u=npa_lp_sheetmask_premium_meta_001&utm_source=meta&utm_medium=social&utm_campaign=broad&utm_content=black_2168_20260901_01&fbclid=PAYW9leAUDrSBwZG9mAmV4dG4DYWVtATAAYWRpZAGrNLb24xikc3J0YwZhcHBfaWQPNTY3MDY3MzQzMzUyNDI3AAGnhZOY6q - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。