DESIGN.md — 黄色ストライプと明朝の乳製品デザートLP（Butter Yellow Stripe Dessert Dairy LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル
• キーワード: ミルク色・バター色ストライプ・細い明朝・ご褒美感・北海道の牧場
• 地の質感: 地はミルクが流れる布ドレープ風のグラデーションと、筆でかすれたような黄色の縦ストライプ。
• 形: 写真は角丸なしの四角形。商品カードとボタンだけ角丸かピル型にする。フッター上端は丘のような曲線。
• 温度感: 暖色寄りでクリーミー。明るく柔らかい。

Colors

• 導入・成分表はミルク色の布地。特長セクションは2色の黄色ストライプ地にする
• 文字は黒ではなくこげ茶を使い、色味を温かくそろえる
• 緑はブランドの色。外部購入ボタン、フッター、矢印アイコンだけに使う
• 商品カードは半透明の生成り色。ストライプ地の上に浮かせる
• 目立たせたい箇所も彩度の高い赤やオレンジは使わない
• button-primary は文字 #F2F1F1 × 背景 #008548 のコントラスト比が 4.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#007D44、4.64:1）を使う。

Typography

• 感情に訴える文章は細い明朝で組み、字間を広めにとる
• 欧文の商品名にはカタカナのルビを振る
• 番号は大きなセリフ数字にし、見出しのすぐ上に置く
• 成分表やフッターなどの情報部分はゴシックに切り替える
• 導入文は中央揃え。特長の本文は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文章を左右交互に並べる 2 カラム
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は左右に余白を残して幅82%で配置する
• 特長は『写真→番号→見出し→本文』の順を繰り返す
• セクションの間は60〜100pxと広めにとる
• 成分表は左に項目名、右に数値を置く2列。罫線で区切る

Elevation & Depth

• 影はほぼ使わない
• 商品カードは半透明の白で地から浮いて見せる
• 商品の切り抜き写真には、ごく淡い接地影だけ付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。商品パッケージの違いは丸く切り抜いて並べる
• セクション境界: 背景色の切り替えはまっすぐ。フッターだけ丘の曲線と牛のシルエットで始める
• カード内のサブボタンは白いピル型
• 動画サムネイルは角丸16px
• フッターのリンクリストは白い角丸カードにまとめる

Components

• 公式ショップへのボタン（button-primary）: 緑の角丸ボタン。左に白い太字ゴシック、右にロゴのアイコンを置く
• 商品購入カード（product-card）: 左にサムネイル、右に商品名と税込価格。下に白いピルボタンを2つ並べる
• 詳細・カートボタン（button-pill-sub）: 白いピル型のボタン。茶色の明朝ラベルを付ける
• 特長番号（feature-number）: こげ茶の大きなセリフ数字。下に明朝の見出しを続ける
• 小見出しバー（label-bar）: 左に金茶の細い縦線を付けた小さな欧文ラベル
• パッケージ違いの丸窓（variant-circles）: 拡大した円形切り抜きを3つ並べ、吹き出しの尾で商品とつなぐ
• 成分表（spec-table）: 黒い罫線で区切った2列の表。右揃えの数値と注記を入れる
• フッターのリンクカード（footer-link-card）: 緑地の上に置く白い角丸カード。見出し帯は淡いクリームで、行ごとに緑の矢印を付ける

Do's and Don'ts

Do - 明朝体は細く、字間を広くして余裕を見せる - 黄色ストライプは筆でかすれたような質感にし、2色の幅を不規則にする - 背景は布やミルクのドレープ風にして、柔らかさを出す - 緑はブランドの要素とフッターだけに絞って使う - 商品名の欧文にはカタカナのルビを振る

Don't - 太いゴシックで大きく叫ぶような訴求をしない - 赤い価格バッジや派手なセールの装飾を使わない - 写真に強い角丸やドロップシャドウを付けない - 純黒の文字を本文に使わない - 黄色の面積を減らして寒色系の地にしない

Page Structure

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

1. ヘッダー（ロゴとメニュー）: 白地に左ロゴ、右にハンバーガーメニュー
2. ファーストビュー（商品の世界観を伝える）: 黄色ストライプのクロスに置いた商品写真を全面に敷く。白の縦書き明朝コピーと筆記体のサブロゴを重ねる
3. ブランド導入（商品の考え方を語る）: ミルク色のドレープ地。欧文タイトル、商品2点の切り抜き、中央揃えの明朝リード文を並べる
4. 動画（CMで信頼感を補う）: 白地に小見出しバーと角丸の動画サムネイル
5. 特長（番号付き×4）（味・原料・食感・形態を説明する）: 黄色ストライプ地。写真、大きな番号、明朝見出し、本文を繰り返す
6. パッケージ違いの紹介（楽しさを添える）: 点線の区切りの後に、商品と丸窓3つを吹き出しでつないで見せる
7. 購入カード（EC購入へ誘導する）: 半透明の白カードに価格とピルボタン2つ
8. 商品情報（成分・栄養を示す）: ドレープ地。商品の切り抜きの下に罫線区切りの表を置く
9. CTA（公式ショップへ送る）: 白地に一言の案内文と緑の角丸ボタン
10. フッター（サイト内の回遊）: 牛のシルエットと丘の曲線から緑地を始める。白いリンクカードとSNSアイコンを置く

Imagery

• 商品は黄色ストライプのクロスや木のテーブルに置き、自然光で明るく撮る
• とろりとしたヨーグルトや注がれるミルクの質感を、白背景で寄って撮る
• フルーツや焼き菓子を脇役にして、家庭的なデザートの情景を作る
• 商品の切り抜き画像を中央に置いて見せる
• 牛と丘のシルエットで北海道らしさを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューを横長の情景写真にし、商品を並べて置く
• PCの特長は写真と文章を左右交互の2カラムにし、写真は画面端まで寄せる
• PCではストライプ地の余白にクローバーやスプーンの装飾を散らす
• PCの成分表は商品2種を横並びの2列にする
• PCのフッターはロゴとリンク群、SNSを横一列に並べる

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