DESIGN.md — 鉄灰×深紅のメンズ美顔器 LP（Steel Gray and Crimson Men's Beauty Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: クール・先進的、情報量多め・訴求型、力強い・インパクト、清潔・爽やか
• キーワード: メンズ美容・鉄灰と深紅・水しぶき・斜めカット・BEFORE/AFTER・数字で訴求
• 地の質感: 水滴や水しぶきの写真の地と、金属のような灰色のグラデーション面。マットで硬い質感。
• 形: 角はほぼ立てたまま。斜めの区切り線、吹き出しの三角、下向きの三角矢印を多用する。
• 温度感: 寒色寄りの中間〜低温。深紅で熱を差す。

Colors

• 地はセクションごとに白・淡灰・グレージュ・モーヴ・ティール・チャコールと切り替える。
• 深紅は CTA、価格、AFTER ラベル、強調語、下線だけに使う。
• ティールと紺灰は POINT 帯や技術説明の面に使い、男性向けの冷たい印象を出す。
• 購入ボックスは水しぶき写真の地に白いカードを置き、上部を深紅の帯にする。
• BEFORE はグレー、AFTER は深紅のラベルで対比する。
• 注釈はグレーの小さな文字で、各セクションの下に添える。

Typography

• 見出しは一文の中で太さと大きさを変え、キーワードだけ深紅で大きくする。
• 強調語には深紅の下線、または太い紺の下線を引く。
• 数字は欧文の太字で大きくし、単位は小さく添える。
• 見出しの左右を『＼ ／』の斜線で挟んで、前置きのリード文にする。
• POINT 番号は白抜きの斜体で、見出し帯の左端に大きく置く。
• 注釈は 8px 前後の灰色で、※ を付けて書く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の幅 375px 前後に固定し、左右は灰色の地にする。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツ列の左右に 4% ほどの余白をとり、外側に淡灰の地を見せる。
• 写真は列の幅いっぱいに置き、見出しを重ねる。
• BEFORE/AFTER は縦に並べ、間に下向きの三角を挟む。
• 購入ボックスは 3〜4 セクションごとに同じものを差し込む。
• 声のブロックは写真・縦書きの吹き出し・本文・MORE の順に並べる。

Elevation & Depth

• 購入ボックスの白いカードには、うっすら影を付ける。
• CTA ボタンには下方向に濃い影を付け、立体的に見せる。
• SNS 投稿のカードは、右下に淡いティール色の板をずらして重ねる。
• それ以外はフラットにし、影を使わない。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と製品は長方形でフル幅。悩みや声の人物は円形に切り抜く。
• セクション境界: 斜めのカット（右上がり・左上がり）と、吹き出しの三角の切り込み。
• CTA は角丸を小さめ（6px 前後）にした横長の長方形にする。
• ラベルは角を立てた長方形の帯にする。
• 吹き出しは不定形の雲型か、尾の付いた四角にする。
• 円形は図解（ベン図）と円グラフに限って使う。

Components

• 購入ボタン（button-primary）: 深紅のグラデーションの横長ボタン。左に白い丸の再生アイコンを置き、影で立体感を出す。
• 特別価格ボックス（price-box）: 白いカードの上部に深紅の帯の見出し。製品写真、取り消し線付きの元価格、大きな赤い価格、割引率の円バッジ、決済ロゴ、色選択、CTA を順に並べる。
• BEFORE/AFTER ラベル（before-after-label）: 写真の左上に置く帯ラベル。BEFORE はグレー、AFTER は深紅で、白い太字を載せる。
• POINT 見出し帯（point-header）: ティールや紺灰の帯の左に、白い斜体の大きな番号と POINT の文字。右に 2 行の見出しを置く。
• 雲型吹き出し（speech-bubble）: 淡灰の不定形の吹き出しで、円形の人物写真と、年代・属性のラベルを組み合わせる。
• 月桂冠 No.1 バッジ（ranking-badge）: 金の月桂冠と王冠で囲んだ円形の実績バッジ。中央に No.1 を明朝体で入れる。
• 縦書きの声（testimonial-vertical）: 人物写真の右に、白地の縦書き 3 行の感想を短冊状に重ねる。下に名前と本文、MORE の矢印を置く。
• FAQ アコーディオン（faq-item）: 淡灰と白を交互にした行。左に Q 番号、右にシェブロンを置く。

