---
version: alpha
name: Bold Red Blue Character Pet Treat LP
description: 原色の赤と青を左右・上下に分けて大きく使い、生成りの地に紺の文字を合わせたポップなペット向けアイスのLP。マスコットキャラクターを全面に出し、商品パッケージの写真と、色付きの四角に一文字ずつ入れた見出しで、親しみやすく楽しい印象を作る。
colors:
  primary: '#E20314'
  secondary: '#0381CB'
  background: '#FDFBE4'
  background-alt: '#FCFBF6'
  text: '#1A3A8C'
  cta: '#E30A22'
  on-cta: '#FEFEFB'
  surface: '#FEFEFE'
  dark-section: '#113686'
  marker: '#FFE14A'
  tint-1: '#C2EBED'
  tint-2: '#F8DADC'
  on-dark: '#FEFEFB'
  line: '#2D4E9E'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.1em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.7
  note:
    fontFamily: Noto Sans JP
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Roboto
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 10px
  lg: 16px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 64px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  button-on-color:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 48px
  heading-tiles:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 36px
  badge-feature:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 22px
  set-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 560px
  feeding-table:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 280px
  faq-item:
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 70px
  contact-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 150px
---

# DESIGN.md — 赤×青×生成りのキャラクター系ペット食品LP（Bold Red Blue Character Pet Treat LP）

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

## Overview

- **業種**: ペット ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: 赤青の2色ツートン・マスコットキャラ・生成りの紙のような地・紺の太い文字・四角に1文字ずつ入れた見出し
- **地の質感**: 生成りの地にうっすら紙の粒の質感がある。赤と青の面もざらっとしたノイズを重ねたマットな仕上げ。
- **形**: ボタンはピル型。カードは中くらいの角丸。キャラクターは太い紺の線で縁取ったイラスト。
- **温度感**: 明るく温かい。原色を使うが、地を生成りにしてやわらげている。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E20314` | メインの赤（FV左半分・いちご味の面・主CTA） | 14% | 画素の実測 |
| `secondary` | `#0381CB` | サブの青（FV右半分・ミルク味の面） | 15% | 画素の実測 |
| `background` | `#FDFBE4` | 生成りのページ地 | 35% | 画素の実測 |
| `background-alt` | `#FCFBF6` | 支払い・配送案内の白っぽい地 | 13% | 画素の実測 |
| `text` | `#1A3A8C` | 見出し・本文に使う紺 | 3% | 推定 |
| `cta` | `#E30A22` | 購入ボタン（赤のピル） | 1% | 画素の実測 |
| `on-cta` | `#FEFEFB` | CTAボタンの白文字 | 0% | 画素の主要色に補正 |
| `surface` | `#FEFEFE` | 色付きの面に置く白いボタン・カード | 3% | 画素の実測 |
| `dark-section` | `#113686` | 特長バッジ・表ヘッダの濃い紺 | 1% | 画素の実測 |
| `marker` | `#FFE14A` | 見出しの下に引く黄色のマーカー・キャラの黄 | 2% | 推定 |
| `tint-1` | `#C2EBED` | 表の行に敷く水色 | 0% | 画素の実測 |
| `tint-2` | `#F8DADC` | 表の行に敷くピンク | 0% | 画素の実測 |
| `on-dark` | `#FEFEFB` | 赤・青の面の上に載せる白文字 | 1% | 画素の主要色に補正 |
| `line` | `#2D4E9E` | 区切りの点線・カードの紺い枠線 | 0% | 推定 |

- 赤と青は対になる2色として、FVやスペック面を左右・上下に分けて同じ面積で使う。
- 情報を伝えるセクションは生成りの地に紺の文字で組む。黒は使わない。
- 赤や青の面の上では、文字を白、ボタンを白い面に色付きの文字にする。
- 見出しの下には黄色の太いマーカーを引いて強調する。
- 表の行は水色・ベージュ・黄・ピンクのパステルで塗り分ける。
- 主CTAは生成りの地の上で赤ピルに白文字にする。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 商品ロゴ風のタイトル | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.02em |
| `headline-lg` | 四角に1文字ずつ入れるセクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.2 | 0.1em |
| `headline-md` | 商品名・味の名前・価格 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em |
| `headline-sm` | Qの質問文・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.0em |
| `body-md` | 本文・回答文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.0em |
| `note` | ※の注釈・送料案内 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em |
| `accent` | 味の名前の英語表記 | 欧文サンセリフ | Roboto | 700 | 13px | 1.3 | 0.02em |
| `label-button` | ボタンとバッジの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.05em |

- 文字はほぼ全部を太字の紺のゴシックで組み、やわらかい細字は使わない。
- セクション見出しは1文字ずつ水色・ピンク・黄の四角に入れ、紺の枠で囲む。
- サブ見出しには黄色のマーカー下線を引く。
- 価格は数字を大きくし、「円」と「(税込)」は小さく添える。
- 注釈は9px前後でグレーまたは紺にし、中央か左に揃える。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。スペック表と特長バッジは 2 列に並べる。
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 中身は中央揃えを基本にし、FAQと配送案内は左揃えにする。
- セット商品は赤と青の角丸パネルに分け、縦に積む。
- 見出しの上には小さなシルエットのイラストを載せる。
- スペック表は2列で、行の間を点線で区切る。
- 写真は横にはみ出すほど並べたギャラリーにする。

