DESIGN.md — 紺鼠×橙グラデの酵素サプリ LP（Slate Navy and Orange Enzyme Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、上品・高級、ナチュラル、信頼・誠実
• キーワード: 石目調の紺鼠・オレンジグラデ・明朝の大見出し・野菜の物撮り・菱形の番号バッジ・比較表
• 地の質感: 紺の黒板・石目テクスチャと、生成りの木目・和紙調の地を交互に使う。オレンジは光沢感のあるグラデーション。
• 形: 四角い写真パネルが基本。番号は菱形、成分は円形バッジ、帯見出しは長方形。
• 温度感: 紺の寒色をベースに、オレンジと野菜の色で温かみを差す。

Colors

• 地の色は紺の石目、白、生成り、淡グレーの順に交互に切り替えて、セクションを区切る。
• オレンジは帯見出し・番号バッジ・数字の強調だけに使い、グラデーションで光沢を出す。
• 数字の強調はオレンジからゴールドへのグラデ文字にする。紺地の上ならゴールドが映える。
• 3 つの成分カードはヘッダーを茶・青・炭の色違いにして、成分ごとに色分けする。
• 本文中で強調したい語は赤寄りのオレンジ文字にする。
• 比較表は、項目列を濃紺、自社列をクリーム地に金枠、他社列を白地にグレーの見出しで作る。
• badge-diamond-number は文字 #FEFEFE × 背景 #E0963C のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A6671A、4.55:1）を使う。
• band-heading は文字 #FEFEFE × 背景 #E0963C のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A6671A、4.55:1）を使う。
• circle-point は文字 #C9A24E × 背景 #334553 のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• pill-callout は文字 #FEFEFE × 背景 #E0963C のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A6671A、4.55:1）を使う。

Typography

• 大見出しは明朝にし、助詞は小さく、キーワードを大きくしてジャンプ率をつける。
• 数字は欧文セリフで大きく組み、単位は和文で小さくする。
• キーワードはかぎ括弧でくくり、下に黄色のマーカーを引く。
• 見出しの下には波線か細い線を添える。
• 本文は中央揃えで 2〜3 行にまとめる。
• 飾りとして筆記体の欧文を大きく薄く敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分バッジだけ 3〜4 列で並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真パネルは左右 5% の余白を取り、ほぼ全幅で置く。
• 各こだわりセクションは、番号バッジ→見出し→本文→写真の順に組む。
• 成分の写真帯は高さをそろえて縦に積み、左下か右下にラベルを置く。
• FV は大コピーを上に置き、商品パッケージを左、人物を右に配置する。
• 3 つの訴求ポイントは＋記号でつないだ円形を 3 つ横に並べる。

Elevation & Depth

• 写真パネルの右下に薄いグレーの影をずらして落とす。
• 説明カードは白地にやわらかい影をつけ、写真に重ねる。
• 円形バッジは内側に淡いグラデをかけて立体感を出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 四角形の全幅パネル。成分を見せるときは円形に切り抜く
• セクション境界: 直線で切り替える。オレンジの面へは下向きの矢印と液体のしずくでつなぐ
• こだわり番号はオレンジグラデの菱形にする。
• 吹き出しは雲形の暗いグレーにする。
• 比較表の自社列は角丸の金枠で囲む。
• 帯見出しは角のない長方形か、ピル型の吹き出しにする。

Components

• こだわり番号の菱形（badge-diamond-number）: オレンジグラデの菱形に、小さい見出しと数字を白抜きで入れる。
• オレンジの帯見出し（band-heading）: 短い強調語を、横長のオレンジ帯に白い文字で入れる。
• 訴求の円形（circle-point）: 紺地の上に白線の円を置き、ゴールド文字で特長を入れる。円同士は＋でつなぐ。
• 成分カード（ingredient-card）: 色違いのヘッダーに明朝の見出しと 2 行の説明を入れ、下に写真を続ける。
• 成分の円形バッジ（ingredient-ball）: 生成りゴールドのグラデをかけた球体に、成分名を入れる。
• 悩みの吹き出し（speech-cloud）: 暗いグレーの雲形に白文字で、悩みを短く入れる。
• ピル型の前置き吹き出し（pill-callout）: オレンジグラデのピルにしっぽを付け、見出しの前置きを入れる。
• 比較表（comparison-table）: 濃紺の項目列、金枠の自社列、グレーの他社列で作る。行の区切りは点線。

