DESIGN.md — 紺×からし色のポップレトロ食品 LP（Navy and Mustard Pop Retro Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、レトロ、力強い・インパクト
• キーワード: 濃紺×クリーム・からし色アクセント・極太ディスプレイ書体・集中線・漫画風吹き出し・オフセット影カード
• 地の質感: フラットな塗り。背景に放射状の集中線と、巨大な英字の透かしを薄く敷く
• 形: 角丸の白カード。右下に紺のずらし影。番号はとがった多角形の吹き出し
• 温度感: あたたかい。クリームの地に紺を締め色として使う

Colors

• 地はクリーム、カードは白、締めと最後のセクションは濃紺の 3 層で構成する
• からし色はラベルピル・装飾英字・ロゴモチーフに限って使う
• 文字はほぼ紺の 1 色。紺地の上だけ白にする
• 主ボタンは紺の塗りに白文字
• イラストは赤・青紫・黄色のポップな配色で、紺の太い輪郭線を付ける
• ページの外周に金茶色の細い枠線を通す

Typography

• 本文も太字（700）で、全体を力強く見せる
• キャッチは極太のディスプレイ書体にして、カギカッコで囲む
• 和文見出しの上に小さな英字ラベルを添える
• 番号は太い縦長の欧文数字にする
• お客様の声だけ手書き風の書体にして、少し傾ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の比較は縦積みにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右に約 6% の余白をとって配置する
• 番号バッジはカードの上辺にかかるように重ねる
• カード同士は 50px 前後の間隔で縦に並べる
• 背景に巨大な英字を薄く敷き、セクションに奥行きを出す
• 工程は図と下向き矢印で縦に流す

Elevation & Depth

• 白カードは右下に 6px ずらした紺のベタ影を付け、ぼかしは使わない
• 番号バッジにはからし色のずらし影を付ける
• 商品写真には淡いドロップシャドウだけを付ける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理と商品は切り抜きで白地やクリーム地に置く。角版は使わない
• セクション境界: FV は縦に紺と白で 2 分割。紺セクションの手前は PC で山型のカーブにする
• ボタンとラベルはピル型
• 見出し枠は細線の角丸ピルの左右に罫線を伸ばす
• 吹き出しはギザギザ・雲形・多角形の漫画風
• 番号は五角形のとがった吹き出し形

Components

• 主 CTA ボタン（button-primary）: 紺のピル型ボタンに白い太字。右端に矢印アイコンを置く
• 番号バッジ（number-badge）: 紺の多角形の吹き出しに白い太字の番号。からし色のずらし影を付ける
• 特徴カード（feature-card）: 白の角丸カード。細い紺の輪郭と紺のずらし影を付ける
• からし色ラベル（label-pill）: 種類名を入れるからし色のピル
• 用語説明ボックス（definition-box）: 細線の角丸枠の上辺にからし色のピル見出しを重ねる
• 罫線付き見出し（heading-line-pill）: 白地に細線のピル枠。左右に水平線を伸ばす
• 漫画風吹き出し（speech-bubble）: 白地に紺の輪郭線のギザギザ・雲形の吹き出し。傾けて重ねて配置する
• 英字ラベル付き見出し（section-heading）: 小さな英字ラベルの下に極太の和文見出しを中央揃えで置く

Do's and Don'ts

Do - 色は紺・クリーム・白・からし色の 4 色に絞る - カードには必ず紺のベタずらし影を付ける - 背景に集中線や巨大な英字を薄く敷いて、にぎやかさを出す - キャッチはディスプレイ書体とカギカッコで目立たせる - イラストは太い輪郭線のポップな絵柄に統一する

Don't - ぼかしの強い柔らかい影を使わない - 細い明朝体や淡いパステル調を使わない - からし色を本文の文字色にしない - 写真を角版の四角で並べない - 装飾英字を本文が読めないほど濃くしない

Page Structure

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

1. ファーストビュー（ブランドと 2 種類の商品を一目で伝える）: 縦に紺と白で 2 分割。ロゴ風の大見出し、左右にからし色の動物アイコン、2 つの商品パッケージを並べる
2. シズル訴求（具材のおいしさを印象づける）: クリームの集中線の背景に、具材をのせたスプーンを左右から配置。英字入りの吹き出しで種類を示す
3. コンセプト（商品の価値を宣言する）: 擬音語入りのディスプレイ見出しとカギカッコの強調。その下に短い本文を置く
4. 特長 01（独自の製法を説明する）: 番号バッジ付きの白カード。用語説明ボックスと、イラスト＋矢印の工程図を入れる
5. 特長 02（種類ごとの味の違いを示す）: 皿に盛った料理の切り抜き写真と、からし色のラベル、説明を種類ごとに縦に並べる
6. 特長 03・商品ラインアップ（手軽さと商品の一覧を見せる）: 調理アイコンを添えた説明、罫線付きの見出し、パッケージ写真とラベルを並べる
7. CTA（商品詳細ページへ誘導する）: カードの最下部に紺のピル型ボタンを置く
8. お客様の声（開発の背景になった声を示す）: 紺地に白い漫画風の吹き出しを 3 つ重ね、白のディスプレイ見出しで締める。下に出典の注釈を置く
9. フッター（SNS で共有してもらう）: 紺地に白丸の SNS アイコンを 2 つ並べる

Imagery

• 料理は真上ではなく斜めから撮り、ソースのツヤを強調して切り抜く
• スプーンにひと口分を盛ったシズルカットを左右から差し込む
• 工程は太い紺の輪郭線で、赤・青紫・黄色の星や丸のポップなイラストにする
• からし色の動物シルエットを、ロゴのモチーフとして左右に置く
• 背景には放射状の集中線と、アウトラインや塗りの巨大な英字を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 85% 幅のカードを置き、背景の英字の帯を左右いっぱいに見せる
• PC では工程図を横 3 列にして、矢印で横に流す
• PC では種類の比較・商品ラインアップを 2 カラムにする
• PC の FV は中央に巨大なロゴモチーフを置き、商品を左右に配置する
• 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 行書くと起動時に読み込まれる。