Do's and Don'ts

Do - 深紅は購入・価格・強調だけに使い、出しすぎない。 - 男性モデルの写真を大きく使い、見出しを写真に重ねる。 - 効果は数字・グラフ・BEFORE/AFTER で見せる。 - 購入ボックスは、まったく同じデザインで繰り返し置く。 - 各主張の下に、灰色の小さな注釈を添える。 - セクションごとに地の色を変え、斜めの境界で区切る。

Don't - パステルピンクや丸いかわいい装飾は使わない。 - ボタンをピル型にしない。 - 深紅以外の暖色を CTA に使わない。 - 写真に柔らかすぎるフィルターをかけない。 - 見出しを細い明朝体だけで組まない。 - 余白を広くとりすぎて、間延びさせない。

Page Structure

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

1. ファーストビュー（実績と商品の印象をつかむ）: 上部に深紅の実績帯。男性モデルに水しぶきを重ね、白い縦書きの大コピー、No.1 バッジ、3 色の製品を置く。下部に濃い帯の商品名。
2. 購入ボックス（早い段階で購入へ誘導する）: 水しぶきの写真の地に白いカードを置き、深紅の帯、価格、CTA を入れる。
3. 専門家の推薦（権威付け）: グレージュの地に白衣の人物写真。紺灰の縦書き帯でコメントを入れ、No.1 バッジを添える。
4. SNS の口コミ（社会的な証明）: グラデーション枠の見出しに、投稿カードのスライダーとドットのナビを付ける。
5. 満足度（数字で納得させる）: 斜線で挟んだ見出しと、大きな水色の円グラフに白い数字。
6. 悩みの提起（女性の本音）（周りの目を意識させる）: モーヴの地に、円形の人物写真と雲型吹き出しを 3 つ交互に並べる。
7. 3 大技術（機能の要約）: メタリックグレーの地に製品写真。右に番号付きで 3 項目を区切り線で並べる。
8. BEFORE/AFTER（効果の実証）: 肌のアップ写真を縦に 2 枚並べ、帯ラベルと下向きの三角でつなぐ。
9. お客様の声（体験の共感）: 人物写真に縦書きの感想、本文、MORE、BEFORE/AFTER を何人分も繰り返す。
10. 間違ったケアの提起（問題意識を持たせる）: チャコールの石目の地に、円形の写真とティール色や灰色の帯を交互に並べる。
11. 解決策と比較（優位性の提示）: ノート風の図解、ベン図、ティールの面に下線付きの斜体見出し。従来品との比較写真に大きな下向き矢印を添える。
12. 選ばれる 5 つの理由（特長の詳細）: POINT 帯、モデル写真、下線付きの見出し、断面のイラスト、本文の順で 5 回繰り返す。
13. よくある質問（不安の解消）: 中央に Q&A の見出し。縞模様のアコーディオンを 6 行並べる。
14. 最終 CTA とフッター（購入を後押しする）: 購入ボックスを置き、その下に注意事項の小さな文字、リンク、灰色のコピーライト帯。

Imagery

• 20〜30 代の男性モデルを灰色やティールの背景で撮る。上半身裸か白シャツで、目を閉じたケアの場面。
• 製品は白・赤・黒の 3 色を斜めに並べ、金属の光沢を出す。
• 水滴や水しぶきの写真を、FV と購入ボックスの地に使う。
• 肌の毛穴のマクロ写真で BEFORE/AFTER を作る。
• 毛穴の断面や超音波の波紋をフラットなイラストで描く。
• 女性の悩み顔は柔らかい光で撮り、円形に切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP と同じ幅（約 375〜450px）の列を中央に置き、左右を淡灰の地にする。
• PC の左右の地には、淡いグレーの格子状の模様を敷く。
• PC にしても段組は増やさず、縦書きの見出しも維持する。
• 広げる場合は最大 750px までにし、画像は比率を保って拡大する。

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 行書くと起動時に読み込まれる。