DESIGN.md — 生成り金×水色の牧場系プロテイン LP（Dairy Farm Collab Protein LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 牧場・牛乳・サンドゴールド・波形背景・筆文字見出し・黒地スポーツ
• 地の質感: 大部分はフラットな面。ミルクが渦を巻く写真背景と斜めストライプの水色地で、少しだけ質感を足す
• 形: 角丸小さめの白カード、波形のセクション境界、手描きの草と牛のライン
• 温度感: 生成りと金色で温かい。水色で清潔感を出し、終盤の黒で引き締める

Colors

• 購入カードは必ず、サンドゴールドの枠の中に白カードを置く形にする
• 物語の章は青地に白文字。強調したい語句だけ黄色の文字にする
• 特長カードの地は水色とベージュを交互にし、見出しの色もそれぞれ濃い青緑とからし金で揃える
• 深紅はお知らせ帯と『お得』バッジだけに使う
• ブランド紹介の章だけは黒地に白、金色の斜めラベルで構成する
• お客様の声では、強調語を金茶色の文字にする

Typography

• 見出しは中央揃えで 2〜3 行に分け、行ごとに意味が切れるように改行する
• 本文は左揃えで太めのウェイトにし、行間は広くとる
• 章見出しの上には小さな英字ラベルを添える
• FAQ のように、見出しの背後に大きな英字のアウトライン文字を重ねる
• 価格は大きな数字にし、内容量は白黒反転のボックスで添える
• 黒の章では、斜体の極太ゴシックと金色のラベルを組み合わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右に約 5% の余白を残して置き、背景色の地が見えるようにする
• 特長は 1 枚のカードに見出し・写真・本文を縦に積む
• 購入カードは 4〜5 回同じ構成で繰り返す
• FAQ は Q と A を罫線で分けたカードを縦に並べる
• お客様の声は吹き出しカードを左右交互に並べる

Elevation & Depth

• 白カードには、ごく薄い影をつけるか影なしにする
• 購入ボタンは下に濃い影を入れて立体感を出す
• 飲み方カードは、写真背景の上に半透明の白を重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: カード内の写真は角丸 8px の横長矩形。黒章のアイコンは円形
• セクション境界: 特長章はゆるい波形で水色とベージュを切り替える。青章の終わりは草のラインと牛のイラスト。それ以外は直線
• 購入ボタンは角丸 6px 程度の横長ボタン。右端に白丸の矢印を置く
• 吹き出しは黒枠に角張った三角のしっぽをつけ、太い影線を入れる
• 黒章のラベルは平行四辺形の金帯にする

Components

• 購入ボタン（button-primary）: 黄色のグラデーションボタン。上に深紅の『お得』吹き出しバッジを乗せ、右に白丸の矢印を置く
• 購入カード（offer-card）: 金枠の中の白カードに、こげ茶帯の見出し・商品画像・価格・ボタンを縦に並べる
• お知らせ帯（notice-box）: 深紅の面に白文字。見出しと短い本文を入れる
• こげ茶帯見出し（heading-band）: 1 行ずつこげ茶の帯を敷いた白文字の見出し。背後に大きな薄い英字を置く
• 特長カード（feature-card）: 牧場の線画を上に置き、色付きの見出し・写真・本文を縦に積む白カード
• FAQ カード（faq-item）: 灰色の丸 Q と青緑の丸 A を置き、間を罫線で区切る白カード
• 声の吹き出し（voice-bubble）: 黒枠に太い影線をつけた吹き出し。強調語は金茶色の文字にする
• ポイントラベル（point-label）: 黒章で使う、斜体の番号と金色の平行四辺形見出し。下に白カードを続ける
• 価格表示（price-tag）: 黒ベタと白枠の容量ボックスを並べ、その横に大きな価格数字を置く

Do's and Don'ts

Do - 購入カードは同じデザインのまま、章の区切りごとに繰り返す - 牧場・牛・草の手描き線画を、見出しの飾りや区切りに使う - 青地の本文では、強調する語句だけを黄色の文字にする - 特長カードは水色とベージュの地を交互にし、波形の境界でつなぐ - グラフや図版は白い角丸カードに入れ、出典を添える

Don't - 黄色の CTA 以外の色でボタンを作らない - 深紅を見出しや本文に多用しない - カードを全幅にして背景の地を消さない - 黒章の強いトーンを前半の牧場パートに持ち込まない - 細い明朝体だけで見出しを組まない（筆文字かゴシックの太字にする）

Page Structure

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

1. ファーストビュー（コラボ商品であることと、飲み方のコンセプトを一目で伝える）: 上部にロゴを並べ、牧場の線画と牛の吹き出しを置く。中央に極太の筆文字コピー、下にミルク波の背景と商品パッケージ、グラス、丸バッジを配置する
2. お知らせ（完売と再販の案内）: 深紅の角丸ボックスに白文字の見出しと本文を入れる
3. 購入 CTA（早い段階で購入へ誘導する）: 金枠の白カードに帯見出し・商品画像・価格・黄色ボタンを並べる
4. メディア実績（テレビや新聞での紹介実績で信頼を得る）: 生成り地の上に極太見出しと英字ラベル、牛の吹き出しを置く。下に動画埋め込みと新聞の切り抜きを並べ、それぞれにキャプションをつける
5. 社会背景のストーリー（牛乳消費の課題と、商品が生まれた意義を伝える）: 青地に白文字の宣言見出しを置き、最後の行は黄色にして下線を引く。グラフの白カードと写真を挟みながら長文を続け、草と牛のラインで締める
6. 特長（味・設計・原料・栄養・シーンの 5 つを訴求する）: 水色とベージュの波地を交互にし、線画・色付きの見出し・写真・本文を入れた白カードを縦に並べる
7. おいしい飲み方（飲み方を 3 通り提案する）: ミルクの渦の写真を背景にし、明朝の白見出しを置く。左に商品写真、右に小見出しと説明を入れた半透明カードを 3 枚並べる
8. よくある質問（不安を解消する）: 斜めストライプの水色地に、青緑の見出しと背後のアウトライン英字を置く。Q&A カードを縦に並べる
9. 応援メッセージ（酪農を応援する姿勢を示す）: 暗くした牛舎の写真に明朝の白文字を重ね、白い角丸のロゴタイルを 2 つ並べる
10. ブランド紹介（ブランドの品質を 3 つのポイントで示す）: 黒地に人物写真と斜体の英字見出しを置く。続けて金ラベルと白カードでポイント 1〜3 を並べ、丸アイコンのリストを添える
11. お客様の声（味の評価を社会的証明として見せる）: 淡いグレー地に極太見出しを置き、金色のかぎ括弧で強調する。吹き出しを 9 件ほど左右交互に並べる
12. 最終 CTA（購入へ誘導する）: 冒頭と同じ金枠の購入カードを置く

Imagery

• 牛舎や牧場で自然光の中、笑顔の人物と牛を一緒に撮る
• グラスのミルクやカフェオレは、明るいグレーの背景で物撮りする
• パッケージは正面から切り抜き、白い背景に置く
• 見出しの上や章の境界には、茶色や青の細い手描き線画（牛舎・木・牛・草）を置く
• ミルクが渦を巻くクローズアップを、セクションの背景に使う
• 黒章ではモノクロ寄りの人物アップを暗く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版では SP のデザインを中央の約 42% 幅の列にそのまま配置する
• 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 行書くと起動時に読み込まれる。