DESIGN.md — 銀灰と淡い温冷グラデの美容家電 LP（Cool Silver Mist Beauty Appliance LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、清潔・爽やか、クール・先進的、情報量多め・訴求型
• キーワード: ブルーグレー・明朝の大見出し・マットブラック製品・温冷グラデ・数値バッジ・比較写真
• 地の質感: 霧がかった白〜銀灰のグラデ地に光の筋や虹色のフレアを薄く重ねる。ツヤのある質感
• 形: 円形バッジと角丸なしの矩形写真が中心。ラベルは小さな矩形帯
• 温度感: やや寒色寄り。ピンクと水色で温冷を表す

Colors

• 白とごく淡いブルーグレーを交互に使い、セクションの切り替えはグラデで柔らかくつなぐ
• 数値バッジ・ラベル帯・比較の自社側はスレート色（primary）に白文字
• 温冷の訴求だけはピンク→水色のパステルで、ほかの場面には使わない
• 実績・メディアの区画だけゴールドと生成り地で格を出す
• 悩み提起は濃紺グレーの暗い地に白文字を置き、前後と対比させる
• 赤は CTA と注意喚起だけに使う

Typography

• 見出しは明朝で字間を広めにとり、中央に揃える
• 見出しの中では強調語だけ 1.3〜1.5 倍に大きくし、助詞は小さくする
• 数値はセリフ体を大きく、単位と『約』は小さく添える
• 本文と注釈はゴシックの細字で控えめにする
• 英字の小ラベル（POINT・review など）はセリフ体の小文字を見出しの上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較写真・機能カードは 2 列、乾燥時間などは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で裁ち落とし、テキストは中央揃えで上下に十分な余白をとる
• 比較写真は左右 2 枚を並べ、下に Before/After の帯を付ける
• 数値バッジは写真の端に重ねて置く
• 注釈は該当ブロックの直下に小さく入れる
• POINT 01〜03 の連番で特長を区切る

Elevation & Depth

• 影はほぼ使わず、色面とグラデで階層を作る
• 円形の白い特長バッジにはごく弱い影を付ける
• テキストを載せる帯はスレート色の半透明で写真に重ねる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。全幅の裁ち落としと 2 列グリッドを使い分ける
• セクション境界: 直線とグラデで切り替える。悩みセクションの下端だけ浅い V 字
• 数値・特長は正円バッジで見せる
• ラベルは角丸なしの細い矩形帯
• 使用方法の POINT 行は角丸 24px の淡いグレーのピル
• CTA は角丸 4px 程度の矩形

Components

• 赤グラデ CTA（button-primary）: 全幅に近い赤いボタン。星アイコンと右向き三角を付ける
• 数値の円バッジ（badge-number）: スレート色の正円に白で『約＋大きな数値＋単位』を入れる
• 白い特長の円（badge-feature）: 白い正円に明朝で 2 行の特長語。3 つを三角形に並べる
• 月桂樹の実績（laurel-stat）: ゴールドの月桂樹で大きなセリフ数値を挟み、下に注釈を添える
• Before/After 比較（compare-pair）: 2 枚の写真を並べ、下にグレーとスレートの帯ラベル。間に三角矢印を置く
• モニターの声カード（review-card）: 淡いピンク〜水色の細枠カード。見出し・本文とアバターの丸イラストを左右交互に配置
• 悩みチェックリスト（checklist-dark）: 暗い地に白のチェック丸アイコンと罫線で 6 項目を並べる
• POINT 連番（point-label）: 小さな英字と大きなセリフの 2 桁数字を薄いグレーで中央に置く
• こだわり番号枠（number-box）: 細枠の正方形に小ラベルと 2 桁数字。右に明朝の見出しを置く
• グラデのピル見出し（pill-heading）: ピンク→水色の淡いグラデをピルに入れ、中央に小見出し

Do's and Don'ts

Do - 見出しは明朝で字間を広くし、たっぷりの余白で上品に見せる - 機能ごとに数値バッジ・比較写真・注釈の 3 点をそろえる - 製品はマットブラックで、明るい霧状の背景に浮かせる - 温冷の表現はピンクと水色のパステルグラデに限る - 実績・メディアはゴールドで、ほかと区画を分ける

Don't - 原色や彩度の高い色を地に使わない - 角丸の大きいポップなカードを多用しない - 見出しを太いゴシックにしない（POINT 行や機能名の小見出しは除く） - 注釈なしで数値を誇張しない - 赤を CTA と注意喚起以外に使わない

Page Structure

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

1. ファーストビュー（商品と主要な効能を一目で伝える）: 銀灰グラデの地に製品を斜めに 2 台。明朝の大コピー、数値バッジ、白丸の特長 3 つ、保証の帯を置く
2. 主機能の導入（核となる技術を印象づける）: 風の光の筋の写真と、ピンク・水色の大文字を背景にした明朝見出し。髪の写真へつなぐ
3. 開発ストーリー（シリーズの実績と開発の経緯を語る）: シリーズ製品の写真、月桂樹の出荷台数、鉤括弧付きの本文、大きな『誕生』の文字
4. ビフォーアフター＋CTA（仕上がりの違いを見せて登録へ促す）: 髪を左右分割した写真にラベル帯。下に注釈と赤い CTA
5. 実績・メディア（信頼性を示す）: ゴールドの月桂樹で数値 3 つ。生成り地にテレビ番組表と雑誌の表紙コラージュ
6. 注意喚起（模倣品への注意）: グレーのボックスに赤ラベルと明朝の 1 行
7. 悩みの提起（読者の悩みに共感する）: 暗い地にチェックリストを 6 項目。V 字で解決の写真へ移る
8. 解決提示（商品で叶う体験を示す）: 女性モデルが髪を乾かす全幅写真に、明朝の大コピーを重ねる
9. お客様の声（使用感の裏付け）: 細枠カード 3 枚。アバターを左右交互に置き、比較写真を添える
10. 特長（機能ごとの根拠を示す）: POINT 01〜03 で区切る。各特長に全幅写真、数値バッジ、他社比較、グラフ、注釈
11. 使いやすさ・こだわり（重さ・操作・付属品など細部を訴求する）: ラベル帯付きの見出し、番号枠のリスト、2 列の機能カード、イラストの比較
12. おすすめの人・使い方（利用シーンを具体的に示す）: 引用符付きの見出し、写真 4 枚のグリッド、手順写真、POINT のピル、乾燥時間を 3 列
13. セット内容・ギフト（購入前の確認とギフト需要の取り込み）: 白地に同梱物の物撮り、黒丸の箇条、白い円 3 つ、スレート色のギフト帯

Imagery

• 製品はマットブラック。白〜銀灰の明るい背景で、反射光を活かして撮る
• 風は青白い光の筋、ピンク・水色の霧、虹色のフレアで表す
• モデルは黒髪ロングの女性。白い服と自然光で、目を閉じた心地よい表情
• 比較写真は同じ構図で左右に分割し、グリッド背景や毛先のアップを使う
• 髪のミクロ表現は 3D 風に描き、キューティクルと水滴を見せる
• 疲れやすさの比較は細い線画イラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の縦組みをそのまま中央 600〜750px 幅の 1 カラムに収めるのを推奨
• 全幅写真や背景グラデは画面幅いっぱいに広げ、テキストは最大 720px にする
• 比較写真や機能カードの 2 列は PC でも 2 列のまま、余白を広げる
• 大見出しは SP の 1.3 倍程度に抑え、字間の広さは保つ
• CTA は最大 480px 幅で中央に置く

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