---
version: alpha
name: Crimson Red & Washi Cream Seasoning Campaign LP
description: 深い紅赤と和紙調のクリーム地を交互に敷いた食品メーカーのキャンペーンLP。タレント写真のFV、CM動画、商品訴求、レシピカード一覧の順に並ぶ。リボン見出し・吹き出し・括弧ラベルで親しみを出し、商品ボトルの切り抜きをカードの角に散らしている。
colors:
  primary: '#C70125'
  background: '#F5F1E6'
  surface: '#FEFEFE'
  background-alt: '#FFFFFF'
  accent-1: '#C70125'
  on-primary: '#FEEFF1'
  secondary: '#9E0019'
  line: '#C70125'
  text-body: '#9A1A34'
  cta: '#C40224'
  on-cta: '#FFFFFF'
  dark-section: '#1A1A1A'
typography:
  display:
    fontFamily: Klee One
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: M PLUS Rounded 1c
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.05em
  headline-md:
    fontFamily: M PLUS Rounded 1c
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.3
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Zen Maru Gothic
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Zen Maru Gothic
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.02em
  note:
    fontFamily: Zen Maru Gothic
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
  accent:
    fontFamily: M PLUS Rounded 1c
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.3
  label-button:
    fontFamily: M PLUS Rounded 1c
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 10px
  lg: 20px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.primary}'
    typography: '{typography.headline-lg}'
  ribbon-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    height: 56px
  tab-heading:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.md}'
    height: 44px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  recipe-card-group:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.lg}'
    height: 320px
  circle-badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 80px
  speech-bubble:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.accent}'
    rounded: '{rounded.full}'
    height: 100px
  paren-label:
    textColor: '{colors.text-body}'
    typography: '{typography.note}'
    height: 40px
  pill-tag:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 32px
  closing-banner:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 110px
---

# DESIGN.md — 紅赤×和紙クリームの調味料キャンペーンLP（Crimson Red & Washi Cream Seasoning Campaign LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 親しみ・手作り感、和風、ポップ・元気、情報量多め・訴求型
- **キーワード**: 紅赤・和紙テクスチャ・リボン見出し・レシピカード・商品ボトル切り抜き・吹き出し
- **地の質感**: クリーム地に和紙のような細かい繊維ノイズを乗せる。赤面はベタ塗り。
- **形**: 角丸の大きい赤枠カード、ピル型ボタン、円形バッジ、燕尾リボン、波形のセクション境界。
- **温度感**: 暖色寄り。赤と生成りで食卓の温かみを出す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#C70125` | ブランド紅赤（商品訴求セクションの面・リボン） | 14% | 画素の主要色に補正 |
| `background` | `#F5F1E6` | 和紙調クリーム地 | 30% | 画素の実測 |
| `surface` | `#FEFEFE` | レシピカード内側の白 | 18% | 画素の実測 |
| `background-alt` | `#FFFFFF` | FV下の白地 | 6% | 画素の実測 |
| `accent-1` | `#C70125` | 動画タイトル・レシピ名の赤文字 | 2% | 画素の主要色に補正 |
| `on-primary` | `#FEEFF1` | 赤地上の白文字 | 2% | 画素の実測 |
| `secondary` | `#9E0019` | リボンの濃い赤（折り返し部分） | 1% | 推定 |
| `line` | `#C70125` | カード赤枠線・括弧ラベル | 1% | 画素の主要色に補正 |
| `text-body` | `#9A1A34` | 商品名ラベルの本文赤 | 1% | 画素の実測 |
| `cta` | `#C40224` | 商品情報への赤ボタン地 | 1% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタンの文字と白縁 | 0% | 画素の主要色に補正 |
| `dark-section` | `#1A1A1A` | 動画プレーヤーの帯 | 4% | 推定 |

- 地はクリーム（和紙調）と紅赤を交互に置き、セクションの切り替えをはっきりさせる。
- 見出しはすべて赤のリボンか赤い帯に白抜き文字で入れる。
- レシピカードは白地に赤い2px線と大きな角丸をつける。
- 本文の文字色は黒ではなく赤系か焦げ茶にして、暖色でまとめる。
- 多色になるのは商品ボトルだけで、UIの色は赤・白・クリームに限る。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのキャッチ（写真に重ねた縦書き手書き風） | 手書き・筆 | Klee One | 700 | 28px | 1.3 | 0.05em |
| `headline-lg` | リボン・赤帯のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.05em |
| `headline-md` | 赤地の商品名見出し（波線つき） | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.3 | 0.03em |
| `headline-sm` | レシピ名・動画タイトル | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.4 | 0.02em |
| `body-md` | 赤地上の説明文 | 丸ゴシック | Zen Maru Gothic | 700 | 13px | 1.6 | 0.02em |
| `note` | 括弧に入れる使用商品ラベル | 丸ゴシック | Zen Maru Gothic | 700 | 11px | 1.4 | 0.0em |
| `accent` | 円形バッジ・吹き出しの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.3 | 0.0em |
| `label-button` | ピルボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.2 | 0.05em |

