DESIGN.md — 深海ブルー×金カプセルの魚油サプリ LP（Ocean Blue Gold Capsule Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、力強い・インパクト
• キーワード: 深海ブルー・金色の円・赤いカプセル・方眼の水色地・明朝の大見出し・白カード
• 地の質感: 海中写真のグラデーションと光の反射、黄金の光沢球。地は淡い水色の細かい方眼。
• 形: 円形の成分バッジ、角丸の白カード、下向き矢印型のパネル、斜めの帯見出し。
• 温度感: 青が主体のクールな印象。金と赤で暖かい強調を入れる。

Colors

• 地は白と方眼入り淡水色を交互にし、章の頭だけ海中写真の濃紺帯にする。
• 濃紺帯の上は白文字＋明朝で大きく組む。
• 成分の強調は金の円と赤いカプセルに限定する。
• 本文中の訴求語は赤文字、結論文は黄色マーカーで引く。
• 比較パネルは未配合をグレー、配合を赤で対比させる。
• カードは白、番号バッジは濃紺の円で統一する。
• ingredient-orb は文字 #156CBA × 背景 #F2C230 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#FAEAB6、4.51:1）を使う。

Typography

• 大見出しは明朝で、一部の語だけ色やサイズを変えて強調する。
• 成分名の英字は極太サンセリフで円の中に置く。
• 写真上の悩みコピーは白い縦書き帯に入れる。
• 数字は明朝で大きく、単位は小さくする。
• 注釈は必ず極小グレーでブロック直下に入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較やカードは 2〜3 列に分ける
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション冒頭は全幅の濃紺帯か画像で区切る。
• カードは 2 列グリッドで 8px 程度の間隔にする。
• 3 段階の量提案は 3 列の縦長パネルにする。
• FAQ は白い角丸カードに Q&A を縦に積む。
• 本文は左右 16px の余白で左揃えにする。

Elevation & Depth

• 白カードはごく薄い影か影なしで、水色地との色差で浮かせる。
• 金の円とカプセルは光沢グラデとハイライトで立体感を出す。
• 番号バッジに軽いドロップシャドウを付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 人物は角なし矩形、成分イラストは円形で切り抜く
• セクション境界: 海中写真帯は下端を緩い弧にする。それ以外はまっすぐ切り替える
• 成分タグはピル型の淡い水色。
• 量提案パネルは上部を下向き矢印形にする。
• 番号は濃紺の円に白数字。
• 比較パネルは下向き五角形にする。

Components

• 金色の成分円（ingredient-orb）: 光沢のある金の円に極太英字の成分名と小さな和名を入れ、2 個並べる。
• 海中帯見出し（section-band）: 濃紺の海中グラデ帯に白の明朝見出しを 2 行で中央揃えにする。
• 見出し上ラベル（label-pill）: 濃紺のピル型に白文字の短いラベルを入れる。
• こだわりカード（feature-card）: 白の角丸カード。左上に番号円、中央に青の太字見出しと説明を置く。
• 量提案パネル（dosage-panel）: 上が青の矢印形、下が白。大きな明朝数字とカプセル図を入れ、3 列で並べる。
• 比較パネル（compare-panel）: グレーと赤の下向き矢印パネルで、未配合と配合の違いを左右に対比させる。
• 不使用成分タグ（ingredient-tag）: 淡い水色のピル型タグを 3 列で並べる。
• 水色ドット箇条（benefit-bullet）: 水色の丸に太字の短文を続け、黄色のマーカーを引く。
• FAQ カード（faq-item）: 白の角丸カードに、青い Q 見出しと黄色マーカー、A の本文を入れる。

Do's and Don'ts

Do - 章の頭に海中写真の濃紺帯を置き、海由来のイメージを保つ。 - 成分は金の円と赤いカプセルで視覚化する。 - 数値や根拠には必ず小さな注釈と出典を添える。 - 地は白と方眼入り水色の 2 種類にとどめる。 - 大きな訴求は明朝、説明はゴシックで使い分ける。

Don't - 暖色の背景面を広く使わない。 - 赤を見出しの地色に多用しない。強調語とカプセルに限定する。 - 丸ゴシックや手書き書体でやわらかくしすぎない。 - 注釈なしで効能を断定する見せ方をしない。 - カードに強い影や太い枠線を付けない。

Page Structure

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

1. ファーストビュー（商品と産地の信頼を一目で伝える）: 和食の卓上写真に商品パッケージを中央配置し、明朝の 2 行コピー、金の産地バッジ、赤と水色の成分丸バッジを添える
2. 対象者の提示（全世代が対象だと示す）: 海中帯の見出しの下に、世代別の人物写真 4 枚と白い縦書き帯コピーを散らして並べる
3. 成分の説明（主成分を 1 粒に凝縮していると印象づける）: 深海から金色の光へ変わるグラデに、金の成分円 2 個とカプセル、特大の明朝コピーを置く
4. 酸化対策の配合（品質を保つ仕組みを説明する）: 赤い楕円の中に成分円を置き、周囲にグレーの酸化球と矢印を配置する。下に説明文と成分ラベルを入れる
5. 吸収率の比較（配合の優位性を示す）: 人体シルエットを中心に、左にグレー、右に赤の比較パネルとグラス写真を置く
6. 摂取量の提案（目安量を選べるようにする）: 濃淡の異なる青の 3 列パネルに、粒数と含有量を表示する
7. その他の成分（追加価値を伝える）: 濃紺帯の見出しの後、人物写真に重ねて円形の成分バッジを並べる
8. 品質のこだわり（安全性と信頼を補強する）: 番号付きの白カード 5 枚を 2 列グリッドで並べる
9. まとめ訴求（習慣化を促す）: 家族の食卓写真に青い円の数値バッジを重ね、商品の左右に水色ドットの箇条書きを並べる
10. よくある質問（不安を解消する）: アイコン付きの見出しの下に、白い角丸カードで Q&A を積み重ねる

Imagery

• 海中を泳ぐ魚群と光の筋を、濃紺から青のグラデーションで背景にする。
• 赤く透けた光沢のあるソフトカプセルを、ハイライト付きで描く。
• 世代別の人物写真は明るい自然光で、笑顔か作業中の姿を使う。
• 金色の球体には光の反射を入れる。
• 魚、マリーゴールド、エビなどの原料をリアルな切り抜き素材で添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の 1 カラムで SP の構成を再現し、両側は淡い水色で埋める。
• 海中帯は全幅に広げ、見出しは中央に固定する。
• こだわりカードは PC で 3 列にしてもよい。
• FV の写真はより広く見せ、商品を中央に大きく置く。

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