DESIGN.md — 黒×ピンク×レモン黄の水しぶきプロテイン LP（Splash Neon Sports Drink Protein LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 力強い・インパクト、スポーティ、清潔・爽やか、クール・先進的
• キーワード: 水しぶき・斜体極太・黒×ネオン・透明感・スポーツ・フレーバー2色
• 地の質感: 水面の光のゆらぎ、気泡、液体スプラッシュの写真質感。地はグラデーション。
• 形: 斜めの帯、平行四辺形のラベル、波形の水面境界。角丸は使わない。
• 温度感: 冷たく爽快。ピンクと黄色で熱量を足す。

Colors

• 地の色は黒→ピンク→黄→白→黒→ピンク→黄→黒の順に切り替えてリズムを作る
• ピンクと黄色は 2 つのフレーバーを表す。各色の面にはその味の写真を置く
• ピンク地の文字は白。黄地・白地の文字は黒
• 強調には、ピンクから黄へのグラデーションの下線や棒グラフを使う
• 黒地では見出しの 1 文字だけを黄色にして目を引く
• ピンク・黄の面は、上を明るく下を濃くした縦グラデーションにする
• chart-compare は文字 #EC5189 × 背景 #FDF7AC のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D9185D、4.5:1）を使う。

Typography

• 見出しは極太で、-10° 前後の斜体（skew）をかけて勢いを出す
• 数字は見出しより 1.5 倍ほど大きくする
• 見出しは 2 行に分け、2 行目を右にずらして段差をつける
• 英字は大文字のみ使う
• 本文は細身で行間を広く取り、見出しとの差をはっきり付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストを左右に分けた 2 分割を挟む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは中央寄せ、本文は左寄せにする
• 商品写真は画面端からはみ出させて配置する
• 特長は POINT 番号＋グラデ下線＋太字の縦リストにする
• 写真ブロックは左右にずらしながら交互に並べる

Elevation & Depth

• 商品パッケージに強めのドロップシャドウを付ける
• カードは影なしのフラットにする
• 見出しには影を付けず、地とのコントラストで目立たせる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と果物は切り抜き。シーン写真は長方形にし、斜めの帯ラベルを重ねる
• セクション境界: 水面の波形の液体スプラッシュ、または斜めの直線で区切る
• ラベルは平行四辺形の黒帯か白帯にする
• 成分表のカードだけ角丸 12px にする
• 丸は、黒い円形の吹き出しバッジにだけ使う

Components

• 斜め帯ラベル（label-skew）: 平行四辺形の白帯や黒帯に、斜体の太字を載せたラベル
• グラデ下線の特長行（feature-bar）: アイコン＋太字の訴求の下に、ピンクから黄へのグラデ線を引く
• POINT 番号リスト（point-list）: 小さな POINT 番号の下にグラデ線、その下に太字の要点を置く
• 黒丸の吹き出しバッジ（badge-circle）: グラフの右上に置く、数値強調の黒い円
• 比較棒グラフ（chart-compare）: 淡黄の地に、グレーのバーとグラデのバーを並べる
• フレーバー名見出し（flavor-title）: 大きな英字＋縦線＋小さな和名の横並び
• 成分表カード（nutrition-card）: 黒地に置いた白い角丸カード。2 列の表で、行地はグレーにする

Do's and Don'ts

Do - 地の色を切り替える境界には、水しぶきか斜め線を入れる - 見出しは必ず極太の斜体にする - フレーバーの色と果物の写真を対応させる - 強調はグラデの下線と特大の数字で行う

Don't - 淡いパステルや柔らかい丸ゴシックを使わない - 角丸のカードを多用しない - 細い明朝体の見出しを使わない - 水平だけの平板な境界を続けない

Page Structure

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

1. ファーストビュー（商品とフレーバー 2 種を一目で見せる）: 左を黄、右をピンクに斜めで塗り分けた水面の上に、商品 2 袋・果物・氷を置く。上に黒帯の斜めコピー、下に英字の特大ロゴを入れる
2. コンセプト訴求（新しいカテゴリーであることを宣言する）: 黒地に白帯ラベルと白の極太見出しを置き、1 文字だけ黄色にする。水しぶきの写真を添える
3. 特長の要約（3 つの特長を並べる）: 黒地に、線画アイコン＋太字＋グラデ下線の行を 3 本並べる
4. 商品とは（商品の概要と悩みの解決を伝える）: 上端を波しぶきで区切ったピンクのグラデ地。斜体見出しと、商品写真＋本文の 2 分割を組む
5. 成分の特長（原料と配合の根拠を示す）: 黄色のグラデ地に、見出し・本文・比較グラフ・ボトル写真を交互に配置する
6. ポイントまとめ（要点を番号付きで整理する）: 白地に斜め見出しを置き、POINT リストと大きな商品写真を重ねる
7. 利用シーン（飲む場面を具体的に示す）: 暗いジムの写真を地にして、写真ブロックと斜め帯ラベルを左右交互に配置する
8. フレーバー紹介（味ごとの特徴を伝える）: ピンク、黄の斜め区切りのブロック。英字の大見出し、商品、果物を散らし、名前と短い説明を置く
9. 成分表（原材料と栄養成分を開示する）: 黒地に白い角丸カードを 2 枚置き、2 列の表を入れる
10. フッター（ブランドを締めくくる）: 黒地の中央に白の英字ロゴを置く

Imagery

• 透明な液体が跳ねる水しぶきを切り抜いて、境界や背景に使う
• 水面に光がゆらぐコースティクス模様を地のテクスチャにする
• 果物のカットと氷を、宙に浮いたように散らす
• 商品パッケージは浮かせて少し傾け、影を付ける
• ジムでのトレーニング写真は暗めのトーンにする
• アイコンは白い線画のシンプルなものにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅 1000px 前後で中央に寄せ、背景の色面は全幅に広げる
• PC では写真とテキストの 2 分割を 1:1 にする
• 見出しは PC で 1.4 倍ほどにし、斜体は保つ
• 成分表カードは PC で 2 枚を横に並べる

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