DESIGN.md — 黒×銀×金の大人男性向けスキンケア LP（Black Silver Gold Men's Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 黒と白の交互配置・金属的な銀と金・英字セリフ見出し・明朝体のコピー・大きな価格訴求
• 地の質感: マットな黒の面と、水滴や金属ボトルの光沢がある写真の対比。価格の部分は金・銀のメタリックなグラデーション。
• 形: 角丸はほぼ使わない直角の矩形。ボタンは細長い長方形で、右端に矢印を置く。
• 温度感: 冷たく落ち着いた無彩色が中心。差し色の金と、ウイスキー樽の茶色でわずかに温かみを足す。

Colors

• セクションの地は黒と白を交互に切り替え、メリハリを付ける。
• 金と銀はキャンペーン価格の数字、帯、購入ボタンだけに使う。
• 赤は割引率のバッジ 1 か所に限る。
• 料金表はグレーまたは生成りの地に白いカードを載せる。
• 商品ラインごとに地の色を変える（標準ラインはグレー、上位ラインは生成り）。
• 関連商品の帯は黒と紺に分け、商品の違いを色で示す。

Typography

• 英字のセリフ見出しの下に、小さな和文の訳を添える。
• キャッチコピーは明朝体で 2〜4 行に改行し、行間を広く取る。
• ブランドストーリーの本文は中央揃えにし、1 行を短く区切る。
• 価格の数字は極太で大きくし、円・税込は小さく付ける。
• 注釈は 9px 前後の小さなグレー文字で、該当ブロックの直後に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は画面幅いっぱい、本文は左右に余白を取る。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真ブロックとテキストブロックを交互に積む。
• 各セクションの最後に、横長の誘導ボタンを 1 つ置く。
• キャンペーンのブロックは黒地の箱に収め、セクション間に 24px ほどの白余白を空ける。
• 料金カードは左に商品画像、右に価格と 2 つのボタンを並べる。
• FAQ は Q 番号付きのリストを線で区切り、右端に＋を置く。

Elevation & Depth

• 影はほぼ使わず、面の色の切り替えだけで階層を作る。
• 料金カードは薄いグレーの地に白い面を載せて浮かせる。
• 製品写真は反射と光沢で立体感を出す。

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 画面幅いっぱいの長方形。製品は切り抜きにするか、単色背景で撮る。
• セクション境界: 直線で色面を切り替える。斜めや波形は使わない。
• ボタンは直角の長方形にし、右端に細い山形の矢印を置く。
• キャンペーン名の帯は右端を斜めにカットした金色にする。
• 締めのメッセージは、角を内側に欠いた装飾枠で囲む。

Components

• 金・銀グラデーションの購入ボタン（button-campaign）: キャンペーンのブロック内に置く主 CTA。メタリックなグラデーションに太字と右矢印を合わせる。
• 黒の誘導ボタン（button-primary）: 白地で使う横長の黒ボタン。中央に白文字、右端に矢印。
• 白枠ボタン（button-outline）: 黒地では白い塗りにし、料金カードでは細い黒枠の白ボタンにする（1 回だけ購入する用途）。
• キャンペーン価格ブロック（price-block）: 黒い箱の中に、元値の打ち消し線、赤い割引率の矢印、金か銀の巨大な価格、白枠の条件バッジを並べる。
• 割引率の矢印バッジ（badge-discount）: 右向きの矢印形の赤地に、白文字で割引率を入れる。
• 英字見出し＋和訳（section-heading-en）: 左寄せの大きな英字セリフ見出しの下に、小さな和文を置く。
• 容量別の料金カード（price-card）: 白いカードの上部に容量名と下線。左に商品画像、右に価格・税込タグと、定期便と単品のボタン 2 つ。
• 香り切替タブ（tab-variant）: 黒地に白枠のタブを 4 つ並べる。選択中のタブは白い塗りにし、下に三角を付ける。
• FAQ アコーディオン（faq-item）: 左に Q 番号、中央に質問、右に＋を置き、上下を細線で区切る。

