DESIGN.md — 黄×橙ギンガムと焦茶のキャラメル食品LP（Warm Caramel Gingham Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、力強い・インパクト
• キーワード: ギンガムチェック・飴色シズル・極太丸文字・焦げ茶×山吹・スタンプ風バッジ・手書き付箋
• 地の質感: 黄・橙のギンガム柄、方眼紙地、生成りの紙っぽい地。ソースが垂れる形の境界も使う
• 形: ピル型の白い見出し帯、円形の番号、斜めのリボンラベル、写真フレームは傾けて置く
• 温度感: 暖色系で温かく、甘く香ばしい印象

Colors

• 地は山吹ギンガム→白→オレンジギンガム→生成りの順で交互に切り替える
• 見出しの文字は焦げ茶が基本。キーワードや数値だけオレンジにする
• 数値ボックスやリボンは焦げ茶の面に白文字で締める
• 写真の飴色と地の暖色をそろえ、寒色は使わない
• 白は見出し帯やカードの面に使って、柄の上でも読めるようにする
• stamp-badge は文字 #EB5F00 × 背景 #FEFDFD のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C55000、4.57:1）を使う。

Typography

• 数値は本文の3〜4倍まで大きくし、単位は小さめにする
• 大見出しは2〜3行に分け、キーワードの文字だけさらに大きくする
• 見出しの左右に「\ /」の集中線を添える
• 人の声やレシピには手書き風の書体を使い、売り込みの文と区別する
• 欧文の飾り文字は細いアーチ状に添える程度にとどめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真グリッドは3列、内容量の比較は円を3つ横に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色や柄を切り替えて区切る
• 写真は画面幅いっぱいに見せるか、少し傾けて重ねる
• 特長は「前置き→円形の番号＋ピル見出し→図解」の順に並べる
• 比較は左右2枚のカードを並べる（ベージュと白）
• スタッフ紹介は写真と文を左右交互に置く

Elevation & Depth

• 写真フレームには白い縁と薄い影をつけ、ポラロイド風にする
• 付箋カードは軽い影とクリップ飾りで浮かせる
• 白カードはごく弱い影にとどめる
• 大見出しの文字には白フチや薄い影をつけ、柄の上でも浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 四角いフレームを傾けて置く、円形に切り抜く、商品を手に持つ写真を背景なしで切り抜く
• セクション境界: 雲形の波、下向き矢印型、ソースが垂れる形のギザギザ境界
• 見出し帯は白いピル型の横長にする
• 番号は焦げ茶の円の中に白い数字を入れる
• リボンは斜めに傾け、端を切り欠く
• スタンプ風の円形バッジを写真の角に重ねる

Components

• 番号付き特長見出し（feature-number-heading）: 焦げ茶の円に白数字を入れ、右に白いピル帯の見出しを続ける
• 数値ボックス（stat-box）: 焦げ茶の面に白い太字でラベルと大きな数値を入れる
• スタンプ風バッジ（stamp-badge）: オレンジの二重円に、欧文をアーチ状に配した判子風のバッジ
• 斜めリボンラベル（ribbon-label）: 焦げ茶の帯を傾け、写真の上に短い用途の言葉を載せる
• 比較カード（compare-card）: ベージュと白の縦長カードを並べ、チェックボックス付きの箇条書きを入れる
• 内容量の円（amount-circle）: 上が黄色、下が白の円にアイコンと量を入れ、≒でつないで3つ並べる
• 手書き付箋のレシピカード（recipe-note）: クリップを留めた白い付箋に、手書き風の書体で料理名を書く
• 商品ページへのリンクボタン（link-button）: 焦げ茶の角ばった帯に、白文字と▶をつけたもの
• コスト削減カード（cost-card）: 白カードの左にオレンジのアイコンとラベル、右に説明文を置く

Do's and Don'ts

Do - 暖色のギンガム柄を広い面に使う - 数値は極太の書体で大きく見せる - とろりと垂れる瞬間のシズル写真を多く使う - スタッフの顔写真と手書き風の文で親しみを出す - セクションの境界は波形・矢印形・垂れる形にする

Don't - 寒色やモノトーンの地にしない - 細い明朝体で上品にまとめない - 写真を整然とした格子に並べるだけにしない - 見出しの文字色を黒にしない（焦げ茶を使う） - 余白を広く取りすぎて情報が間延びしないようにする

Page Structure

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

1. ファーストビュー（商品の形と数値の強みを一目で伝える）: シズル写真を全面に敷き、右上にオレンジの円バッジ、右下に焦げ茶の数値ボックスを置く
2. 使用シーンの写真グリッド（どんな食べ方があるかを見せる）: 3列の写真の間に、雲形の白帯と極太のキャッチを挟む
3. ベネフィットの宣言（我慢しなくていいことを強く訴える）: 山吹色の地に焦げ茶の大見出しを置き、下向き矢印で白地へつなぐ。巨大な数値とスタンプバッジを添える
4. 悩みへの共感（ターゲットの気持ちを代弁する）: 人物写真に黄色い吹き出し、斜めの焦げ茶リボンを重ね、そこから商品の誕生につなぐ
5. 特長1〜3（商品の魅力を番号付きで説明する）: ギンガム地に番号とピル見出しを置き、円形の写真での比較図解、数値ボックス、傾けた写真コラージュで見せる
6. 容器タイプの比較（他の容器との違いを示す）: ベージュと白のカードを並べ、チェックリスト形式で比べる
7. 内容量（1回分の量をイメージさせる）: オレンジのギンガム地に大見出しとトーストの写真。その下に内容量の円を3つ、≒でつなぐ
8. アレンジ例（食べ方の幅を見せる）: 欧文の大見出しの下に、ジグザグにずらした写真コラージュ。ソースのしずくを飾りに散らす
9. 関連商品の紹介（一緒に買ってもらう商品を案内する）: 写真を背景にした横長バナーに、明朝風の見出しと焦げ茶のリンクボタンを置く
10. スタッフの声とおすすめレシピ（実際に使った感想で信頼と親しみを出す）: 方眼紙の地に、丸く切り抜いた顔写真と名前リボン。レシピは付箋カードと傾けた写真で見せる
11. 価格への姿勢（安さの理由を説明する）: オレンジのギンガム地に白い大見出しを置き、白カードを縦に2枚並べる
12. 締めのビジュアル（余韻を残して商品を記憶させる）: ソースが垂れる形の境界の下に暗い写真を敷き、白い縦書きの大きなコピーと商品の切り抜きを置く

Imagery

• ソースが垂れる瞬間を、明るい自然光で寄りの構図で撮る
• トースト・プリン・パンケーキ・ラテなど、暖色の料理と組み合わせる
• 手で小袋をつまむカットを、背景なしで切り抜いて使う
• 白衣やエプロン姿のスタッフを笑顔で撮り、丸く切り抜く
• ソースのしずくを装飾として散らし、チェックマークのアイコンも添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では中央に 480〜750px 幅のカラムを置き、左右はギンガム柄で埋める
• 写真グリッドは PC でも3列のまま、サイズだけ大きくする
• 大見出しは PC で 1.3 倍程度まで大きくする
• 比較カードとスタッフ紹介は PC でも横並びのまま、余白を広げる

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