Do's and Don'ts

Do - 野菜や素材の写真を画面いっぱいに使い、色の豊かさを見せる。 - 大事な数字は大きなグラデ文字にする。 - こだわりセクションには必ず菱形の番号を付ける。 - 紺地と明るい地を交互に置いて、リズムを作る。 - 強調語には黄色のマーカーかオレンジ文字を使う。

Don't - オレンジを本文の地に大きく使いすぎない。 - 見出しを全部ゴシックにしない（明朝を残す）。 - 純粋な黒の地は使わない。紺か炭色にする。 - 写真パネルに大きな角丸をつけない。 - 原色の赤や青を強調色に追加しない。

Page Structure

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

1. ファーストビュー（商品とコンセプトを一目で伝える）: 淡いグレーの地に、オレンジのグラデ大コピーを置く。下にパッケージと女性の写真を並べる。
2. 特長サマリー（主な成分の数と 3 つの強みを示す）: 紺の石目地に、オレンジの帯、大きな数字の見出し、3 つの円を＋で並べる。下端に野菜写真を置く。
3. 必要性の説明（成分が必要な理由を伝える）: 生成りの地に明朝の問いかけ見出しを置き、続けて体の写真に暗い帯のテロップを重ねる。
4. 悩みの提起（不調のサインに共感してもらう）: モノトーンの人物写真に雲形の吹き出しを 3 つ置き、オレンジの帯で結論を示す。
5. 解決の提案（商品による新しい習慣を提案する）: 矢印としずくでオレンジグラデの面につなぎ、白い明朝の大コピーを置く。
6. こだわり1（主成分の製法を伝える）: 野菜写真の上に菱形の番号を置き、紺の石目地に見出し、波線、本文、4 分割の写真を並べる。
7. こだわり2（3 つのサポート成分を紹介する）: 淡いグレーの地に、筆記体の飾り文字と、色違いヘッダーの成分カードを 3 枚縦に積む。
8. イメージ訴求（成分の相性の良さを情緒的に伝える）: 緑がぼけた背景に女性の写真を置き、明朝の見出しに波線を添える。
9. こだわり3（その他の配合成分を並べて見せる）: 木目の地に写真帯を 4 本積み、「さらに」の後に円形バッジを並べ、合計数をマーカーで強調する。
10. こだわり4（安全性と品質管理を伝える）: 白〜淡い青の地に工場の写真を置き、説明カードを重ねる。
11. 比較表（他社より優れている点を示す）: ピル型の吹き出し、明朝の見出し、パッケージ画像、金枠の自社列がある表を並べる。

Imagery

• 色とりどりの野菜を上から、または斜めから物撮りし、紺の石板の上に敷き詰める。
• 素材は器に入れて、明るい自然光で撮る。
• 白いタンクトップの女性を、白背景で明るく撮る。
• 悩みのパートは、彩度を落としたモノトーン寄りの人物写真にする。
• 工場の写真は青みのある清潔なトーンにする。
• 光沢のあるオレンジの液体やしずくを装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP 幅の画像を PC で中央に置く構成なので、PC でも幅 750px 前後の 1 カラムで中央寄せにする。
• PC では左右の余白を、セクションの地の色かテクスチャで塗る。
• SP では成分バッジを 3〜4 列にし、円形 3 つは横並びを保つ。
• 比較表は SP でも 4 列を保ち、文字は 11〜14px にする。

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