Do's and Don'ts

Do - 黒と白のセクションを交互に置き、間にフルブリードの写真を挟む。 - 金・銀は価格と購入ボタンにだけ使い、特別感を保つ。 - 英字セリフ見出しに小さな和訳を添え、統一した型で繰り返す。 - コピーは明朝体で短く改行し、余白を多く取る。 - 料金表は定期便を黒ボタン、単品を白枠ボタンにして優先度を分ける。

Don't - 丸いピル型ボタンや大きな角丸は使わない。 - パステル調や彩度の高い色を広い面に使わない。 - 赤を割引率以外の場所に使わない。 - 本文に丸ゴシックや手書き風の書体を使わない。 - 写真に装飾フレームやイラストを重ねすぎない。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（製品の印象と実績を一瞬で伝える。）: 水しぶきと銀のボトルを写したスライダーに、明朝体の短いコピー、ロゴ、受賞メダルを重ねる。
2. キャンペーン訴求（お試し価格で購入に誘う。）: 黒い箱に金の帯見出し、打ち消した元値、赤い割引バッジ、巨大な金か銀の価格、セット内容の写真、購入ボタンを入れる。2 種類を並べて置く。
3. 新商品・ギャラリーバナー（関連コンテンツへ回遊させる。）: 暗い製品写真のバナーと、人物写真の下に金茶色の帯を付けたバナーを置く。
4. ブランドストーリー（企業の技術背景で信頼を作る。）: 暗い職人写真に白の縦書き明朝の大見出しを重ね、黒地に中央揃えの本文を続ける。
5. ブランド紹介（ターゲット像と世界観を示す。）: 鏡を見る男性の写真の下に、英字見出し、明朝のコピー、黒ボタンを置く。
6. 商品ラインナップ（種類と実績を見せる。）: 黒地に 4 本のボトル写真を横に並べ、受賞メダル、説明、白ボタンを続ける。
7. 上位商品の紹介（高価格帯の商品を訴求する。）: 金色のボトル写真の下に、明朝の大きなコピー、本文、注釈を置く。地は黒。
8. こだわり・技術（独自成分と技術を説明する。）: 白地に樽の写真と英字見出しを置き、グレーのパネルに成分図解と効果の枠ラベルを入れる。
9. 使い方（使用イメージを伝える。）: 手のひらに出すシーンの写真に、黒地の説明文と白ボタンを続ける。
10. お客様の声（SNS投稿とレビューで共感を作る。）: 水面のテクスチャ地に、白カードの SNS投稿カルーセルとレビュースライダーを置く。
11. 料金プラン（容量別に購入してもらう。）: 黒地に香りタブを並べ、グレーまたは生成りの地に白い料金カードを縦に並べる。
12. 関連商品（ほかの商品へ誘導する。）: 装飾枠付きのメッセージと洗面台の写真のあとに、黒地と紺地の商品帯を置く。
13. よくある質問（不安を解消する。）: 中央に英字見出しを置き、Q 番号と＋付きの線区切りリストを続ける。
14. フッター CTA（最後の購入導線。）: 黒地にロゴとボトル写真を置き、白ボタンを添える。

Imagery

• 金属光沢のボトルを、水滴や水しぶきと一緒に白〜グレーの背景でシャープに撮る。
• 40〜60代の男性を自然光で撮り、白シャツなど清潔感のある装いにする。
• 職人の手元や樽は、暗く落としたローキーで重厚に撮る。
• クリームやシャボンの泡は、黒か紺の背景に切り抜きで置く。
• 受賞メダルは黒と金のリボン型にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも全幅の写真と色面の交互配置は維持する。
• PC では写真とテキストを左右 2 カラムに並べ、左右を交互に入れ替える。
• PC のキャンペーンは横長にし、価格を左、セット写真を右に置く。
• PC の料金カードは 3 枚を横に並べ、画像を上に縦積みする。
• 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 行書くと起動時に読み込まれる。