DESIGN.md — 青紫グラデ×金の美脚EMS家電LP（Cool Lavender Gold Fitness Device LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 上品・高級、クール・先進的、清潔・爽やか、情報量多め・訴求型
• キーワード: 青灰の地・青緑→紫グラデ・金の数字・明朝の大見出し・六角形・電気エフェクト
• 地の質感: 白から淡い青灰へ流れるグラデーション地。紙っぽさのないマットで清潔な質感。
• 形: 四角いカードと帯見出しが中心。六角形と円形のアイコンをアクセントに使う。角丸は小さめ。
• 温度感: 寒色寄り（青灰・紫）に、金色で温かみと高級感を少し足す

Colors

• 地は白から淡い青灰へのグラデーションを基本にし、全体を寒色で静かにまとめる
• 見出し帯は青緑から紫への横グラデーションで塗る
• 数字や実績、強調したい一語は金色にする
• 本文の中で強調する部分は、金文字にするか淡い紫のマーカーを敷く
• 赤はCTAボタンだけに使う
• 濃い紺のパネルは悩み・デメリットを見せる場所と製品写真にだけ使う

Typography

• 大見出しは明朝体にし、強調する語だけをひと回り大きくして金か紫で色を変える
• 助詞やつなぎの言葉は小さくして、文字の大きさに強弱をつける
• 数字は欧文セリフ体を極大サイズで使い、単位は小さく添える
• 本文はゴシック体で字間を広めにとる
• POINT番号は英字の小さいラベル＋細い数字＋短い下線で組む
• 注釈は見出しや数字のすぐ下に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードの中は 2 列（写真と本文）を使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション冒頭は中央揃え。導入文 → 大見出しの順に積む
• 写真は端から端まで全幅に置き、文字だけのブロックと交互に並べる
• 白いカードは左右に約6%の余白をとり、淡い影で浮かせる
• 特長の一覧は六角形を2列に並べる
• セクションのつなぎに下向きの細いシェブロン（二重）を置く

Elevation & Depth

• 白いカードには、ぼかしの大きい薄い青灰の影をつける
• 六角形カードには柔らかい影をつけ、地から浮かせる
• CTAボタンには軽い落ち影をつける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角く切り抜き、全幅で置くか、カード内に2列で並べる。人物は円形に切り抜くこともある
• セクション境界: 直線で区切り、グラデーションでなめらかにつなぐ。悩み提起の濃いパネルだけは下端を三角にとがらせる
• ボタンと帯は角丸を小さくした長方形にする
• 特長は六角形、効果のアイコンは円形にする
• 見出し帯は横長で、左右いっぱいかやや内側に置く

Components

• 赤いCTAボタン（button-primary）: 星マークと右向き三角を添えた、横長の赤いボタン
• 月桂樹の実績表示（laurel-badge）: 金の月桂樹で金の数字と順位を左右から囲む
• グラデーション見出し帯（gradient-band）: 青緑から紫へのグラデーション帯に白抜き文字を載せる
• 六角形のポイントカード（hex-point-card）: 白い六角形の中にPOINT番号と明朝の見出しを入れ、2列で並べる
• レビューカード（review-card）: 上部の青紫帯に星評価・日付・タイトルを入れ、イラストのアイコンをはみ出させる。本文の強調部分は金文字
• POINT番号（point-number）: 小さな英字ラベル、細いセリフ体の数字、短い横線を縦に重ねる
• 枠線ラベル（outline-label）: 細い枠線で囲んだ小さな見出しラベル
• 注意喚起ボックス（attention-box）: 灰色の地に濃い赤のラベルを置き、その下に明朝の注意文を入れる
• マーカー強調（marker-highlight）: 強調する語の下半分に淡い紫の帯を敷く

Do's and Don'ts

Do - 見出しは明朝体にし、キーワードだけを金か紫で大きくする - 数値や実績は月桂樹と金色で権威づけする - 製品写真には青白い電流のエフェクトを重ねる - 背景は白と淡い青灰を交互にして、リズムをつくる - 注釈は※で小さく、こまめに入れる

Don't - 暖色の背景を広い面で使わない - 赤をCTA以外に使わない - 丸ゴシックやポップな書体を使わない - 角丸の大きいピル型ボタンにしない - 強い原色の面を見出し帯に使わない

Page Structure

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

1. ファーストビュー（使い方の手軽さと効果を一目で伝える）: ソファでくつろぐ人物と製品の写真に、明朝の大コピーと六角形のバッジ3つを重ねる。下に愛用者数を大きな数字で見せる
2. 実績・ランキング（売れていることで信頼させる）: 金の月桂樹と金の数字を縦に並べ、ランキングのキャプチャ画像と赤いCTAを置く
3. 新機能の訴求（従来品からの進化を伝える）: 製品写真の上に、白い六角形を5つ（3つと2つの2段）並べる
4. 注意喚起・実績・メディア（模倣品への注意を促し、信頼を補強する）: 灰色のATTENTIONボックス、出荷台数・評価の月桂樹、雑誌のコラージュを順に置く
5. 著名人の声（第三者の推薦を見せる）: 人物写真に明朝コピーを重ね、白枠のコメントボックスを載せる
6. 満足度・お客様の声（利用者の実感を伝える）: 金のリングで満足度を見せ、青紫帯付きのレビューカードを3枚並べる
7. 悩みの提起（原因を示して自分ごとにさせる）: 悩みの写真4枚の中央に、下端のとがった紺のパネルを重ね、原因を白抜き文字で見せる
8. 解決提示（続けやすさを解決策として示す）: シェブロンでつなぎ、金の強調語を入れた見出しと、真上から撮った製品写真を置く
9. 4つのポイント（特長をまとめて見せる）: グラデ帯の見出しの下に、六角形を2列×2段で並べ、中央に製品を置く
10. ポイント詳細（特長を一つずつ掘り下げる）: POINT番号ごとに大きな数字・全幅の写真・白いカードを使い、グラフやモードのタイル、部位の図解を入れる
11. 専門家の声（開発者として権威づけする）: 人物写真と、マーカー強調を入れた本文を横並びのカードにする
12. 使い方・利用シーン（生活に取り入れる様子を想像させる）: 写真と帯付きの説明を交互に置き、1日の時間帯ごとのシーンを2列のタイルで並べる
13. 操作手順（手軽さを最後に念押しする）: グラデ帯の見出しの下に、番号付きの2ステップを写真つきで横に並べる

Imagery

• 明るい自然光が入るリビングで、くつろぐ女性を撮る
• 黒い製品は、白い幾何学線の模様を見せて真上や斜めから撮る
• 脚や製品のまわりに、青白い電流のリングやスパークを合成する
• 肌や手元のアップは柔らかく、ハイキーな色調にする
• 線画のイラストは淡い紫・青緑の単色で描く
• 図解は淡いピンクの脚に血管を描き、オレンジの矢印で順番を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像は無いため、推奨として書く
• PCでは本文の幅を最大約750pxにして中央に寄せ、左右には淡い青灰の地を見せる
• 六角形のポイントは、PCでは4列の横並びにしてもよい
• レビューカードとシーンのタイルは、PCでは3〜4列に広げる
• 全幅の写真は、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 行書くと起動時に読み込まれる。