DESIGN.md — 蛍光ピンク×黒の斜め切りスポーツ飲料 LP（Hot Pink Athletic Energy Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: スポーティ、力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 蛍光マゼンタ・極太コンデンス欧文・斜めカット・黒帯ラベル・アスリート・グラデーション
• 地の質感: ピンク地にうっすら斜めのロゴ透かし。ダーク部は有機的な曲線ブロブを重ねる
• 形: 角の立った長方形カード、斜め切りのセクション境界、丸い番号バッジと丸抜き顔写真
• 温度感: 高温でエネルギッシュ。後半の情報部はニュートラルで落ち着く

Colors

• 前半はマゼンタ→オレンジのグラデと純マゼンタ地で熱量を出す
• 中盤のリスク解説は濃紺グレーのダーク地に白文字で空気を切り替える
• 見出しラベルは黒地に白文字の帯で統一する
• ピンクは番号バッジ・吹き出し・「見る」アイコンなど小さな強調にも使う
• 商品情報・FAQ は白地に赤の下線とQマークだけで、落ち着いた配色にする
• オレンジは割引バッジや吹き出しなど、お得さを伝える所だけに使う

Typography

• 英字大見出しは全大文字の極太コンデンスで、直下に黒帯の和文サブを置く
• FV コピーは白の極太斜体で 2 行。少し右上がりに傾ける
• 価格の数字は大きく太く、円・税込は小さく添える
• 本文は太めのゴシックで行間 1.8
• ダーク部の見出しは細めのウェイトで変化をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードとレビューは 2 列
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右 10px 程度まで広げ、画面いっぱいに近く置く
• レビューは上に太い黒線を引き、2 列グリッドで並べる
• 特長は 1 枚を全幅、残り 2 枚を半幅にする
• セクションの頭に英字大見出し＋黒帯ラベルを中央揃えで置く
• 購入カードは FV・特長の後・FAQ の後に繰り返す

Elevation & Depth

• 購入カードと監修者カードには柔らかいドロップシャドウ
• グラフカードは薄いグレーグラデの面に影をつける
• 特長カードは影を使わず黒の 2px 枠だけ
• FAQ・表はフラットにし、線で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形に切り抜き、商品は切り抜きパウチ。イラストは有機的なブロブの上に置く
• セクション境界: 斜めの直線カット。ダーク部の上端は曲線ブロブ
• 番号バッジ・割引バッジは正円にする
• 購入カードは角丸 8px の横長で、右側を黒、左側をピンクのグラデに分ける
• 吹き出し見出しは角丸の矩形に下向きの三角を付ける
• ダーク部の結果タグは紫の細枠で、少し傾けて重ねる

Components

• まとめ買い購入カード（purchase-card）: 数量バッジ、取り消し線の通常価格、矢印、大きな特価を並べ、下段に購入ボタン帯。右側に箱の写真と割引の丸バッジを付ける
• 購入ボタン帯（button-primary）: カード下段の横長帯。白丸の矢印アイコンと白文字を置く
• 英字大見出し＋黒帯（section-heading）: 極太英字の下に、黒地白文字の和文ラベルを重ねて置く
• 番号付き特長カード（feature-card）: 白地に黒枠。左上に黒（後半はピンク）の丸い番号、太字の見出し、本文を置く
• アスリートの声（review-item）: 上に黒い太線。丸い顔写真、黒い競技タグ、所属と氏名、太字のコメント、ピンクの吹き出しアイコン付きリンクを置く
• ピンク吹き出しラベル（speech-label）: グラフカードの上辺に重ねる、ピンクのグラデ吹き出し
• 丸番号（number-badge）: 直径 40px 前後の正円に白い数字
• FAQ アコーディオン（faq-item）: 赤い角丸の Q マーク、質問文、右端に＋。行の間を細線で区切る
• 赤下線見出し（info-heading）: 左寄せの見出しの下に、赤い太線と灰の細線を引く

Do's and Don'ts

Do - FV と特長はピンクのグラデ地に白カードを載せ、斜めに切って次へ続ける - 英字の極太見出しは画面幅いっぱいに大きく組む - 購入カードは何度か繰り返し、毎回同じ見た目にする - ダーク部はフラットなスポーツ人物イラストで、不足したときのリスクを並べる - データはグラフカードに入れ、出典を小さく添える

Don't - パステルや淡い色を主役にしない - 見出しを細い明朝にしない - 購入ボタンをピル型にしない。矩形の帯にする - ピンクとオレンジ以外の派手な色を足さない - 情報部（表・FAQ）にグラデを入れない

Page Structure

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

1. ファーストビュー（勢いのあるコピーで掴み、すぐ購入へ誘導する）: 疾走する選手の写真にマゼンタ〜オレンジのグラデを重ね、白の極太斜体コピー、商品の切り抜き、購入カード 2 つを置く
2. 特長サマリー（3 つの特長を短く示す）: マゼンタ地に英字見出し。黒枠の白カードを全幅 1 枚＋半幅 2 枚で置き、斜めカットで次へ
3. お客様の声（競技者の実感で信頼を作る）: 薄グレー地に、丸写真と競技タグの付いた声を 2 列で並べる
4. 監修者メッセージ（専門家の想いで権威を添える）: ピンクのグラデカードに丸写真とプロフィール。白い本文エリアとおすすめのチェックリストを続ける
5. SNS 誘導バナー（フォローを促す）: ピンク〜オレンジのグラデ横長バナーにスマホのモックを置く
6. リスクの提起（補給しないとどうなるかを示す）: ダーク地にブロブ装飾。イラスト 4 つを 2 列、下向き矢印、紫枠のタグを重ねる
7. データ根拠（グラフで科学的に裏付ける）: グレーのカードにピンクの吹き出し見出し、線グラフ・棒グラフ、出典
8. 特長の詳細（成分と使い方を詳しく説明する）: 白地に黒の区切り線。ピンクの丸番号、黒帯の成分ラベル、商品写真とオレンジの吹き出しを置く
9. 購入 CTA（まとめ買いと単品の購入を促す）: グラデの購入カードを大小 2 つ縦に並べる
10. 商品情報（仕様・成分・アレルギーを開示する）: 赤下線の見出しと、ベージュ見出しセルの表
11. よくある質問（不安を解消する）: 赤い Q マークのアコーディオンを線で区切って並べる
12. 品質・開発者メッセージ（信頼を補強して締める）: 暗い工場の写真に白文字の箇条書き。その後に白地の手紙調の本文と署名

Imagery

• 人物写真はダイナミックな走りを切り取り、マゼンタのグラデを重ねて単色調にする
• 商品は白背景で切り抜いたパウチ。グラデのパッケージを大きく見せる
• 人物の顔写真は円形に切り抜く
• イラストはフラットな人物で、ピンク・紫・水色・黄色を使い、暗いブロブの上に置く
• ピンク地に斜めのロゴ透かしパターンを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV で商品を左、コピーと購入カードを右に置く
• PC では特長 3 枚を横 3 列、レビューを 3 列にする
• PC の監修者は左にピンクの縦パネル、右に本文の 2 カラム
• PC のリスクイラストは 4 列、グラフは 2 列に並べる
• PC の購入カードはまとめ買いと単品を横に並べる
• PC の基本情報表は横長 1 行にまとめる

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