---
version: alpha
name: Deep Green and Mustard Healthy Noodle Offer LP
description: 料理写真を大きく使い、深緑と山吹色で割引オファーを繰り返し見せる健康食品の通販 LP。茶色の丸い見出しやベージュのカードで食の温かみを出しつつ、実績・メディア掲載・価格カードを何度も並べて購入を後押しする。
colors:
  primary: '#014626'
  on-primary: '#EFFFF9'
  cta: '#E4B05D'
  on-cta: '#E39A18'
  secondary: '#F6C21A'
  background: '#FFFFFF'
  background-alt: '#F9F7F4'
  surface: '#F6EDD3'
  text: '#562C07'
  text-body: '#453D33'
  accent-1: '#B2242A'
  accent-2: '#8A5A35'
  marker: '#FBD33C'
  dark-section: '#01346A'
  accent-3: '#9C8653'
  line: '#E2E1E0'
  on-cta-accessible: '#9E6B11'
typography:
  display:
    fontFamily: Yomogi
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Zen Maru Gothic
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.0
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 12px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    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: 80px
  button-secondary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 64px
  offer-price-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.md}'
    height: 340px
  offer-banner:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 220px
  worry-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 110px
  feature-circle:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 110px
  award-badge:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
    height: 110px
  media-quote:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 520px
  faq-item:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 40px
---

# DESIGN.md — 深緑×山吹の健康食品オファー型 LP（Deep Green and Mustard Healthy Noodle Offer LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 情報量多め・訴求型、ナチュラル、信頼・誠実、力強い・インパクト
- **キーワード**: シズル料理写真・深緑の帯・山吹色の割引バナー・茶色の丸見出し・繰り返しの価格カード
- **地の質感**: 木の卓や暗い背景で撮った料理写真に、ベタ塗りの面と細い線のカードを重ねる。
- **形**: 角丸カード、正円の番号バッジ、下向き三角の吹き出し、斜めストライプ
- **温度感**: 暖かめ。茶・ベージュ・山吹色を深緑で引き締める。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#014626` | ブランドの深緑（帯・サブボタン・フッター） | 7% | 画素の実測 |
| `on-primary` | `#EFFFF9` | 深緑の上の白文字 | 1% | 画素の実測 |
| `cta` | `#E4B05D` | クーポン取得ボタンの山吹色 | 2% | 画素の主要色に補正 |
| `on-cta` | `#E39A18` | クーポンボタンの文字色（オレンジ） | 0% | 画素の実測 |
| `secondary` | `#F6C21A` | 割引バナーの黄色地 | 4% | 推定 |
| `background` | `#FFFFFF` | ページの白地 | 40% | 画素の実測 |
| `background-alt` | `#F9F7F4` | 比較グラフ区画の薄いグレージュ地 | 4% | 画素の主要色に補正 |
| `surface` | `#F6EDD3` | お悩みカードのベージュ | 2% | 画素の実測 |
| `text` | `#562C07` | 茶色の見出し文字 | 2% | 画素の実測 |
| `text-body` | `#453D33` | 本文の濃グレー | 3% | 画素の主要色に補正 |
| `accent-1` | `#B2242A` | 価格・割引の赤 | 1% | 画素の実測 |
| `accent-2` | `#8A5A35` | 見出し帯・グラフ棒の茶色 | 2% | 推定 |
| `marker` | `#FBD33C` | 引用文の黄色マーカー | 0% | 画素の実測 |
| `dark-section` | `#01346A` | メディア掲載区画の紺 | 5% | 画素の実測 |
| `accent-3` | `#9C8653` | こだわり区画の金色の線・文字 | 0% | 画素の実測 |
| `line` | `#E2E1E0` | FAQ・カードの細線 | 0% | 画素の主要色に補正 |
| `on-cta-accessible` | `#9E6B11` | AA を満たす補正値（計算） |  | 計算 |

