---
version: alpha
name: Leaf Green and Orange Pet Diet Food LP
description: 若草色の緑と温かいオレンジを主役にした、犬用ダイエットフードの縦長訴求型 LP。犬の写真、Before/After、専門家の推薦、理由 3 つ、成分カード、FAQ を順番に重ねていく。手書き風の文字と、白や生成りの角丸カードで親しみやすさを出している。
colors:
  primary: '#94BD5D'
  cta: '#EB8F3C'
  on-cta: '#FFFFFF'
  background: '#F3F2EA'
  surface: '#FEFEFE'
  background-alt: '#FCF4EC'
  tint-1: '#F6F4F1'
  tint-2: '#99C3CA'
  dark-section: '#63564D'
  text: '#513F35'
  accent-1: '#FAFE9B'
  secondary: '#548D1D'
  line: '#D0CBC5'
  dark-section-alt-unused: '#506060'
  cta-accessible: '#B45F12'
typography:
  display:
    fontFamily: Zen Kaku Gothic New
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.03em
  accent:
    fontFamily: Klee One
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.05em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.04em
  headline-sm:
    fontFamily: Montserrat
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.03em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
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}'
  feature-tag:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 52px
  result-badge:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 120px
  heading-ribbon:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.accent-1}'
    typography: '{typography.accent}'
    height: 80px
  reason-label:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    height: 30px
  speech-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    rounded: '{rounded.md}'
    height: 100px
  expert-card:
    backgroundColor: '{colors.surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 360px
  check-list:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.headline-md}'
    height: 200px
  faq-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 280px
---

# DESIGN.md — 若草緑×オレンジの愛犬用ダイエットフード LP（Leaf Green and Orange Pet Diet Food LP）

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

## Overview

- **業種**: ペット ／ **雰囲気**: 親しみ・手作り感、ナチュラル、情報量多め・訴求型、やさしい・柔らかい
- **キーワード**: 若草グリーン・オレンジ強調・手書き文字・犬の写真・Before/After・角丸カード
- **地の質感**: 薄いドット柄やストライプ柄の地に、白・生成りのカードを重ねる。紙のような柔らかい質感。
- **形**: 中くらいの角丸カード、円形の数値バッジ、帯状の見出しリボン、月桂樹の飾り
- **温度感**: 暖かい。緑で健康的な印象、オレンジで食欲や元気を表す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#94BD5D` | ブランドの若草緑・セクションの地 | 18% | 画素の実測 |
| `cta` | `#EB8F3C` | オレンジの強調面・数値バッジ・タグ | 7% | 画素の実測 |
| `on-cta` | `#FFFFFF` | オレンジ面の上の白文字 | 1% | 画素の主要色に補正 |
| `background` | `#F3F2EA` | 基本の明るい地 | 14% | 画素の主要色に補正 |
| `surface` | `#FEFEFE` | 白いカード面 | 14% | 画素の実測 |
| `background-alt` | `#FCF4EC` | 淡いピーチの地（ドット柄） | 6% | 画素の実測 |
| `tint-1` | `#F6F4F1` | ベージュの帯・Before/After の地 | 6% | 画素の実測 |
| `tint-2` | `#99C3CA` | くすんだ水色の専門家見出しの地 | 3% | 画素の実測 |
| `dark-section` | `#63564D` | こげ茶の見出しリボン・ラベル | 4% | 画素の実測 |
| `text` | `#513F35` | 見出しと本文の濃いグレー茶 | 3% | 画素の主要色に補正 |
| `accent-1` | `#FAFE9B` | 黄色のマーカー・手書きの強調文字 | 2% | 画素の実測 |
| `secondary` | `#548D1D` | 濃い緑の帯・ラベル | 2% | 画素の実測 |
| `line` | `#D0CBC5` | 点線の区切り線・カードの枠 | 1% | 画素の主要色に補正 |
| `dark-section-alt-unused` | `#506060` | 未使用 |  | 推定 |
| `cta-accessible` | `#B45F12` | AA を満たす補正値（計算） |  | 計算 |

