DESIGN.md — 生成り×テラコッタの子育て食品アンケートLP（Warm Terracotta Parenting Survey Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル
• キーワード: 生成り・テラコッタ・アンケート結果・吹き出し口コミ・フラットイラスト・不定形写真
• 地の質感: 質感のないフラットな単色面。斜線ハッチと輪の装飾を少し添える
• 形: 有機的な不定形ブロブ、大きめ角丸のカード、吹き出しのしっぽ、波形のセクション境界
• 温度感: 暖色寄りで温かい。青緑で少しだけ締める

Colors

• 基本の地は生成りにする。口コミ帯だけピーチ地に切り替えて、ゾーンを分ける
• 見出し・Q番号・本文の強調語はすべてテラコッタ橙で揃える
• 青緑は装飾ブロブ・グラフ・吹き出しの一部だけに使い、面積は 5% 以下に抑える
• カードは白の面のみで作り、枠線は付けない
• 赤は締めのリンクボタンとロゴまわりだけに使う
• グラフは橙と青緑の濃淡グラデーションで塗り分ける
• button-pill-primary は文字 #FEFBF3 × 背景 #ED7E51 のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CB4915、4.51:1）を使う。
• speech-tag は文字 #FEFBF3 × 背景 #E6784C のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C74D1C、4.51:1）を使う。

Typography

• 見出しとリードは中央揃え、口コミと解説は左揃えにする
• 字間は広め（0.05〜0.1em）にして、ゆったり読ませる
• 口コミの要点は太字＋橙で一文だけ強調する
• Q番号は欧文の太字で大きく置き、すぐ下に橙の設問文を続ける
• 写真キャプションは手書き風の書体で、弧を描くように傾けて配置する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は口コミを 4 カラム、写真は 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 22px（375px 幅換算）
• Q ブロックごとに 70〜90px の間隔を空ける
• 口コミカードは左右 16px ほどの余白でほぼ全幅にする
• カードとカードの間にフラットな人物イラストを挟んでリズムを作る
• ランキングは順位と項目の 2 列で並べ、破線で区切る

Elevation & Depth

• 影は使わず、すべてフラットにする
• 奥行きは白カードと色地のコントラストだけで出す

Shapes

• 角丸: 小 8px ／ 中 18px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は有機的な不定形ブロブ、または円形に切り抜く
• セクション境界: ゆるやかな波形のカーブ
• 口コミカードは角丸 18px 程度にし、下中央寄りに三角のしっぽを付ける
• FV と写真の周りに輪・斜線ハッチ・ブロブを散らす
• 吹き出しコメントは手書きの曲線で囲み、商品の小画像を添える

Components

• 大型ピルボタン（button-pill-primary）: 橙ベタ塗りに白太字を載せた、全幅近くのピル型ボタン
• 枠線リンクボタン（button-outline-link）: 白地に赤い枠と赤文字、右端に矢印を置いた 2 行のピル型ボタン
• Q番号見出し（q-heading）: 大きな欧文の Q 番号を置き、その下に橙の設問文を中央揃えで続ける
• 口コミ吹き出しカード（voice-bubble）: 白い角丸カードにしっぽを付ける。本文の要点は橙の太字にし、右下に地域・年代を添える
• 円グラフカード（chart-card）: 白カードの中に円グラフを置き、色付きの四角マーカーで凡例を並べる
• ランキング表（ranking-list）: 順位と項目を太字で並べ、行ごとに破線で区切る
• 手書き線コメント（handwritten-comment）: 手書きの曲線で囲った短い感想に、商品パッケージの小画像と色付きの円を添える
• 色付き吹き出しタグ（speech-tag）: 橙または青緑の楕円の吹き出しに、白文字で短い回答を入れる
• マーカー強調（marker-text）: 赤い太字の下に黄色のマーカー線を引く

Do's and Don'ts

Do - 生成りとピーチの 2 色の地でゾーンを分ける - 口コミの間に家族のフラットイラストを挟む - 強調には橙の太字を使う - 数値はグラフとランキングで見せる - 写真は不定形に切り抜き、手書き風のキャプションを添える

Don't - 濃い影やグラデーションを使わない - 純黒や寒色の大きな面を使わない - 角張った四角い写真を並べない - 赤を多用しない - 文字を詰めすぎない

Page Structure

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

1. ファーストビュー（企画の趣旨を伝える）: 角に橙と青緑のブロブを置き、人物イラスト・手書き風の大見出し・中央揃えのリードを並べる
2. 写真コラージュ（実際の利用シーンを見せる）: 円形の写真に輪・ハッチ・ブロブを重ねる
3. CTA（結果へ誘導する）: 橙の大型ピルボタンを置く
4. アンケート Q1〜Q4（利用実態を示す）: Q 見出しの下に円グラフ、イラスト、ランキング、吹き出しを組み合わせる
5. アンケート Q5（変化を数値で示す）: ピーチ地に切り替え、白カードに円グラフと凡例を入れる
6. お客様の声（共感を生む）: 白い吹き出しカードとイラストを交互に縦へ並べる
7. 食卓写真ギャラリー（使い方を具体的に見せる）: 手書き線のコメント、商品の小画像、不定形写真をセットにして繰り返す
8. アンケート Q6（得られた時間の使い道を示す）: 波形の境界で生成り地に戻し、ランキング表と解説文を置く
9. まとめ（商品を試すよう促す）: 企画ロゴ、中央揃えのリード、黄色マーカー、注釈を並べる
10. CTA・購入先（購入へ誘導する）: 赤い枠線のピルボタンを置き、その下に白地に枠付きの通販バナーを縦に並べる

Imagery

• グレー・橙・青緑の 3 色に限ったフラットな人物イラスト（家族・育児・食卓）
• 自然光で俯瞰に近い角度から撮った、家庭の食卓写真
• 写真は不定形のブロブで切り抜く
• 装飾として、白抜きの輪・斜線ハッチ・大きなブロブを置く
• 手書きの黒い曲線を、コメントの囲みに使う
• やさしいタッチの水彩風の手描きイラストを、カード内のアクセントに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅のコンテナに収める
• PC では Q2 と Q3 を 2 カラムで並べる
• PC では口コミカードを 4 カラムのグリッドにする
• PC では写真ギャラリーを 2 カラムにする
• PC の円グラフカードはグラフと凡例を横並びにする
• SP はすべて 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 行書くと起動時に読み込まれる。