DESIGN.md — 赤×からし黄のポップな調味料 LP（Playful Red and Mustard Cooking Seasoning LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: からし黄の紙質感・トマトレッド・こげ茶の極太文字・ひげ型の見出し飾り・吹き出し・ダイヤ柄
• 地の質感: 黄色地に細かな粒状ノイズを重ねてクラフト紙のような質感を出す。赤のセクションは濃淡のダイヤ柄や斜めストライプで模様を付ける。
• 形: 角丸カードとピル型ボタンを使う。吹き出しは雲のように丸く、レシピ写真はひし形に切り抜く。
• 温度感: 暖色中心。食欲をそそる温かいトーン。

Colors

• 地はからし黄と赤を交互に使い、セクションごとに背景色を切り替える。
• 悩みの提起だけ緑地にし、商品紹介との区切りを付ける。
• 黄色地の見出しはこげ茶、番号とサブ見出しは赤にする。
• 赤地の文字は白か黄。本文は黄、見出しは白にする。
• ボタンは黄色地なら赤＋クリーム文字、赤地ならクリーム＋こげ茶文字にして反転させる。
• Q&Aは淡いピンク地に赤いカードを並べ、白文字で書く。

Typography

• 見出しは極太で丸みのあるゴシックにし、ポップで太い印象を出す。
• 大見出しの上に小さな英字ラベルを置き、下にひげ型の飾りを付ける。
• 番号は「POINT/STEP」の小ラベルの下に大きな英数字で置く。
• 本文は行間 2.0 前後にゆったり取る。
• 赤地のサブ見出しは黄色にし、左右をひし形で挟む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ステップは本文と写真の左右 2 分割、ラインナップは 2 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション上下の余白は 60〜80px。
• ブロックの左右余白は約 24px。
• ポイントは番号・見出しを中央揃えにし、本文は左揃え、その下に写真を置く。
• ステップは左に番号と見出しと本文、右に正方形の写真。
• Q&Aは縦に並べ、カードの間隔は約 12px。

Elevation & Depth

• ボタンとQ&Aカードの下に濃い赤の薄い影（2〜4px）を付ける。
• 写真カードには影を付けず、角丸だけにする。
• パッケージ画像には軽いドロップシャドウを付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。アレンジレシピだけはひし形タイルに切り抜いて敷き詰める。
• セクション境界: 基本は直線で背景色を切り替える。悩み→解決は緑から白へのグラデーションと、ゆるいカーブを使う。
• 吹き出しは丸みの強い雲形にし、小さな丸い尻尾を付ける。
• 再生ボタンは黄色の円に赤い縁と赤い三角を付ける。
• ステップ番号はこげ茶の円にし、左上に小さな角を付ける。

Components

• 製品詳細ボタン（button-primary）: 赤のピル型ボタン。クリーム色の文字の右に矢印を付ける。
• 赤地用のボタン（button-light）: 赤セクションに置くクリーム色のピル型ボタン。こげ茶の文字に矢印を付ける。
• ひげ飾りの見出し（heading-mustache）: 小さな英字ラベル、極太の見出し、ひげ型の飾りを縦に並べる。
• 悩みの吹き出し（worry-bubble）: 緑地に白い雲形の吹き出しを左右交互に並べ、横にイラスト人物を置く。
• ポイント番号（point-number）: 小さな POINT ラベルの下に大きな赤の 2 桁番号を置き、その下にこげ茶の 2 行見出しを付ける。
• 手順ステップ（step-item）: 濃い赤地に、こげ茶の円の番号、白の見出し、黄色の本文を置き、右に正方形の写真を並べる。
• Q&Aアコーディオン（faq-card）: 赤い角丸カードにダイヤ柄を薄く敷き、白文字の質問を置く。右端にクリーム色の丸い＋アイコンを付ける。
• アイコン付きナビ（nav-grid）: 赤い帯の中に、イラストアイコンと白い太字ラベルを 3 列に並べる。
• 動画カード（video-card）: 角丸の動画サムネイルの中央に黄色い再生ボタンを置き、下に赤字のキャプションを付ける。
• NEWバッジ（badge-new）: 赤い円に白い英字を入れ、旗のような小さな尻尾を付ける。

Do's and Don'ts

Do - 黄色地には必ず細かな粒状ノイズのテクスチャを付ける。 - 大見出しの下には毎回ひげ型の飾りを入れて統一する。 - イラスト人物やキャラクターを写真の脇に添え、親しみを出す。 - セクションごとに黄・赤・緑・ピンクの地を明確に切り替える。 - 料理写真は湯気が立つような暖色で、具だくさんに見せる。

Don't - 寒色や無彩色を地の主役にしない。 - 細い明朝体や繊細な書体を見出しに使わない。 - 黒い文字を使わない。文字はこげ茶にする。 - 角の立ったシャープなボタンにしない。 - 赤地に赤文字や、低コントラストの文字を置かない。

Page Structure

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

1. ファーストビュー（人物と縦書きのキャッチで印象付ける）: キッチンで撮った人物 2 人の写真に、赤い縦書きの大コピーとパッケージを重ねる。
2. 商品ロゴと商品画像（商品の認知）: 黄色地に大きなロゴ、3 種のパッケージ、料理が入ったフライパンを置く。
3. ナビゲーション（ページ内の各セクションへの導線）: 赤い帯にアイコン付きのリンクを 3 列で並べる。
4. CM紹介（広告動画を見せる）: 黄色地に動画カードを縦に並べる。
5. 悩みの提起（共感を得る）: 緑地に白い吹き出しを 4 つ並べ、イラスト人物を添える。下端は白へグラデーションでつなぐ。
6. 解決提示（商品を解決策として示す）: 白地に「そんなときは」型の導入とロゴを大きく置く。
7. おすすめポイント（特長を 3 つ伝える）: 番号、見出し、本文、角丸写真の順に並べ、イラストを添える。
8. 作り方動画（味ごとのレシピ動画を見せる）: ダイヤ柄の赤地に、ひし形で挟んだ黄色い味名と縦長の動画を並べる。
9. 作り方ステップ（簡単な手順を見せる）: 濃い赤地に 3 ステップを並べ、最後にキャラクターのこげ茶の吹き出しでコツを添える。
10. Q&A（不安を解消する）: 淡いピンク地に、赤いアコーディオンカードを 8 件並べる。
11. ラインナップ（商品の一覧と詳細への導線）: 黄色地に、パッケージ、下線付きの商品名、赤いピル型ボタンを 2 列で並べる。
12. アレンジレシピ（使い方を広げてレシピ一覧へ誘導する）: 赤地に、ひし形に切り抜いた料理写真のモザイクを敷き、下にクリーム色のボタンを置く。

Imagery

• 料理は真上か斜め上から撮り、暖色の光で具材がたっぷり見えるようにする。
• 人物は明るいキッチンで料理や食事を楽しむ自然な笑顔を撮る。
• イラスト人物はフラットで輪郭なし。赤・紺・黄の服でシンプルに描く。
• 商品を擬人化したキャラクター（ひげとコック帽）を随所に添える。
• トマト缶・野菜などの小さな食材アイコンを見出しの脇に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px で中央に寄せ、左右には黄色地を見せる。
• PC の CM 動画は 2 列＋1 本、作り方動画とラインナップは 3 列に並べる。
• PC の悩みの吹き出しは 4 つを横一列に並べる。
• PC のポイントは写真と本文を左右交互に配置する。
• PC のステップは 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 行書くと起動時に読み込まれる。