DESIGN.md — 白×金と淡いブルーの美容ゼリー LP（Clean White Gold Scientific Beauty Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: 透明感・白×金・明朝見出し・科学的根拠・余白多め・淡いブルー
• 地の質感: 光沢のある白い製品と水・ガラスの写真。マットなライトグレーの面と金の細線
• 形: 角丸なしの四角いパネルと金の細枠、丸いバッジ
• 温度感: やや寒色寄りのニュートラル。金とベージュで少し温かみを足す

Colors

• 地は白を基本に、ライトグレー・淡いブルー・ベージュをセクション単位で切り替える
• 金は英字小見出し・円バッジ枠・細い額縁線・Qマークに限定して使う
• 黒は Point 番号ラベルと成分タグの小さな面だけに使う
• 彩度の高い色は使わず、写真の白さと透明感を主役にする
• 注釈は必ずグレーの小さい文字で本文と区別する
• circle-badge は文字 #AD8E3D × 背景 #FEFEFE のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8B7231、4.58:1）を使う。
• compare-panel は文字 #E8E8E8 × 背景 #929292 のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#686868、4.55:1）を使う。
• ribbon-label は文字 #E8E8E8 × 背景 #BA7D09 のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8C5E07、4.61:1）を使う。

Typography

• 見出しは明朝、本文はゴシックの組み合わせを守る
• 見出しは字間を広く取り、2 行に分けて中央揃えにする
• 数値や重要語は一回り大きくしてメリハリを付ける
• 英字小見出しは金色セリフ体で日本語見出しの上に置く
• ※付きの注釈番号は上付きの小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較図だけ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅、テキストは左右 20px の余白を取る
• セクション見出しは中央揃え
• カードは縦に積み、間隔は 16〜24px
• 注釈はブロック直下に右寄せか左寄せで小さく置く

Elevation & Depth

• 基本は影なしのフラット
• 栄養機能食品の枠だけ薄い落ち影を付ける
• 奥行きは影ではなく金の二重細枠で表現する

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の四角い写真。製品カットは白背景の切り抜き
• セクション境界: 背景色を水平に切り替えるだけの直線
• 角丸は使わず四角で統一する
• 特長を示すバッジは白地に金枠の正円
• 額縁風の金の細線枠でテキストを囲む
• 見出しの左右に細いグレー線を引き中央にラベルを置く

Components

• Point 番号ラベル（point-label）: 黒い四角に英字 Point と 2 桁番号を白で入れ、左右に細線を伸ばす
• 金枠の円バッジ（circle-badge）: 白地に金の細線円で、短い特長を 2〜3 行で入れる
• 金の額縁ボックス（gold-frame-box）: 金の細線を二重にずらした枠に、こだわりの説明を入れる
• 成分カード（ingredient-card）: グレー面に大きな薄い番号を透かし、黒タグと明朝の成分名を並べる
• 比較パネル（compare-panel）: 2 枚の写真を等号でつなぎ、下にグレー帯で数値を白文字で示す
• お客様の声カード（voice-card）: グレー面の上端に白い見出し帯を重ね、本文と右下に年代を入れる
• Q&A カード（faq-item）: グレー地の上に白カードを置き、金の四角い Q マーク、明朝の質問、ゴシックの回答の順に並べる
• 商品仕様表（spec-table）: 淡いブルー面の上に白い見出し帯と値を交互に縦に並べる
• 金のリボン見出し（ribbon-label）: 金グラデーションの帯の右端を矢羽型にカットし、白文字を入れる

Do's and Don'ts

Do - 余白を広めに取り、1 画面に入れる情報は 1 つの主張に絞る - 数値の主張には必ず※注釈を添える - 金は細線と小さい文字に限って使い、上品さを保つ - 写真は白・透明・水を感じる明るいトーンでそろえる - セクションごとに地の色を淡く切り替えて区切る

Don't - 鮮やかな赤や黄色の CTA ボタンを置かない - 角丸やポップなイラストを使わない - 太い金の面を広く塗らない - 本文まで明朝にしない - 影の強いカードを重ねない

Page Structure

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

1. ファーストビュー（技術の独自性と効果を一目で伝える）: 白地に明朝の 2 行見出しと細枠のサブコピー。その下に全幅の製品接写写真と注釈を置く
2. コラボ紹介（2 社の専門性を掛け合わせた信頼感）: 写真と白い額縁ボックスを左右交互に重ね、間に大きな×印を置く
3. コラボ説明（開発背景の説明）: 明朝の大見出し、括弧付きのリード、ゴシック本文、全幅写真の順
4. 特長1（技術）（数値の比較で優位性を示す）: Point ラベル、2 列の比較パネル、本文と注釈。続けて円バッジ付きの製品写真
5. 特長2（成分）（配合成分 4 種の紹介）: 番号を透かした成分カードを縦に積み、最後に金の額縁でこだわりを補足する
6. 飲み方（摂り方と味の訴求）: ベージュ地に英字の小見出しと明朝見出し。金枠の円 2 つを製品写真に重ねる
7. お客様の声（体感の共感）: 金の英字見出しの下に声カードを 2 枚置き、それぞれ下に注釈を付ける
8. ブランドストーリー（世界観と想いを伝える）: 淡いブルーの写真の上に白い細枠を重ね、中央揃えの明朝で詩的な文章を置く
9. まとめ訴求（要点を再提示）: ロゴ、大見出し、製品の集合写真、金枠の円バッジ 3 つを横に並べる
10. よくある質問（不安の解消）: グレー地に白い Q&A カードを縦に並べる
11. 商品情報（仕様と注意事項を示す）: 淡いブルー面に製品写真と白帯の仕様表、最後に金のリボン見出しの表示枠を置く

Imagery

• 白い製品やゼリーを、ガラス皿や水と一緒に高い明度で接写する
• 背景は白〜淡いブルーグレーに大きくぼかし、透明感を出す
• ビーカーや手元のカットで研究・技術の印象を加える
• 白い砂紋や流木で和の静けさを添えた製品写真も使う
• 装飾は金の細線、円、二重枠だけに絞る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は PC でも中央 1 カラム幅で作られているため、SP でもほぼ同じ構成で使える
• PC では左右をグレー地にして中央に約 950px のコンテンツ幅で置く
• 円バッジ 3 つは SP でも横並びにし、直径を約 100px に縮める
• 比較パネルは SP でも 2 列のまま保つ
• 大見出しは SP で 26〜30px にし、2 行に収める

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