- 地は生成りと白を基本にする。区切りとなる大きなセクションは若草緑で全幅に塗る。
- 数値・ランキング・成分タグ・Before/After の結果はオレンジで強調する。
- 緑の地の上には白か生成りのカードを置き、本文は濃い茶色にする。
- キーワードは黄色マーカー、または緑の帯の上に白抜き文字で目立たせる。
- 見出しリボンはこげ茶を使い、写真の上でも文字が読めるようにする。
- 注釈は薄いグレーの小さな文字で、ブロックの直下に置く。
- `feature-tag` は文字 `#FFFFFF` × 背景 `#EB8F3C` のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B45F12`、4.58:1）を使う。
- `result-badge` は文字 `#FFFFFF` × 背景 `#EB8F3C` のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B45F12`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューと各セクションの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.2 | 0.02em |
| `headline-lg` | 理由の見出し（オレンジ文字） | ゴシック | Noto Sans JP | 800 | 28px | 1.3 | 0.03em |
| `accent` | 手書き風のキャッチ・吹き出しの文字 | 手書き・筆 | Klee One | 600 | 24px | 1.4 | 0.05em |
| `headline-md` | カード見出し・帯の見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.04em |
| `headline-sm` | 英字のラベル（Reason 01 など） | 欧文サンセリフ | Montserrat | 700 | 15px | 1.2 | 0.03em |
| `body-md` | 本文・体験談 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.05em |
| `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em |
| `label-button` | タグ・バッジの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em |

- 大見出しは極太のゴシックにし、キーワードだけ 1.5 倍に拡大して緑かオレンジにする。
- 感情を伝えるコピーや吹き出しには手書き風の書体を使う。
- 本文は 14px 前後、行間 1.8 で読みやすくする。
- 数値（kg・kcal など）は太いサンセリフで特大にする。
- 本文中の強調は、オレンジの太字か黄色マーカーにする。
- 英字ラベルを和文見出しの上に小さく添える。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。タグや比較は 2〜3 列
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
- 緑のセクションの中に、左右 12px ほど余白を空けた白カードを入れ子で置く。
- 写真は全幅、またはカード幅いっぱいに配置する。
- Before/After は横 2 枚の間に ▷▷▷ を置き、結果の円形バッジを重ねる。
- 特長タグは 3 等分で横に並べる。
- 注釈は各ブロックの直後に右寄せ、または左寄せで添える。

## Elevation & Depth

- カードには薄く柔らかい影（0 2px 8px rgba(0,0,0,.08)）を付ける。
- 見出しリボンは影なしのフラットにする。
- 数値バッジは写真の上に重ねて、立体感を出す。

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸の長方形が基本。人物は切り抜き、または円形にする。
- **セクション境界**: 直線で色を切り替える。下向き三角の矢印や点線を区切りに使う。
- タグは角丸 6〜8px の長方形にする。
- 結果の数値は円形バッジにする。
- 見出しリボンは端を斜線柄で飾った帯にする。
- ランキングは月桂樹の飾りで囲む。

## Components

- **特長タグ**（`feature-tag`）: 特長を短い言葉で 3 つ横に並べた角丸の帯。オレンジ版と白版がある。
- **減量結果の円形バッジ**（`result-badge`）: 期間・減量値・前後の体重を入れたオレンジの円形バッジ。
- **こげ茶の見出しリボン**（`heading-ribbon`）: 端を斜線柄にしたこげ茶の帯に、手書き文字の見出しを載せる。
- **理由番号ラベル**（`reason-label`）: 点線で挟んだ英字の番号と、緑ボックスのキーワード、オレンジの大見出しを組み合わせる。
- **質問の吹き出し**（`speech-bubble`）: 白地に緑の枠を付けた吹き出し。手書き文字で悩みを問いかける。
- **専門家カード**（`expert-card`）: 人物の写真、肩書きの帯、コメント、本文で構成する。
- **悩みチェックリスト**（`check-list`）: 暗い半透明の面に、黄色いチェックと白文字の項目を 4 行並べる。
- **FAQ カード**（`faq-card`）: オレンジの円に Q を入れた質問と、点線で区切った回答を白カードに入れる。緑の地に置く。

## Do's and Don'ts

**Do**
- 緑とオレンジの 2 色を主役にして、白・生成りの面で休ませる。
- 犬の写真を多めに使い、表情が明るいものを選ぶ。
- 数値は大きなオレンジ文字か円形バッジで見せる。
- 主張には必ず※注釈を近くに添える。
- 手書き風の書体で、感情的なコピーに温かみを出す。

**Don't**
- 寒色や黒を主役にしない。
- 角のとがった硬いカードを使わない。
- 本文を手書き書体で長く組まない。
- 写真の上に地を敷かずに細い文字を置かない。
- オレンジを本文の地色に広く使わない。

## Page Structure

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

1. **ファーストビュー**（利点と体験の結果を一目で伝える）: 緑の地に白タグを 3 つ置き、極太の大見出しと商品画像を添える。その下に Before/After と減量バッジを置く。
2. **体験談と実績**（利用者の多さを示す）: 体験談カードの後に愛犬写真のグリッドを置き、大きな数値の実績を見せる。
3. **専門家の監修**（信頼性を示す）: 緑とピーチの 2 段に分け、イラストの人物と大きな見出しを置く。
4. **選ばれた理由ランキング**（購入の決め手を伝える）: オレンジの地に大見出しを置き、月桂樹で囲んだ 1〜3 位を並べる。
5. **メディア掲載**（第三者の評価を示す）: ピーチの地に雑誌の画像と誌面を並べる。
6. **悩みの提起**（読み手に自分ごととして感じさせる）: 暗い写真の上に、チェックリストを 4 行置く。
7. **商品紹介**（商品と種類を見せる）: 手書きの大見出し、商品 3 袋、種類の帯、特長タグを並べる。
8. **獣医師の推薦**（専門家の言葉で後押しする）: 水色の見出しの後に、吹き出しと人物写真、本文カードを置く。
9. **3 つの理由**（特長を詳しく説明する）: 緑の地に理由ラベル、質問の吹き出し、解決の手書き文字、成分カードを並べる。
10. **お客様の声**（効果を実例で示す）: ストライプの地に、手書きの見出し帯、Before/After、減量バッジ、感想を置く。
11. **製法・品質のこだわり**（安心感を伝える）: グレーのカードの中に緑の帯見出しを並べ、図解とタグを置く。
12. **全年齢対応**（対象の広さを示す）: 多くの犬種の集合写真と、手書きの大見出しを組み合わせる。
13. **よくある質問**（購入前の不安を解消する）: 緑の地に FAQ カードを縦に並べる。
14. **開発ストーリー**（作り手の想いで締めくくる）: 白く透ける写真の上に、中央揃えの文章を置く。強調はオレンジの帯。最後にロゴ。

## Imagery

- 室内の自然光で撮った、小型犬の生き生きした写真。
- Before/After は同じ構図で並べる。
- 専門家は白衣姿で、正面を向いた笑顔の写真か、線画イラストにする。
- 食材や成分は明るく寄りで撮る。
- 肉球やキラキラなどの小さな手描き装飾を散らす。
- クラフト袋の商品画像を白背景に置く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像はない。PC では中央に 640px 前後の 1 カラムを置き、左右は緑か生成りの地で埋めることを推奨する。
- 写真グリッドは 4〜6 列に広げる。
- FAQ や成分カードは 2 列にしてもよい。
- 文字サイズは 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-dd8eea8b`（元 LP の URL から採番）
- **元 LP**: https://item.rakuten.co.jp/wanchan-life/nhel-1set-mall/
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。