DESIGN.md — 宇宙ネイビー×水色ピンクの集中系サプリ LP（Cyber Neon Gradient Energy Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: クール・先進的、力強い・インパクト、スポーティ、情報量多め・訴求型
• キーワード: サイバー・ネオングラデ・六角形・斜体の極太見出し・宇宙・脳ネットワーク・ビジネスパーソン
• 地の質感: 暗い地は星空や発光する線画ネットワーク。明るい地は薄いグレーの六角形・三角形のモザイク柄と、水色〜ピンクのぼかしグラデ。
• 形: 六角形、斜めに切った帯、正円バッジ、平行四辺形のラベル。
• 温度感: クールな寒色が主体。ピンクで熱量を足している。

Colors

• 前半は濃紺の宇宙背景で没入感を出す。中盤からは白と六角柄グレーの明るい地に切り替える。
• 強調は水色とピンクの 2 色をペアで使う。キーワード 2 語にそれぞれ割り当てる。
• グラデーションは水色→ラベンダー→ピンクの一方向に統一する。
• 暗い地では文字を白にし、ピンクや紫の外側グロウを付ける。
• 明るい地の見出しはチャコール。強調語だけ水色〜ピンクのグラデ文字にする。
• 黒い帯は化学式やキャッチを載せる短いラベルにだけ使う。
• skew-label は文字 #FFFFFF × 背景 #53BEE9 のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#167FA9、4.52:1）を使う。
• timing-ring は文字 #FFFFFF × 背景 #E85BB5 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DA1F96、4.55:1）を使う。

Typography

• 見出しはすべて極太のゴシック体で、右へ 10° 前後傾けた斜体にする。
• キャッチは 1 文字目だけを大きくするなど、ジャンプ率を極端に付ける。
• 暗い地の白見出しには、ピンクと水色の色ずれ（グリッチ風）の影を付ける。
• 欧文ワードは薄い色で大きく敷き、背景の装飾として扱う。
• 数字は日本語より大きくし、単位は小さく添える。
• 注釈は小さいグレーで、右下にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の並びだけ 4 分割の縦長タイル
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画面幅いっぱいの背景で区切る。
• 見出しは中央揃え。成分バッジは左右にジグザグ配置する。
• 比較リストは、左に六角形アイコン、右にテキストと下線を並べる行を縦に積む。
• シーン別ブロックは全幅の写真の上に、円バッジと黒帯見出しを左下に重ねる。
• 余白は詰め気味にして、ビジュアルで画面を埋める。

Elevation & Depth

• 白いバッジには、ピンクまたは水色の柔らかいグロウ（0 0 24px）を付ける。
• 見出し文字は色ずれの影で浮かせる。
• カード型のドロップシャドウはほぼ使わない。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は角丸なしの矩形。並べるときは斜めの切り口で隣と接する。商品は切り抜きで配置する。
• セクション境界: 直線の切り替えが基本。一部は斜めカットや山形（V 字）の境界にする。
• バッジは正六角形か正円にする。
• 強調ラベルは平行四辺形（skew -10°）にする。
• 円バッジには、水色〜ピンクのグラデのリング枠を付ける。
• 角丸のカードは使わない。

Components

• 六角形スペックバッジ（hex-badge）: 白い六角形の中に、短いスペック（含有量・内容量など）を入れる。数字は紫〜水色のグラデ文字。3 つを縦に連ねて配置する。
• 斜め強調ラベル（skew-label）: 平行四辺形の色帯に白い極太の斜体文字を載せる。水色とピンクで対にする。
• 成分円バッジ（ingredient-circle）: 白い正円にピンクのグロウを付け、成分名を極太字で入れる。グラデ地の上にジグザグに配置する。
• 黒帯キャプション（black-band）: 写真の上に重ねる、黒い斜めの帯に白文字のキャッチ。化学式などの小ラベルにも使う。
• 比較リスト行（compare-row）: グレーの六角形の中に線画アイコンを置き、右に小さな悩み文と大きな対象名を並べる。行の下にグレーの線を引く。
• タイミング円バッジ（timing-ring）: グラデのリング枠の円に、時間帯と粒数を白抜きで入れる。写真の左上に重ねる。
• 背景欧文ワード（bg-word）: セクション上部や縦方向に、薄い白・グレーの大きな欧文を敷く。