- 書体は太めの丸ゴシックでそろえ、明朝は使わない。
- 見出しは中央揃えで白抜きにする。
- レシピ名は2行の中央揃えで改行位置を整える。
- FVのキャッチだけは縦書きの手書き風にし、傍点をつける。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。レシピは 2 カラムのグリッド（最後が奇数なら中央に寄せる）
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
- 動画は画面幅いっぱいに表示し、下にタイトルを中央に置く。
- レシピは用途ごとに赤枠カードでまとめ、左上に円形バッジを少しはみ出させる。
- 商品ボトルの切り抜きをカードの端からはみ出すように散らす。
- 赤セクションの上下は緩い波形で区切る。

## Elevation & Depth

- 影はほとんど使わず、平面的に作る。
- ボトルの切り抜きには白いフチと薄いドロップシャドウをつける。
- 円形バッジに薄い影を落として浮かせる。

## Shapes

- **角丸**: 小 6px ／ 中 10px ／ 大 20px。ボタンはピル型。
- **写真の切り抜き**: レシピ写真は角丸10pxの横長4:3。FVは全幅の角丸写真。
- **セクション境界**: 赤セクションの上下は緩い波形の曲線で区切る。
- 見出しは燕尾リボンか、下に三角の切り込みがある赤帯にする。
- 使用商品のラベルは左右を丸括弧の線で囲む。
- FVの容量表示は赤い楕円バッジに入れる。

## Components

- **燕尾リボン見出し**（`ribbon-heading`）: 画面幅いっぱいに渡る赤いリボン。両端が燕尾で、折り返し部分は濃い赤にする。
- **吹き出し型の赤帯見出し**（`tab-heading`）: 角丸の赤帯で、下中央に三角をつける。動画セクションの見出しに使う。
- **白縁ピルボタン**（`button-primary`）: 赤地に白い線のピル型ボタン。右に＞の矢印を置く。
- **赤枠レシピカード**（`recipe-card-group`）: 白地に赤い2px線と角丸20pxのカード。中に写真とレシピ名を2カラムで並べ、写真の右下にCLICKの小ラベルを置く。
- **用途の円形バッジ**（`circle-badge`）: 白縁の赤い円に白文字を3行入れ、カードの左上からはみ出させる。
- **白い吹き出し**（`speech-bubble`）: 白い円形の吹き出しに赤い太字を入れ、人物の口元へしっぽを向ける。
- **括弧つき商品ラベル**（`paren-label`）: 使用商品名を左右の丸括弧の線で囲む。2商品なら間に赤い丸で「もしくは」を挟む。
- **白ピルのリード**（`pill-tag`）: 赤地の上に置く白いピル。赤文字でサブコピーを入れる。
- **締めの赤バナー**（`closing-banner`）: 角丸の赤バナー。左に白文字のコピー、右に商品ボトルを並べる。

## Do's and Don'ts

**Do**
- 赤とクリームの地を交互に置き、メリハリをつける。
- 商品ボトルの切り抜きをカードの端や余白に散らして賑やかにする。
- 見出しにはリボンか赤帯の装飾を必ずつける。
- レシピ写真は明るい自然光の俯瞰か斜め上から撮ったものを使う。
- 文字は太めの丸ゴシックで親しみを出す。

**Don't**
- 寒色やグレーの地を使わない。
- 細い明朝体で高級感を出そうとしない。
- 影の強いカードを使わない。
- 赤以外の色をボタンに使わない。
- 白地を広く取りすぎて余白だらけにしない。

## Page Structure

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

1. **ファーストビュー**（人物と商品で印象づけ、容量の良さを伝える）: 料理の前で笑う人物の写真に縦書きの手書きキャッチを重ね、下に円形バッジと商品ラインナップを並べる。
2. **CM動画**（広告動画を見てもらう）: クリーム地に三角つきの赤帯見出しを置き、全幅の動画3本を縦に並べて、それぞれに赤文字タイトルをつける。
3. **商品訴求**（サイズと鮮度のメリットを伝え、商品情報へ誘導する）: 上下が波形の赤セクション。白ピルのリード、波線つきの大見出し、説明文、ボトル列、指さす人物、白い吹き出し、ピルボタンを置く。
4. **おすすめレシピ（かけ用途）**（食卓での使い方を提案する）: 燕尾リボンの見出しの下に、円形バッジつきの赤枠カードを置き、レシピを2カラムで2件並べる。
5. **おすすめレシピ（調理用途）**（料理での使い方を提案する）: 同じ型の赤枠カードに、2カラムで5件並べる（最後の1件は中央に置く）。周囲にボトルを散らす。
6. **締めバナー**（シリーズを再訴求する）: 角丸の赤バナーに白文字のコピー、エコのマーク、ボトルの列を並べる。

## Imagery

- 人物は家庭の台所を背景に、明るい自然光で正面から撮る。
- 料理写真は白や木の器に盛り、彩りよく少し俯瞰で撮る。
- 商品ボトルは白フチの切り抜きにして、少し傾けて配置する。
- 背景には和紙のような繊維テクスチャを薄く敷く。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCでは中央に約480〜600px幅のカラムを置き、左右には和紙調の地を広げる。
- PCの動画は全幅にせず、左右に余白を取る。
- PCのレシピも2カラムのまま、ボトルの装飾を左右の余白へはみ出させる。
- PCの赤セクションと波形は画面幅いっぱいまで広げる。

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