DESIGN.md — 深緑×和紙調ミントの家庭向け食品 LP（Deep Green Washi Family Food Brand LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、信頼・誠実、やさしい・柔らかい、和風
• キーワード: 深緑・和紙テクスチャ・淡いミント・シズル写真・波形境界・家族の食卓
• 地の質感: 全面に薄い和紙・紙すき風のノイズ。背景に淡いクリーム色のぼかし光を置く
• 形: 波打つ手描き風の境界線、円形の写真切り抜き、角丸カード、ピル型ボタン、角を切った額縁フレーム
• 温度感: やや温かい。緑は落ち着いた深緑で、写真は暖色の焼き色・ルウの茶色

Colors

• 地は生成り→ミント→濃緑→ミントと段階的に切り替え、白は商品カードと額縁内部に限定する
• 文字は黒ではなく深緑で統一し、全体を緑系の色調でまとめる
• 強調色は茶・キャラメルの料理写真に任せ、UI に赤や橙は使わない
• 濃緑セクションは 1 か所だけ置き、ブランドの核となる話題に使う
• ボタンはすべて同じ深緑のピル型にし、色を変えない

Typography

• 見出しは明朝、本文とボタンはゴシックに分ける
• 本文は中央揃えで短く改行し、行間を 2 前後と広く取る
• 本文中の要点は太字にして、文字サイズは変えない
• 見出しの字間は 0.1em 前後と広めにする
• 濃緑地の重要な一文には、半透明の帯のようなマーカーを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央寄せで、レシピは 3 列、商品カードは 2 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しと本文は中央に揃え、余白を大きく取る
• 商品カードは画面幅の 94% ほどの白い枠にし、カード同士は 24px 空ける
• 各カードの最後に、中央揃えのピル型ボタンを 1 つ置く
• レシピ写真は幅 50% ほどで中央に置き、料理名をその下に添える
• 装飾の丸写真は、本文の外側の余白に浮かせて置く

Elevation & Depth

• 影はほぼ使わず、線と地の色の差で区切る
• 額縁フレームは二重の緑線で立体感を出す
• 丸写真には背景をぼかした柔らかい光を重ねる

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸 6px の長方形。装飾用の写真は正円に切り抜く
• セクション境界: 手描き風にゆるく波打つ境界。紙をちぎったような柔らかい曲線
• 商品カードは角丸 16〜20px で、緑の線は 1.5px
• 歴史紹介は、角を内側にえぐった二重線の額縁で囲む
• ボタンはピル型で、右に細い矢印を付ける
• 直線で区切るセクション境界は使わない

Components

• ピル型詳細ボタン（button-primary）: 深緑のピル型で、白の太字と右矢印を入れる。幅は 140〜180px
• 商品カード（product-card）: 白地に深緑の細い枠線と角丸。見出し、商品パッケージ画像、名称、ボタンの順に並べる
• 額縁フレーム（ornate-frame）: 角を内側にえぐった二重の緑線の枠。年号の欧文と明朝の見出しを中に入れる
• 濃緑の製法セクション（dark-feature）: 濃緑の地に白い明朝見出しを置き、見出しの上に放射線の飾りを付ける。図解のまわりに丸い素材写真を配置する
• 光彩付きセクション見出し（glow-heading）: 見出しの背後に、クリーム色の楕円形のぼかし光を敷く
• 円形装飾写真（circle-photo）: 台所や調理道具の写真を正円に切り抜き、余白に浮かせる
• レシピ項目（recipe-item）: 角丸の料理写真の下に、太字の料理名を中央揃えで置く
• 帯マーカー（marker-line）: 濃緑地の結論の一文に、半透明の白い帯を敷く

Do's and Don'ts

Do - 地の色は生成りとミントの和紙調にし、薄い紙の質感を残す - 見出しは深緑の明朝で、字間を広めに取る - 境界はゆるい波形にする - 料理写真は湯気や照りのあるシズル感で撮る - ボタンは全て同じ深緑のピル型と矢印でそろえる

Don't - 真っ黒の文字や彩度の高いビビッドな UI 色を使わない - 強いドロップシャドウや光沢のあるグラデーションボタンを使わない - 白いベタ地をページ全体に広げない - 直線でカチッと区切るセクション境界にしない - 本文を詰めて左揃えの長文にしない

Page Structure

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

1. ファーストビュー（ブランドとシズル感を一目で伝える）: ロゴの下に料理のシズル写真を全幅で置き、下端に商品パッケージを横並びに重ねる。写真の下端は波形にする
2. ブランドの主張（商品の成り立ちと価値を伝える）: 生成り地に明朝の大見出しを置き、中央揃えの本文を続ける。周囲に円形の写真を浮かせる
3. 製法の紹介（独自のこだわりを図で説明する）: 濃緑の地に放射線の飾り付きの見出しを置く。素材写真の図解と、マーカー付きの結論文を入れる
4. CM・起用人物（認知と親しみを生む）: ミント地に動画の埋め込みを置き、人物写真と左揃えのプロフィールを続ける
5. ブランドの歴史（長年の実績で信頼を伝える）: 額縁フレームの中に年号の欧文と明朝見出し、歴代のパッケージ、ボタンを並べる
6. アレンジレシピ（使い方の提案）: 角丸の料理写真と料理名を縦に 3 つ並べ、最後にボタンを置く
7. 派生商品の訴求（新しい味の紹介）: 左右の端から料理の皿の写真をのぞかせる。商品 2 つを横に並べ、短い説明文とボタンを置く
8. 商品ラインアップ（全商品の一覧）: カテゴリごとの白い角丸カードに、商品画像、名称、ピル型ボタンを入れる
9. 関連メディア・SNS（回遊を促す）: 横長のバナーの下に、SNS の丸アイコンを 3 つ並べる

Imagery

• 料理は湯気と照りを強調し、暖かい自然光で寄りの構図にする
• ルウがなめらかに流れ込むようなとろみのイメージ写真を使う
• 台所や調理器具、家族の場面を正円に切り抜いて装飾に使う
• 商品パッケージは切り抜きか正面のフラット画像で、白地のカードに置く
• 人物は明るい背景で笑顔の上半身を撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文の幅を 800px 前後に抑え、中央に寄せる
• PC の主張見出しは 1 行にし、円形写真を左右に散らす
• 製法セクションは PC で図と文章の 2 列にする
• レシピは PC で 3 列、商品カードは 1〜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 行書くと起動時に読み込まれる。