DESIGN.md — 生成り地×黒帯と3色ラインの穀物食品LP（Warm Cream Multi-Line Grain Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 情報量多め・訴求型、ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 生成り地・黒帯ヒーロー・ライン別カラー・シズル写真・丸バッジ・レシピグリッド
• 地の質感: フラットな生成り地。ヒーロー部だけ黒地や焦げ茶のグラデーションで写真を目立たせる
• 形: 角丸カード、円形バッジ、角丸ラベル、円形に切り抜いた写真
• 温度感: 暖色寄り。穀物の焼き色と卵黄の黄色で温かい印象

Colors

• 地は生成り#FEF7F1で統一し、ヒーロー部だけ黒帯にする
• 商品ラインごとに黄・水色・えんじ色のテーマ色を決め、そのラインの手順ラベル・バッジ・グラフに使う
• 比較グラフは本品をテーマ色、比較対象をグレーにする
• カロリーなどの栄養バッジは黄色の円に黒文字
• ローストのラインは焦げ茶のグラデーション帯で香ばしさを出す
• 白カードは生成り地の上に置き、境界は色差だけでつける

Typography

• 見出しは太いゴシックで中央揃えにする
• 商品名はロゴ風の極太書体に、丸囲みの一文字を添える
• 数値は欧文の太字で大きく、単位は小さくする
• 注釈は10px前後で、米印付きで下部にまとめる
• 黒帯上の文字は白、生成り地の上はダークグレー
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピは 2 列グリッド、手順は 2×2 のカード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• セクション見出しを中央に置き、下に部品を並べる
• ヒーロー帯は全幅にし、商品パッケージと料理写真を重ねる
• 手順は左にテーマ色のラベル、右にアイコンカードの横並び
• 比較グラフはテーマ色の見出し帯付きの白枠に収める
• セクションの区切りに点線を使うことがある

Elevation & Depth

• カードは影なし、または非常に薄い影
• パッケージ写真だけ軽いドロップシャドウで浮かせる
• 黒帯の上では写真の光沢で立体感を出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は角丸の正方形か円形に切り抜く。ヒーローでは皿の写真を大きく裁ち落とす
• セクション境界: 直線で色を切り替える。黒帯は上下まっすぐ、ローストの帯はグラデーション
• 栄養バッジは正円にする
• 手順ラベルは角丸の四角
• レシピカードの左上に丸バッジを重ねる
• ライン別ラベルは角丸の長方形

Components

• 黒帯ヒーロー（hero-dark-band）: 黒地にシズル写真、パッケージ、ロゴ風の商品名を重ねる全幅の帯
• ライン別ラベル（line-label）: 商品の下に置く、テーマ色の角丸ラベル
• 栄養丸バッジ（nutrition-badge）: テーマ色の正円に栄養の特長を2行で入れる
• 調理方法ラベル（step-label）: テーマ色の角丸の四角に調理方法名と時間を入れる
• 手順アイコンカード（step-card）: 白カードに番号丸と線画アイコン、下に説明文
• レシピカード（recipe-card）: 角丸の料理写真の左上に黄色い丸のカロリーバッジ、下にレシピ名
• 比較棒グラフ（compare-chart）: テーマ色の見出し帯付きの枠に、倍率の数値と2本の棒を並べる
• 黄色訴求バナー（appeal-banner）: 黄色の角丸帯に2行の訴求文。傍点を付けて強調する

Do's and Don'ts

Do - ラインごとのテーマ色を最後まで一貫させる - 料理写真は湯気や照りが伝わる寄りの構図にする - 数値は大きく見せ、出典は注釈にまとめる - 手順は番号とアイコンを付けた短い文にする - 生成り地を基本にして、黒帯は要所だけに使う

Don't - テーマ色をライン間で混ぜない - 寒色のグレー地を使わない - 写真の上に長い文章を置かない - 栄養バッジを四角にしない - 細い明朝体で見出しを組まない

Page Structure

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

1. ファーストビュー（看板商品のシズル感で引き込む）: 黒地に料理写真を大きく置き、ロゴ風の商品名とパッケージ3種を並べる
2. シリーズ紹介（3ラインの違いを伝える）: 3列にロゴ、円形の写真、テーマ色のタイプラベルを並べ、製法の説明を添える
3. 訴求バナー（使い方の広さと栄養を一言で伝える）: 黄色の角丸帯に2行のコピー
4. ラインアップ（商品の一覧を見せる）: パッケージ写真3点の下にテーマ色のラベル
5. 商品詳細ヒーロー（各ラインの食感と特長を伝える）: 黒帯にパッケージと料理写真、丸バッジ、円形の写真を配置
6. 栄養比較（一般的な食品との差を数値で見せる）: テーマ色の見出しの枠内に、倍率付きの棒グラフ3つ
7. お召し上がり方（手軽な調理方法を示す）: テーマ色のラベルと、番号付きアイコンカード4枚
8. アレンジレシピ（毎日食べられるイメージを広げる）: カロリーバッジ付きの料理写真をグリッドに並べる
9. 別ラインの紹介（残りのラインを同じ型で繰り返す）: 水色やえんじ色にテーマ色を替えて、ヒーロー・比較・手順・レシピを繰り返す

Imagery

• 料理は斜め上から寄りで撮り、照りや卵黄のツヤを強調する
• 黒背景の上に皿を大きく配置し、裁ち落としにする
• サブ写真は円形に切り抜き、器と中身を見せる
• 手順は単色の線画アイコン（テーマ色かダークグレー）
• レシピ写真は明るい自然光で、カラフルな器を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約900px幅、SP は全幅1カラムにする
• シリーズ紹介の3列は SP で縦積みか横スクロールにする
• レシピは PC 4列から SP 2列にする
• 手順カードは PC 4横並びから SP 2×2にする
• 黒帯ヒーローは SP では写真を上、商品名を下に組み替える
• 比較グラフは SP でも3本を横並びで保ち、文字を縮小する

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