DESIGN.md — 白地×緑の自然派発酵飲料 LP（Fresh Green Fermented Health Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、上品・高級、信頼・誠実、清潔・爽やか
• キーワード: 自然発酵・緑のグラデーション・水彩イラスト・余白多め・細線の円バッジ
• 地の質感: 白地のフラットな面に、写真と手描き水彩イラストを組み合わせる。緑の面は上が明るく下が濃いグラデーションにする。
• 形: 細線の正円バッジ、角丸の大きい写真、角丸の小さい白カード、細い枠のピル型ボタン
• 温度感: やや涼しい自然派。ベージュ地で温かみを足す

Colors

• 地は白が基本。製造のこだわりのまとまりだけ、ベージュ #F5F1EE に切り替える
• ブランドの緑は見出し文字、見出し帯、円バッジの線、スライダー矢印に使う
• 強く訴求したいブロックは、黄緑から濃い緑へ縦グラデーションの面に白文字を置く
• マゼンタはリンク系ボタンの細枠と文字、タイトル下の短い線だけに限定する
• 原料パートは、くすんだローズや灰青の見出しで水彩イラストになじませる
• フッターは濃いチャコールに灰色の文字にする
• circle-badge は文字 #018C3B × 背景 #FFFFFF のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#01893A、4.53:1）を使う。

Typography

• 見出しは太くしすぎず、細めから中くらいの太さに字間を広めにとって上品に見せる
• 緑の中央見出しは太字で短く 1〜2 行にまとめる
• 本文は小さめ 11px 前後にし、行間を 1.9 と広くとる
• 円バッジの中だけ明朝を使い、自然・伝統の雰囲気を出す
• 価格は数字を大きく、税抜き価格は小さい括弧書きで添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円バッジは 3 つを横並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• タイトルと商品写真は中央揃えにし、上下の余白を大きくとる
• 本文ブロックは左揃えで、左右の余白は 16〜20px
• こだわりのテーマごとに、緑の見出し、白カードのスライダー、ドットのインジケーターを繰り返す
• 原料の説明は、イラスト、色付きの見出し、本文の順に縦に積む
• 副原料は左にイラスト、右に見出しと本文を置く枠付きカードを縦に並べる

Elevation & Depth

• 白カードには、ごく薄い影をつけてベージュ地から浮かせる
• スライダーの丸い矢印ボタンは緑のグラデーションにし、軽く影をつける
• 商品写真の下に鏡面反射を入れて、高級感を出す
• そのほかの要素はフラットにし、影を使わない

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: スライダー内の写真は大きな角丸（約 20px）。導入の写真は角丸なしの矩形
• セクション境界: 直線で地色を切り替える。セクション見出しは右寄せの緑の帯にする
• 特長は細い緑の線の正円バッジで 3 つ並べる
• リンクボタンはマゼンタの細枠でピル型にする
• 原料カードは角丸なしの細い茶色の枠
• スライダーのインジケーターは短い角丸のバー。現在位置は緑、それ以外は灰色

Components

• タイトル下線（title-underline）: 中央の商品名の下に、短いマゼンタの横線を引く
• 円形特長バッジ（circle-badge）: 白地に緑の細線の正円。中に明朝の短文を 2〜3 行入れ、3 つ横に並べる
• 緑グラデーションパネル（gradient-panel）: 上に写真を重ね、黄緑から濃い緑の面に白文字で大見出しと説明を置く
• 右寄せ見出し帯（section-band）: 画面の右側に寄せた緑の帯に、白文字でセクション名を入れる
• スライダーカード（slider-card）: 白カードに角丸の写真、緑の小見出し、本文を入れる。左右に緑の丸い矢印、下にバー型のインジケーターを置く
• 細枠リンクボタン（button-outline）: 白地にマゼンタの細枠と文字のピル型ボタン
• 原料カード（ingredient-card）: 茶色の細枠。左にイラストとキャプション、右に色付き見出しと本文を置く
• 注釈ボックス（note-box）: グレージュ地に、太字の小見出しと小さな説明文を入れる
• 価格ブロック（price-block）: 商品画像の下に中央揃えで容量、大きい価格、括弧付きの税抜き価格、マゼンタの『詳しく見る＋』リンクを並べる

Do's and Don'ts

Do - 白い余白を大きくとり、要素を詰め込まない - 緑は見出しと装飾に絞り、本文は濃い灰色にする - 原料は手描き水彩イラストで温かみを出す - テーマごとに見出し、カード、インジケーターの同じ型を繰り返す - 商品写真は白背景の切り抜きにし、鏡面反射を入れる

Don't - 赤や黄の派手なセール色、太い CTA ボタンは使わない - マゼンタを面の塗りに使わない - 見出しを極太にしない - 写真に強いフィルターや装飾枠をつけない - 本文を中央揃えの長文にしない

Page Structure

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

1. ファーストビュー（商品名と商品の姿を印象づける）: 中央に和文と欧文の商品名、マゼンタの下線、白背景の商品写真と円形の訴求バッジを置く
2. コンセプトと特長（商品の価値を短く伝える）: 緑の太字の 2 行見出しの下に、細線の円バッジを 3 つ並べる
3. 商品紹介（どんな飲料かを説明する）: 原料と商品の集合写真、淡い緑のリード文、本文の順に置く
4. 独自成分（独自成分の科学的な裏付けを示す）: 顕微鏡写真を緑グラデーションのパネルに重ね、白文字で説明する
5. ブランド思想（内側からの健康という考え方を伝える）: 同心円の図解に矢印と短い語を添え、下に本文を置く
6. 製造のこだわり（原料・伝統・発酵・環境・人の 5 つのこだわりを示す）: ベージュ地に右寄せの緑の見出し帯を置く。テーマごとに緑の見出しと写真付きの白カードスライダーを並べる
7. 製品一覧への誘導（製品一覧のページへ誘導する）: マゼンタの細枠のピル型ボタンを置く
8. 原料の配合（配合のバランスを伝える）: 水彩イラストの下に、色付きの見出しと本文を置く
9. 原料の詳細（野菜や野草などの原料を列挙する）: 散らしたイラスト、見出し、本文、スラッシュ区切りの原料名リスト、注釈ボックスの順に置く
10. 副原料（そのほかの配合素材を説明する）: 枠付きの横長カードを 3 枚、縦に並べる
11. 製品と価格（ラインナップと価格を示す）: 中央揃えで商品名、パッケージ画像、容量、価格、詳細リンクを繰り返す
12. フッター（案内と規約へのリンクをまとめる）: チャコールの地に、細線で区切ったリンクのリスト、SNS アイコン、コピーライトを置く

Imagery

• 商品は白背景で切り抜き、下に鏡面反射を入れて清潔感と高級感を出す
• 原料写真は新鮮な野菜を俯瞰で撮り、色鮮やかに見せる
• 製造工程は衛生服の作業者、畑、工場の外観を明るい自然光で撮る
• 原料は手描きの水彩・色鉛筆調のイラストにし、白地に散らす
• パッケージは青・黄・赤・緑の葉が重なる水彩柄
• 図解は黄緑と緑の同心円に白い矢印を入れたシンプルなフラット図形
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文の幅を約 60% に絞り、中央に寄せる
• PC の導入部は、左に原料写真、右に本文とパネルを置く 2 カラム
• PC のスライダーは複数のカードを横に並べ、写真と文章をカード内で左右に配置する
• PC の原料カードは 3 列の横並び。製品と価格も 3 列
• PC の原料説明は、イラストと文章を左右交互に配置する
• PC の 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 行書くと起動時に読み込まれる。