Do's and Don'ts

Do - 見出しは極太・斜体・中央揃えで、画面幅いっぱいに大きく組む。 - 強調色は水色とピンクのペアで使う。 - 六角形と円のバッジでテック感を統一する。 - 暗い宇宙系の地と、明るい六角柄の地を交互に配置してリズムを作る。 - 人物写真は 20〜30 代のビジネス・学生に絞る。笑顔や集中した表情の自然光写真を選ぶ。

Don't - 暖色（オレンジ・赤・茶）や生成りの地を使わない。 - 明朝体や丸ゴシックを見出しに使わない。 - 角丸の大きいカードや、やわらかいイラストを入れない。 - グラデーションの色を水色〜ピンク以外に増やさない。 - 本文を長文で詰め込まない。2〜3 行で切る。

Page Structure

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

1. ファーストビュー（インパクトのあるキャッチで商品を印象付ける）: 地球と星空の濃紺背景に、グリッチ風の白い極太キャッチと切り抜いた商品写真を置く。右に六角形バッジ 3 つ、下に水色・ピンクの斜めラベルを 2 つ並べる。
2. ターゲット共感（なりたい姿を 2 人の人物で示す）: 人物写真 2 枚を斜めの切り口で並べる。吹き出し状の白ラベルを付け、大きな欧文ワードを重ねる。下にブランド名と、色ラベルで強調した 2 行のコピーを置く。
3. コンセプト（主要な 2 要素の組み合わせを打ち出す）: 発光する人体ネットワークを描いた濃紺背景に、白い六角形 2 つを×記号でつなぐ。下に大きな白い斜体のキャッチを置く。
4. 成分紹介（配合成分を一覧で見せる）: 水色〜ピンクのぼかしグラデに化学構造式と脳の線画を敷く。白い円バッジ 5 つをジグザグに配置し、数字を巨大にした見出しを付ける。
5. 利用シーン写真（幅広い利用者像を見せる）: 笑顔の人物写真を縦長 4 分割で並べ、黒帯キャッチを 2 本重ねる。
6. スペック訴求（主成分の含有量を強調する）: 六角柄グレーの地に、商品写真と巨大な数字の見出しを置く。
7. サブ成分説明（もう 1 つの成分の役割を説明する）: グラデ文字の見出し、黒帯の化学式、ピンク加工した彫像ビジュアル、六角形の説明バッジを組み合わせる。
8. 他製品との比較（既存の代替品の不満を並べる）: 六角形の線画アイコンとテキストの行を 4 つ縦に積む。見出しは色ラベル 2 つを付けて組む。
9. ブランド宣言（手軽さと携帯性をまとめる）: 斜めカットで始まる水色〜ピンクのグラデ帯に、ロゴ型の見出し、短い本文、商品写真と錠剤を置く。
10. 飲み方提案（朝・昼・夜の飲み方を提案する）: 全幅の人物写真を 3 段に積む。各段に円の粒数バッジ、黒帯見出し、白い半透明の帯に載せた説明文を付ける。

Imagery

• 宇宙・地球・星空と、青く発光するポリゴン線画（脳・人体）を組み合わせたサイバー背景。
• 脳のアイコンは白い線と点でつないだワイヤーフレームで描く。
• 人物は日本人の 20〜30 代。スーツ・オフィスカジュアルで、明るい自然光の笑顔を撮る。
• 彫像などのオブジェは、ピンク〜水色のデュオトーンに加工する。
• 装飾として、化学構造式・六角形グリッド・同心円の波紋を薄く敷く。
• 商品は正面から撮り、床面の鏡面反射を付けて切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC で、縦長 1 カラムの画像主体の構成。SP でもそのまま縦に積む。
• SP ではキャッチを 2〜3 行に分け、画面幅の 90% まで大きく組む。
• 六角形バッジは SP では商品の右に縦並びにし、1 つ 80px 前後にする。
• 成分の円バッジは SP では 110〜130px にし、ジグザグ配置を保つ。
• 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 行書くと起動時に読み込まれる。