DESIGN.md — 紫×モカの明朝系アイケアサプリ LP（Purple and Mocha Eye-Care Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、情報量多め・訴求型、信頼・誠実
• キーワード: 深紫・モカブラウンの丸バッジ・明朝の大見出し・ボケ光の背景・金の月桂樹・吹き出しの声
• 地の質感: 淡いボケ光やグラデーション背景、紺地には斜めのストライプ、悩み帯にはコンクリート風の質感
• 形: 円形バッジと円形切り抜き写真が多い。角丸は小さいカード、吹き出し、ひし形の矢印
• 温度感: 白とラベンダー系のやや寒色の上に、紫とブラウンで温かみと高級感を加える

Colors

• 地は白か淡いボケ背景。1 セクションごとに白と淡色を交互に使う
• 強調語は紫で書き、残りは黒の明朝で組む
• 成分名・実績の丸バッジはモカブラウンのグラデーションで統一する
• 権威づけ（ランキング）は紺地に金の文字と月桂樹を使う
• 悩み・リスクを伝える帯だけ暗いグレーにして、空気を変える
• 黄色はスタッフ返信の吹き出し、マーカー、注意ボックスに限定する

Typography

• 見出しは明朝。ひらがなを小さく、漢字を大きくしてジャンプ率を付ける
• 強調語だけ紫にして一回り大きくする
• 数値は欧文セリフのイタリック風で大きく見せ、単位は小さくする
• 感嘆符は細い欧文イタリックで添える
• 本文はゴシックで、行間を 1.8 前後に広く取る
• 英字のセクションラベルはセリフ体の大文字
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。実績バッジのみ 3 列、成分の丸写真は 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃え、本文は左揃え
• 写真は全幅で敷き、その上に白カードを重ねる
• 成分紹介は写真と丸バッジを左右交互に置く
• セクションの間は 60〜80px 空ける
• スタッフ返信は丸写真を左、吹き出しを右に置く

Elevation & Depth

• 白カードと吹き出しには、柔らかい影（0 4px 10px rgba(0,0,0,.15)）を付ける
• 丸バッジには淡い影とグラデーションで立体感を出す
• ボタンは上から下への濃淡グラデーションと影でふくらみを出す

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と成分は円形に切り抜く。風景や食材は全幅の矩形。商品パッケージは切り抜いて配置する
• セクション境界: 直線の切り替えが基本。下向きの三角や、緩い弧で次のセクションへつなぐ
• 実績や成分名は正円のバッジにする
• ラベルは角の立った矩形帯か、尻尾付きの吹き出しにする
• 点線の円枠で番号付きの声ラベルを作る

Components

• 実績の丸バッジ（badge-circle-stat）: 白〜淡グレーの正円に、紫の大きな数字と小さな注釈を入れる。3 つ並べる
• 成分名の丸バッジ（badge-ingredient）: モカのグラデーション円に、白い明朝で成分名を入れ、写真の角に重ねる
• ランキング帯（ranking-band）: 斜めストライプの紺地に、金の王冠・月桂樹・順位を中央に大きく置く
• お客様の声カード（voice-card）: 人物写真の上に白カードを重ね、紫のゴシック見出しと本文を入れる。点線の円で番号ラベルを付ける
• スタッフ返信の吹き出し（staff-reply）: 黄色の角丸吹き出しに小さめの本文を入れる。左に丸写真と肩書きを置く
• 悩みのチェック吹き出し（worry-bubble）: 暗い写真の上に白い吹き出しを並べ、黒いチェックボックスと短文を入れる
• グラデーションボタン（button-primary）: ブラウンのグラデーションの角丸矩形。白文字と、右端に白丸の再生アイコンを付ける
• 転換ラベル（label-transition）: 紫グラデーションの円や帯に、下向きの尻尾を付けて話の転換を示す
• 注意見出しボックス（notice-box）: 淡い黄色の帯に警告アイコンと明朝の見出しを入れ、暗い写真の上に載せる

Do's and Don'ts

Do - 見出しは明朝で大小を付け、要所だけ紫にする - 成分や実績は丸バッジで示し、数値を大きく見せる - 白地と淡いボケ背景を基本にし、紺とグレーの帯は要所だけに使う - 声には人物写真と、スタッフの返信をセットで載せる - 本文の要点には黄色のマーカーを引く

Don't - ビビッドな原色やネオンカラーを使わない - 見出しを丸ゴシックにして子どもっぽくしない - 紫を背景の大面積に使い続けない - 数値に注釈を付け忘れない - 角丸の大きいピル型ボタンにしない

Page Structure

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

1. ファーストビュー（ベネフィットと権威を一目で伝える）: 紫の上部帯の下に人物写真。明朝の大コピー、商品の切り抜き、金メダル、実績の丸バッジ 3 つを置く
2. コンセプト（本気度を宣言する）: 白地に明朝の見出しと黄色の下線。食材の写真を置き、成分名の紫ラベルで商品を囲む
3. ランキング実績（人気を証明する）: 紺のストライプ地に、金の月桂樹と大きな順位
4. お客様の声（体験を共感で伝える）: 英字ラベルと点線。人物写真に白カードを重ね、黄色のスタッフ返信を添える
5. 悩みの提起（自分ごと化させる）: チャコールの見出し帯。暗い写真にチェック付きの吹き出しを 3 つ並べる
6. 放置のリスク（危機感を高める）: コンクリート質感の地に、不調の人物写真 2 枚と斜めの吹き出しを置く
7. 解決策の提示（商品を紹介する）: 紫の円の転換ラベル。ボケ背景に商品、縦書きのコピー、実績バッジ、ボタンを置く
8. 主成分の解説（成分の優位性を伝える）: 紺の枠の中に白カード。比較写真と紫ボタン、引用符付きの見出し、マーカーを入れる
9. 満足度データ（数値で効果感を伝える）: ブラウンの円グラフに大きな%表示。周りに白い吹き出しの声を置く
10. 配合成分の紹介（その他の成分を一つずつ説明する）: 全幅写真に丸バッジを重ね、紫の明朝の小見出しと本文を続ける
11. 配合量まとめ（配合量を一覧で見せる）: 紫グラデーションの帯見出し。円形写真に mg 表記を重ね、粒の写真を中心に配置する
12. こだわり・価格の説明（価格に納得してもらう）: 製造現場の暗い写真に、黄色の注意ボックスと白文字を載せる
13. ご挨拶（寄り添う姿勢で信頼を得る）: スタッフ写真と淡紫のラベル。罫線入りの便箋風カードに中央揃えの文章と手書きの署名を入れる

Imagery

• 人物は 40〜60 代のモデル。明るい室内や屋外で、自然な笑顔か、悩んでいる表情を撮る
• 食材は白背景か、浅い被写界深度のシズル写真。粒感とツヤを強調する
• 背景には淡いボケ光や白飛びのグラデーションを使う
• 商品パッケージは影付きで切り抜き、メダルや粒を添える
• スタッフはヘッドセット姿の写真を円形に切り抜く
• 装飾は金の王冠・月桂樹、点線の円、引用符
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅 750px 前後の中央 1 カラムにし、左右は淡色の地で埋める
• 全幅の写真帯や紺の帯は、画面幅いっぱいに広げる
• 実績バッジは 3 列のまま、サイズだけ拡大する
• 成分紹介は PC で写真と本文を左右 2 カラムにしてもよい
• 見出しは PC で 1.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 行書くと起動時に読み込まれる。