DESIGN.md — 生成り和紙と桃色の雑穀食品 LP（Warm Washi Grain Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、情報量多め・訴求型
• キーワード: 和紙の質感・桃色の強調・こげ茶の見出し・大きな数字・手描きイラスト・家庭の食卓
• 地の質感: 薄い繊維が入った和紙調の生成り地。部分的に水彩のにじみ円とストライプ地を敷く
• 形: 角丸カード、正円バッジ、米粒形の枠、吹き出し、細いリボン帯
• 温度感: 暖色寄りでやわらかく温かい

Colors

• 地は生成りの和紙調で統一し、純白はカードの面だけに使う
• 見出しはこげ茶、キーワードと数字だけを桃赤で強調する
• サブの強調はオレンジとし、桃赤と1見出しの中で役割を分ける
• 淡い桃色とアプリコットはバッジ・帯・円の面に使う
• 本文中の要点には黄色の波線マーカーを引く
• 栄養素ごとに桃・橙・茶・オリーブで色分けする
• point-label は文字 #D85553 × 背景 #FDFDFD のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D3403E、4.51:1）を使う。
• stat-card は文字 #D85553 × 背景 #FDFDFD のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D3403E、4.51:1）を使う。
• worry-card は文字 #F36D22 × 背景 #FDFDFD のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C84F0B、4.51:1）を使う。

Typography

• 見出しは字間を少し広げ、ゆったり組む
• 1つの見出しの中でこげ茶と桃赤を混ぜ、キーワードだけを色替えする
• 数字は単位の約2倍の大きさにする
• 注釈は小さいグレー文字で数字の直後に置く
• 本文は中央揃えを基本とし、口コミカード内だけ左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。栄養比較カードのみ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面端から約5%内側に置く
• 口コミカードにはイラスト人物を左右交互にはみ出させる
• 数字訴求は中央に大きく1つだけ置く
• セクションの切り替えは地色を変えて示す
• 図表（レーダーチャート）の周りに倍率の円バッジを散らす

Elevation & Depth

• カードには薄くぼかした影（0 2px 8px rgba(0,0,0,.08)）を付ける
• 数字の吹き出しは白地と柔らかい影で浮かせる
• それ以外の面はフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸の四角か白縁付きで少し傾けて置く。商品パッケージは切り抜きにする
• セクション境界: 基本は直線で地色を切り替える。所々に下向き三角の切り欠きを入れる
• ラベルは正円またはピル型にする
• 栄養素は米粒形の手描き枠で囲む
• 見出しの強調には吹き出し型の枠を使う
• 細い角ばったリボン帯をサブコピーに使う

Components

• 口コミカード（review-card）: 白い角丸カード。桃赤の見出しと本文、黄色マーカーで構成し、人物イラストを横に添える
• 水彩円バッジ（circle-badge）: 淡い桃色・橙色の正円に短い価値ワードを入れたもの。3つ並べる
• POINT番号（point-label）: 白い円に「POINT」と大きな数字を入れ、桃赤の線で囲む
• こげ茶の帯見出し（ribbon-dark）: 画面幅いっぱいの、こげ茶の帯に白文字を載せる
• 栄養比較カード（stat-card）: 白カードに栄養素名、比較対象、大きな倍率数字を入れ、野菜の切り抜きを角にはみ出させる
• 吹き出し強調枠（speech-frame）: 白地をオレンジの細線で囲み、しっぽ付きの角丸枠に強調文を入れる
• 分量ボックス（recipe-box）: アプリコット地に分量を大きく、補足をピル型ラベルで添える
• 悩みカード（worry-card）: 白い角丸カードを縦に並べる。1行目は灰色文字、2行目はオレンジで悩みを書く

Do's and Don'ts

Do - 地は必ず和紙調の生成りにする - 数字は桃赤で大きく、単位は小さくする - 人物と食材は手描き風のやさしいイラストで添える - 要点には黄色の波線マーカーを引く - 栄養素は色分けしてカテゴリを示す

Don't - 真っ白一色や寒色ベタの背景にしない - 角張った太い黒の罫線を使わない - 原色の赤や彩度の高い青を使わない - 本文を桃赤で長く組まない - 影を強くして硬い印象にしない

Page Structure

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

1. ファーストビュー（新商品の登場を伝える）: 明朝の大きな商品名に麦穂の装飾を添え、ピル型のサブコピーを入れ、下に食卓写真を全幅で置く
2. ラインナップ（選べる2種類を示す）: アプリコット帯の上に2枚のカードを並べ、NEWと定番の円バッジを付ける
3. お客様の声（おいしさを実感の声で示す）: 子どもの写真に水彩円の吹き出しを重ね、口コミカードを左右交互に3枚置く
4. 価値の宣言（大切にしている3つの価値を示す）: 水彩の正円バッジを3つ横に並べる
5. 特長1 栄養（栄養の配合を示す）: POINT番号、米粒形の栄養素枠4つ、レーダーチャートと倍率バッジで構成する
6. 野菜との比較（栄養価の高さを具体的に示す）: ストライプ地に2×2の比較カードを置き、野菜の切り抜きを添える
7. 特長2 原料（国産原料のこだわりを示す）: 畑の写真をフェードさせ、桃赤ベタの見出し帯と説明文を重ねる
8. 機能訴求（食物繊維の働きを示す）: 体の写真の左右に円バッジを置き、吹き出し枠で倍率を強調する
9. 使い方（手軽さを伝える）: 大きな見出しの下に写真と分量ボックスを左右に並べ、番号付きの手順を添える
10. 分量比較（好みで調整できることを示す）: 白カードに炊き上がり写真と分量ボックスを交互に配置する
11. 実績（出荷量・レビュー数で信頼を示す）: 雑穀の写真の上に白い楕円を置き、桃赤の巨大数字と星評価を入れる
12. 別商品の紹介（2つ目の商品を訴求する）: 縦書きのコピーと茶碗の写真、水彩のにじみを敷いたロゴ風の見出しで構成する
13. 悩みと解決（共感から解決へ導く）: 悩みカードを4枚縦に並べ、続けて解決の見出しとオレンジの数字バッジを置く
14. 使い方まとめ（手軽さを再度伝える）: オレンジの太枠で囲んだ区画に分量の表と写真を置く

Imagery

• 料理写真は木の食卓に自然光を当て、温かい色調で撮る
• 食卓には和食器と箸を入れ、生活感を出す
• 人物は子どもの笑顔を正面から明るく撮る
• イラストは細い線と淡い塗りの手描き風。頬は桃色にする
• 装飾には麦穂、雪の結晶のような小さな線画、水彩のにじみ円を使う
• 食材（野菜・雑穀）は切り抜きにし、カードの角にはみ出させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP 幅に近い縦長の 1 カラム。PC では中央に約480〜750px の固定幅で配置する
• PC では左右の余白に和紙調の地を延長する
• SP では比較カードを 2 列のまま、文字を縮めて保つ
• SP では使い方の写真と分量ボックスを縦積みにする
• 大きな数字は SP で 40〜56px 程度に抑える

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