--- version: alpha name: Deep Green Plant-Based Bread Offer LP description: 深い緑を基調に、黄色の強調と赤い価格表示を組み合わせた食品の定期通販 LP。温かみのある食品写真、実績バッジ、番号付きの特長カード、棒グラフでの比較、クーポン CTA を縦に積み重ね、健康志向と「おトク感」を両立させている。 colors: primary: '#1A5B3D' dark-section: '#014626' on-primary: '#FBFFFE' background: '#FFFFFF' background-alt: '#F3F1E4' tint-1: '#CDDAD3' accent-1: '#FDDB65' tint-2: '#FEE38C' cta: '#E8A020' on-cta: '#E29A1A' accent-2: '#AF232A' secondary: '#623614' text: '#092B16' text-muted: '#555555' on-cta-accessible: '#9D6B12' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-coupon: backgroundColor: '{colors.background}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 72px button-secondary: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 64px offer-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 720px number-feature-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 900px award-badge: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 110px bar-chart: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 260px yellow-heading-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 90px check-list: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px voice-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' rounded: '{rounded.md}' height: 220px --- # DESIGN.md — 深緑×黄色の豆粉パン通販 LP（Deep Green Plant-Based Bread Offer LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ナチュラル、信頼・誠実、情報量多め・訴求型 - **キーワード**: 深緑・黄色マーカー・焼き色の食品写真・60%OFF訴求・番号付き特長・棒グラフ比較 - **地の質感**: ほぼフラットな面に、生成り・薄グレーの地色と自然光の食品写真を重ねる - **形**: 角丸 8〜16px のカード、太い角丸枠、下向き三角の吹き出し、円形バッジ - **温度感**: やや温かい（深緑＋黄＋木目の茶色） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1A5B3D` | ブランドの深緑（帯・見出し・特長カード） | 7% | 画素の実測 | | `dark-section` | `#014626` | 濃い緑の価格帯・サブボタン | 6% | 画素の実測 | | `on-primary` | `#FBFFFE` | 緑の地の上の白文字 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白い地 | 26% | 画素の実測 | | `background-alt` | `#F3F1E4` | 生成りの説明セクションの地 | 7% | 画素の実測 | | `tint-1` | `#CDDAD3` | オファー枠の外側の薄グレー緑 | 7% | 画素の実測 | | `accent-1` | `#FDDB65` | 強調の黄色（見出し帯・グラフ・マーカー） | 4% | 画素の実測 | | `tint-2` | `#FEE38C` | お客様の声・おすすめの淡い黄色地 | 4% | 画素の実測 | | `cta` | `#E8A020` | クーポン取得ボタンのオレンジ | 1% | 推定 | | `on-cta` | `#E29A1A` | クーポンボタンの文字 | 0% | 画素の実測 | | `accent-2` | `#AF232A` | 価格・送料無料の赤 | 1% | 画素の実測 | | `secondary` | `#623614` | 茶色の帯（推薦コメント・トースター） | 5% | 画素の実測 | | `text` | `#092B16` | 見出しの濃い緑黒 | 2% | 画素の実測 | | `text-muted` | `#555555` | 注釈の灰色文字 | 2% | 推定 | | `on-cta-accessible` | `#9D6B12` | AA を満たす補正値（計算） | | 計算 | - 地は白・生成り・薄グレー緑・淡い黄色をセクションごとに切り替える - 深緑は見出し帯、特長カード、サブボタンに限定して面で使う - 黄色は見出し下マーカー、グラフ棒、数字強調、見出し帯に使う - 価格と割引率だけ赤で強調し、ほかに赤は使わない - 主 CTA は白地にオレンジ枠・オレンジ文字のクーポン風にする - 茶色の帯は推薦コメントやコラム的な横長ブロックに使う - `button-coupon` は文字 `#E29A1A` × 背景 `#FFFFFF` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#9D6B12`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ、割引率の大数字 | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | セクションの大見出し（深緑） | ゴシック | Noto Sans JP | 900 | 34px | 1.35 | 0.04em | | `headline-md` | 特長カード内の見出し・緑帯の白見出し | ゴシック | Noto Sans JP | 800 | 26px | 1.35 | 0.02em | | `headline-sm` | フレーバー名・小見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.75 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | スラッシュで挟む前置きコピー | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.04em | - 見出しは極太ゴシックを深緑で書き、中央揃えにする - 見出しの上に「＼ 前置き ／」の形で小さなコピーを置く - 数字（%・倍・価格）は周りの文字より 1.5〜2 倍大きくする - 見出しの重要語に黄色の下線マーカーを引く - 注釈は 10px 前後の灰色で、各ブロックの直下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長の要約やおすすめは 3 列カード、SNS 投稿は 3 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションごとに地色を切り替え、全幅帯で区切る - 特長は番号バッジ付きの太枠カードの中に、グラフ・写真・リストを入れる - オファーは薄グレー緑の地の上に白い角丸の太枠カードを置き、下に三角の吹き出しを付ける - フレーバー紹介は写真と文章を左右交互に配置する - CTA はオファーの直後にクーポンボタンと緑ボタンを縦に並べる ## Elevation & Depth - 基本はフラット - ボタンには下方向に濃い色のずれ影（2〜4px）を付ける - おすすめカードと SNS カードは薄いグレーの影か 1px 線で浮かせる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 食品写真は角丸 8px の長方形、人物は切り抜き、栄養素は円形バッジ - **セクション境界**: 直線で切り替え、下向き三角の矢印・吹き出しでつなぐ - 特長カードは深緑の 3px 前後の太枠と角丸 16px - 番号は黄色の円に緑の数字を入れ、カードの上端に半分かける - ボタンは角丸 12px の長方形で、ピル型にはしない ## Components - **クーポン取得ボタン**（`button-coupon`）: 白地にオレンジの太枠、角に斜めの帯。2 行のオレンジ文字 - **そのまま申込ボタン**（`button-secondary`）: 濃い緑の地に白文字の 2 行ボタン。下に影を付ける - **初回価格オファーカード**（`offer-card`）: 商品写真、大きな割引率、セット内容、緑の価格見出し帯、赤い価格を入れた白い太枠カード - **番号付き特長カード**（`number-feature-card`）: 上部は深緑の帯に白見出し、上端に黄色の番号円。中は白地 - **月桂樹の実績バッジ**（`award-badge`）: 金色の月桂樹で囲んだ No.1・高評価率を 3 つ横に並べる - **比較棒グラフ**（`bar-chart`）: 黄色の棒と灰色の棒で比べ、オレンジの円形吹き出しに倍率を出す - **黄色の見出し帯**（`yellow-heading-band`）: 角丸の黄色い帯に深緑の太字見出し - **チェックリスト**（`check-list`）: 淡い黄色の角丸箱に、緑の丸チェックと太字の行を並べる - **お客様の声の吹き出し**（`voice-bubble`）: 淡い黄色の地に白い吹き出しとイラストの人物を左右交互に置く ## Do's and Don'ts **Do** - 数字訴求は黄色・赤・オレンジで大きく目立たせる - 見出しは深緑の極太ゴシックで統一する - 根拠の注釈は各ブロックの直下に必ず置く - 食品写真は木目や布を背景に、温かい自然光で撮る - オファーと CTA のセットはページの中盤と終盤に繰り返す **Don't** - 深緑以外の寒色をメインに使わない - 赤を価格以外の装飾に使わない - ボタンをピル型や細い線だけのデザインにしない - 写真を暗くしたり、彩度を下げたりしない - 注釈を省いて数値だけを見せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の魅力と大幅割引を一度に伝える）: 食品写真の上に黒い極太コピーを置き、下に深緑の帯と黄色の大きな割引率、送料無料の円形バッジを並べる 2. **実績**（ランキングや評価で信頼を得る）: 生成りの地に月桂樹のバッジを 3 つ並べ、下に注釈を置く 3. **専門家の推薦**（プロの声で品質を裏付ける）: 店内写真を背景に黄色の見出し帯と白いコメント箱を置き、人物を切り抜きで添える。緑の下向き矢印で次へつなぐ 4. **販売実績・商品概要**（累計販売数と商品のコンセプトを伝える）: 大きな数字の帯のあと、生成りの地に深緑の見出しと中央揃えの本文、かご盛りの写真を置く 5. **新フレーバーの紹介**（新商品を推す）: 茶色の帯に白い箱を入れ、商品パッケージと推薦者の写真を添える 6. **オファー・CTA**（初回価格で申込を促す）: 薄グレー緑の地に白い太枠カードを置き、割引率・セット内容・赤い価格を入れる。下にクーポンボタンと緑ボタンを並べる 7. **おすすめの対象**（自分ごと化させる）: 淡い黄色の地に白い角丸カードを 3 つ並べ、下に人物写真と深緑の円形コピーを重ねる 8. **特長の要約**（3 つの強みを一覧で見せる）: 素材の俯瞰写真と商品写真のあと、深緑の番号付きカードを 3 列に並べる 9. **特長の詳細**（数値と素材で根拠を示す）: 番号付きの太枠カードに黄色の見出し帯、棒グラフ、チェックリスト、栄養素の円を入れる 10. **フレーバー紹介**（味のバリエーションを見せる）: 写真と文章を左右交互に置き、フレーバー名を色違いの太字と下線で書く 11. **食べ方の提案**（おいしく食べる方法を伝える）: 濃い茶色の帯に黄色と白の文字を置き、右にトースターの写真を入れる 12. **SNS 投稿**（利用者の生の声を見せる）: タブ風のボタンの下に投稿カードを 3 列グリッドで並べ、もっと見るボタンを置く 13. **オファー・CTA（再掲）**（最後にもう一度申込を促す）: 中盤のオファーカードとボタンを同じ形で繰り返す 14. **お客様の声**（共感と安心で後押しする）: 淡い黄色の地に白い吹き出しとイラストの人物を左右交互に置き、商品の写真を添える ## Imagery - 食品は木目・リネン・ラタンのかごの上で、自然光を使い斜め上から撮る - 素材（豆・ナッツ・粉）を小皿に入れ、白い布の上に整列させて俯瞰で撮る - 人物は明るい室内で、商品を手に笑顔の自然なカット - お客様の声は太い線画に単色ベタ塗りのフラットなイラスト - パッケージはたくさん積んだ箱の形で、オファーの中に配置する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に 375〜750px 幅の SP レイアウトを置き、左右を地色で埋める形にする - PC に広げる場合、3 列カードは横幅を広げ、写真と文章の交互配置は 2 カラムにする - 大数字や価格は PC でも画面幅に応じて大きく保つ - SNS 投稿グリッドは PC で 4〜6 列に増やす ## 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-5d94bb9e`（元 LP の URL から採番） - **元 LP**: https://zenb.jp/pages/zenbbread302 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。