DESIGN.md — 若葉グリーン×白の爽やかレシピ食品 LP（Fresh Leaf Green Pickle Recipe LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、ナチュラル、シンプル・ミニマル、ポップ・元気
• キーワード: 若葉色・余白多め・料理写真主役・幾何学欧文・黒ピルボタン・葉っぱ装飾
• 地の質感: フラットな白と淡緑の面。黄緑のグラデーションがかかった葉っぱイラストと、アウトライン文字で軽さを出す
• 形: 円形の写真切り抜き、大きな角丸で作るパネル、ピル型ボタン、ラベルタブ
• 温度感: やや涼しげで明るい。食欲を感じさせる自然光の写真が温かみを足している

Colors

• 地は白と淡い若葉色を交互に使い、セクションを区切る
• 黄緑はポイント番号・欧文の小ラベル・縦線・ステップ円などの小面積アクセントに限る
• ボタンとディスプレイ見出しは黒にして画面を引き締める
• 緑の面は必ず淡いトーンにし、濃い緑を広い面積に使わない
• 写真以外で暖色はほぼ使わない。暖色は料理写真に任せる
• step-circle は文字 #F9FBF9 × 背景 #8EE068 のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#3E5D3E、4.58:1）を使う。

Typography

• 日本語見出しは太字ゴシックを中央揃えで 2 行に分ける
• ディスプレイ書体は FV とカテゴリ見出しだけに使う
• 欧文は幾何学的なワイドサンセリフを黄緑で添える
• 本文は小さめにして行間を 2.0 前後まで広く取る
• 流れ文字は黄緑のアウトラインで巨大に配置し、背景装飾として使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は特長を 3 カラム、レシピを左ラベル＋右写真 2 枚の横並びにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• メイン写真は画面幅いっぱい、サブ写真は左右に余白を残して置く
• レシピ群は大きな角丸の淡緑パネルでまとめる
• 食材ごとのブロックを点線の区切り線で分ける
• 特長は番号→円形写真→縦線→小見出し→見出し→本文の順に縦へ積む
• FV では写真タイルを左右に散らし、中央に縦積みのディスプレイ見出しを置く

Elevation & Depth

• 影は基本的に使わず、フラットに保つ
• 階層は淡緑の面と淡緑の枠線で表す
• 写真に重ねたキャプションタブは白地で浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 特長は正円、レシピは四角で全幅かほぼ全幅。香味野菜などの小写真は円形のバッジにする
• セクション境界: 淡緑の帯の上端をゆるい波線にする。レシピパネルは上部の大きな角丸で区切る
• ボタン・カテゴリラベル・アレンジラベルはピル型か角丸にする
• 囲みパネルは角丸 24〜32px に淡緑の 2px 枠を付ける
• 区切りには黒の点線を使う

Components

• 黒ピル主CTA（button-primary）: 全幅の黒いピル型ボタン。右端に矢印、文字は白で 2 行まで
• もっと見るボタン（button-more）: 黒いピル型ボタン。右端に＋アイコンを置き、追加メニューを開閉する
• ポイント番号（point-number）: 小さな欧文ラベルの下に、巨大な黄緑の#番号を置く。下の円形写真に少し重ねる
• カテゴリラベル（category-label）: 中央に置く淡緑の角丸ラベル。太字の食材カテゴリ名を入れる
• 欧文アイブロウ（eyebrow-label）: 黄緑グラデーションの短いピル線に、黄緑の欧文と番号を続ける。見出しの上に置く
• 写真キャプションタブ（photo-caption-tab）: 写真の左下に白いタブを重ね、太字の料理名と黒丸の矢印を入れる。上に枠線ピルの小ラベルを付けることもある
• コラム囲みパネル（tip-panel）: 白地に淡緑の枠線を付けた大角丸パネル。斜線で挟んだ導入句、見出し、写真、本文を入れる
• ステップ円（step-circle）: 黄緑の円に白い欧文で Step 番号を入れ、外側に淡緑のリングを付ける。横に手順文を置く

Do's and Don'ts

Do - 料理写真を大きく使い、余白を十分に取る - 黄緑は番号・ラベル・線などのアクセントに留める - 葉っぱイラストを FV の写真の間に散らす - 食材ごとに同じ構成（ラベル→見出し→メイン写真→アレンジ写真→ボタン）を繰り返す - 見出しは中央揃え、本文は左揃えにする

Don't - 濃い緑や原色の赤を広い面積に使わない - ボタンを角張った四角や緑色にしない - ドロップシャドウや立体的な装飾を付けない - 本文を詰めて組まない - ディスプレイ書体を本文や小見出しに使わない

Page Structure

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

1. ファーストビュー（レシピのシリーズ名と商品を印象づける）: 白地に料理写真タイルを左右に散らす。中央に縦積みの極太ディスプレイ見出し、小さな欧文、商品パッケージを置き、葉っぱイラストを添える
2. 導入（毎日使う理由を伝える）: 欧文アイブロウ、太字の 2 行見出し、行間の広い本文を左揃えで組む
3. 特長（ポイント3つ）（商品の強みを示す）: 上端が波線の淡緑帯。巨大な黄緑の#番号、円形写真、黄緑の縦線、小見出し、見出し、本文を縦に繰り返す
4. 流れ文字装飾（リズムを付けてセクションを区切る）: 巨大な欧文を黄緑のアウトラインで 2 行並べ、はみ出させる
5. 作り方ステップ（手軽さを示す）: 点線で上下を挟む。黄緑のステップ円と短い手順文を並べ、右に商品画像を置く
6. レシピ一覧（肉）（具体的な使い方を見せる）: 曲線の欧文と大きなディスプレイ見出しで始める。大角丸の淡緑パネルの中にカテゴリラベル、食材見出し、全幅写真、アレンジ写真、もっと見るボタンを並べる
7. コラムパネル（活用方法を補足する）: 白地に淡緑枠の角丸パネル。導入句、見出し、写真、本文、作り方ラベルを入れる
8. レシピ一覧（きのこ）（別ジャンルの使い方を見せる）: 肉のレシピ一覧と同じ型を繰り返す。香味野菜の写真 3 枚を横並びにしたコラムを付ける
9. 商品紹介（商品の特長をまとめて伝える）: 黄緑グラデーションの縦線と欧文で始める。中央の商品パッケージの周りに、淡緑リング付きの白い円を 3 つ配置し、特長を書く
10. 最終CTA（他のレシピへ誘導する）: 全幅の黒いピル型ボタンに、2 行の文字と右矢印を入れる

Imagery

• 料理写真は自然光で、白い木目やリネンの上に置き、斜め上から明るく撮る
• 木のまな板、ガラス容器、ハーブ、ミニトマトで瑞々しさを出す
• 特長の写真は正円に切り抜く
• 葉っぱのイラストは白から黄緑へのグラデーションでシンプルに描く
• 商品パッケージは切り抜いて白地に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では特長を 3 カラム横並びにする
• PC のレシピは左に食材ラベル、右にメイン写真とアレンジ写真を横並びにし、点線で区切る
• PC の FV は写真を四隅に散らし、見出しを中央に小さめに置く
• PC の導入は見出しと本文を左右 2 カラムにする
• PC の作り方ステップは 1 行の横並びにする
• PC の CTA ボタンは中央寄せで幅を約 60% にする

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