DESIGN.md — 赤×焦げ茶×金の業務用食材 BtoB LP（Bold Red and Kraft Brown Wholesale Food LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、和風、信頼・誠実
• キーワード: 業務用食材・赤い訴求面・金茶の額縁・明朝の商品名・DATA 表・導入事例
• 地の質感: 前半はベタ塗りの原色で平面的。中盤は生成り地と金リボンで老舗らしい質感。CTA には金色のグラデ帯を使う
• 形: 角丸 8〜12px の白縁ボックス、太い金茶の枠線、焦げ茶の角丸帯、下向き三角
• 温度感: 暖色。赤・焦げ茶・金で食欲と熱気を出す

Colors

• 前半の訴求ゾーンは赤のベタ面。課題は暗い赤、解決は明るい赤で温度差をつける
• 解決の宣言と CTA は黄色の面に赤い文字、黒い太枠で囲む
• 商品カタログは白地＋金茶の太枠。見出しと本文は焦げ茶で統一する
• 赤文字は相性・注意書きなど、1 ブロックにつき 1〜2 行だけに使う
• 資料請求の主 CTA は焦げ茶の帯の上に金のグラデ帯を置く
• お客様の声はグレー地。見出しだけ緑にして、前半とは別の章に見せる
• 事例カードは黄と黒を交互に使う
• memo-voice は文字 #028D42 × 背景 #FFFFFF のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#028840、4.57:1）を使う。

Typography

• 商品カテゴリ名は特大の明朝で、和の老舗らしさを出す
• 訴求見出しは極太ゴシック。キーワードだけ黄色や赤に塗り分ける
• 悩み・解決は短い言葉を 3〜4 行に分けて、大きく組む
• DATA 表は「■項目：値」の形で、1 行ずつ罫線で区切る
• 相性の訴求は赤＋焦げ茶の 2 色で、中央揃えにする
• 本文は 15px 前後で、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩み・解決・カテゴリ案内のみ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 74%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品ブロックは画面幅の約 90% の金茶枠で囲み、内側の本文は約 74% 幅に収める
• 悩みボックスは 2×2 に並べ、下に点線のつなぎ線を入れる
• 商品は写真→商品名→説明→相性→DATA 表の順で縦に積む
• セクション間は 50〜70px あける
• 写真は本文と同じ幅か、枠いっぱいの幅で置く

Elevation & Depth

• 基本はフラット。影はほとんど使わない
• 声カードはめくれた紙メモ風にして、下に影を落とす
• CTA の金帯はグラデーションで立体感を出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。小さな写真は 2〜3 枚を並べたグリッドにする
• セクション境界: 直線で色面を切り替える。訴求ゾーンの終わりは下向きの白三角で次へつなぐ
• 悩みボックスは赤地に白の太枠、角丸 10px
• 解決ボックスは黄色地に黒の太枠、角丸 10px
• 商品名の帯は焦げ茶で角丸 10px
• ブロックの上端には金色のリボンラベルを斜めに載せる

Components

• 金帯の資料請求 CTA（cta-gold-band）: 焦げ茶の背景に金のグラデ帯を置き、黒文字 2 行で請求を促す
• 黄色の矢印ボタン（cta-yellow-arrow）: 黄色地に赤い太枠。左上に赤いラベル、右に白丸の赤い再生矢印を置く
• 悩みボックス（problem-box）: 赤地に白の太枠。白い太字で悩みを短く書き、2×2 に並べる
• 解決宣言ボックス（solution-box）: 黄色地に黒枠、赤い極太文字で解決を宣言する
• 金リボンラベル（ribbon-label）: 枠の上端に斜めに載せる金色のリボン。「人気」系の短いラベルを入れる
• 商品名帯（product-name-bar）: 焦げ茶の角丸帯に白い明朝で商品名を書く
• DATA 表（data-table）: 上下を焦げ茶の太罫で挟み、中央に「DATA」の見出しを置く。各行は細罫で区切る
• 導入事例カード（case-card）: 黄または黒の地に金茶の枠。店名→実績（赤）→写真→本文の順に載せる
• 紙メモ風の声（memo-voice）: めくれた白い紙に緑の太字で感想を書き、右下に顔写真と属性を添える
• カテゴリタイル（category-tile）: 写真の上に大きな明朝のカテゴリ名と小さな説明を載せる。2×2 に並べる

