DESIGN.md — 生成り×焦げ茶の家庭風レトルト食品 LP（Warm Ivory Home-Style Curry LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感
• キーワード: 生成り・シズル感・水彩イラスト・筆記体の透かし・白カード・家庭的
• 地の質感: 紙のような生成りの地に、ぼかした暖色のにじみと水彩の食材イラストを重ねる。
• 形: 角丸の白カード、ゆるい波形のセクション境界、ピル型ボタン。
• 温度感: 暖色寄り。カレーの茶とオレンジが基調。

Colors

• 地は生成りと白を交互に使い、セクションを切り替える。
• 見出しは焦げ茶にする。純黒は使わない。
• 強調語だけを、番号と同じアクセント色（緑・黄・赤）にする。
• 見出し下には、緑→黄→赤の短いグラデーション線を置く。
• オレンジは主 CTA と導入文の強調語だけに使う。
• 英字の透かしは、地よりわずかに濃いベージュで大きく敷く。
• button-primary は文字 #FFFFFF × 背景 #F28E01 のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AB6401、4.61:1）を使う。

Typography

• 見出しも本文も、基本は中央揃えにする。
• 見出しは「」でくくった短い句を 2 行に分ける。
• 特長カードの本文だけは左揃えにする。
• 吹き出しの中は手書き風の細い書体にする。
• 番号は斜めの筆記体で、テーマ色をつけて大きく置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積む。
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右に 50px 前後の余白を取る。
• 見出しの上に英字の透かし、下に短いグラデーション線を置く。
• 食材イラストは、カードやセクションの角からはみ出させる。
• 商品画像は 1 つを上に置き、その下に 2 つを並べる。

Elevation & Depth

• カードには非常に淡くぼかした影をつける。
• 商品パッケージには軽い落ち影をつける。
• FV の白文字には暗いドロップシャドウをつける。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理は切り抜くか白背景で浮かせる。FV だけは全面写真にする。
• セクション境界: ゆるやかな波形の曲線
• 吹き出しは細い線の円形にし、短いしっぽをつける。
• 角が尖った箱は使わない。
• CTA の右端に、白い円の再生矢印アイコンを置く。

Components

• 主 CTA ボタン（button-primary）: オレンジのピル型。右端に白丸の矢印アイコンを置く。
• セクション見出し（heading-section）: 英字の透かしを背面に置き、下に 3 色グラデーションの短い線を引く。
• 番号つき特長カード（card-feature）: 白い角丸カード。大きな筆記体番号、2 行の小見出し、本文の順に並べ、角に水彩の食材を飾る。
• 円形吹き出し（speech-bubble）: 細い線の円の中に、手書き風の声を入れる。料理写真の上に 2 つ並べる。
• 調理説明ボックス（info-box）: 淡いベージュの角丸ボックス。商品画像、説明、上下罫線でくくったアイコン付きの一行を入れる。
• 筆記体の番号（number-script）: 斜めの手書き数字。カードごとに緑・黄・赤で色を変える。
• 注釈（note-text）: 写真の右下か下に、小さなグレーの注釈を添える。

Do's and Don'ts

Do - 生成りと白の地を交互に使い、波形で区切る。 - 食材の水彩イラストを、セクションの端に散らす。 - 強調語は、カードのテーマ色と同じ色にする。 - 余白は広めに取り、中央揃えで落ち着かせる。 - 料理写真は、湯気が出そうな照りが伝わる寄りで撮る。

Don't - 見出しに純黒や寒色を使わない。 - CTA 以外に、オレンジの面を多用しない。 - 角の尖った枠や太い罫線を使わない。 - 英字の透かしを濃くしない。 - 情報を詰め込みすぎない。

Page Structure

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

1. ファーストビュー（シズル感で食欲を喚起する）: 料理の寄り写真を全面に敷く。白い大見出しの一部の文字を野菜の色で塗り、下に 3 種の商品を並べる。
2. 共感・イメージ調査（味のイメージを共有する）: 問いかけ見出しの下に円形吹き出しを 2 つ置き、水彩の皿イラストと調査注釈を添える。
3. コンセプト（商品の価値を一文で伝える）: 白地の中央に暖色のにじみを置き、強調語をオレンジにする。下にスプーンの切り抜き写真を置く。
4. 商品特徴（3 つの特長を伝える）: 生成り地に、番号つきの白カードを 3 枚縦に並べる。
5. 仕組みの図解（旨みが溶け込む様子を示す）: 鍋のイラストを 2 つ、矢印で比較する。
6. 調理の手軽さ（使いやすさを訴求する）: ベージュのボックスに商品画像と円形バッジを置き、アイコン付きの一行を添える。
7. 商品ラインアップ（種類を見せて詳細へ誘導する）: パッケージを 1 つ上、2 つ下に並べる。説明文の後にオレンジの CTA を置く。
8. 関連バナー・SNS（回遊させ、シェアを促す）: 細い枠の横長バナーの下に、SNS の丸アイコンを 3 つ並べる。

Imagery

• 料理は暖色の照明で寄りで撮り、照りと具の大きさを見せる。
• スプーンですくった一口を切り抜いて浮かせる。
• 玉ねぎ・人参・トマトなどを、淡い水彩タッチで描く。
• 図解は手描きの線画に、平塗りの暖色を合わせる。
• 背景には、オレンジのぼかしたにじみを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV の文字を左、料理写真を右に置く横長構図にする。
• PC の特長カードは 3 列に並べる。
• PC の吹き出しは、皿の左右に振り分ける。
• PC の調理ボックスは、画像左・説明右の 2 カラムにする。
• PC のラインアップは、商品 3 つと説明・CTA を横に並べる。

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