DESIGN.md — 黒×紫青グラデの男性向け美容家電 LP（Cool Charcoal Gradient Men's Beauty Device LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、情報量多め・訴求型、力強い・インパクト
• キーワード: チャコール・ネオングラデ・メンズ美容・テクノロジー・図解多め・サロン品質
• 地の質感: マットな黒と金属的なグレー。ネオンの光彩と方眼グリッドの背景で無機質なテック感を出す
• 形: 角丸の小さい四角カードが基本。円形バッジに発光リングを付け、矢印付きの見出し枠を使う
• 温度感: 冷たい寒色寄り。ピンク紫のグラデが少しだけ温度を足す

Colors

• 地は青灰色と黒を交互に切り替え、セクションの性格を分ける
• 技術・効果の説明は黒地に白文字と発光するグラデで見せる
• ピンク→紫→青のグラデは見出し帯・バッジ・吹き出しに限定する
• 購入ボタンはスモーキーブルー 1 色に統一し、他の要素には使わない
• 黄マーカーと赤文字は注釈や注意点の強調だけに使う
• キャンペーン部はメタリックなグレーのグラデ地で特別感を出す

Typography

• 情緒的な効果コピーは明朝、機能説明はゴシックの太字にする
• 英字のセクション名は太いサンセリフにし、下に小さく日本語を添える
• 本文は中央揃えで短く改行する
• 注釈は※付きの小さい文字で各ブロックの直下に置く
• 強調語は文字を大きくするか、黄・赤で色を変える
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。