---
version: alpha
name: Festive Pink Sale Meal-Kit Trial LP
description: 濃いピンクの地に金色グラデの極太数字を重ね、セール感を強く押し出したミールキットのお試しセットLP。前半は料理写真と口コミ帯で商品を1品ずつ見せる。後半はベージュと白の落ち着いた信頼パートに切り替わり、実績・メディア掲載・FAQ・保証を並べる。CTAブロックは同じ形で3回くり返す。
colors:
  primary: '#F33469'
  background: '#FFFFFF'
  background-alt: '#F2EAD5'
  cta: '#F6E04A'
  on-cta: '#140927'
  secondary: '#C8401E'
  accent-1: '#BB952E'
  dark-section: '#261401'
  tint-1: '#FCC3DB'
  text: '#050404'
  surface-alt: '#E0E0E0'
  marker: '#FDF40C'
  tint-2: '#FEF7DB'
  primary-accessible: '#E90E4B'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 80px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  accent:
    fontFamily: Yomogi
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 19px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 48px
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.md}'
    height: 72px
  button-coupon:
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 60px
  price-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.display}'
    rounded: '{rounded.md}'
    height: 560px
  deadline-pill:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 44px
  section-label-pill:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 52px
  review-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 160px
  badge-medal:
    backgroundColor: '{colors.accent-1}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 110px
  faq-item:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 44px
  countdown-bar:
    backgroundColor: '{colors.dark-section}'
    typography: '{typography.headline-md}'
    height: 84px
---

# DESIGN.md — ビビッドピンク×金文字の食品宅配セールLP（Festive Pink Sale Meal-Kit Trial LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、親しみ・手作り感
- **キーワード**: セール祭り感・金グラデ極太数字・シズル料理写真・手書き風コピー・ピンク地CTA・ベージュの信頼パート
- **地の質感**: ピンク地にうっすら粒子ラメ。FVは放射状の虹色集中線と紙吹雪。後半はフラットなベージュと白。
- **形**: 丸角の白ピルラベル、リボン型見出し、円形バッジ、角丸カード
- **温度感**: 暖色寄りで高揚感が強い。後半はやわらかく温かい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#F33469` | セール帯・CTA地のビビッドピンク | 18% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | 基本の白地 | 17% | 画素の実測 |
| `background-alt` | `#F2EAD5` | 信頼パートのベージュ地 | 12% | 画素の実測 |
| `cta` | `#F6E04A` | 購入ボタンの黄色グラデ | 2% | 推定 |
| `on-cta` | `#140927` | 購入ボタン文字の濃紺 | 0% | 画素の実測 |
| `secondary` | `#C8401E` | 価格・リボン・枠の朱赤 | 3% | 推定 |
| `accent-1` | `#BB952E` | 実績・見出しの金茶 | 2% | 画素の実測 |
| `dark-section` | `#261401` | 割引率帯・OFFバッジの焦げ茶 | 4% | 画素の実測 |
| `tint-1` | `#FCC3DB` | 淡ピンクの注釈帯・商品セクション地 | 6% | 画素の実測 |
| `text` | `#050404` | 見出し・本文の墨色 | 2% | 画素の実測 |
| `surface-alt` | `#E0E0E0` | FAQ行のライトグレー | 2% | 画素の実測 |
| `marker` | `#FDF40C` | 口コミ・縦帯の黄色マーカー | 1% | 画素の実測 |
| `tint-2` | `#FEF7DB` | 口コミ帯の生成り | 3% | 画素の実測 |
| `primary-accessible` | `#E90E4B` | AA を満たす補正値（計算） |  | 計算 |

