DESIGN.md — 卵色×焦げ茶の手描き風惣菜食品LP（Warm Egg Yellow Home Cooking Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ポップ・元気、ナチュラル
• キーワード: 卵色・焦げ茶・手描きイラスト・波形の帯・卵形の写真・家庭の台所
• 地の質感: 生成りの和紙のような細かい粒状テクスチャを地に敷き、黄色帯には淡いまだら模様を重ねる
• 形: 大きな角丸の白カード、ピル型ボタン、卵形やいびつな丸の写真枠、波打つセクション境界
• 温度感: 暖色寄りで温かい

Colors

• 地は生成りと卵色帯を交互に置き、境界は波形にする
• 文字は黒を使わず焦げ茶で統一する
• 見出し内の最重要語だけ朱赤にする
• 主ボタンは朱赤塗り、サブは白地に焦げ茶枠
• 黄色帯の上には白カードを載せて可読性を確保
• 装飾の差し色は黄身のオレンジ・ミント・緑の野菜色に限る
• button-primary は文字 #FFF1EC × 背景 #E1514B のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D52B24、4.53:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一し柔らかさを出す
• 見出しの左右にフォークとスプーンの手描きアイコンを添える
• 本文は中央揃え、行間2.0でゆったり
• 強調語は朱赤＋一回り大きく
• 番号は丸みのある欧文で小さな英字ラベルと組む
• 背景に薄い白抜きの大きな英字を透かしで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品の下段は 2 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 悩みの吹き出しは左右交互にずらして縦に並べる
• 特長カードは上辺に丸い番号バッジを半分はみ出させる
• 商品カードは上部に調理時間のタブ状の山を付ける
• 特長説明は写真と文章を左右交互に配置
• アレンジ例は横スクロールのカルーセル
• イラストを画面端からはみ出させて余白に置く

Elevation & Depth

• カードは影なしまたはごく薄い影でフラット
• 吹き出し・写真の背後にクリーム色のずらし影を置く
• アレンジ写真の下に楕円の淡いグレーの接地影
• 主CTAには薄いドロップシャドウ

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 料理写真は卵形・いびつな丸に切り抜き、クリーム色の縁取りを付ける
• セクション境界: ゆるやかな波形のカーブで黄色帯と生成り地を切り替える
• 四角い写真は使わず有機的な形に切る
• 商品パッケージは切り抜きで重ねて扇状に並べる
• 見出しリボンは焦げ茶のピル型帯
• ボタンは完全なピル型
• 吹き出しは手描き風のいびつな円

Components

• 主CTAボタン（button-primary）: 朱赤のピル型。最終CTAは右端に白丸の再生矢印、上に白い吹き出しラベルを重ねる
• サブボタン（button-secondary）: 白地に焦げ茶2px枠のピル型
• 悩み吹き出し（worry-bubble）: 白いいびつな円にクリームのずらし影、周囲に野菜や時計の手描きイラスト
• ポイントカード（point-card）: 白の大きな角丸カード、上中央に焦げ茶丸の番号バッジ
• 番号バッジ（point-badge）: 焦げ茶の円に白の小さなPointと大きな番号
• 焦げ茶帯リード（ribbon-heading）: 焦げ茶のピル帯に白文字2行
• 商品カード（product-card）: 白角丸カード。上に山型タブで鍋アイコンと調理時間（数字は朱赤）、パッケージ・商品名・ボタン2段
• 卵形レシピ写真（egg-photo-card）: 卵形に切り抜いた料理写真と、下に紙片風の白ラベルでレシピ名

Do's and Don'ts

Do - 地にうっすら紙の質感を入れる - 文字色は焦げ茶、強調だけ朱赤 - 調理器具や卵の手描きイラストを余白に散らす - 写真は卵形など有機的な形で切り抜く - 黄色帯と生成り地を波形で交互に切り替える - ボタンは主・副の2段セットで並べる

Don't - 純黒や寒色を主役にしない - 直線的な四角い写真枠やシャープな角を使わない - 細い明朝体で上品に寄せすぎない - 朱赤を本文に多用しない - 強い影や立体的なグラデーションを付けない - イラストをリアルなCG調にしない

Page Structure

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

1. ファーストビュー（完成料理と商品群で一目で魅力を伝える）: 料理の大写真全面に緑のリボン型コピー、下部に商品パッケージを横並び
2. 悩みの提起（献立の悩みに共感させる）: 生成り地に白い吹き出しを3つ左右交互、困り顔の主婦イラスト
3. 解決の提示（商品が悩みを解決すると示す）: 強調語を朱赤にした2行見出し、下は波形で黄色帯へ
4. 商品紹介と特長（シリーズの手軽さを3点で伝える）: 黄色帯に焦げ茶リボン、扇状のパッケージ、番号バッジ付き白カード3枚、透かし英字
5. シリーズのこだわり（食感や味の価値を伝える）: ロゴ風バッジ、卵形写真と番号付き説明を左右交互、点線区切り
6. 商品ラインナップ（各商品へ誘導する）: 黄色帯に調理時間タブ付き白カード、主力は1列大、他は2列小
7. アレンジレシピ（使い方を広げる）: 卵形写真の横スクロール、紙片ラベル
8. CTA（レシピページへ送客）: 白吹き出しラベル付きの朱赤ピルボタン、鶏のイラスト

Imagery

• 料理は湯気やとろみが見える寄りの暖色写真
• 商品パッケージは切り抜きで傾けて重ねる
• フライパン・木べら・卵・野菜・鶏の手描き水彩風イラスト
• 人物は線画に淡彩のやさしい主婦イラスト
• 動きを示す手描きの短い線や渦を添える
• 写真の縁にクリーム色のずらし枠
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に幅約1000pxで配置し背景は全幅
• 悩み吹き出しはPCで3つ横並び
• 特長カードはPCで3カラム
• 商品は主力3カラム、小カード4カラム
• こだわり説明は写真と文を左右2カラム
• アレンジ写真は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 行書くと起動時に読み込まれる。