DESIGN.md — 白木目と水彩色の健康菓子シリーズ LP（Bright Breakfast Table Snack Series LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感、清潔・爽やか
• キーワード: 白木目・水彩のにじみ・朝食の食卓・焦げ茶の明朝・手書きの吹き出し・商品色の使い分け
• 地の質感: 白く塗った木目の板の地に、水彩のにじみと紙のような質感を重ねる
• 形: かぎ括弧の見出し、不定形の水彩の楕円、少し傾けたポラロイド風カード、ステッチ点線入りの帯
• 温度感: 明るく温かい。朝の光を感じる柔らかさ

Colors

• 地は白木目で全体を明るく保つ
• 見出しと帯の基本色は焦げ茶にする
• 商品セクションは、その商品のパッケージ色で見出し・帯・ボタン線を染める
• 商品写真の背景には、商品色に近い水彩のにじみを敷く
• 強調の帯は水色と緑の 2 色だけ。白文字に点線のステッチを入れる
• 見出しのかぎ括弧は、オレンジ・水色・赤・青・緑の差し色にする
• stitch-banner は文字 #FDFDFD × 背景 #3AA9DC のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1E7DA9、4.53:1）を使う。
• badge-kcal は文字 #3AA9DC × 背景 #FFFFFF のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1E7DA9、4.6:1）を使う。

Typography

• 見出しは太い明朝で、どっしり温かく見せる
• セクション見出しの上には、斜めに傾けた欧文の手書きを小さく添える
• 見出しの下に波線のアンダーラインを引く
• 素材の特徴は手書き書体で、水彩の吹き出しの中に入れる
• 本文は小さめのゴシックで、行間を広めにとる
• 商品名の大見出しは 2 行に分け、文字を写真に少し重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。例示アイコンは 2〜3 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品紹介は、写真→大見出し→帯→本文→ボタンの順に縦へ積む
• 商品写真は画面幅いっぱいの水彩のにじみの上に置く
• 情報カードは白地に薄い影。上下を二重線で区切った見出しを入れる
• おすすめカードは少し傾け、左右交互にずらして置く
• ボタンは中央に置き、幅は 60% 前後にする

Elevation & Depth

• 白カードには、ぼかしの大きい薄いグレーの影をつける
• ポラロイド風カードには、白枠と柔らかい落ち影をつける
• 商品写真には自然な接地影をつける
• TOP ボタンは丸い紙の質感にし、軽く影をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き。食材は角版のポラロイドか切り抜き
• セクション境界: 境界線は引かない。水彩のにじみと木目の切り替えでつなぐ
• ボタンは角丸が小さめの長方形で、枠線だけにする
• キャッチの帯はピル型にする
• 強調の帯は角丸の長方形で、内側に白の点線ステッチを入れる
• 吹き出しは不定形の水彩の円にする
• ファーストビューと締めは、緑の太いボーダー柄の布地の上に円形の皿を置く

Components

• 枠線ボタン（button-outline）: 白地に商品色の 2px 枠線。明朝のラベルと右端の矢印
• かぎ括弧見出し（heading-bracket）: 差し色のかぎ括弧で挟んだ明朝の見出し。上に欧文の手書き、下に波線
• ステッチ帯（stitch-banner）: 水色か緑の帯。上下に白の点線を入れ、白い明朝の 2 行コピーを載せる
• 水彩の吹き出し（watercolor-bubble）: 黄・橙・紫・水色の不定形のにじみに、手書きで素材の特徴を書く
• キャッチ帯（tagline-pill）: 商品色のピル型の帯に、白い明朝のキャッチを載せる
• 情報カード（info-card）: 白カード。二重線の見出しと、オレンジ枠の例示グリッドを入れる
• 傾いたポラロイド（polaroid-card）: 白枠に写真を入れ、下余白に手書き文。少し回転させる
• 丸い数値バッジ（badge-kcal）: 白〜水色のグラデーションの円に、数値を明朝で入れる

Do's and Don'ts

Do - 白木目の地と水彩のにじみで、明るい食卓の空気を保つ - 商品ごとにパッケージ色で見出しとボタンを揃える - 見出しには欧文の手書きとかぎ括弧を必ず組み合わせる - 素材の訴求は手書きの吹き出しで柔らかく見せる - 食材の写真を添えて原材料を連想させる

Don't - 黒や濃い単色のベタ背景のセクションを作らない - ボタンを塗りつぶしの派手な色にしない - 見出しを細いゴシックにしない - 水彩のにじみの輪郭をくっきりした図形にしない - 差し色を 1 つのセクションに 3 色以上混ぜない

Page Structure

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

1. ファーストビュー（シリーズ全体と健康価値を一目で伝える）: 緑のボーダー布の上に白い皿を置き、明朝のコピーを入れる。周りに 4 商品を配置し、下に朝食の小物
2. シリーズの概要（おいしさと数値の両立を伝える）: かぎ括弧見出しの下に、水色のステッチ帯と丸い数値バッジ
3. 素材の特長（各商品の原材料の魅力を示す）: 色違いの水彩の吹き出しを散らし、食材の写真を添える。最後は緑の帯でまとめる
4. 数値の解説（カロリーの目安を身近な食品で説明する）: 白カードに二重線の見出しを置き、オレンジ枠の中に食品イラストをグリッドで並べる
5. おすすめの人（利用シーンを 3 つ示す）: 傾いたポラロイドカードに、手書きのひと言を添える
6. 商品紹介（各商品の特徴と成分を伝える）: 商品色の水彩の上に商品写真を置く。商品色の大見出し、キャッチ帯、本文、枠線ボタンの順に繰り返す
7. 関連の案内（別シリーズへ誘導する）: 小見出しと横長のバナーを 1 枚
8. シェアと締め（拡散を促してページを締める）: 緑のボーダー布に白いパネルを載せ、コピーを再掲。SNS の丸アイコンを 3 つと TOP ボタン
9. フッター（ブランドサイトと規約へ導く）: 青のピル型リンク、テキストリンク、ロゴ、コピーライト

Imagery

• 商品パッケージは切り抜きで、個包装を手前に重ねる
• ミルクピッチャー・大豆・麦の穂・りんご・穀物などの食材を、白背景で明るく撮る
• 商品色に合う水彩のにじみを、写真の背景いっぱいに敷く
• 白く塗った木目の板を全面の背景テクスチャにする
• 例示の食品はやわらかい陰影のリアル寄りイラストにし、半分を点線で区切る
• 上から見下ろした朝食の小物（サラダ・ジュース・コーヒー）で画面の端を飾る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せで、コンテンツ幅は約 80%。ヘッダーにナビとオンラインショップのボタンを横に並べる
• PC のファーストビューは横長の布地にし、4 商品を横 1 列に並べる
• PC の素材の吹き出しは 3 列で散らして配置する
• PC の例示食品とポラロイドは横 1 列に並べる
• PC の商品紹介は写真とテキストの 2 カラムにし、左右を交互に入れ替える
• PC のフッターリンクは 1 行に横並びにする

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