- 前半のセール・CTAはビビッドピンク地で統一する。
- 価格数字は金の立体グラデか朱赤で表し、黒はOFF率の帯とバッジにだけ使う。
- 購入ボタンは黄色グラデ1色に固定し、ほかで黄色の面は使わない。
- 後半の信頼パートはベージュと白とグレーにし、強調色は金茶だけにする。
- 黄色マーカーは口コミの要点やキャッチの帯に絞って使う。
- 注釈は淡ピンク帯か、白地にグレー小文字で置く。
- `section-label-pill` は文字 `#F33469` × 背景 `#FFFFFF` のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E90E4B`、4.54:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | セール価格・割引率の極太数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 80px | 1.0 | -0.02em |
| `headline-lg` | ピンク帯の白抜きセクション見出し | ゴシック | Noto Sans JP | 900 | 28px | 1.3 | 0.02em |
| `headline-md` | 後半パートの丸みあるゴシック見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.1em |
| `headline-sm` | 口コミの見出し・ピルラベル | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em |
| `body-md` | 口コミ本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em |
| `accent` | 写真上に斜めに置く手書きコピー | 手書き・筆 | Yomogi | 400 | 18px | 1.3 | 0.05em |
| `note` | ※注釈・調査出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `label-button` | 購入ボタンの2段文字 | ゴシック | Noto Sans JP | 900 | 19px | 1.3 | 0.05em |

- 価格や割引率は数字を最大にし、単位と「税込」は小さく添える。
- 商品名は縦書きの明朝寄りの太字で、写真の左端に置いてもよい。
- 写真上の手書きコピーは-8°前後傾け、白字に影を付ける。
- 後半の見出しは字間を0.1em空け、下に金茶の短い線を引く。
- 注釈は必ず※で始め、10px程度のグレーにする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。実績バッジとギャラリーは3列
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
- 商品ごとに「ピンク帯見出し→全幅の料理写真→口コミカード→調理工程写真」の流れをくり返す。
- 料理写真は画面幅いっぱいに置き、余白をとらない。
- CTAブロック（価格カード・期限ピル・クーポン・購入ボタン・安心文言）は同じ形で3回置く。
- 口コミカードは写真の下端に半分重ねる。
- 後半の信頼パートは白カードを左右16pxの余白で中央に置く。

## Elevation & Depth

- 購入ボタンは下に濃い影の段を付け、立体的な押せる見た目にする。
- クーポンボタンは白地に淡い影を付け、カード状にする。
- 口コミカードは影なしの白地に、角の折り目風の装飾を付ける。
- 後半のカードはフラットにし、細い線か白地の差だけで区切る。

## Shapes

- **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
- **写真の切り抜き**: 料理写真は全幅の長方形。サムネは正方形。アイコン人物は円形に切り抜く。
- **セクション境界**: 直線で切り替える。FVの下端だけ価格カードを重ねて連続させる
- セクションのラベルは白地のピルにピンク文字で載せる。
- 「10分で完成」はタイマー型の円形バッジにする。
- 評価や実績は月桂樹・王冠付きの円形メダルで見せる。
- 見出しにはリボン型の帯を使う。

## Components

- **購入ボタン**（`button-primary`）: 黄色グラデのワイドボタン。小さい前置き文と太字の動詞の2段構成で、右に▶を付ける。
- **クーポン取得ボタン**（`button-coupon`）: 白地のカード型ボタン。左下にピンクの斜め帯を入れ、右に商品の切り抜き写真を置く。
- **価格オファーカード**（`price-card`）: 朱赤の枠の白カード。商品写真、OFFの円バッジ、朱赤の極大価格、条件ラベル2つ、送料無料を並べる。
- **期限ピル**（`deadline-pill`）: 朱赤のピルに白文字で締切日時を入れ、カードの下端に重ねる。
- **白ピルラベル**（`section-label-pill`）: ピンク帯の上に置く白い丸角ラベル。中の文字はピンクの太字。
- **口コミカード**（`review-card`）: 白カード。左に線画の人物アイコン、右にピンクの見出し、本文の要点は黄色マーカー。
- **実績メダル**（`badge-medal`）: 金茶の円に王冠を載せ、No.1や%を白抜きで表示する。
- **FAQアコーディオン**（`faq-item`）: グレーの行に金茶の丸Qアイコンと右端の＋。上に会話の吹き出しを置く。
- **カウントダウン帯**（`countdown-bar`）: 黒地の最上部に白文字で、締切までの残り時間を大きく表示する。

## Do's and Don'ts

**Do**
- 価格・割引率・期限を前半で何度もくり返す。
- 料理写真は湯気やツヤの出たシズル感のあるものにし、全幅で大きく見せる。
- CTAブロックは毎回同じ構成で置く。
- 後半では色数を絞り、ベージュと金茶で信頼感を出す。
- 手書きコピーで食感や味を補う。

**Don't**
- 後半の信頼パートにピンクの面を持ち込まない。
- 購入ボタンの色を黄色以外にしない。
- 価格数字を細い書体にしない。
- 注釈を省略しない。
- 写真を小さなサムネだけで並べない。

## Page Structure

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

1. **カウントダウン帯**（期限で今すぐの行動を促す）: 黒地に白の太字タイマーを置く
2. **ファーストビュー**（セールの価格と割引率を一瞬で伝える）: 虹色の集中線と紙吹雪の上に金立体の価格。料理を並べ、下に黒帯の割引率を置く
3. **オファー・CTA**（申込への導線）: ピンク地に価格カード、期限ピル、クーポンボタン、黄色の購入ボタンを並べる
4. **目玉商品紹介**（看板商品の魅力を伝える）: リボン見出し、縦書きの商品名、全幅写真、口コミを縦帯で重ねる
5. **商品紹介（くり返し）**（セット内容を1品ずつ見せる）: ピンク帯見出し、全幅写真、口コミカード、時短の工程写真
6. **特典紹介**（おまけで背中を押す）: 朱赤の枠とリボン見出しで、特典の写真を見せる
7. **CTA再掲**（読了後の申込）: FVの縮小版とオファーカードをくり返す
8. **ブランド実績**（信頼の獲得）: 料理の俯瞰写真の上にロゴとコピー。月桂樹メダルと王冠バッジを3列で並べる
9. **メディア掲載**（第三者の評価）: ベージュ地に白カードの番組リストを置く
10. **お客様の声**（共感と安心）: グレー地に、写真付きの口コミカードをスライダーで見せる
11. **よくある質問**（不安の解消）: 会話の吹き出しとアコーディオン
12. **保証**（リスクの軽減）: ベージュ地に、線画アイコン付きの白カードを置く
13. **こだわり・取り組み**（企業姿勢を伝える）: 金茶の線付き見出しと全幅のビジュアルスライダー
14. **最終CTA・商品一覧・フッター**（締めの申込と内容の確認）: CTAをくり返した後に、商品サムネのグリッドと問い合わせボタンを置く

## Imagery

- 料理は温かみのある木のテーブルで斜め上から撮り、湯気・とろける卵・ツヤを強調する。
- 皿は黒やグレーの陶器にし、具材の色を際立たせる。
- 調理工程は手元のフライパンを寄りで撮る。
- 人物は写真ではなく、白黒の線画アイコンにする。
- FVは放射状の虹色集中線、三角旗のガーランド、紙吹雪で祭り感を出す。
- 信頼パートは水彩風の風景イラストや、ミニマルな静物写真にする。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC 画像はない。PC では中央に幅480〜600pxのSPカラムを置き、左右は淡いピンクかベージュで埋めることを推奨する。
- 全幅の料理写真はカラム幅に合わせ、比率を保つ。
- 実績メダルと商品サムネは、PCで4列まで広げてよい。
- 購入ボタンは最大幅400pxで中央に置く。

## 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-979786ba`（元 LP の URL から採番）
- **元 LP**: https://www.oisix.com/OtameshiTouroku.lp.g6--top--top-shinki_domo_d3__html.htm?hosid=10514&utm_source=yahoo&utm_medium=display&utm_campaign=otameshi&yclid=YJAD.1769676299.Awsee2kAAKhWcid3SDMCsBxko3caxf1RyFF8GLdhkk366FDoaya1Iq7tmg2Uk6MQowM3He12UBKNmQXGHOIpK
- **解析に使った画像**: SP（スマホ版）
- **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。