DESIGN.md — 空色×白の透明感サプリメント LP（Airy Sky Blue Science Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: 空色・透明感・斜体の欧文セリフ・大きな角丸・科学的根拠・抜け感
• 地の質感: フラットな単色面と淡いグラデーション。ボケた水玉の光や青空の写真で、軽さと透明感を出す。
• 形: 角丸 20〜40px の写真、楕円やピル型に切り抜いた写真、ピル型ボタン、白い角丸カード。
• 温度感: 涼しげで清潔。寒色だけで温度を低めに保ち、食べ物の写真で親しみを足す。

Colors

• 地はグレーがかった白、淡い水色、中くらいの青の3段階を交互に使い、セクションを分ける。
• 強調したい単語だけ、文字色を primary の青に変える。
• 根拠を示すセクションは青地にし、その上に白カードを置く。
• 主 CTA は濃い青に白文字、サブボタンは淡い青に青文字。
• 暖色は写真の食べ物だけに使い、UI の色は寒色でまとめる。
• 割引バッジは青の丸に白文字にする。
• button-primary は文字 #FFFFFF × 背景 #3E7FC8 のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#3777C0、4.6:1）を使う。
• button-secondary は文字 #4A8FD6 × 背景 #C5E3FC のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2665A6、4.51:1）を使う。
• proof-point は文字 #ECFEFF × 背景 #78B6D9 のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2E79A3、4.61:1）を使う。
• result-card は文字 #4A8FD6 × 背景 #DBF1FF のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2665A6、4.52:1）を使う。
• symptom-row は文字 #5E6670 × 背景 #C5E3FC のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#5C636D、4.56:1）を使う。
• faq-accordion は文字 #4A8FD6 × 背景 #DBF1FF のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2665A6、4.52:1）を使う。

Typography

• 英字見出しでは、細い直立体と太い斜体のセリフを1行の中で組み合わせる。
• 英字ラベルは和文見出しの上に小さく置く。
• 和文見出しは2行に分け、キーワードだけ青文字にする。
• 本文は行間を広めにし、グレーで軽く見せる。
• 注釈は※番号付きで、ブロックの下にまとめる。
• 数字は斜体のセリフ体で大きく見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は写真とテキストを左右交互に配置する 2 カラム）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真とテキストを左右交互に配置し、リズムを作る。
• 余白を広めにとり、1ブロックの情報は少なめにする。
• 根拠のポイントは番号付きで縦に並べる。
• 購入ボックスは FV、中盤、最後の3か所に置く。
• 症状の一覧は、アイコン円＋見出し＋説明の横並びの行を縦に並べる。

Elevation & Depth

• 影はほとんど使わず、色面の差で階層を分ける。
• 購入カードと白カードにだけ、ごく薄い影（0 4px 16px rgba(60,120,180,0.12)）をつける。
• FAQ は白地に細い区切り線を引くだけにする。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 24〜40px で切り抜く。一部は楕円や横長のピル型、片側だけ大きく丸めた形にする。
• セクション境界: 直線の色面で切り替える。一部のブロックは片側だけ角丸にする。
• 写真はすべて角丸にし、直角を避ける。
• ボタンとタグはピル型にする。
• アイコンは淡い青の円の中に線画で入れる。
• 割引は円形のバッジにする。

Components

• 定期購入ボタン（button-primary）: 濃い青のピル型ボタン。左端に丸い割引バッジ、右にアイコンをつける。
• 単品購入ボタン（button-secondary）: 淡い青のピル型ボタン。主ボタンの横に並べる。
• 購入カード（purchase-card）: 白い角丸カードに商品画像、価格、割引バッジ、特典タグ、ボタン2つを収める。
• 英字ラベル付き見出し（heading-en-ja）: 細字と斜体を組み合わせた英字ラベルの下に、2行の和文見出しを置く。
• 根拠ポイント見出し（proof-point）: 斜体の英字で番号付きのポイント名を書き、その下にアイコンと白文字の見出しを置く。
• 結果カード（result-card）: 白い角丸カード。上部の青いタブにラベルを入れ、図と大きな数字を載せる。3枚を横に並べる。
• 症状アイコン行（symptom-row）: 淡い青の円アイコン、症状名と英訳、説明文を横に並べる。
• FAQ アコーディオン（faq-accordion）: 白地に区切り線。質問を青文字で書き、右端にシェブロンを置く。
• ピル型写真＋英字タグライン（pill-photo-tagline）: 小さなピル型の写真の横に、薄い色の英字タグラインを2行置く。