- 地は白。グラフ区画だけ薄いグレージュにする。
- 深緑はオファー見出し帯、サブボタン、フッターに使う。
- 割引バナーは黄色地に深緑の大きな数字を載せる。
- 価格と割引率は赤だけで強調する。
- 見出しは茶色にし、食の温かみを出す。
- メディア掲載は紺地、こだわり区画は黒地に金で、空気を切り替える。
- `button-coupon` は文字 `#E39A18` × 背景 `#FFFFFF` のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#9E6B11`、4.6:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの手書き風コピー | 手書き・筆 | Yomogi | 400 | 64px | 1.2 | 0.0em |
| `headline-lg` | 実績数字・割引率 | ゴシック | Noto Sans JP | 900 | 48px | 1.1 | -0.02em |
| `headline-md` | セクション見出し（茶色） | 丸ゴシック | Zen Maru Gothic | 700 | 26px | 1.4 | 0.05em |
| `headline-sm` | カード見出し・帯見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.7 | 0.02em |
| `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `accent` | 特長の大きな番号 | 欧文サンセリフ | Montserrat | 700 | 40px | 1.0 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.05em |

- 見出しは太めの丸ゴシックで、2〜3行に改行して中央に揃える。
- 数字は極太にし、単位は小さくする。
- 注釈は※付きの小さい文字で、根拠のすぐ下に置く。
- 手書き風の書体はFVだけに使う。
- 見出しの前に斜線の装飾（＼ ／）を付けることがある。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。特長・お悩みは 3 列、SNS 投稿は 3 列グリッド
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
- 写真は画面幅いっぱいに置く。
- テキストブロックは左右に約 5% の余白を取る。
- オファーのまとまり（帯→バナー→価格カード→2 ボタン）を 3 回以上繰り返す。
- 特長は番号→見出し→本文→写真の順で縦に並べる。
- 注釈は薄いグレーの角丸ボックスにまとめる。

## Elevation & Depth

- 影は基本的に使わず、平面にする。
- CTA ボタンは下に濃い色の段差を付けて立体に見せる。
- 価格カードは深緑の太い枠線と下向きの三角で浮かせる。

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
- **写真の切り抜き**: 四角で全幅に置く。料理の皿は円形のまま画面の端で切る。
- **セクション境界**: 直線で切り替える。下向き三角の吹き出しで次の区画へ視線をつなぐ。
- 特長の要約は茶色の線の正円 3 つ。
- 価格の割引表示はチケット型の赤枠。
- 送料無料は赤い正円のバッジ。
- ボタンは角丸 12px 前後の長方形。

## Components

- **クーポン取得ボタン**（`button-coupon`）: 白地に山吹色の太枠。角に斜めの帯を付け、2 行のオレンジ文字を置く。下に段差の影を付ける。
- **直接申込ボタン**（`button-secondary`）: 深緑のベタ塗りに白文字 2 行。下に濃い段差を付ける。
- **価格カード**（`offer-price-card`）: 深緑の枠に白地。商品名、グレーのピル型ラベル、深緑の帯ラベル、取り消し線の通常価格、赤の大きな価格、注釈の順に並べる。
- **割引バナー**（`offer-banner`）: 深緑の帯見出しの下に、黄色地の斜めストライプと深緑の巨大な割引率を置き、商品写真を添える。
- **お悩みカード**（`worry-card`）: ベージュの角丸カードを 3 列に並べ、茶色の太字を 3 行で置く。
- **番号付き円バッジ**（`feature-circle`）: 茶色の線の正円に、番号と短い特長を入れる。小さな吹き出しを添える。
- **月桂樹の実績バッジ**（`award-badge`）: 金色の月桂樹で、深緑の No.1 表記を挟む。
- **メディア引用**（`media-quote`）: 紺地の上の白いボックスに、カギ括弧と黄色マーカーの引用、線と媒体名を置く。
- **FAQアコーディオン**（`faq-item`）: 白地に細い線の行。左に Q、右に＋を置く。

## Do's and Don'ts

**Do**
- オファーのまとまりを、ページの序盤・中盤・終盤に繰り返し置く。
- 主張には※注釈を付け、根拠をすぐ近くに示す。
- 料理写真は湯気やツヤが伝わるシズル感のあるものを全幅で使う。
- 数字は極太で大きくし、実績の帯で信頼を示す。
- 見出しは茶色の丸ゴシックで温かみを保つ。

**Don't**
- 価格以外に赤を使わない。
- 深緑と山吹色以外の鮮やかな色をボタンに使わない。
- ネオン調などの派手な色を使わない。
- 本文を詰め込みすぎず、行間を 1.7 前後に保つ。
- 写真に強いフィルターをかけない。

## Page Structure

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

1. **ファーストビュー**（おいしさと健康価値を一目で伝える）: 暗い木の卓の料理写真に、白い手書き風の大コピーを重ねる。下部に深緑のラベルと白い帯のキャッチ、注釈を置く。
2. **実績バッジ**（第三者評価で信頼を示す）: 生成り地に月桂樹のバッジを 3 つ並べ、注釈を添える。
3. **販売実績**（多くの人に選ばれていることを示す）: 暗くした写真の上に、白の巨大な数字と黄色の下線を置く。
4. **オファー**（割引価格で申込を促す）: 深緑の帯、黄色の割引バナー、価格カード、クーポンボタン、深緑のボタンの順に並べる。
5. **悩みの提起**（対象者に自分ごとと思わせる）: 斜線で挟んだ見出しの下に、ベージュのカードを 3 枚並べる。
6. **商品紹介**（商品の価値を要約する）: 全幅の料理写真に白の大きな文字を重ね、正円の番号バッジ 3 つで特長を要約する。
7. **特長**（根拠を順に説明する）: 大きな番号、茶色の見出し、本文、写真または比較グラフ、注釈ボックスの順に並べる。
8. **専門家の声**（プロのおすすめで権威を示す）: 上下を二重線で区切り、左にコメント、右に人物の切り抜き写真を置く。料理写真を 3 枚横に並べる。
9. **SNS投稿**（利用者の生の声を見せる）: タブの下に、角丸の投稿カードを 3 列のグリッドで並べ、枠線だけの「もっと見る」ボタンを置く。
10. **メディア掲載**（話題性を示す）: 紺地に白ボックスの引用を置き、雑誌の表紙を横一列に並べる。
11. **こだわり**（原料と製法の価値を伝える）: 黒地の写真に金の円バッジを置き、金の角線の付いた白カードで説明する。料理を 4 分割した写真も使う。
12. **まとめCTA**（最後に購入を後押しする）: 山吹色の丸い特長バッジと見出しの後に、オファーのまとまりを再掲する。
13. **よくある質問**（不安を解消する）: 下線付きの見出しの下に、Q と＋の付いたアコーディオンを並べる。
14. **商品情報・フッター**（原材料表示と会社情報を載せる）: 枠線の表示ボックスとグレーのピル型ラベルの下に、深緑のフッターを置く。

## Imagery

- 料理は真上か斜め 45 度から寄って撮る。麺を持ち上げた瞬間や湯気でシズル感を出す。
- 背景は木の卓やグレーの石目にし、自然光でやや暖色寄りにする。
- 原料は木の器に盛り、暗めの背景で質感を見せる。
- 実績の帯の背景写真は暗く落とし、集中線の装飾を加える。
- 割引バナーには斜めストライプと三角の紙吹雪を付ける。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像はないため、SP の画像を中央の 600px 前後の幅に置き、左右を白か淡い色で埋める構成を推奨する。
- PC ではカード類を 3〜4 列に広げてもよい。
- オファーのまとまりは PC でも縦積みのまま、幅 600px 以内に収める。
- 文字サイズは SP の 1.2 倍程度にする。

## 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-d0060f68`（元 LP の URL から採番）
- **元 LP**: https://zenb.jp/pages/zenbnoodle230f
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（10/16 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。