--- version: alpha name: Dark Charcoal Gold Tech Device LP description: 黒とチャコールを交互に重ねた地に、金色の見出しとピル型ボタン、黄色の特典強調を合わせた男性向け美容機器 LP。製品写真は暗い背景になじませ、精密機器らしい先進感と信頼感を出す。 colors: primary: '#B8904A' on-primary: '#F6F5F3' cta: '#F5D800' on-cta: '#141414' background: '#141414' background-alt: '#242424' surface: '#343434' tint-1: '#F4F4F4' text: '#EEEEEE' text-body: '#2C2B2B' accent-1: '#F8F45C' accent-2: '#E0352B' line: '#6A6A6A' text-muted: '#989898' primary-accessible: '#8A6B36' typography: display: fontFamily: Montserrat fontSize: 36px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 2px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-benefit: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px benefit-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 420px heading-box-chars: backgroundColor: '{colors.on-primary}' textColor: '{colors.background}' typography: '{typography.headline-lg}' height: 40px worry-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 140px compare-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 260px faq-accordion: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 32px award-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 140px --- # DESIGN.md — 黒×金×黄の頭皮ケア美容機器 LP（Dark Charcoal Gold Tech Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: ラグジュアリー・ダーク、クール・先進的、信頼・誠実、情報量多め・訴求型 - **キーワード**: ダーク・金アクセント・黄色の特典強調・精密機器・男性向け・保証訴求 - **地の質感**: マットな黒とチャコールの無地。光沢のない落ち着いた面。 - **形**: 角の小さいカードと細い罫線。ボタンだけピル型。 - **温度感**: 冷たく硬い。金色でほんの少し温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B8904A` | 金色の見出し・ボタン | 2% | 推定 | | `on-primary` | `#F6F5F3` | 金ボタン上の文字 | 0% | 画素の主要色に補正 | | `cta` | `#F5D800` | 特典の詳細ボタン | 0% | 推定 | | `on-cta` | `#141414` | 黄ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#141414` | 基本の黒い地 | 30% | 画素の実測 | | `background-alt` | `#242424` | 交互に入るチャコールの地 | 24% | 画素の実測 | | `surface` | `#343434` | 特典ボックスの面 | 4% | 画素の実測 | | `tint-1` | `#F4F4F4` | 明るいセクションの地 | 14% | 画素の実測 | | `text` | `#EEEEEE` | 暗い地の見出し・本文 | 2% | 画素の実測 | | `text-body` | `#2C2B2B` | 明るい地の本文 | 1% | 画素の主要色に補正 | | `accent-1` | `#F8F45C` | 特典の数字の黄色 | 0% | 画素の実測 | | `accent-2` | `#E0352B` | 注意書きの赤い下線 | 0% | 推定 | | `line` | `#6A6A6A` | カード枠・罫線 | 0% | 推定 | | `text-muted` | `#989898` | 注釈・小見出しのグレー | 0% | 画素の実測 | | `primary-accessible` | `#8A6B36` | AA を満たす補正値（計算） | | 計算 | - 地は黒#141414とチャコール#242424をセクションごとに交互にし、境目は直線にする - 金色はセクション見出しと購入ボタンにだけ使う - 黄色は特典の数字や詳細ボタンなど、お得さを伝える所だけに限る - 使い方とFAQだけ生成りの明るい地にして、読みやすさで変化をつける - 赤は注意書きの下線だけに少量使う - 比較表は薄いグレーの面に置き、自社の列を金色の文字で目立たせる - `button-primary` は文字 `#F6F5F3` × 背景 `#B8904A` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8A6B36`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の製品ロゴ風見出し | 欧文サンセリフ | Montserrat | 300 | 36px | 1.2 | 0.02em | | `headline-lg` | 特典の大見出し（白黒反転の箱文字） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.05em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.08em | | `headline-sm` | 特長の小見出し（金色） | ゴシック | Noto Sans JP | 500 | 16px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・小さなラベル | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 特典の大きな数字 | ゴシック | Noto Sans JP | 900 | 40px | 1.1 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.1em | - 見出しの上に小さなグレーのリード文を置く 2 段組にする - 数字は本文の 3 倍ほどの大きさで黄色にして強調する - 特典見出しは 1 文字ずつ白い箱と黄色い箱に入れる - 傍点や赤い下線でキーワードを強調する - 本文は中央揃えにし、行間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、悩みと写真カードは 3 列から縦並びへ - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは中央揃えの見出しから始める - 特典ボックスは中央に置き、白い＋記号で 3 つをつなぐ - 特長は左に写真、右に金色の小見出しと本文を並べる（SP では縦に積む） - 主要なセクションの後ろには毎回、金のピル型購入ボタンを置く - FAQ は 2 列のアコーディオン（SP では 1 列） ## Elevation & Depth - 影はほとんど使わず、面の色の違いで階層をつける - カードは細い枠線で区切り、影は付けない - FV の製品写真だけ暗い背景に柔らかい光を当てる ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。製品は切り抜きで暗い地に置く - **セクション境界**: 直線。地の色を切り替えるだけ - 悩みカードは角丸 10px で枠線だけにする - ボタンはすべてピル型にする - 特典ボックスは角丸なしの四角にする - 比較表のセルは角丸 2px で白にする ## Components - **金のピル型購入ボタン**（`button-primary`）: カートアイコン付きで、幅は約 300px - **黄色の詳細ボタン**（`button-benefit`）: 特典ボックス内に置く小さなボタン - **購入特典ボックス**（`benefit-box`）: 灰色の四角い箱に 3 つの特典を＋でつなぎ、数字を黄色の特大文字にする - **箱文字見出し**（`heading-box-chars`）: 見出しの漢字を 1 文字ずつ白や黄色の正方形に入れる - **悩みカード**（`worry-card`）: 線画アイコンと 2 行の短い悩みを、枠線だけのカードに入れる - **比較表**（`compare-table`）: グレーの見出しセルと白いセルの表。自社の列を金色の文字にする - **FAQ アコーディオン**（`faq-accordion`）: Q の印と下向き矢印が付いた白い行 - **受賞バッジカード**（`award-card`）: 白い円の中にロゴを入れ、下に短い説明を付ける ## Do's and Don'ts **Do** - 黒とチャコールを交互にしてセクションを区切る - 金色は見出しとボタンにだけ使う - 保証や割引の数字は黄色で大きくする - 製品写真は暗い背景になじませる - 主要なセクションのたびに購入ボタンを繰り返す **Don't** - パステル色や鮮やかな青・緑は使わない - 大きな角丸やかわいいイラストは使わない - 金色と黄色を同じ要素の中で混ぜない - 強い影やグラデーションのボタンは作らない - 明るい地のセクションは 2 つより多くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品と保証を一目で伝える）: 暗いグラデーションの地に、細い欧文ロゴ、月桂樹の保証バッジ、右側の製品写真を置く 2. **購入特典**（公式で買う理由を示す）: 箱文字見出しの下に、3 つの特典を縦に重ねた灰色のボックスを置く 3. **悩みの提起**（共感を得る）: チャコールの地に、線画アイコン付きの枠線カードを 3 枚並べる 4. **解決策の提示**（製品で解決できると示す）: 金色の 2 行見出し、短い本文、写真付きカード 3 枚、購入ボタンの順に並べる 5. **選ばれる理由**（メリットと他の方法との比較）: 左に写真、右に金色の小見出しを付けた 4 項目を並べ、その下に比較表と購入ボタンを置く 6. **技術解説**（科学的な根拠を示す）: 製品のアップ写真と本文、研究背景の文章と白い背景の装置写真を並べる 7. **受賞・実績**（権威付け）: 白い円のロゴバッジを 3 列に並べ、下に購入ボタンを置く 8. **セット商品**（客単価を上げる）: 製品写真のバナーに、割引額と送料無料のバッジを重ねる 9. **使い方**（手軽さを伝える）: 明るい地に、重ねた写真 2 枚と金色の番号付き 3 ステップを置く 10. **よくある質問**（不安を解消する）: 明るい地に、2 列のアコーディオンを並べる 11. **クロージング特典**（最後のひと押し）: 冒頭の特典ボックスをもう一度載せる 12. **フッター**（会社情報）: 黒い地に、白いロゴとリンクを小さく置く ## Imagery - 製品は黒いマットな質感で撮り、暗い背景で側面から光を当てる - 使用シーンは無地の背景に人物を置き、低い彩度で撮る - 技術を表すカットは青い光を点在させてテクノロジー感を出す - アイコンは白い細い線画にする - 毛髪や頭皮はクローズアップで、モノクロ寄りに撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅約 540px のコンテンツ列を置き、地の色は全幅に伸ばす - SP では 3 列のカードを縦 1 列（または横スクロール）にする - 特長の左右 2 列は、SP では写真の下に文章を置く - FAQ は 2 列から 1 列にする - 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-dae505d5`（元 LP の URL から採番） - **元 LP**: https://sonorepro.com/lp_sonorepro - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。