--- version: alpha name: Bold Red and Kraft Brown Wholesale Food LP description: 飲食店向けの業務用食材を卸す LP。前半は真っ赤な面と黄色ボックスで課題と解決を強く訴える。中盤は生成り地を金茶の太枠で囲み、明朝の大見出しと焦げ茶の帯で商品カタログを並べる。後半は導入事例カードと紙メモ風の声、フォームで締める。 colors: primary: '#FD0000' secondary: '#C3262D' accent-1: '#FEFE02' dark-section: '#42220B' line: '#C49A6C' background: '#FFFFFF' background-alt: '#F4F3EA' surface: '#E5E6E5' text: '#341A07' accent-2: '#DB0D0D' accent-3: '#028D42' tint-1: '#FCBD44' cta: '#C8A35A' on-cta: '#190D0B' on-primary: '#FFFFFF' accent-3-accessible: '#028840' typography: display: fontFamily: Shippori Mincho fontSize: 60px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.55 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' cta-gold-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 110px cta-yellow-arrow: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 130px problem-box: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 180px solution-box: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 130px ribbon-label: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.note}' height: 40px product-name-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 50px data-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 140px case-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 1100px memo-voice: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.headline-sm}' height: 230px category-tile: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 130px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FD0000` | 訴求セクションの赤い面 | 8% | 画素の実測 | | `secondary` | `#C3262D` | 課題提起の暗めの赤い地 | 5% | 画素の実測 | | `accent-1` | `#FEFE02` | 解決ボックス・CTA の黄色 | 3% | 画素の実測 | | `dark-section` | `#42220B` | 商品名帯・CTA 背景の焦げ茶 | 6% | 画素の実測 | | `line` | `#C49A6C` | 商品ブロックを囲む金茶の太枠 | 3% | 推定 | | `background` | `#FFFFFF` | 商品ブロック内の白地 | 27% | 画素の実測 | | `background-alt` | `#F4F3EA` | 選ばれる理由の生成り地 | 8% | 画素の実測 | | `surface` | `#E5E6E5` | お客様の声エリアのグレー地 | 8% | 画素の実測 | | `text` | `#341A07` | 明朝見出し・本文の焦げ茶 | 2% | 画素の実測 | | `accent-2` | `#DB0D0D` | 相性・強調の赤文字 | 1% | 画素の実測 | | `accent-3` | `#028D42` | お客様の声見出しの緑 | 0% | 画素の実測 | | `tint-1` | `#FCBD44` | 事例カードのオレンジ黄地 | 3% | 画素の実測 | | `cta` | `#C8A35A` | 資料請求 CTA の金帯 | 2% | 推定 | | `on-cta` | `#190D0B` | 金帯 CTA 上の文字 | 0% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 赤地の白文字 | 1% | 画素の主要色に補正 | | `accent-3-accessible` | `#028840` | AA を満たす補正値（計算） | | 計算 | - 前半の訴求ゾーンは赤のベタ面。課題は暗い赤、解決は明るい赤で温度差をつける - 解決の宣言と 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品カテゴリの大見出し | 明朝 | Shippori Mincho | 800 | 60px | 1.3 | 0.05em | | `headline-lg` | 赤地・生成り地のセクション見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.35 | 0.02em | | `headline-md` | 焦げ茶帯の商品名・小カテゴリ | 明朝 | Shippori Mincho | 700 | 28px | 1.3 | 0.08em | | `headline-sm` | 個別商品名・悩みボックスの文字 | ゴシック | Noto Sans JP | 700 | 21px | 1.5 | 0.02em | | `body-lg` | 赤い相性文・声の本文 | ゴシック | Noto Sans JP | 700 | 20px | 1.55 | 0.0em | | `body-md` | 商品説明・理由の本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.75 | 0.02em | | `note` | DATA 表・注釈 | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.02em | - 商品カテゴリ名は特大の明朝で、和の老舗らしさを出す - 訴求見出しは極太ゴシック。キーワードだけ黄色や赤に塗り分ける - 悩み・解決は短い言葉を 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-a9fc6848`（元 LP の URL から採番） - **元 LP**: https://yakiniku-shiire.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。