DESIGN.md — 深紅×金箔の機能性サプリ LP（Crimson Gold Functional Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、信頼・誠実、情報量多め・訴求型、力強い・インパクト
• キーワード: 深紅グラデーション・金箔帯・六角形の切り抜き・試験グラフ・家族の写真・明朝の見出し
• 地の質感: 赤から黒へのグラデーション、光沢のある金、生成りの紙や布の質感を重ねる
• 形: 六角形の写真と赤いパネル、四角い金帯の見出し、ラフな形の写真フレーム
• 温度感: 暖色寄り。赤・金・ベージュで温かく重厚にまとめる

Colors

• ファーストビューと商品訴求は深紅から黒へのグラデーション地で重厚に見せる
• 悩みと家族のシーンは生成りベージュの地にしてやわらかくする
• 成分とデータは白〜薄グレーの地に置き、清潔で信頼できる印象にする
• 見出しの強調語は金帯に白文字、または濃い文字を金帯で囲む
• リスク訴求は黒い地にし、キーワードだけ黄色にする
• グラフ内の注釈は緑の円にして、赤い折れ線と見分けられるようにする
• gold-label-heading は文字 #FAFAF9 × 背景 #B8913F のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8C6F30、4.54:1）を使う。
• graph-bubble は文字 #FAFAF9 × 背景 #2E9E5B のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#26824B、4.59:1）を使う。

Typography

• 大見出しは明朝の極太にし、白文字に影を付けて赤い地で目立たせる
• 強調語だけ文字を大きくし、続く助詞は小さくする
• 数値は太字で大きくし、単位は小さく添える
• 注釈は 10px 前後で詰めて書き、行頭に黒丸を付ける
• 見出しは中央揃え、説明文は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分紹介は写真とテキストを左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の地色を切り替えて区切る
• 成分紹介は六角形の写真と説明を左右交互にずらす
• データは白いカードに収め、上辺にクリップの装飾を付ける
• 家族の写真は少し傾けた白枠で重ねて並べる
• 製品のラインナップは 3 列に並べ、下に枠付きのラベルを付ける

Elevation & Depth

• 商品パッケージの下に金色の光と影を落とす
• データカードには薄いドロップシャドウを付ける
• 写真フレームは白い縁と軽い影で浮かせる
• 見出しの白文字に暗い影を付けて可読性を確保する

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 六角形、楕円の雲形、ゆるいラフ形状、傾けた白枠の写真
• セクション境界: 直線で切り替えるか、斜めの金ラインやグラデーションでつなぐ
• 主役の図形は六角形にする（写真・赤パネル）
• グラフ上部の帯は角丸を大きくする
• ラベルは角丸なしの四角に細線の枠を付ける
• 悩みの写真は不定形のシルエットで切り抜く

Components

• 赤い大見出し帯（hero-red-band）: 深紅のグラデーション帯に明朝の白い大見出しを置き、下に金のラインを引く
• 金帯の強調見出し（gold-label-heading）: 強調語だけ金色の四角い帯を敷き、残りの文字は帯の外に続ける
• 六角形の写真（hex-photo）: 食材や成分の写真を六角形に切り抜き、横に金のラベルと説明を添える
• 赤い六角形パネル（hex-red-panel）: 深紅の六角形を 2 つ並べ、間に＋記号を置いて組み合わせを示す
• 試験データのカード（data-card）: 上にクリップを付けた白い紙のカード。赤い角丸帯の小見出しと折れ線グラフを入れる
• グラフの注釈吹き出し（graph-bubble）: 緑の円に白抜き文字で変化のポイントを示す
• 雲形の吹き出し（cloud-bubble）: 白い不定形の吹き出しに悩みの言葉を太いゴシックで入れる
• 成分量のバー（spec-bar）: 黒いバーに白文字で成分名と含有量を 1 行で書く
• 販売状況のラベル（status-tag）: 白地に黒の細枠を付けた四角いラベルで、販売中か予定かを示す

Do's and Don'ts

Do - 深紅・金・生成りの 3 色を軸にし、ほかの色は差し色に限定する - 成分や食材の写真は六角形で統一する - 強調語は金帯か大きい文字で見せる - データには出典の注釈を必ず添える - 家族の笑顔の写真で安心感を締めくくる

Don't - パステル調や寒色を主役にしない - 丸ゴシックやポップな手書き文字を使わない - 金を蛍光的な黄色にしない - 注釈を省略して効果を断定する表現にしない - 白地だけで続けず、地色の切り替えで抑揚を作る

Page Structure

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

1. ファーストビュー（何に効く商品かと、機能性表示食品であることを即座に伝える）: 赤い帯に明朝の大見出しを置き、暗い背景に金のパッケージと六角形の成分写真を並べる
2. 悩みの提起（健康診断の結果への不安と、生活改善の難しさに共感する）: 生成りの地に線画のイラストと雲形吹き出しを置き、不定形に切り抜いた写真 2 枚に短い悩みを添える
3. 解決策の提示（手軽な習慣で毎日ケアできることを示す）: 深紅の地に白い大見出しを置き、パッケージと六角形の写真、成分量のバー、届出表示の注釈を並べる
4. 試験データ（成分の効果を数値で裏付ける）: コルク地の上に白い紙のカードを置き、金帯の見出しと 2 つの折れ線グラフ、出典の注釈を入れる
5. 配合成分（主成分以外の付加価値を伝える）: 白〜グレーの地に六角形の写真と金ラベルの説明を左右交互に 3 つ並べる
6. リスク訴求（放置した場合のリスクを示し、行動を促す）: 黒い地に楕円で切り抜いた写真を重ね、白文字の中のキーワードを黄色にする
7. 組み合わせ提案（食生活と商品の併用を提案する）: 食材の写真に囲まれたパッケージの下に、赤い六角形パネルを＋記号でつないで置く
8. 家族の情景（自分と家族のためという動機づけで締める）: 傾けた白枠の家族写真を重ね、明朝の一言を添えて一部を赤にする
9. シリーズ紹介（関連する悩み別の商品を案内する）: 3 列のパッケージの上にアイコン付きの見出し、下に枠付きの販売状況ラベルを置き、最後に本文で締める

Imagery

• パッケージは金の光沢と赤い六角形を強調し、下に金の光を落として撮る
• 食材は茶系の器に盛った寄りの写真にし、温かい光で撮る
• 悩みのシーンは中高年の人物と居酒屋のビールなど、生活感のある写真にする
• リスクの写真は暗く落としてビネットをかけ、楕円に切り抜く
• 家族の写真は明るい室内の団らんで、笑顔を中心にする
• イラストは茶色の線画で、困った表情の夫婦を描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の 1 カラムを維持し、左右に背景色を延長する
• 成分紹介は PC で写真とテキストを横並びにし、交互の配置を保つ
• グラフのカードは最大 640px 幅に収める
• シリーズ紹介は PC でも 3 列のまま余白を広げる

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