DESIGN.md — コンクリ灰×金の映画調サプリLP（Cinematic Concrete Gray Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 力強い・インパクト、上品・高級、情報量多め・訴求型、信頼・誠実
• キーワード: 映画調の写真・コンクリート質感・金色の数字・明朝の大見出し・六角形パネル・白いカプセル
• 地の質感: 前半はざらついたコンクリートや暗い写真で重く、後半はうっすら影のある白・ライトグレーで清潔にする
• 形: 六角形の悩み・成分パネル、吹き出し、角丸カード、金色のピル型ボタン、ギザギザ縁の割引バッジ
• 温度感: 前半は冷たく暗い。後半は白に金とベージュを足した、少し温かみのある高級感

Colors

• 前半の悩みパートはコンクリ灰と暗い写真にして重い空気を出す
• 解決パート以降はライトグレーと白の地に切り替え、明るくする
• 金は数字・割引率・ランキングにだけ使う
• 黒褐色の帯ラベルはセット購入カードの見出しにだけ使う
• 赤文字は悩みのキーワードだけ。ほかでは使わない
• ネイビーは品質・認証を説明する帯にだけ使う
• discount-badge は文字 #EFF3F7 × 背景 #C9A866 のコントラスト比が 2.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#876A30、4.56:1）を使う。

Typography

• 見出しは明朝の太字にする
• 数字は単位より1.5〜2倍大きくする
• 強調したい文字の上に傍点ドットを打つ
• 前置きの語は「＼ ／」で挟み、小さく添える
• 悩みと割引のバッジは太いゴシックにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表は商品画像と数値の 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真セクションは全幅で、余白を挟まずにつなぐ
• 比較行は破線で区切る
• 悩みパネルはジグザグに 3 つ並べる
• セット購入のカードは白い角丸カードにし、上辺に黒褐色のラベルを重ねる
• 見出しは中央揃えにする

Elevation & Depth

• 白カードには薄い影を付ける（0 2px 8px rgba(0,0,0,.08)）
• 六角形パネルには影を付けて浮かせる
• 写真の挿入画像には斜めの影を付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は全幅の矩形で切り抜く。挿入写真は角を斜めに落とす
• セクション境界: 直線の切り替えが基本。一部は斜めや曲線で切り替える
• 悩みと成分は六角形のパネルにする
• 割引バッジは歯車のようなギザギザの円にする
• 吹き出しは白い角丸に三角のしっぽを付ける
• 黒の帯見出しはピル型にする

Components

• クーポン取得ボタン（button-primary）: 金色のピル型ボタン。文字の右に「>」を付ける
• 悩み六角パネル（hex-worry）: コンクリ調の六角形に太字で悩みを書く。キーワードは赤文字にし、注意マークを添える
• 転換の吹き出し（speech-bubble）: 白い角丸の吹き出しに傍点付きの短い導入語を書く
• 黒褐色の帯ラベル（label-band）: カード上辺に重ねる見出し帯
• 換算比較行（compare-row）: 商品画像、＝記号、金色や黒の大きな数字を並べ、破線で区切る
• 割引バッジ（discount-badge）: 金のギザギザ円に白い太字で割引率を入れる
• 黒ピル見出し（pill-heading）: 黒いピル帯に明朝の白文字。頭文字だけを大きくする
• 品質説明帯（quality-band）: ネイビー地に白の明朝見出しと注釈を置く
• 組み合わせカード（set-card）: 白カードに商品を＋でつないで並べ、金の破線と「or」の丸で区切る

Do's and Don'ts

Do - 悩みパートは暗く、解決パートは明るくして、明暗の落差を作る - 数字は金色か黒の明朝で大きく見せる - パッケージ画像を何度も登場させ、記憶に残す - 傍点と「＼ ／」で語を強調する - CTA は金のピル型でそろえる

Don't - 明るいビビッドカラーを主役にしない - 見出しを細いゴシックにしない - 赤を CTA に使わない - 白カードに強い影を付けない - 悩みパートに明るい地を使わない

Page Structure

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

1. ロゴヘッダー（ブランドを示す）: 白地の中央にロゴを置く
2. ファーストビュー（実績を示し商品を見せる）: 月桂樹と王冠付きの金色ランキング表記。下部に素材写真と商品パッケージを置く
3. イメージ映像（共感を呼ぶ）: 働く人の映画調写真を3段重ね、白の明朝コピーを載せる
4. 悩みの提起（不調を自覚させる）: コンクリ地に揺れた大文字と六角形の悩みパネルを置く
5. 解決の提示（成分で解決できると示す）: 吹き出しから暖色の人物写真へつなぎ、挿入写真を添える
6. 既存手段の不満（競合の弱点を示す）: 灰地に赤キーワード入りの六角パネルを3つ、ジグザグに並べる
7. 商品の登場（商品を紹介する）: 青い方眼地に白衣の人物と方眼紙風のカードを置く
8. 成分量の訴求（コスパを示す）: 巨大な明朝の数字と、他商品への換算比較行を置く
9. 追加成分（付加価値を示す）: 六角形2つを＋でつなぎ、下に黒ピル見出しを置く
10. 形状と製造（飲みやすさと安心を示す）: カプセル写真の地に枠付きのメリット表示と大見出しを置く
11. 品質認証（信頼を得る）: 研究員の写真、金の認証マーク、ネイビーの説明帯を置く
12. セット購入の案内（まとめ買いを促す）: 笑顔の人物と商品群、組み合わせカードを置く
13. クーポンCTA（購入へ誘導する）: 割引見出し、商品画像、ギザギザバッジ、金ボタンを2段階繰り返す

Imagery

• 人物写真は低彩度・暗めの色調にし、映画のワンシーン風に撮る
• 悩みパートは頭を抱える・考え込むビジネスパーソンにする
• 背景にはコンクリートの質感や黒板を使う
• 素材写真はコーヒー豆や白いカプセルを浮遊させて写す
• 清潔感は白衣の研究者と青白い光で出す
• パッケージは白背景の切り抜きを並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版の画像はない
• PC では中央 480〜600px の縦長カラムに固定し、左右にライトグレーの地を敷く
• 写真の全幅帯はカラム幅に収める
• セットカードは横並びにしてもよい

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