## Elevation & Depth

- 影はほとんど使わず、色の面と線で階層を作る。
- クレジットカードロゴのカードにだけ、うっすら影をつける。
- 商品写真には、ものの形に沿った自然な落ち影をつける。

## Shapes

- **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
- **写真の切り抜き**: 商品は背景を切り抜いた写真。犬の写真は四角のまま少しずつずらして並べる。
- **セクション境界**: 背景色を直線で切り替える。FVは縦の直線で赤と青に分ける。案内のブロックは点線で区切る。
- ボタンとバッジはピル型にする。
- 問い合わせカードは紺の枠線と中くらいの角丸にする。
- Q・Aのアイコンは紺の枠をつけた正方形にする。
- 丸いメダル風のバッジを商品の脇に添える。

## Components

- **購入ピルボタン**（`button-primary`）: 赤い面に白い太字を載せた幅の広いピル。生成りの地の上に置く。
- **色面上の白ボタン**（`button-on-color`）: 赤や青のパネルの上に置く白いピル。文字はパネルと同じ色にする。
- **一文字タイル見出し**（`heading-tiles`）: 1文字ずつパステルの四角に入れて紺の枠で囲む。上にシルエットのイラストを載せる。
- **特長ピルバッジ**（`badge-feature`）: 紺の面に白文字のピル。2列のグリッドに4つ並べる。
- **色面のセット商品パネル**（`set-panel`）: 赤または青の角丸パネルに、商品画像・タイトル・価格・白ボタンを縦に並べる。上の端に白いピル見出しを重ねる。
- **パステル給与表**（`feeding-table`）: 紺のヘッダに、行ごとに色を変えたパステルの行を合わせ、紺の罫線で区切る。
- **Q&A行**（`faq-item`）: 水色の四角にQ、黄色の四角にAを入れたアイコンを左に置き、紺の文字で組む。
- **問い合わせカード**（`contact-card`）: 白い面に紺の枠線をつけた角丸カード。中に赤ピルのボタンを置く。

## Do's and Don'ts

**Do**
- 赤と青は必ず対で、同じくらいの面積で使う。
- マスコットキャラクターを見出しや区切りに繰り返し登場させる。
- 文字は紺の太字で統一する。
- 生成りの地に紙のような質感を薄く重ねる。
- 価格・内容量・注釈をセットにして、商品ごとに同じ形で並べる。

**Don't**
- 本文を黒の細字で組まない。
- グラデーションや強い影を使わない。
- 赤と青以外の濃い色を、大きな面に使わない。
- 角のとがったボタンを使わない。
- 写真をくすんだトーンに加工しない。

## Page Structure

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

1. **ファーストビュー**（キャラと商品で第一印象を作る）: 背景を縦に赤と青で二分し、大きなキャラ・商品カップ・ロゴ・赤いピルの監修バッジを載せる。
2. **商品情報**（詰め合わせセットの価格と特長を伝える）: 一文字タイル見出しの下に、商品グリッド写真・価格・紺の特長バッジ4つ・赤CTAを並べる。
3. **単品セット**（味ごとのセットを提案する）: 赤と青のパネルを縦に積み、それぞれに白ボタンを置く。
4. **商品スペック**（成分と原材料を示す）: 赤と青の全幅の面に白文字で、アイコン付きの項目と2列の成分表を置く。
5. **給与方法**（体の大きさ別の与える量を示す）: パステルの表とカップのアイコンで、量の目安を見せる。
6. **注意事項**（安全上の注意を伝える）: 紺い丸の箇条書きにし、キャラのイラストを添える。
7. **利用者の写真**（実際に食べている様子を見せる）: 犬が食べている写真を、2段の横長ギャラリーで並べる。
8. **よくある質問**（購入前の不安を解消する）: Q・Aのアイコンを付けた行を縦に並べ、最後に赤いピルボタンを置く。
9. **支払い・配送・返品**（購入の条件を伝える）: 白っぽい地に黄色いマーカー見出しを付け、点線で区切る。時間帯は円グラフ風のアイコンで示す。
10. **お問い合わせ・フッター**（連絡先を示す）: 枠付きのカードを2つ並べ、ロゴとリンクを中央に揃える。

## Imagery

- マスコットは太い紺の線と原色のベタ塗りで描く。頬はピンクにする。
- 商品カップは背景を切り抜き、斜め上から撮る。
- 犬が食べている写真は、自然光で撮った日常のスナップ風にする。
- 見出しの上には、木と犬の紺いシルエットを小さく置く。
- メダル風の丸いバッジは金茶色で作る。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCのFVはキャラを左、商品を右に置き、横に長い構図にする。
- PCではセット商品のパネルとスペック面を、赤と青の2カラムで横に並べる。
- PCの商品情報は、写真を左、テキストを右の2カラムにする。
- 給与方法と注意事項は、PCでは2カラムに並べる。
- PCのヘッダには、白いピル型の帯にナビゲーションを入れる。
- 問い合わせカードは、PCでは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-f328696a`（元 LP の URL から採番）
- **元 LP**: https://www.akagi.com/icedreamlab/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。