Do's and Don'ts

Do - 地色は空色の階調でまとめ、白を多く残す。 - 英字は斜体のセリフ体を混ぜて、雑誌のような軽さを出す。 - 主張の近くに、※付きの注釈と出典を必ず置く。 - 写真は青空や水色の背景で撮ったものにする。 - 強調する語だけ青文字にする。

Don't - 赤や黄色をボタンや強調色に使わない。 - 影を強くかけたり、立体的な装飾をしたりしない。 - 直角の写真を使わない。 - 本文を黒で太く詰めて組まない。 - 1セクションに長文を詰め込まない。

Page Structure

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

1. ファーストビュー（世界観、商品、購入導線を一度に見せる）: 水玉のボケが入った青空の写真にモデルを配置する。左に和文コピーと購入カード、右下に大きな英字を置く。
2. コンセプト宣言（新しい選択肢を提示する）: 楕円に切り抜いた写真と、短い見出し・本文を左右に並べる。
3. 共感・ベネフィット（我慢しなくていい生活を描く）: モデル写真と英字ラベル付き見出しを左右交互に3〜4ブロック並べる。
4. 信頼の証（特許取得を伝える）: 角丸の商品写真に、見出し・本文・注釈を添える。
5. 成分の解説（原因を教育する）: 淡い水色の地に、図解・写真・説明文を並べる。
6. 提案（解決策へ橋渡しする）: 線で挟んだ小見出しのあと、モデル写真と見出しを置く。
7. 科学的根拠（試験データで裏付ける）: 青地に大きな斜体の英字見出しを置く。番号付きのポイント、白カード、グラフ、試験の資料を並べる。
8. 効果と悩み（数値と症状の一覧で自分ごと化させる）: 大きな数字を載せた商品カードと、アイコン付きの症状一覧を置く。
9. 使い方（生活の中での使い方を見せる）: 写真とテキストを交互に置き、ピル型の写真と英字タグラインを添える。
10. 中間 CTA（購入へ誘導する）: 左に商品写真、右に青地の購入カードを置く。
11. よくある質問（不安を解消する）: 左に斜体の英字見出し、右にアコーディオンを置く。下に特典の3アイコンを並べる。
12. 最終 CTA・SNS（購入をあと押しする）: グラデーションの地に SNS 写真のグリッドと購入カード2種を置き、その下に決済ロゴを並べる。
13. フッター（法的リンクを載せる）: 青いグラデーションの帯に、白いロゴと小さな文字のリンクを置く。

Imagery

• 水色の無地や青空を背景に、モデルを明るく撮る。肌は透明感のある質感で。
• パンやドーナツなどの食べ物を空中に浮かせたり、手に持たせたりして撮る。
• 商品のパウチは水色の台座に置き、光と影を柔らかく見せる。
• 顕微鏡の画像や試験書類は白い枠に入れ、資料らしく見せる。
• アイコンは青い線画で、淡い円の中に入れる。
• 背景に白いボケの水玉を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では左右2カラムを、写真が先・テキストが後の1カラムにする。
• 英字の大見出しは 40px 前後まで縮め、2行に分ける。
• 結果カードは横スクロールにするか、縦に積む。
• 購入カードは幅いっぱいにし、ボタン2つを横に並べたままにする。
• FAQ は見出しの下に全幅で並べる。
• SNS のグリッドは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 行書くと起動時に読み込まれる。