DESIGN.md — 深紅×ブロンズの上品な機能性食品 LP（Crimson and Bronze Premium Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 深紅・ブロンズ・明朝体・権威訴求・注釈多め・女性向け睡眠ケア
• 地の質感: 光沢のある赤い面と、メタリック調のブロンズグラデーション。写真は柔らかい光のスタジオ撮影
• 形: 角が直線の白カード、ブロンズの円形バッジ、月桂樹で飾った楕円の称号枠
• 温度感: 暖色の赤とベージュが中心。濃紺の夜景で静けさを差し込む

Colors

• 地の色は白を基本に、深紅・濃紺・ベージュ・淡水色をセクションごとに切り替える
• 権威の訴求（日本初・特許など）はブロンズのグラデーション帯や円バッジで見せる
• いちばん伝えたい言葉は赤の明朝で大きく、白地の上に置く
• 赤い面の上は白文字だけにし、ブロンズや黒は重ねない
• 注釈は灰色の小さな文字で、各ブロックの直下にまとめる
• title-badge-bronze は文字 #F7FAFD × 背景 #938077 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#806E66、4.62:1）を使う。
• circle-badge は文字 #F7FAFD × 背景 #938077 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#806E66、4.62:1）を使う。

Typography

• 見出しは明朝で字間を広めにとり、上品に見せる
• 見出しの上に、字間を大きく空けた英字の小ラベルを添える
• 本文はゴシック体で、行間は約 1.9 と広くとる
• 強調語は文字サイズを大きくし、色を赤かブロンズに変える
• 主張には必ず小さな※印の上付き文字を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、横並びは称号カード 2 個か円バッジ 3 個まで
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに背景色を全幅で切り替える
• カードは画面幅の約 90% にして中央に置く
• 各ブロックの直下に注釈エリアを置く
• 比較は 2 枚の写真カードを等号で結んで見せる

Elevation & Depth

• 影はほぼ使わず、平面で見せる
• 白カードは細い枠線か、地の色との差で浮かせる
• 円バッジにはごく薄い外側のリングを付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 商品写真は角丸なしの四角か切り抜き。人物は腰から上を切り抜いて枠からはみ出させる
• セクション境界: 境界は直線で背景色を切り替える。ブロンズのグラデーション帯で区切る
• カードとボックスは角丸なしの直角
• 特長は円形のブロンズバッジで見せる
• 称号は月桂樹付きの楕円枠か、ピル型の赤バッジにする
• 口コミの見出しは片側だけ丸いタブ型の帯にする

Components

• ブロンズの称号カード（title-badge-bronze）: 上半分がブロンズのグラデーション帯で、そこに月桂樹と称号を白い明朝で置く。下半分は白地で、説明とブロンズの強調語を入れる
• 月桂樹付きの楕円称号（laurel-oval）: 濃紺地の上に白い細線の楕円枠を置き、月桂樹と大きな明朝の称号を入れる
• ブロンズ円バッジ（circle-badge）: 直径約 110px のブロンズの円に、白い明朝で特長を 2〜3 行入れる。3 個並べるか、写真に重ねる
• 赤いピル型称号（pill-badge-red）: 赤い面に白の細いフチを付け、白い明朝で称号を入れる。横に 3 個並べる
• 赤い届出情報ボックス（info-box-red）: 濃い赤の面に、線で挟んだ見出しと白い本文、届出番号を入れる
• 口コミカード（voice-card）: ベージュの枠線を付けた白カード。見出しはベージュのタブ型の帯に入れ、本文の後ろに年代を右寄せで添える
• FAQ カード（faq-card）: ベージュ地の上に白カードを置き、赤い四角の Q アイコンの下に、質問と回答を中央から書き出す
• 英字ラベル付き見出し（section-label）: 字間を広げた小さな英字の下に、大きな明朝の見出しを置く
• 注釈ブロック（note-block）: 各ブロックの下に、灰色の小さな文字で※注釈をまとめて置く

Do's and Don'ts

Do - 見出しは明朝で、字間をゆったりとる - 根拠を示す主張には必ず※注釈を付ける - 赤・ブロンズ・白の 3 色を軸にし、濃紺は 1 セクションだけにする - 権威の訴求は称号バッジでくり返し見せる - 商品は光沢のある赤いパッケージを主役にして撮る

Don't - ポップな丸ゴシックや手書き文字は使わない - ビビッドな黄色や緑をアクセントに使わない - カードに強い影や大きな角丸を付けない - 注釈を省いて言い切る表現にしない - 赤の面に別の柄や模様を重ねない

Page Structure

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

1. ファーストビュー（効果のコピーと商品を印象づける）: 赤い全面に白い明朝の大コピーを置き、中央に商品パッケージ、その下にロゴを入れる。下部に称号カードを 2 個並べる
2. 注釈（主張の根拠を示す）: 白地に小さな灰色の文字で並べる
3. 唯一性の訴求（機能が公的に認められていることを伝える）: 濃紺の夜空の写真に、月桂樹の楕円称号と白い明朝の見出しを重ねる。下に白い本文ボックスと試験概要を置く
4. 開発者（技術を語る人物で信頼感を出す）: ベージュの枠に白衣の人物を切り抜いて置き、ブロンズ帯に肩書きと氏名を入れる。下に長めの本文
5. 成分の説明（成分の価値を伝える）: 赤い全面に大きな漢字の見出しと泡の写真を置き、下線付きのコピーと、赤い枠の白い結論ボックスを続ける
6. 特許技術（一般品と比較して優位性を見せる）: ブロンズ帯の見出しの下に、写真カード 2 枚を等号でつないで数値を比べる
7. 特長のまとめ（称号と数値で訴求をまとめる）: 赤いピル型称号を 3 個、赤い明朝のコピー、商品写真、ブロンズ円バッジを置き、最後に赤い届出情報ボックス
8. 食べ方（摂り方と味を伝える）: 淡い水色地に明朝の見出しを置き、円バッジと商品写真を組み合わせる
9. お客様の声（使った人の実感を伝える）: 大きな赤い英字の見出しの下に、枠線付きの口コミカードを縦に 2 枚並べる
10. まとめ（最後にもう一度訴求する）: 明るいグレーの光の背景に赤い大コピーと商品を置き、円バッジ 3 個と届出情報ボックスを続ける
11. よくある質問（不安を解消する）: ベージュ地に、Q アイコン付きの白カードを縦に並べる

Imagery

• 商品は赤い光沢パッケージで、赤背景に斜めの光を当てて高級感を出す
• 泡・水滴・ガラスで成分の透明感を表す
• 開発者は白衣で、話している最中のような手振りの写真を切り抜く
• 夜空と木立の静かな風景で睡眠を表す
• 明るいグレーの光と植物の背景で清潔感を出す
• 装飾は月桂樹の線画と、細い白線のみ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP 幅に近い 1 カラムの画像主体の構成。SP でもそのまま縦に積む
• PC では中央に約 480〜750px 幅のコラムを置き、背景色だけを全幅に広げる
• 称号カードは 2 列、円バッジは 3 列を SP でも維持する
• 大見出しは SP で 40〜44px、PC で 56px 前後にする

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