Do's and Don'ts

Do - 訴求ゾーンは赤・黄・黒の高コントラストで強く見せる - 商品ゾーンは生成りや白の地に金茶の枠で、落ち着いた信頼感を出す - 商品ごとに写真・説明・相性・DATA を同じ順で繰り返す - 実績の数字は赤い太字で大きく見せる - イラストの人物で悩みから解決への流れを見せる

Don't - パステル色や寒色を主役にしない - 商品名を細いゴシックにしない（明朝で重厚に組む） - 赤文字を本文全体に使わない - 金茶の枠を細い線にしない（6px 前後の太枠を保つ） - 写真を丸く切り抜かない

Page Structure

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

1. ヘッダー（電話番号と問い合わせ先を常に見せる）: 生成り地に左ロゴ、右に電話番号と赤い小ボタンを置く
2. ファーストビュー（誰向けに何を卸すかを伝える）: 白地に極太ゴシックと明朝を混ぜたコピーを置き、食材の切り抜き写真を大きく載せる
3. カテゴリ案内（扱う商材を一覧で見せる）: 写真付きのタイルを 2×2 に並べ、金リボンを載せる
4. 会社紹介（実店舗を運営している信頼性を示す）: 角丸の赤いパネルに集合写真を置き、黄色い見出しと白い本文を続ける
5. 悩みの提起（仕入れの課題に共感させる）: 暗い赤の地に困り顔のイラストを置き、悩みボックスを 2×2 に並べる
6. 解決提示（導入メリットを示す）: 黄色の宣言ボックスの下に、明るい赤の地で指差しイラストと成果ボックスを並べる
7. CTA（サンプル請求・開業相談へ誘導する）: 焦げ茶の帯に金帯 CTA を置き、その下に黄色の矢印ボタンを続ける
8. 商品カタログ（商品ごとの詳細と仕様を伝える）: 金茶枠のブロックに明朝の特大見出しと焦げ茶の帯を置き、商品と DATA 表を繰り返す
9. 選ばれる理由（ノウハウ提供と実績で差別化する）: 生成り地に赤い特大見出し、写真の 3 枚グリッドと日本地図の実績図を置く
10. 導入事例（具体的な成果を示す）: グレー地に緑の見出し。黄と黒の事例カードを交互に並べる
11. お客様の声（多くの店に支持されていることを示す）: 紙メモ風のカードを縦に並べる
12. 契約の流れ・フォーム（申込までの不安を減らし、送信させる）: 焦げ茶地に白いステップ枠と金ボタンを置き、その下を黄色地の問い合わせフォームにする

Imagery

• 食材は木目のテーブルや黒い皿に載せ、暖色の光で寄りに撮る
• タレは白い小皿を真上から撮り、ごまをアクセントにする
• 加工場や厨房の作業風景で、手作り感と衛生感を見せる
• 人物は線画風のイラスト。困り顔と指差しの 2 種類を使う
• 受賞メダル風の金・銀バッジを写真の隅に重ねる
• 店舗の外観とスタッフの集合写真で、事例の信憑性を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 500px 幅のカラムを置き、SP と同じ構成を保つ
• PC では赤や生成りの背景を全幅に広げ、中身だけを中央寄せにする
• カテゴリタイルは PC で横 4 列にする
• 声カードと事例カードは PC でも 1 列のまま
• 見出しは PC でも SP とほぼ同じ比率で組む

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