--- version: alpha name: Cool Charcoal Gradient Men's Beauty Device LP description: チャコール・黒の重いトーンを基調に、ピンク〜紫〜青のネオングラデーションで先端技術を強調する男性向けヘアケアデバイスの LP。くすんだ青灰色の地に白いカードを並べ、スモーキーブルーの BUY ボタンで購入へ誘導する。図解とビフォーアフターが多く、情報量の多い縦長構成。 colors: primary: '#000000' background: '#D5DCE6' surface: '#FEFEFE' cta: '#4A73AB' on-cta: '#F3FEFF' secondary: '#606672' accent-1: '#E47EFA' accent-2: '#7B95E6' dark-section: '#5C626B' text: '#2B2C2F' on-dark: '#FAFAFA' marker: '#FCED23' accent-3: '#D8202A' background-alt: '#D2D2D2' typography: display: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Montserrat fontSize: 16px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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}' rounded: '{rounded.full}' height: 30px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 340px gradient-heading-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 52px glow-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px feature-tag-grid: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 46px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.cta}' typography: '{typography.headline-md}' height: 300px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px faq-item: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 150px label-black-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 20px --- # DESIGN.md — 黒×紫青グラデの男性向け美容家電 LP（Cool Charcoal Gradient Men's Beauty Device LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: クール・先進的、ラグジュアリー・ダーク、情報量多め・訴求型、力強い・インパクト - **キーワード**: チャコール・ネオングラデ・メンズ美容・テクノロジー・図解多め・サロン品質 - **地の質感**: マットな黒と金属的なグレー。ネオンの光彩と方眼グリッドの背景で無機質なテック感を出す - **形**: 角丸の小さい四角カードが基本。円形バッジに発光リングを付け、矢印付きの見出し枠を使う - **温度感**: 冷たい寒色寄り。ピンク紫のグラデが少しだけ温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000000` | ブランドの黒・効果セクションの地 | 20% | 画素の実測 | | `background` | `#D5DCE6` | 青灰色のページ地 | 22% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカード・商品枠 | 12% | 画素の実測 | | `cta` | `#4A73AB` | BUY ボタン | 1% | 画素の実測 | | `on-cta` | `#F3FEFF` | ボタン上の文字 | 0% | 画素の実測 | | `secondary` | `#606672` | 機能タグの濃グレー面 | 4% | 画素の実測 | | `accent-1` | `#E47EFA` | ネオングラデの紫ピンク側 | 2% | 画素の実測 | | `accent-2` | `#7B95E6` | ネオングラデの青側 | 2% | 画素の実測 | | `dark-section` | `#5C626B` | キャンペーン・賞品の金属グレー地 | 9% | 画素の実測 | | `text` | `#2B2C2F` | 見出し・本文の濃い文字 | 3% | 画素の主要色に補正 | | `on-dark` | `#FAFAFA` | 黒地上の白文字 | 2% | 画素の実測 | | `marker` | `#FCED23` | 注意書きの黄マーカー・強調 | 0% | 画素の実測 | | `accent-3` | `#D8202A` | 注意事項の赤強調文字 | 0% | 推定 | | `background-alt` | `#D2D2D2` | お客様の声のライトグレー地 | 5% | 画素の実測 | - 地は青灰色と黒を交互に切り替え、セクションの性格を分ける - 技術・効果の説明は黒地に白文字と発光するグラデで見せる - ピンク→紫→青のグラデは見出し帯・バッジ・吹き出しに限定する - 購入ボタンはスモーキーブルー 1 色に統一し、他の要素には使わない - 黄マーカーと赤文字は注釈や注意点の強調だけに使う - キャンペーン部はメタリックなグレーのグラデ地で特別感を出す ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きなキャッチ・効果見出し | 明朝 | Shippori Mincho | 700 | 28px | 1.4 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 22px | 1.4 | 0.08em | | `headline-md` | カード見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.06em | | `accent` | 英字のセクション名 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.2 | 0.06em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.04em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `label-button` | BUY ボタン | 欧文サンセリフ | Montserrat | 800 | 16px | 1.0 | 0.1em | | `headline-sm` | 機能タグ・ラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.04em | - 情緒的な効果コピーは明朝、機能説明はゴシックの太字にする - 英字のセクション名は太いサンセリフにし、下に小さく日本語を添える - 本文は中央揃えで短く改行する - 注釈は※付きの小さい文字で各ブロックの直下に置く - 強調語は文字を大きくするか、黄・赤で色を変える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。機能タグや比較写真は 2 カラム - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 白カードを画面幅の 87% で中央に置く - 比較画像は左右 2 枚を並べ、下に濃色ラベルを付ける - 効果セクションは黒地の中に角丸の白線枠を大きく敷く - 商品購入カードは写真・商品名・価格・ボタンの縦積み - 手順は STEP タブ付きの白カードを縦に並べる ## Elevation & Depth - 影はほぼ使わず、色面の切り替えで階層を作る - 円形バッジには外側に発光リング（グロー）を付ける - カードはフラットな白面で、地との明度差で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 四角い切り抜きが基本。拡大図は円形で切り抜いて重ねる - **セクション境界**: 直線で区切る。見出しの下に下向き三角を付け、次へ流れをつなぐ - BUY ボタンは横長のピル型で、右端に下向き二重矢印を付ける - グラデの見出し枠は四角で、下に三角の矢印を付ける - 賞品カードは角丸の線枠にし、上辺に円形バッジを重ねる ## Components - **購入ボタン**（`button-buy`）: スモーキーブルーのピル型。中央に太い英字、右に二重シェブロン - **商品購入カード**（`product-card`）: 上が商品写真、下の白面に商品名・税込価格・BUY ボタンを置く - **グラデ見出し帯**（`gradient-heading-band`）: ピンクから青へのグラデ帯に黒の太字見出しを置く - **発光円バッジ**（`glow-badge`）: 黒い円にネオングラデのリングを光らせ、中に機能名・賞名を入れる - **機能タググリッド**（`feature-tag-grid`）: 濃グレーの四角に白太字の機能名を入れ、2 列 5 段で並べる - **手順カード**（`step-card`）: 青い STEP タブ、青文字見出し、下線、写真の順に並べる - **レビューカード**（`review-card`）: 黄色の星 5 つ、本文、右下に年齢と属性を置く白カード - **FAQ 項目**（`faq-item`）: グレー帯に太い Q と質問、下の白面に赤い A と箇条書きの回答 - **黒ラベル**（`label-black-tag`）: 写真の上に置く黒地白文字の小さなラベル。下に英字を添える ## Do's and Don'ts **Do** - 黒・チャコールと青灰色の 2 つの地を交互に使い、重厚感を保つ - 効果の説明には図解・拡大円・ビフォーアフターを必ず添える - グラデはピンク→紫→青の一方向で統一する - 数値や根拠には※注釈を小さく付ける - 購入カードはページ内に複数回入れる **Don't** - 暖色の大面積やパステルの地を使わない - BUY ボタンの色を赤やオレンジにしない - グラデを本文の背景に広く敷かない - 角丸の大きい柔らかいカードを多用しない - 手書き風・丸ゴシックの書体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品の価値と先進性を一目で伝える）: 暗いグレーの質感背景に製品の大写真、明朝の 2 行コピー、右側に機能名の発光円を縦に 3 つ並べる 2. **アンバサダー告知**（著名人の起用で注目と信頼を得る）: 白衣装の集合写真の下に黒帯を置き、白太字で告知して下向き矢印を付ける 3. **悩みの提起と製品登場**（理想のスタイルへの欲求を引き出す）: グラデ枠の特長 2 つ、問いかけ文、黒帯見出し、比較写真 2 枚の順に並べる 4. **技術の秘密**（独自構造の根拠を見せる）: ピンク→青グラデの角丸パネルに白カード、製品写真、円形拡大図を重ねる 5. **機能一覧**（多機能さを一覧で示す）: 下線付き見出しの下に濃グレーの機能タグを 2 列で並べる 6. **購入 CTA**（早めに購入へ誘導する）: 白い商品カードを 2 つ縦に並べ、それぞれに価格と BUY ボタンを置く 7. **キャンペーン**（購入特典で後押しする）: メタリックグレーのバナーに大きな数字。賞ごとに線枠カードを置き、上辺に発光バッジを重ねる 8. **効果の詳細**（機能ごとの仕組みと効果を証明する）: グラデ帯の見出しから黒地に入る。機能ごとに大きな線枠を作り、図解・経時比較・検証画像を縦に並べる 9. **専門家コメント**（第三者の評価で信頼を補う）: 斜線柄のダーク地にグラデ見出し枠を置き、吹き出しカードとロゴ付きのプロフィールを並べる 10. **お客様の声**（使用者の実感を伝える）: グレー地に英字見出しを置き、星付きの白カードを 3 つ並べる 11. **使い方**（使用手順を具体的に示す）: 青灰色の地に STEP タブ付きの白カードを 3 つ置き、写真と注記を添える 12. **スタイル提案**（使用後の髪型をイメージさせる）: 方眼グリッドの地に人物写真を左右にずらして重ね、黒ラベルで髪型名を付ける 13. **注意事項・FAQ**（不安を解消して問い合わせを減らす）: アイコン付きの黒帯見出しで注意点を並べ、赤い強調文字を使う。Q&A はグレー帯と白面で作る 14. **関連商品・ブランドメッセージ**（ついで買いを促し、ブランドの印象を残す）: 左右矢印付きの商品カルーセルを置き、最後に明朝の大コピー、集合写真、動画サムネを続ける ## Imagery - 製品は黒いマットな質感で、暗いグレーの背景に斜め置きして撮る - 人物は白シャツか紺シャツの男性。明るいグレーの背景で清潔に撮る - 仕組みは円形の拡大図やピン・毛穴の断面イラストで説明する - イオンや EMS はネオンの光、粒子、波紋の CG で表現する - 髪の変化はビフォーアフターや経時変化を縦に並べ、白い太矢印を添える - 背景に方眼グリッドや斜線のパターンを入れて無機質さを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に SP 幅（約 440px）のカラムを固定し、中身は SP と同じ構成にする - PC の左側には製品写真を大きく固定表示する - PC の右側には目次ナビ、ロゴ、販売モール別の購入ボタンを固定する - 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-d226f58c`（元 LP の URL から採番） - **元 LP**: https://scalp-d.angfa-store.jp/brand/next_plus/erebrush/m/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。