DESIGN.md — オレンジ×焼き色の冷凍惣菜パン通販 LP（Warm Orange Fried Bread Food EC LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: シズル感・オレンジ帯・切り抜き写真・吹き出し・受賞アピール・セット通販
• 地の質感: 白地が基本。ベージュの紙色ボックスと白レンガ柄の背景で温かみを出す
• 形: 斜めに切った帯見出し、円形の吹き出し、ピル型ボタン、家型のセクション上端
• 温度感: 暖色寄りでにぎやか。焼き色の茶とオレンジが食欲を誘う

Colors

• 地は白を基本にして、写真の焼き色とオレンジが映えるようにする
• セクション見出し帯・吹き出し・家型の帯はオレンジで塗り、文字は白にする
• 吹き出しの後ろに黄色の影を重ねて、元気な印象を出す
• 英字見出しは山吹色にし、和文の小見出しは濃グレーで下に添える
• 購入ボタンはオレンジではなく濃グレーにして、商品写真の邪魔をしない
• ストーリー・送料・品質表示はベージュ系の淡い地で区切る
• ribbon-heading は文字 #F0ECE9 × 背景 #FC850C のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A55402、4.62:1）を使う。
• circle-bubble は文字 #F0ECE9 × 背景 #FC850C のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A55402、4.62:1）を使う。
• set-badge は文字 #F0ECE9 × 背景 #FC850C のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A55402、4.62:1）を使う。
• number-circle は文字 #F0ECE9 × 背景 #FC850C のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A55402、4.62:1）を使う。
• link-banner は文字 #F0ECE9 × 背景 #FC850C のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A55402、4.62:1）を使う。

Typography

• セクション見出しは英字を大きく字間広めに置き、和文を小さく 2 段目に添える
• 価格は太字で（税込）を小さく添える
• 吹き出しコピーは 3 行以内の中央揃えにする
• 本文は中央揃えを多用し、長文の箇条だけ左揃えにする
• 原材料など法定表示は小さい注釈サイズで詰めて組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品グリッドは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは英字見出し＋和文サブ見出しで始める
• 商品紹介はパッケージ写真と説明帯を左右交互に配置する
• ポイントは丸数字＋見出し＋写真＋本文を縦に積む
• お客様の声は人物アイコンと吹き出しを交互にずらす
• 商品一覧はカードを並べ、写真・内訳バッジ・価格・数量・ボタンの順にする

Elevation & Depth

• 吹き出しには影を付けず、黄色の面をずらして重ねる
• リンクバナーには軽い落ち影（0 2px 4px 程度）を付ける
• 受賞エンブレムと切り抜き写真には自然な落ち影を付ける
• 商品カードは影なしの平面にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品と揚げパンは背景を抜いた切り抜き。店舗・記事の写真は角丸なしの矩形
• セクション境界: 基本は直線。食べ方セクションだけ三角屋根の家型で上端を切る
• 帯見出しは片端を斜めやギザギザに切ったリボン型にする
• 訴求コピーは円形の吹き出しにする
• 数量セット表示は左側が丸いピル型ラベルにする
• リンクバナーは角丸小で、色付きのヘッダー帯＋白い本文の 2 段にする

Components

• カート追加ボタン（button-cart）: カートアイコン付きの濃グレーのピル型ボタン
• 一覧リンクボタン（button-outline）: 白地にグレー枠のピル型サブボタン
• リボン帯見出し（ribbon-heading）: 端を斜めに切ったオレンジ帯に白抜きの商品名
• 円形訴求吹き出し（circle-bubble）: オレンジの円に白文字の短いコピー。黄色の面を斜め後ろに重ねる
• セット数バッジ（set-badge）: 数字を大きくしたオレンジのピル型ラベル
• 丸数字（number-circle）: オレンジの円に白い数字。ポイント見出しの上に置く
• リンクバナー（link-banner）: オレンジまたは茶色のヘッダー帯に矢印、下は白地にアイコンと説明
• 口コミ吹き出し（review-bubble）: 白地に細いグレー枠の角丸吹き出し。黄色い丸の人物アイコンを添える
• 品質表示アコーディオン（accordion-spec）: ベージュの見出し帯、白い本文、下部に＋の開閉バー

Do's and Don'ts

Do - 揚げパンの断面を大きく見せ、具材のシズル感を主役にする - オレンジは帯・円・数字など面で使い、白抜き文字にする - 英字見出し＋和文サブ見出しのセットを全セクションで統一する - 受賞歴はエンブレムと商品写真を並べて年ごとに繰り返す - 購入導線は各セット商品のすぐ下に置く

Don't - 寒色や暗い地のセクションを入れない - カートボタンをオレンジにして装飾と区別をなくさない - 写真を小さく四角く並べるだけにしない - 吹き出しのコピーを長文にしない - 明朝体を使って高級感寄りにしない

Page Structure

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

1. ファーストビュー（商品の魅力とブランドを一目で伝える）: 揚げパンの断面写真を全面に置き、手書き風ロゴ、オレンジの説明ボックス、受賞バッジを重ねる
2. ページ内ナビ（主要コンテンツへの移動）: 白地のボタンに下向き三角を付けて 4 つ並べる
3. 人気セット（まず買いやすいセットを提示する）: セット数バッジ、パッケージ写真、内訳ラベル、価格、カートボタン
4. コンセプト・特長（食感の魅力を短く伝える）: 円形吹き出し 3 つを切り抜き写真の上に並べる
5. 商品紹介（味のバリエーションを紹介する）: パッケージ写真とリボン帯見出し・説明文を左右交互に配置
6. おいしさの秘密（こだわりを根拠づける）: 丸数字＋オレンジ見出し＋写真＋本文を 3 つ
7. ブランドストーリー（誕生の経緯で共感を得る）: 紙色のボックスに帯見出し 2 本、周囲に食材の切り抜き写真を散らす
8. 外部リンクバナー（SNS やインタビューへ誘導する）: 色付きヘッダー帯付きのバナーを縦に 2 つ並べる
9. お客様の声（購入者の満足を見せる）: レンガ柄の地に人物アイコンと吹き出しを互い違いに配置
10. 受賞歴（第三者評価で信頼を得る）: 年ごとにエンブレム、オレンジのリボン見出し、商品写真を並べる
11. 商品ラインアップ（全セットから選んで購入させる）: 商品カードのグリッドにバッジ・価格・数量・カートボタン
12. 送料・食べ方（購入前の不安を解消する）: グレー地の送料計算図と、家型オレンジ地に電子レンジのイラストとポイント
13. 品質表示（原材料・アレルギーを開示する）: 商品ごとのアコーディオン形式の表
14. 店舗情報・読み物・利用ガイド（回遊と信頼を補う）: 店舗写真と住所、記事カード 3 枚、おすすめ商品、枠付きのガイドボタン

Imagery

• 揚げたてのパンを半分に割り、具材が見える断面を寄りで撮る
• 食材（じゃがいも・にんじん・肉・スパイス）は背景を抜いて散らす
• パッケージは正面から撮って切り抜き、パン写真を手前に重ねる
• 人物は黄色い丸に入れた線画アイコンで表す
• 電子レンジやカトラリーは白い線のシンプルなアイコンにする
• 受賞はゴールドの月桂樹エンブレムで表現する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 約 800px 幅で組み、SP は幅 90% の 1 カラムにする
• PC の商品グリッドは 3 列、SP は 2 列にする
• 左右交互の商品紹介は、SP では写真の下に帯見出しを縦に積む
• 円形吹き出し 3 つは、SP では小さくして横並びにするか 2 段にする
• 口コミの互い違い配置は、SP では縦 1 列にする

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