DESIGN.md — 濃紫×金の科学系アイサプリ LP（Deep Violet Gold Clinical Eye Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 信頼・誠実、ラグジュアリー・ダーク、情報量多め・訴求型、クール・先進的
• キーワード: 濃紫・金のアクセント・科学的根拠・図解・白カード・注釈多め
• 地の質感: ダーク面に光の線やグラデーション。明るいパートは淡いグレーと白でクリニカルな印象
• 形: 角丸なしの四角いカードと帯見出しが中心。強弱を示すバッジだけ正円
• 温度感: クールで知的。金と赤を差して温度を少し加える

Colors

• ダーク地（濃紺黒・紫）と明るい地（白・淡グレー）を、セクションごとに交互に切り替える
• ダーク地の上には白い四角カードを載せて、説明を読みやすくする
• 強調語は赤字にし、必要なら赤の下線も引く。ブランド名に相当する語は青字にする
• 金色は成分ラベル・円バッジ・数字だけに使い、高級感を出すポイントに限定する
• 紫の帯は見出しラベルやポイント番号のラベルに使う
• 注釈はグレーの小さな文字で、ブロックのすぐ下にまとめて置く

Typography

• 感情に訴える大コピーは明朝、説明はゴシックで使い分ける
• 強調語は 1.3〜1.6 倍の大きさにして、赤や紫の色を付ける
• 見出しは中央揃え、本文は左揃えにする
• 注釈記号（※1 など）は肩付きの小さな文字にする
• 難しい語にはふりがなを振る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約 90% で中央に置く
• カード同士の間は 40px ほど空けて、背景のダーク地を見せる
• 比較の図は横 2 列で並べる
• 注釈はカード直下に左揃えでまとめる
• ダークセクションの下端は下向きの V 字で次へつなぐ

Elevation & Depth

• 白カードは影なしか、ごく弱い影にとどめる
• パッケージ写真は床に映り込みを付けて立体感を出す
• 円バッジにはわずかなドロップシャドウを付ける

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形に切り抜く。図解はカード内の四角形に収める
• セクション境界: 下向き V 字の矢印形と、直線での切り替え
• カードは角丸なしの四角にし、紫の細枠を付ける
• 帯見出しは角丸なしの長方形にし、中央下に吹き出しの三角を付けてもよい
• 強弱や数値のバッジは正円にする
• 成分ラベルは傾けた金色の四角にする

Components

• 紫帯見出し（band-heading）: 紫の長方形に白文字を入れ、下に三角の吹き出しを付ける
• ポイント番号ラベル（point-label）: カード上辺に重ねる紫ラベル。両脇に横線を引き、丸数字を入れる
• 紫枠の白カード（white-card）: ダーク地の上に置く説明カード。見出し・図解・本文・注釈を収める
• チェック付き悩みリスト（check-list）: 白い枠に、チェックボックスと青や紺の強調語を並べ、淡いマーカーを引く
• 金の円バッジ（gold-badge）: 金色のグラデーションの円に、実績の数字や配合比率の数字を大きく入れる
• 強弱比較バッジ（compare-badge）: 赤と紺の正円で強と弱を示し、ぼかした画像と並べて比べる
• 紫のピルラベル（pill-label）: 比率や名称を示す紫のピル型ラベル
• 注釈ブロック（note-block）: ※番号付きのグレーの小さな文字を数行並べる

Do's and Don'ts

Do - ダーク地と明るい地を交互に置き、メリハリをつける - 主張の根拠になる図解・比較画像を必ず添える - 強調語には赤・紫・青の色と下線を使って目立たせる - 金色は数字と成分の強調に絞って使う - 効果をうたう表現には※注釈を付け、近くに置く

Don't - ポップなパステル色や丸ゴシックを使わない - カードを大きく角丸にしない - 金色を広い面積に使わない - 注釈を省略したり、ページ最下部だけにまとめたりしない - 装飾的なイラストを多用せず、図解は医学的なトーンを保つ

Page Structure

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

1. ファーストビュー（最新作であること・実績・効果を一目で伝える）: 濃紫の光線背景に、縦書きの大コピー・パッケージ・上昇矢印・金の円バッジを置き、下に明朝の大見出しと注釈を入れる
2. 商品紹介（メーカーの信頼性と商品の位置づけを示す）: 紫の帯見出しの下に 3 行の中央揃えコピーを置き、青と紫で強調する。パッケージ写真と赤い円バッジを添える
3. 制度説明（機能性表示の意味を説明する）: 紫のラベルが付いた白カードに 2 行の説明を入れ、赤で強調する。下に注釈を置く
4. 開発者メッセージ（開発のこだわりで信頼感を高める）: 白衣の人物写真と、淡紫の見出しボックスを紫の枠のカードに収める
5. 悩みの提起（読み手に悩みを自覚させる）: 紺のグラデーション地に明朝の大見出しを置き、チェックリスト 3 項目と円形の人物写真を並べる。V 字で下へつなぐ
6. 比較イメージ（見え方の違いを視覚的に示す）: 白カードの中に、くっきりした画像とぼかした画像を左右に並べ、強弱の丸バッジを付ける
7. 原因の解説（悩みの原因を図解で説明する）: 紫の帯見出しの下に、眼の断面のイラストと、赤の大きな強調語を置く
8. 解決策の提示（1 日 1 粒で改善できることを示す）: 濃紺黒地に明朝の大コピーと金の強調を入れる。カプセルと金色の成分ラベルを 2 枚、傾けて配置する
9. ポイント解説（成分・配合比・原料のこだわりを 3 つ示す）: 番号付きのラベルが付いた白カードを縦に 3 枚並べる。図解・金の円バッジ・写真に、赤字の本文と文献注釈を添える
10. まとめ（こだわりを総括し、購買意欲を高める）: 淡いグレー地に明朝の紫の大コピーを置き、パッケージ写真を映り込み付きで見せる
11. 表示情報（届出内容と注意事項を記載する）: 白カードに、紫の上下線で挟んだ見出しと、箇条書きの細かい文字を入れる

Imagery

• パッケージは濃紫×金で正面から撮り、床への映り込みを付ける
• 背景はぼかした研究室や白い医療空間の写真にする
• 人物は悩む表情の中高年や白衣の研究者を、円形に切り抜く
• 眼の断面図はフラットなイラストにし、青・黄・ピンクで描く
• カプセルは赤褐色で艶のあるものを単体で見せる
• ダーク面には放射状の光線や星状のきらめきを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も SP と同じ 1 カラムで、幅 750px 程度の中央カラムとして見せる
• PC では左右の余白を背景色で延長して埋める
• SP では大コピーを 36〜40px に縮め、縦書きコピーは横書きにしてもよい
• 比較の 2 列は SP でも維持し、画像を小さくする

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