DESIGN.md — 赤×金×葉緑の機能性サプリ訴求 LP（Crimson Gold Functional Supplement Mall LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、信頼・誠実、ナチュラル
• キーワード: 深紅と金・極太明朝の赤見出し・葉と生薬の写真・グラフで効果訴求・モール向けクーポン
• 地の質感: 赤地はかすれたテクスチャ、本文エリアは生成りに淡い木漏れ日のぼかし、成分タイルは暗い木目と素材写真
• 形: 角丸は控えめ。帯見出し、円形バッジ、扇形の吹き出し、角丸ピルのボタン
• 温度感: 暖色寄りで熱量が高く、緑で自然らしさを足す

Colors

• FV と実績パートは深紅の地に、金・黄・白の文字だけを載せる
• 本文パートは生成りに淡い緑のぼかしを敷き、見出しは黒＋赤で構成する
• 最重要語は赤い極太明朝、助詞は小さい黒にして強弱をつける
• セクションの見出し帯は赤か茶色の横帯にし、白文字を載せる
• 緑は成分ラベルと LINE 告知の面に限って使う
• クーポン欄は黄色のストライプ地に黒の極太数字を置き、赤は 1〜2 語だけにする
• ranking-crown は文字 #D4A84A × 背景 #AE1B29 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• ingredient-tile は文字 #D4A84A × 背景 #6B3A1E のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• button-primary は文字 #14B157 × 背景 #FEFEFD のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#0F8843、4.5:1）を使う。

Typography

• キーワードは明朝の極太で、文字に白フチと影をつけて立体的に見せる
• 助詞は主語の半分ほどのサイズに落とす
• 感嘆符は斜体ぎみにして勢いを出す
• 帯見出しはゴシックの白抜きにする
• 注釈には※と番号を付け、小さい灰色の文字でまとめる
• 数値はゴシックの太字で大きく、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分タイルと仕組みの図解は 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 32px、基本単位 8px、カード内 14px（375px 幅換算）
• 画像はすべて全幅で、セクション間の余白は少なく詰める
• 見出し帯は左右端まで、または左右 4% の余白で置く
• グラフは白カードに入れ、右に円形の吹き出しを重ねる
• 成分は 2 列 × 3 段の写真タイルを隙間なしで並べる
• 手順はアイコン 4 つを矢印でつないで横に並べる

Elevation & Depth

• 白カードには薄いドロップシャドウ
• ランキング画面のキャプチャは少しずつずらして重ね、影をつける
• 商品パッケージには接地影
• 見出し文字には白フチとソフトな影

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 素材写真は角丸なしの矩形。人物と商品は切り抜き
• セクション境界: 基本は直線の切り替え。帯見出しの下に三角の矢印を付けることがある
• ラベルは円形か角丸の小さいバッジにする
• 吹き出しは赤い円か扇形にする
• ボタンは白のピル型で、右に三角を付ける
• 見出しの両側に斜線（＼ ／）を添える

Components

• 金の月桂冠の順位エンブレム（ranking-crown）: 深紅地の中央に金の冠とリボンを置き、その下に実績を黄と白の文字で書く
• 赤い極太明朝の訴求見出し（heading-mincho-red）: キーワードを赤、助詞を小さな黒にし、白フチと影をつける
• 帯見出し（band-heading）: 赤または茶の横帯に白文字を載せ、下に三角を付けることもある
• 円形の成分ラベル（badge-circle）: 緑または金の円に白文字で成分区分を示す
• 比較グラフカード（graph-card）: 白カードに 2 系列の折れ線グラフを載せ、黄色の帯で期間を強調し、赤い円の吹き出しで結果を示す
• 成分写真タイル（ingredient-tile）: 暗い素材写真に白い小ラベルと金色の明朝の成分名を重ねる
• 友達追加ボタン（button-primary）: 緑の帯の上に置く白のピル型ボタン。文字は緑で、右に三角を付ける
• クーポン告知（coupon-block）: 黄色のストライプ地に黒帯の見出しを置き、極太の金額と 4 ステップのアイコンを並べる
• 注釈（note-text）: グラフや見出しの下に小さく、試験条件と※の補足を書く

Do's and Don'ts

Do - 最重要の効果訴求は極太明朝で、画面幅いっぱいまで大きく組む - 主張には必ず※の注釈と出典を添える - 葉や生薬の写真を見出しの周りに散らして天然らしさを出す - 数値はグラフと赤い吹き出しで視覚化する - 実績パートは深紅と金でまとめ、権威感を出す

Don't - 見出しを細いゴシックにしない - 寒色や淡いパステルを主役にしない - 広い余白を取ってミニマルにしない - 注釈を省いて断定だけで訴求しない - 赤を本文の長い文章に使わない

Page Structure

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

1. ランキング実績（権威と人気を最初に示す）: 深紅地に金の冠、黄色の大見出し、ランキング画面を重ねたキャプチャ
2. ファーストビュー（商品）（効果と商品を提示する）: 極太明朝の見出し、中央に商品パッケージ、左右に円形バッジ、下に素材写真
3. 作用の仕組み（成分が働く仕組みを図で説明する）: 緑の円ラベルと赤文字のリード、2 カラムの図解カード
4. 訴求のまとめ（効果を再度言い切る）: 赤い明朝の見出しと赤帯の白文字
5. 専門家による訴求（信頼性を補強する）: 金色のパネルに巨大見出しを置き、右に白衣の人物を切り抜きで配置
6. 試験データ（数値で根拠を示す）: 茶色の帯見出し、白カードのグラフ、赤い円の吹き出し、注釈
7. サポート成分（付加価値を並べる）: 赤いバッジ、茶色の明朝見出し、2 列 × 3 段の写真タイル
8. LINE クーポン（友だち登録を促す）: 緑の帯にスマホのイラストと大きな金額を置き、白のピル型ボタン
9. レビュー特典（購入後のレビューを促す）: 黄色のストライプ地、黒帯の見出し、極太の金額、4 ステップのアイコン

Imagery

• 生薬や根菜・粉末を木の台に置き、暖かい光で撮った素材写真
• 鮮やかな緑の葉を見出しの角にぼかしてあしらう
• 白衣の医師風の人物を腕組みで撮り、切り抜く
• 背景は淡い緑と白の木漏れ日のぼかし
• 図解は丸い粒・矢印・細胞膜を使った簡素なフラットイラスト
• 手順アイコンは黒の線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP と同じ縦長の画像を中央 640px 程度の幅で表示し、左右は無地にする
• PC で広げる場合は、成分タイルを 3 列、図解を 2 列のまま余白を増やす
• PC では見出しを最大 72px 程度に抑える

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