DESIGN.md — 青い波と生成りの乳飲料ブランド LP（Fresh Milk Wave Dairy Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、ポップ・元気、親しみ・手作り感、信頼・誠実
• キーワード: ミルクの白・青い波・金のリボン・味別カラー・牛キャラクター・線画イラスト
• 地の質感: フラットな生成り地に、ミルクのしぶき写真と単線の線画イラストを重ねる。金はグラデーションで光沢感。
• 形: 波形のセクション境界、ピル型の吹き出しラベル、角丸の枠線カード、円形アイコン。
• 温度感: やや暖かいクリーム地に冷たい青を合わせた、爽やかで健康的な温度感。

Colors

• 地は生成り（#FFF7F4）を基本にし、白は情報カードのみ。
• セクション境界は濃青と明青の重なった波形帯で区切る。
• 商品ごとに青・紫・赤・黄・緑のテーマ色を見出し帯・本文文字・ボタン枠に統一適用。
• 金のグラデーションはリボン見出しと細いライン装飾に限定。
• イベント面のみ空色→草緑の屋外風背景に切り替える。
• 注意書きは赤の点線下線で示す。

Typography

• 見出しは丸ゴシック太字で青またはテーマ色。
• 英字ラベルは極太サンセリフの大文字で帯やピル内に置く。
• 本文は小さめ12px前後で行間広め、テーマ色の文字色でもよい。
• 特長の前置きコピーは円に沿ってアーチ状に傾ける。
• 注釈は10px、赤点線下線で強調。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真ギャラリーのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクション冒頭にピル型英字ラベルを中央配置。
• 商品紹介は商品パッケージ写真を中央に大きく、下に色帯ラベル・商品名・本文・枠線ボタン。
• セクション間に波形帯を挟む。
• 特長は大きな円アイコン＋右側にテーマ色の帯見出しを交互配置。
• FAQはテーマ色を順番に変えた枠線アコーディオンを縦に並べる。

Elevation & Depth

• 基本はフラット、影は使わない。
• カードは2〜3pxの色付き枠線で立体感の代わりにする。
• ファーストビューのカルーセルカードのみ淡い影。
• 情報ボックスは白地＋細いグレー枠。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き、写真は角丸16px前後の長方形、特長は円形フレーム。
• セクション境界: 濃青と明青と金が重なる波形、イベント下端はスカラップ（波打つ縁）。
• ボタンは角丸10px程度の横長枠線。
• セクションラベルは吹き出し尻尾付きのピル。
• 商品名帯は両端が切り欠かれたリボン形。
• 吹き出しは楕円の白地に太い色枠。

Components

• 英字セクションラベル（section-label-pill）: 白地に青2px枠と金の影線を持つピル。下に小さな吹き出し尻尾。
• 波形区切り（wave-divider）: 濃青・明青・金のうねる帯を重ねた全幅の区切り。
• リボン見出し（ribbon-heading）: 端が切り欠かれた帯。商品ごとのテーマ色や金グラデで塗る。
• 詳細ボタン（button-outline）: テーマ色の2px枠、白〜生成り地、中央に詳細を促す文字。幅ほぼ全幅。
• 特長サークル（feature-circle）: 金縁＋テーマ色の円に線画アイコン、右上に小円バッジ、右に色帯見出し。
• FAQアコーディオン（faq-accordion）: テーマ色の太枠角丸、Q番号付き質問と右端に開閉矢印と英字ラベル。
• キャラクター吹き出し（speech-bubble）: 楕円の白地に草緑の太枠、横にキャラクター。
• 機能性情報ボックス（info-box）: 淡青地に明朝見出し、味ごとの色枠タグを4つ並べ、灰色帯の小見出し。

Do's and Don'ts

Do - セクション境界に必ず青の波形帯を入れる。 - 商品・FAQなど並ぶ要素はテーマ色を順に切り替える。 - 金はリボン・細線に絞り上品さを保つ。 - キャラクターを要所に入れて親しみを出す。 - 地は生成りで統一し、白カードで情報を区切る。

Don't - 黒や濃いグレーの大面積背景は使わない。 - 角の立った直線区切りにしない。 - 影の強いカードやグラデボタンを使わない。 - テーマ色を1要素内で混在させない。 - 本文を大きくしすぎて余白感を潰さない。

Page Structure

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

1. ファーストビュー（ブランドと主力商品の印象づけ）: 上部中央に円形ロゴ、右上に金リボン型メニュー。角丸カードの横カルーセルで商品と牧場線画、金リボン上にキャッチ。
2. お知らせ（新着情報）: ピルラベル下にサムネイル＋日付＋タイトルの横並びリスト。
3. ブランド紹介（商品の成り立ちを説明）: ミルクのしぶき写真と商品切り抜き、下に青見出しと短い本文。
4. 特長（健康メリットを3点提示）: 金リボンの大見出し、円アイコン＋色帯見出し＋短文を3段。
5. 成分のこだわり（機能性の根拠と注意事項）: 濃青の全幅面に白文字の説明、内部に淡青の情報ボックスと白の注意事項カード。
6. 商品ラインナップ（味ごとの紹介）: 味ごとに写真＋線画背景、テーマ色リボン、商品名、本文、枠線ボタン。最後に別枠カードの派生商品。
7. パッケージのこだわり（容器の工夫を紹介）: グレー面に回転する文字帯付き商品写真、色枠の番号付きリンクカード3つ。
8. イベント紹介（体験イベントで親しみ訴求）: 空色の空に旗ガーランドと雲、キャラクタープロフィール表、草緑面に吹き出し＋角丸写真ギャラリー。
9. よくある質問（疑問解消）: キャラクターのアーチ文字見出し、色違い枠のアコーディオン4つ、枠線の追加リンクボタン。
10. 社会貢献（活動への参加を伝える）: 赤枠の白カードにロゴと説明文、リンク。
11. フッター（関連ブランドと規約導線）: 企業ロゴ、灰枠の関連バナー3つ、区切り線付きテキストリンク、最下部に波形。

Imagery

• 商品パッケージは白背景で切り抜き、グラスの牛乳と並べる。
• ミルクのしぶきと果実（ベリー・いちご・レモン）の高彩度写真を左右に配置。
• 食卓や家族の様子をテーマ色の単線線画で背景に描く。
• 牧場・牛のキャラクターはフラットなアニメ調イラスト。
• イベント写真は明るい屋外スナップを角丸で切り抜く。
• 旗ガーランド・雲・草のイラストで屋外感を演出。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央固定幅（約900px）で背景の生成りと波を全幅に広げる。
• ファーストビューは中央カード＋左右に隣接カードを覗かせるカルーセル。
• お知らせ・特長はPCで横並び（2〜3カラム）。
• 商品紹介はPCで写真と文章を左右交互の2カラム。
• イベントの写真はPCで3〜4カラムのグリッド、フッターは横一列。

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