DESIGN.md — 黄×緑の手描き文字ミールキット LP（Playful Yellow Green Meal Kit LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、かわいい
• キーワード: 黄と緑の大きな面・手描き文字キャラ・フラットな人物イラスト・Q&A 吹き出し・大きな数字の特典
• 地の質感: ベタ塗りのフラットな面に、かすれのある手描き風文字ブロックと切り抜いた料理写真を重ねる
• 形: 角丸の白カード、ピル型ラベル、雲形の吹き出し、手描き風の集中線
• 温度感: 暖かく元気。黄色と生成りの暖色に緑で安心感を足す

Colors

• 地の色は黄→緑→生成り→黄→緑→黄と大きな面で切り替え、セクションの区切りにする
• 緑の面の上には白カードを置き、カード内の見出しは緑文字にする
• 緑の面の上の本文は白、小見出しは黄色にする
• 強調語には黄色のマーカー線を下半分に引く
• 購入・申込ボタンは焦げオレンジに統一し、他の要素には使わない
• 特典の金額はオレンジ黄の極太数字に濃い影を付けて目立たせる
• button-primary は文字 #FEF9F6 × 背景 #D45415 のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C44E13、4.52:1）を使う。
• label-pill は文字 #009247 × 背景 #FFD101 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#006933、4.68:1）を使う。
• answer-card は文字 #009247 × 背景 #FFFFFF のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#006933、4.56:1）を使う。
• thought-cloud は文字 #009247 × 背景 #FFFFFF のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#006933、4.56:1）を使う。
• voice-card は文字 #FE8201 × 背景 #FFFFFF のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B75E01、4.55:1）を使う。
• badge-star は文字 #009247 × 背景 #FFD101 のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#006933、4.68:1）を使う。

Typography

• 見出しはすべて太い丸ゴシックで、字間を広めにとる
• 見出しは助詞だけ小さくし、名詞を大きくして読ませる
• ロゴ風の文字は 1 文字ずつ色の違うブロックに白抜きで入れる
• リード文の左右に斜めの短い線を 2〜3 本ずつ置く
• 本文は中央揃えか左揃えで 13px 前後にし、注釈は 10px にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真のグリッドは 2 列
• 本文ブロックの幅: 画面幅の約 83%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右に約 32px の余白を残して中央に置く
• Q 吹き出しと人物イラストは左右交互に配置する
• カード内の項目は緑の点線で区切る
• 声のカードは横スクロールのカルーセルにし、両隣を少しはみ出させる
• 特典は番号付きの緑ピル見出し→説明→大きな数字の順で縦に並べる

Elevation & Depth

• 基本は影なしのフラット
• ボタンは下に濃い同系色のベタ影を 4px 付ける
• 声カードは右下に黄色のオフセット影を付ける
• 特典の数字は濃いオレンジの立体ドロップ影を付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は角丸の四角か切り抜き。人物は丸型サムネイルも使う
• セクション境界: 直線で切り替える。家とトラックのシルエットや雲形の吹き出しの縁で境目を作ることもある
• 見出しラベルは黄色のピル型にする
• 主ボタンは角丸 8px 前後の横長の長方形で、右端に > を付ける
• A マークは黄色の丸に吹き出しのしっぽを付ける
• Q の吹き出しは細い白線の枠でしっぽ付き

Components

• 申込ボタン（button-primary）: 焦げオレンジの横長ボタン。白文字に右矢印、下に濃い影
• 黄色ピル見出し（label-pill）: 緑の面に置く黄色のピル。中は緑の太字で番号付き
• Q&A 吹き出し（qa-bubble）: 白線枠の Q 吹き出しと悩む人物を組み、下に A マーク付きの白カードを置く
• 解決カード（answer-card）: 白い角丸カード。緑の見出しに黄マーカー、本文とイラストを入れる
• 悩みの雲吹き出し（thought-cloud）: 白い雲形に悩みを短い言葉で 3 行ずつ書く
• 特典金額（benefit-number）: 「最大」の縦枠と極太のオレンジ数字、円分は黒の太字
• お客様の声カード（voice-card）: 写真、オレンジの名前、右下の MORE タブ。黄色のオフセット影付き
• エリア切替タブ（area-tab）: 選んでいるタブは緑地に白文字、選んでいないタブはグレー
• 星形バッジ（badge-star）: 黄色のギザギザ星形に品数を緑の太字で入れる

Do's and Don'ts

Do - 黄と緑の大きな面をはっきり交互に使う - 目玉の付いた手描き文字キャラを各セクションに散らす - 強調語には黄マーカーを引き、助詞は小さくする - 人物は輪郭線なしのフラットなイラストで、ほほを赤くする - CTA はオレンジのベタ影ボタンに統一する

Don't - グラデーションやガラス風の質感は使わない - 細い明朝体や細いゴシックは使わない - オレンジを CTA と声以外に多用しない - 白背景だけが長く続く単調な構成にしない - 写真に強いフィルターをかけない

Page Structure

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

1. ファーストビュー（ブランドの世界観と商品を一目で伝える）: 淡い黄から生成りへのグラデーション地に手描きロゴ見出し、商品パッケージの切り抜きと文字キャラ
2. 商品紹介（手軽さと安心を伝える）: 黄色の面に大皿料理の切り抜き、紺の下線付き見出し、調理手順の写真を手書き風ラベルでずらして配置
3. ここがイイ（悩みの解決）（悩みごとに解決策を示す）: 緑の面に大きな黄色の見出し、番号付きピル、Q 吹き出しと A 白カードを繰り返す
4. その他の悩み（共感を広げる）: 雲形の吹き出しに悩みを書き、腕組みの人物と文字キャラを並べる
5. まとめて解決（メリットをまとめて示す）: 黄色のヘッダー付き白カードに点線区切りで 4 項目、写真グリッドと詳細ボタン
6. お客様の声（利用者の実感を伝える）: 白地の雲形見出しから生成り地へ。オレンジの吹き出し帯と横スクロールのカード、丸サムネイル
7. 動画 CM（ブランドの認知を広げる）: 黄色のモニター形の枠に動画、下に 2×2 の切替ボタン
8. キャンペーン特典（申込の理由を作る）: 生成り地に集中線付きの大見出し、エリアタブ、番号付き特典と大きな数字
9. 申込 CTA（申込と資料請求へ導く）: 紺の下線見出しの下にオレンジのボタンを 2 つ、注釈を小さく添える
10. ブランド・運営者の説明（信頼を補う）: 緑の面に黄色ピル見出し、商品集合写真、白線枠の中に黄色の縦棒付き小見出しのリスト
11. SNS・フッター（フォローとサイトへの誘導）: 黄色の面に文字キャラのロゴ、紺の SNS アイコン、オレンジのボタン 2 つ

Imagery

• 料理は真上か斜め上から撮り、白い皿ごと切り抜くか明るい角丸写真にする
• 人物イラストは輪郭線なしのベタ塗り。紺の髪、黄・青・オレンジの服
• 文字キャラは 1 文字ずつ色違いのかすれブロックに、白抜き文字と目玉を付ける
• キラキラ星や斜めの集中線を紺で手描き風に添える
• 家やトラックの白シルエットで、宅配のイメージを区切りに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 480px）のコンテンツ列を固定表示する
• PC の左側には縦のナビゲーション（英字＋小さい日本語の説明）を固定で置く
• PC の右側にはロゴ、SNS、詳細ボタンを固定で置き、背景はキッチンのイラスト柄
• 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 行書くと起動時に読み込まれる。