DESIGN.md — クリーム黄×焦げ茶のほっこり乳製品キャンペーン LP（Creamy Yellow Dairy Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ポップ・元気、ナチュラル
• キーワード: バター色・焦げ茶文字・手描き枠・街並みシルエット・ミルクの流れ・緑ボタン
• 地の質感: 淡い黄色地にかすれた斜めストローク柄。ミルクが流れる曲線と紙のような手描き枠で、ぬくもりを出す。
• 形: 丸みのある太字、角丸の写真、ピル型ボタン、もこもこした雲形の境界、吹き出し型バッジ。
• 温度感: 暖色寄り。黄色とクリーム色が主体で、緑はボタンとロゴだけに使う。

Colors

• 地は黄色（primary）→山吹（secondary）→クリーム（background）の順に移し、セクションを切り替える。
• 文字は黒を使わず、すべて焦げ茶（text）にする。
• 緑（cta）は応募・外部リンクのボタンとロゴだけに使う。
• 強調したい数字は焦げ茶の文字に白フチを付けて目立たせる。
• カードの内側は surface のクリーム色、外枠と点線は line の茶色にする。

Typography

• 見出しは極太の丸ゴシックで、白フチを付けてポップにする。
• 見出しの中の数字は 1.4 倍ほどに大きくする。
• 商品名は欧文セリフにし、上に字間を広げた小さなカナを添える。
• カードの本文は中央揃えにし、1 行ごとに点線を引く。
• 注釈は※で始め、本文より 2〜3 段階小さくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、中央揃えが基本
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面幅の約 88% で中央に置く。
• カード同士の間は 24px 前後空ける。
• 告知文の左右に斜めの集中線を付ける。
• セクションの終わりに街並みのシルエットを敷く。
• ボタンは幅 85% ほどで中央に置く。

Elevation & Depth

• ボタンは下に濃い緑の厚みを付けた立体型にする（ぼかした影は使わない）。
• 商品の切り抜き写真には白フチと黄色フチを付け、ステッカー風にする。
• カードには影を付けず、手描きの茶色の枠線だけで浮かせる。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 16px の長方形。商品は切り抜きにし、白フチを付ける。
• セクション境界: ミルクが流れる曲線、雲形のもこもこ、街並みシルエットで区切る。
• カードは二重線の手描き枠にし、四隅に装飾の線を入れる。
• バッジは焦げ茶の不定形な吹き出しにする。
• ラベルは焦げ茶のピル型にする。

Components

• 応募 CTA ボタン（button-primary）: 緑のピル型ボタン。右に矢印を付け、下に濃い緑の厚みを付ける。
• 吹き出しバッジ（badge-bubble）: 焦げ茶のもこもこ吹き出しに白文字 2 行。少し傾けて置く。
• 手描き枠の商品カード（card-framed）: クリーム地に茶色の二重枠、四隅に飾り線。中に欧文の見出し・写真・点線区切りの本文を入れる。
• ブランドラベル（label-pill）: 焦げ茶の小さなピル型に白文字。カードの見出しの上に置く。
• 植物の飾り付き見出し（heading-ornament）: 欧文セリフの見出しの左右に、線画の植物モチーフを置く。
• 応募期間ラベル（period-tag）: 焦げ茶の四角いラベルの横に日付を太字で書く。曜日は丸囲みにする。
• 木の看板見出し（wood-sign）: 茶色の木の板に白抜きの見出しを載せ、両脇に商品写真を添える。
• 注釈リスト（note-list）: ※で始まる小さな文字の注釈を、ぶら下げインデントで並べる。

Do's and Don'ts

Do - 黄色とクリーム色の暖かいグラデーションでセクションを移す。 - 文字はすべて焦げ茶にし、見出しは白フチ付きの極太丸ゴシックにする。 - CTA は緑の立体ピル型に統一する。 - 牛・植物・街並みなど、手描きの線画を添える。 - 商品の量を見せる場面では、並べて積んだ写真で物量を出す。

Don't - 純黒や寒色の文字を使わない。 - 緑を装飾に多用しない。 - 角の鋭いボタンやフラットな影なしのボタンにしない。 - カードを無地の白にして手描き枠を省かない。 - 本文を左揃えの長文にしない。

Page Structure

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

1. ファーストビュー（何が当たるかを一目で伝える）: 黄色地に極太見出し 4 行、スタンプ風の装飾、ミルクの曲線の上に商品の切り抜き、下端に街並みシルエット。
2. プレゼント概要（賞品の数と内容を示す）: 山吹色の帯に吹き出しバッジ、集中線付きの告知文、商品を積み上げた写真、大見出し、注釈。
3. シリーズ紹介見出し（商品シリーズを導入する）: 小さなカナ、欧文セリフの見出し、両脇に牛のイラスト。
4. 商品紹介カード 1（1 つ目の商品の特長を伝える）: 手描き枠のカードに、ラベル、飾り付き見出し、角丸写真、点線区切りの中央揃え本文。
5. 商品紹介カード 2（2 つ目の商品の特長を伝える）: 同じ型のカードを繰り返し、写真は飲む・注ぐシーンにする。
6. 専門家の試食（第三者の評価で信頼を得る）: 木の看板の見出し、問いかけ型のリード文、角丸の動画埋め込み、注釈。
7. 応募 CTA（応募へ誘導する）: 雲形の白地にギフトアイコン、プレゼント告知、積み上げ写真、緑ボタン、応募期間、注釈、街並み。
8. ブランドサイト誘導（ブランドサイトへの送客）: クリーム地に誘導文、集中線付きのシリーズ名、緑ボタン、提供表記とロゴ。

Imagery

• 商品は切り抜きにして白フチを付け、ステッカー風に少し傾ける。
• シーン写真は明るい自然光で撮る。黄色や青のストライプのクロス、焼き菓子や果物を添える。
• 賞品の物量は、同じ商品をピラミッド状に積んで見せる。
• 装飾は茶色の線画（牛、植物、集中線）と、淡い黄色の街並みシルエットで描く。
• 背景に、ミルクが流れるような白い曲線と、かすれた斜めのストロークを入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨にとどまる。PC では 480〜600px 幅の中央カラムに収め、両脇は黄色地を広げる。
• カードは最大幅 520px にし、写真は 2 カラムにしない。
• PC では見出しを 1.2 倍程度まで大きくする。
• PC ではボタン幅を最大 400px に固定する。

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