DESIGN.md — ベージュ×チャコールの女性向けプロテイン LP（Beige and Charcoal Diet Protein LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、上品・高級、力強い・インパクト、シンプル・ミニマル
• キーワード: ベージュゴールド・チャコール帯・太字の数字訴求・フレーバー別の色帯・比較表・注釈多め
• 地の質感: マットで平らな面。部分的に木目やぼかし写真を背景に敷く
• 形: 角が四角い帯とカード、丸いバッジ、斜めに切った帯、下向き三角のつなぎ
• 温度感: 温かいニュートラル。モノトーン寄りで落ち着いた雰囲気

Colors

• 地は明るいグレー、グレージュ、砂色の 3 段階を交互に使う
• 否定や課題の提示はチャコール帯に白文字で見せる
• 強調したい数字や語はベージュゴールドの文字か、ベージュのマーカー面で目立たせる
• 黄緑は CTA と新商品の訴求だけに使う
• フレーバー紹介の帯は、味を連想させる色の写真を全面に敷く
• 成分表の背景はフレーバーの色に合わせる
• button-primary は文字 #FAFBFB × 背景 #A3D41B のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#617E10、4.5:1）を使う。
• feature-number は文字 #B1A288 × 背景 #FBFBFB のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#837256、4.5:1）を使う。

Typography

• 数字は本文の 2〜3 倍の大きさにし、単位は小さく添える
• 見出しの背面に、薄いベージュの欧文筆記体を重ねる
• 注釈は※番号を付けて小さく、右寄せか下に置く
• 字間はやや広め（0.05em）にする
• 強調する語だけをベージュ色にするか、ベージュのマーカーを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列のグリッドも使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央揃え、本文は左揃え
• 左右の余白は 20px 前後
• 比較は横棒グラフか表で見せる
• フレーバー紹介は全幅の写真帯を縦に並べる
• ポイント紹介は、黒いラベルの付いた白いカードにする

Elevation & Depth

• 基本は影なしの平面
• 商品のパッケージ写真には、柔らかい落ち影を付ける
• 成分表のカードは影なしで、地の色との差で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 全幅の角型。円形にくり抜いた写真や丸いバッジも使う
• セクション境界: 斜めのカット、下向き三角の吹き出し、上部を半円にした「さらに」の見出しタブ
• バッジは正円にし、細い白線の縁を付ける
• ラベルは角型か、片側を斜めに切った帯にする
• CTA だけをピル型にする

Components

• お試し CTA（button-primary）: 黄緑のピル型ボタン。右端に矢印を付ける
• 別商品への誘導ボタン（button-secondary）: 白地のピル型に黒文字と三角アイコン
• 特長の丸バッジ（badge-circle）: ベージュの正円に白文字。3〜4 個を横に並べる
• 課題提示の帯（dark-band）: チャコールの全幅帯に白い太字の大見出しを置く
• 他社比較の表（compare-table）: 自社の列だけをベージュ地にし、数字を大きく見せる
• ポイントカード（point-card）: 黒い斜めカットのラベルと、白い本文カードの組み合わせ
• 特長の番号見出し（feature-number）: 円の中に番号を入れ、その横に大きな見出しを置く。背面に筆記体を重ねる
• FAQ 項目（faq-item）: Q はベージュの帯に白文字、A は地の上に本文で答える

Do's and Don'ts

Do - 大きな数字で効果量を示す - ベージュとチャコールの 2 色を軸に組み立てる - 訴求の主張には注釈番号を添える - フレーバーごとに色の違う全幅の写真帯にする - 見出しの背面に筆記体を薄く重ねる

Don't - CTA と新商品以外で黄緑を使わない - 角丸を大きくしすぎない - 明るい原色を地の色に使わない（フレーバー帯は除く） - 見出しを細い書体にしない - グラデーションを多用しない

Page Structure

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

1. ファーストビュー（理想の体型を想起させる）: 空を背景にした女性のポーズ写真に太字コピーを重ね、下に丸バッジを 4 つ並べる
2. 成分の解説（必要な栄養を説明する）: クリーム色の地に、黒い枠線で囲んだ解説ボックスを置く
3. 悩みの提起（食事やサプリで摂る難しさを示す）: チャコール帯の左に写真、右に白文字を置く 2 段構成
4. 解決の提示（1 杯で摂れることを示す）: 商品の周りを成分ラベルで囲む
5. 数値の比較（たんぱく質の不足量を示す）: ベージュの横帯で数字を並べ、比較表で示す
6. 味のこだわり（美味しさの根拠を伝える）: 砂色地に欧文の大見出しを置き、黒い丸ポイントとカードで説明する
7. 無添加・安心（体への安心を伝える）: 斜線入りの丸アイコンと、素材写真の帯
8. フレーバー紹介（味の選択肢を見せる）: フレーバーごとに色の違う全幅写真帯を並べ、欧文の味名を縦線で挟む
9. 特長 3 つ（選ばれる理由を示す）: 番号見出し、表、横棒グラフを、ぼかした写真の背景に載せる
10. 使い方（飲み方とアレンジを伝える）: 番号付きの見出し、栄養のボックス、2 列の写真カード
11. アレンジレシピ（活用例を示す）: 生成り地に、材料を点線のリーダーで並べ、黒いラベル付きの手順を置く
12. よくある質問（不安を解消する）: ベージュの Q 帯と、地の上に置いた回答
13. 関連商品・成分表（詳細情報と別商品を案内する）: フレーバーの色で塗った成分表カードを 2 列に並べる
14. CTA（お試しセットへ誘導する）: グレー地に商品を並べ、価格と黄緑のピル型ボタンを置く

Imagery

• 屋外で青空を背景に撮った、スポーティな女性の写真
• フレーバーの素材とミルクのしぶきを宙に舞わせたシズル合成
• 黒いパウチの商品をやや斜めに置き、落ち影を付ける
• 木目や粉など素材感のある写真を、ぼかして背景に敷く
• シェイカーとグラスを使った、明るい生活感の写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 375〜750px の幅に SP の構成をそのまま置く
• PC では左右の余白に地の色かぼかし写真を敷く
• 成分表カードは PC で 3〜4 列に並べる
• フレーバー帯は PC では写真を左右に広げる

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