DESIGN.md — 黄色×えんじ×マゼンタの家庭料理時短 LP（Pop Yellow Home Cooking Tips LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 黄色の水玉・えんじの太字・マゼンタの手書き文字・赤いリボン・メダル番号・夫婦イラスト
• 地の質感: 大小の水玉と和紙のような生成りの地。紙の質感を少し入れて手作り感を出す
• 形: 角丸カード、角丸の吹き出し、円形バッジ、リボン帯、斜めの点線装飾
• 温度感: 暖色寄りで明るく元気

Colors

• 地は黄色、生成り、白、薄黄色の順に切り替えてセクションを分ける
• 文字は黒を使わずえんじ色に統一する
• キーワードとリスト記号はマゼンタで強調する
• 赤はリボン見出し、詳細ボタン、レシピ名に限って使う
• 黒はファーストビュー直下の目次帯だけに使う
• 吹き出しは濃い黄色で塗り、えんじ文字を載せる

Typography

• 見出しは太い丸ゴシックで、助詞を小さくして強弱をつける
• キーワードだけマゼンタの手書き風にし、ルビを振る
• 本文も太めにして、中央揃えで短く改行する
• 見出しの左右に斜めの点線を添える
• 語尾に♪や！を付けて親しみを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは横幅いっぱいにして縦に積む
• イラストと吹き出しを左右交互に置く
• テク紹介ブロックの間は点線で区切る
• レシピ一覧は 1 マス目にリード文と商品パッケージを置く
• テキストはすべて中央揃え（吹き出しの中は左揃え）

Elevation & Depth

• 影はほぼ使わずフラットにする
• 商品パッケージにだけ薄いドロップシャドウを付ける
• カードは細い枠線で区切る

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸 6px の長方形。道具は切り抜きにする
• セクション境界: 直線で切り替え、濃い黄色の帯を挟む
• 吹き出しは大きな角丸に三角の尾を付ける
• 番号はリボン付きの円形メダルにする
• 工程番号はマゼンタの丸に白数字
• 背景に大小の円を散らす

Components

• 目次ナビ帯（nav-anchor-bar）: 黒地に黄色のチェック丸と白文字の項目を 2×2 で並べる
• リボン見出し（ribbon-heading）: 赤いグラデーションのリボン帯に白い明朝の文字を載せ、両脇に星の光を添える
• メダル番号（medal-badge）: 白黄の円にえんじの縁、赤いリボンの尾。中に赤字で番号
• 吹き出しリスト（speech-bubble）: 濃い黄色の角丸吹き出しに、マゼンタの丸記号付きで 3 行並べる
• 特長カード（feature-card）: 白地に細い枠線。マゼンタの小見出し、筆風の見出し、本文の 3 段構成
• 円形の訴求バッジ（circle-badge）: マゼンタの正円に白文字で所要時間などを 3 行で入れる
• 詳細ボタン（button-primary）: 赤から暗赤へのグラデーションで塗ったピル型ボタン
• 筆ライン強調（marker-underline）: 強調する一文の下にマゼンタの筆ストロークを引く
• レシピタイル（recipe-tile）: 角丸の料理写真の下に、赤い太字のレシピ名を中央揃えで置く

Do's and Don'ts

Do - 文字色はえんじに統一し、強調だけマゼンタにする - キーワードには手書き風の書体とルビを組み合わせる - エプロン姿の男女の線画イラストで感情を表現する - 背景には水玉と星の光を散らして明るくする - セクションごとに地の色を切り替える

Don't - 本文に純黒を使わない - 寒色系の色を入れない - 細い書体だけで見出しを作らない - 写真を角丸なしで裁ち落とさない - 装飾のない無地の白背景だけでページを続けない

Page Structure

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

1. ファーストビュー（テーマを大きく掲げ、商品群を見せる）: 黄色のグラデーション地。リボンのリード、巨大な大見出し、手書き風のキーワード、商品パッケージを 3 つ並べる
2. 目次ナビ（各セクションへ移動させる）: 黒帯に 4 項目を 2×2 で並べる
3. 悩みの提起（家庭の献立の悩みに共感する）: 困り顔の夫婦イラストと、括弧付きの短い台詞を 2 行
4. 特長（料理の良さを 3 点伝える）: 斜め点線付きの見出しと、白い枠線カードを 3 枚
5. 商品ラインナップ（商品の種類を見せる）: パッケージ写真と商品名を縦に 3 つ並べる
6. 作り方ステップ（手軽さを示す）: 白い角丸パネルに番号丸と工程名、調理イラストを 4 段。左上にマゼンタの円バッジ
7. ブリッジ（時短テクの紹介へつなぐ）: 中央揃えの文章、筆ライン強調、キーワード入りの見出し、喜ぶ夫婦イラスト
8. 時短テク紹介（テクを 3 つ説明する）: 生成り地にリボン見出し。メダル番号、道具イラスト、吹き出しリストを点線で区切って繰り返す
9. おすすめ道具（関連商品へ誘導する）: 白地。左に商品写真、右に商品名・説明・赤いピル型ボタンを 3 段
10. アレンジレシピ（活用例を見せる）: 濃い黄色の帯に筆風の見出し。薄黄色の地に、商品ごとに写真を 2 列で並べる

Imagery

• 人物は太い線画のイラストで、黄色いエプロンの男女。困り顔と喜び顔を描き分ける
• 調理工程は赤いフライパンと炎のフラットなイラスト
• 料理写真は真上から斜め 45° の明るい自然光。木目やストライプのクロスを敷く
• 商品パッケージは正面から撮った切り抜き
• 背景に大小の黄色い水玉、キラキラした星、汗マークを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 1000px 程度の幅で、ファーストビューの大見出しを 1 行にする
• 特長カードとステップは PC で横 3〜4 列にする
• PC では吹き出しを横長にし、リストを 1 行に収める
• PC のレシピ一覧は 3 列にし、商品画像を見出しの右に置く
• PC の目次ナビは 4 項目を横 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 行書くと起動時に読み込まれる。