DESIGN.md — 深紅×金明朝の高級サプリ通販 LP（Crimson and Gold Premium Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、情報量多め・訴求型、信頼・誠実
• キーワード: 深紅・金グラデーション明朝・亀甲柄・医師推奨メダル・繰り返しオファー・黄色マーカー
• 地の質感: 赤地に細かい六角形の柄を薄く重ね、キラキラした光の粒やボケ、木目の写真を背景に使う。
• 形: 白カードは小さめの角丸。円形の写真切り抜き。斜めや V 字のセクション境界。CTA はつやのある立体ピル型。
• 温度感: 暖色寄り。赤・金・ベージュが中心で、悩みのパートだけ冷たいモノクロにする。

Colors

• オファー帯と医師アンケートは亀甲柄の深紅の面で囲み、中に白いカードを置く。
• 見出しは濃いブラウンから金へのグラデーション明朝にする。キーワードだけ大きく、明るい赤か金にする。
• 主 CTA だけをつやのある緑にして、ページ内の赤から際立たせる。
• サブ CTA（お試し購入）はグレージュのピル型にして、主 CTA と差をつける。
• 悩みのパートは写真ごとモノクロのダークトーンにし、解決パート以降は木目や光の暖色に切り替える。
• 本文の強調は、赤の太字に黄色マーカーを重ねる。
• button-primary は文字 #F6FEF3 × 背景 #3FA21C のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#338417、4.58:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #BAA997 のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#89725B、4.54:1）を使う。

Typography

• 見出しは明朝体にする。助詞は小さく、キーワードは大きくして、ジャンプ率をつける。
• 価格とパーセントの数字は極太のゴシック。単位や（税込）は小さく添える。
• 成分名などの難読語には小さいルビを振る。
• 本文はゴシックで、行間を広め（1.8）に取る。
• 悩みのコピーは白の明朝で、写真の上に縦方向にずらして置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分一覧は 3 列グリッド、円グラフは 2×2、比較表は左右 2 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 価格オファーのブロック（見出し＋白カード＋CTA）を、ページの上・中・下に同じ形で繰り返す。
• 写真は全幅で敷き、その上に文字を重ねる構成を多用する。
• 白カードは左右に約 6% の余白を取って中央に置く。
• 注釈は各ブロックのすぐ下に小さい文字で置く。

Elevation & Depth

• 白カードには柔らかいドロップシャドウ（0 4px 16px rgba(0,0,0,.15)）をつける。
• CTA ボタンは上部にハイライトのあるグラデーションと、下方向の影で立体的に見せる。
• メダルやバッジは金属的なグラデーションと影で浮かせる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は円形に切り抜くか、背景に溶け込ませる。商品パッケージは切り抜いて反射を付ける。
• セクション境界: 下向きの V 字・斜めの切り替え・大きな円弧を使う。
• 円グラフは扇形を一部欠いたデザインにする。
• 番号は六角形や円の白地に赤数字で置く。
• 比較表のラベルは縦長のピル型を中央に置く。

Components

• 緑の立体 CTA（button-primary）: 幅 85% のつや付きピル型。右端に下向きの矢印を置く。
• グレージュのサブ CTA（button-secondary）: お試し購入用の控えめなピル型ボタン。
• 価格オファーカード（offer-card）: 赤の亀甲柄地の上に白カードを置き、商品画像・ブラウンの帯ラベル・割引の赤丸バッジ・大きな価格を並べる。
• 割引の丸バッジ（discount-badge）: 赤い円の中に白文字と黄色の大きなパーセントを入れる。
• 番号付きの特典リスト（benefit-list）: 金の明朝の大きな番号＋説明文。強調語は赤の大きな文字に黄色マーカー。行間は点線で区切る。
• 円グラフの数値（stat-pie）: 深紅の円の上部に小さな説明、中央に白の大きな明朝のパーセントを置く。
• ブラウンの帯ラベル（label-band）: 濃いブラウンの矩形に白文字の短いラベルを入れる。
• お客様の声の吹き出し（voice-bubble）: 白い吹き出しカードに線画のアバター、茶色の見出し、マーカー付きの本文を入れる。
• 購入時の注意枠（notice-box）: 赤の枠線に、上部中央の警告三角アイコンと赤の見出しを置く。

Do's and Don'ts

Do - 価格オファーのブロックを 3 回以上繰り返し、どこからでも購入できるようにする。 - 見出しは明朝体に金グラデーションをかけ、文字サイズのジャンプ率で高級感を出す。 - 根拠となる数値は円グラフや大きな数字で見せる。 - 悩みはモノクロ、解決策は暖色の光で表し、明暗のコントラストをつける。 - ※の注釈を各訴求のすぐ下に添える。

Don't - CTA に赤を使わない。地の深紅に埋もれてしまう。 - ポップな丸ゴシックや原色の水色を使わない。 - 見出しを均一のサイズで並べない。 - 余白を詰めすぎて白カードの影を潰さない。 - 悩みのパートにカラー写真を使わない。

Page Structure

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

1. ファーストビュー（実績と年代への共感を示す）: 笑顔の女性と商品を並べ、上部に赤い月桂樹の実績帯、右上に黒金のメダル、左下に明朝のコピー、最下部に注釈を置く。
2. 価格オファー（初回割引で購入を促す）: 赤い亀甲柄の地に白カードを置き、割引バッジ・価格・緑の CTA を入れる。
3. 定期便の特典（定期購入のメリットを列挙する）: キラキラした銀の背景に大きな明朝の数字見出しを置き、5 項目の番号リストを並べる。
4. 単品購入の案内（お試し購入の受け皿）: グレージュの地に白カード、サブ CTA、注意枠を置く。
5. 悩みの提起（体調のサインに気づかせる）: ダークなモノクロの地に、円形の人物写真を左右交互に並べ、白の明朝コピーを添える。最後は V 字で区切る。
6. 原因と解決（商品を解決策として提示する）: 木目のテーブルに商品とカプセルを置いた写真に、明朝の見出しを重ねる。
7. 医師推奨（権威付け）: 金メダルと 2×2 の円グラフを、光の粒の背景に置く。
8. 成分・製法の特長（成分量と製法の優位性を示す）: 成分名を 3 列のチップで並べ、製法は左右の比較表、背景は全幅の自然写真にする。
9. 開発の背景（企業の歴史で信頼を補強する）: ベージュのカードに長文と商品群の集合写真を入れる。
10. アンケート結果（数値の根拠を示す）: 赤の亀甲柄地に番号付きの結果を並べ、黄色の大きな数字で強調する。
11. お客様の声（実感を伝える）: アバター付きの吹き出しカードを左右交互に置く。
12. 最終 CTA（購入を締める）: 冒頭の価格オファーと同じ形で再掲する。

Imagery

• 人物は 40〜50 代の女性。白い服で、明るいハイキーの自然な笑顔。
• 悩みのカットはモノクロで、うつむきや物憂げな表情にする。
• 商品の物撮りは木目のテーブル、ガラスのコップ、散らしたカプセル、斜めからの柔らかい光で撮る。
• 背景に光のボケや金色の粒、六角形の柄を重ねる。
• お客様のアバターは淡いピンクを差した線画のイラストにする。
• 原料の訴求には、苔むした森や大豆・味噌など素材感のある写真を使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP 版のデザインを中央に固定幅（約 750px）で置く。
• PC で左右に余る部分は無地の背景で埋める。
• 文字と画像の比率は SP と同じに保つ。
• PC に広げる場合も 1 カラムを維持し、白カードの最大幅は 700px 程度にする。

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