深紅×黒×黄のコラボ特典付き宅配食 LP

Crimson Campaign Meal Delivery LP

冒頭は深紅のかすれ質感と黒い割引パネル、黄色の六角形 CTA で強く訴求する。中盤以降は淡いグレー地に白カードを並べ、緑のバッジで特長を整理した清潔な宅配食サービスのページに切り替わる。

食品・飲料力強い・インパクト清潔・爽やか情報量多め・訴求型SPPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

FV だけ深紅のグランジ地を使い、本編は白とグレー地に戻す
価格訴求は黒パネルに白の大数字、強調語のみ黄色
黄色は CTA と強調語に限定する
緑はバッジ・メニュー名・スライダー操作など本編の要素に使う
赤い文字は CTA 上の告知行と小さなアクセントだけ
注釈は灰色の小さい文字で目立たせない

TYPOGRAPHY

書体

display割引額の大数字欧文サンセリフ／ Roboto 700 ／ 64px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

headline-lgFV の特典見出しゴシック／ Noto Sans JP 900 ／ 34px ／行間 1.3

あなたの LP を、もっと伝わる形に。Aa 123

headline-md英字セクション見出し欧文サンセリフ／ Roboto 700 ／ 26px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm特長カードの見出しゴシック／ Noto Sans JP 700 ／ 20px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md説明文（中央揃え）ゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.7

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・栄養値ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonCTA ボタンゴシック／ Noto Sans JP 900 ／ 24px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

accent背景の英字・手書き風飾り欧文スクリプト／ Kalam 400 ／ 36px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

FV の見出しは極太ゴシックで白、行を短く切る
金額の数字は欧文の太字にして、単位は小さく添える
セクション見出しは英大文字＋日本語の小さい説明 2 行
本文はほぼ中央揃え
背景の英字は薄く大きくし、地紋として扱う

PAGE STRUCTURE

セクション構成

ヘッダーブランドを示す白い地の中央に小さなロゴ
ファーストビュー（特典）限定プレゼントの告知深紅のグランジ地に斜め帯、極太の白見出し、商品写真、星形バッジ
抽選期間期限を示す白い細線で上下を挟み、日付を大きく、注釈を小さく
割引訴求初回特典額を示す黒パネルに六角バッジ・大数字・内訳枠 2 つ・注釈
CTA購入へ誘導する斜線で挟んだ告知行と黄色の六角ボタン
注意書き条件を断るグレーのボックスに小さい中央揃えの文字
サービス特長3 つの強みを示す英字見出しと白カード 3 枚。緑の POINT バッジと写真
人気メニュー商品を具体的に見せる横スクロールのカードと、緑の矢印・一時停止ボタン
利用の流れ手順を示す全幅の写真のあと、3 列に見出し・説明・線画アイコン
アプリ案内アプリへ誘導する暗くした写真の上に白文字、ストアボタンと QR コード
フッターナビと SNS を置くアコーディオン・リンク・SNS アイコンのあと、末尾に CTA

COMPONENTS

部品

六角形 CTA button-primary黄色の地に黒文字と黒い縁取り。左右の端が尖る。上に赤い告知行を添える
割引パネル discount-panel黒い地に白の大数字。内訳を白枠 2 つと赤い＋記号で示す
斜め見出し帯 slant-banner灰色の平行四辺形に黒い太字
星形バッジ burst-badge黒いギザギザの円に白と黄色の文字で人数を示す
POINT バッジ point-badge緑のピルに白い英字と番号
特長カード feature-card白いカードに中央揃えの見出し・説明・写真
メニューカード menu-card写真の下に緑の料理名と灰色の栄養値。横スクロールで並べる
フッターアコーディオン accordion太字の項目名と、右側の丸い＋ボタン。区切り線で仕切る

守ること

FV は深紅のグランジ質感で全面を覆う
割引額は黒パネルに極大の数字で見せる
本編はグレー地に白カードで清潔に整理する
CTA は FV の終わりとページ末尾に置く
食事の写真は明るく暖かい色味で大きく使う

DON'T

避けること

本編まで深紅の地を広げない
黄色を CTA と強調語以外に使わない
カードの角を大きく丸めすぎない
緑を FV の中に持ち込まない
注釈を本文と同じ強さで見せない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 深紅×黒×黄のコラボ特典付き宅配食 LP（Crimson Campaign Meal Delivery LP）

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

Overview

業種: 食品・飲料／ 雰囲気: 力強い・インパクト、清潔・爽やか、情報量多め・訴求型
キーワード: 深紅のグランジ・黒の割引パネル・黄色の六角 CTA・白カード・緑のバッジ・食卓写真
地の質感: FV は筆のかすれ・スプレー調のグランジ質感。下部はフラットな白とグレー地。
形: 見出し帯は斜め切りの平行四辺形、CTA は左右が尖った六角形。カードは小さめの角丸。
温度感: FV は熱く攻撃的、本編は涼しく落ち着いた温度感。

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#BF1C3E`	キャンペーン地の深紅	20%	画素の主要色に補正
`dark-section`	`#091414`	割引パネルの黒	6%	画素の実測
`cta`	`#FDDC02`	購入ボタンの黄	2%	画素の実測
`on-cta`	`#080E05`	ボタン文字	0%	画素の実測
`accent-1`	`#FBE824`	「全員に」等の黄強調文字	0%	画素の実測
`accent-2`	`#C72547`	見出し文字の赤・告知行	0%	画素の実測
`secondary`	`#438442`	POINT バッジ・矢印ボタンの緑	0%	画素の実測
`background`	`#FEFEFE`	カード・セクションの白地	32%	画素の実測
`background-alt`	`#F1F5F8`	特長エリアの淡グレー地	12%	画素の実測
`surface`	`#EDEDED`	注意書きボックス・選択肢チップ	2%	画素の実測
`text`	`#161719`	見出し文字	2%	画素の実測
`text-muted`	`#888888`	注釈の灰色文字	0%	推定
`on-dark`	`#FFFFFF`	深紅・黒上の白文字	2%	画素の実測
`line`	`#EBECEB`	区切り線・カード枠	0%	画素の主要色に補正

FV だけ深紅のグランジ地を使い、本編は白とグレー地に戻す
価格訴求は黒パネルに白の大数字、強調語のみ黄色
黄色は CTA と強調語に限定する
緑はバッジ・メニュー名・スライダー操作など本編の要素に使う
赤い文字は CTA 上の告知行と小さなアクセントだけ
注釈は灰色の小さい文字で目立たせない

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	割引額の大数字	欧文サンセリフ	Roboto	700	64px	1.0	-0.02em
`headline-lg`	FV の特典見出し	ゴシック	Noto Sans JP	900	34px	1.3	0.02em
`headline-md`	英字セクション見出し	欧文サンセリフ	Roboto	700	26px	1.2	0.01em
`headline-sm`	特長カードの見出し	ゴシック	Noto Sans JP	700	20px	1.4	0.02em
`body-md`	説明文（中央揃え）	ゴシック	Noto Sans JP	400	13px	1.7	0.02em
`note`	注釈・栄養値	ゴシック	Noto Sans JP	400	10px	1.6	0.0em
`label-button`	CTA ボタン	ゴシック	Noto Sans JP	900	24px	1.2	0.04em
`accent`	背景の英字・手書き風飾り	欧文スクリプト	Kalam	400	36px	1.0	0.0em

FV の見出しは極太ゴシックで白、行を短く切る
金額の数字は欧文の太字にして、単位は小さく添える
セクション見出しは英大文字＋日本語の小さい説明 2 行
本文はほぼ中央揃え
背景の英字は薄く大きくし、地紋として扱う
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム、手順は 3 列の小カラム
本文ブロックの幅: 画面幅の約 88%
余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
特長は白カードを縦に並べ、カード間は約 20px
カード内はバッジ→見出し→説明→写真の順
メニューは横スクロールのカルーセル
FV の割引パネルは左右に約 16px の余白を残す

Elevation & Depth

白カードはごく薄い影で地から浮かせる
メニューカードも同じ弱い影
FV の黒パネルとボタンは影なしのフラット

Shapes

角丸: 小 4px ／中 8px ／大 12px。ボタンは角丸の長方形。
写真の切り抜き: 写真はカード幅いっぱいの角丸長方形。メニュー写真は上だけ角丸
セクション境界: 直線で地の色を切り替える
CTA は左右の端が尖った六角形にする
FV の見出し帯は斜めに切った灰色の平行四辺形
当選人数バッジはギザギザの星形の黒
POINT バッジと選択肢チップはピル型

Components

六角形 CTA（button-primary）: 黄色の地に黒文字と黒い縁取り。左右の端が尖る。上に赤い告知行を添える
割引パネル（discount-panel）: 黒い地に白の大数字。内訳を白枠 2 つと赤い＋記号で示す
斜め見出し帯（slant-banner）: 灰色の平行四辺形に黒い太字
星形バッジ（burst-badge）: 黒いギザギザの円に白と黄色の文字で人数を示す
POINT バッジ（point-badge）: 緑のピルに白い英字と番号
特長カード（feature-card）: 白いカードに中央揃えの見出し・説明・写真
メニューカード（menu-card）: 写真の下に緑の料理名と灰色の栄養値。横スクロールで並べる
フッターアコーディオン（accordion）: 太字の項目名と、右側の丸い＋ボタン。区切り線で仕切る

Do's and Don'ts

Do - FV は深紅のグランジ質感で全面を覆う - 割引額は黒パネルに極大の数字で見せる - 本編はグレー地に白カードで清潔に整理する - CTA は FV の終わりとページ末尾に置く - 食事の写真は明るく暖かい色味で大きく使う

Don't - 本編まで深紅の地を広げない - 黄色を CTA と強調語以外に使わない - カードの角を大きく丸めすぎない - 緑を FV の中に持ち込まない - 注釈を本文と同じ強さで見せない

Page Structure

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

ヘッダー（ブランドを示す）: 白い地の中央に小さなロゴ
ファーストビュー（特典）（限定プレゼントの告知）: 深紅のグランジ地に斜め帯、極太の白見出し、商品写真、星形バッジ
抽選期間（期限を示す）: 白い細線で上下を挟み、日付を大きく、注釈を小さく
割引訴求（初回特典額を示す）: 黒パネルに六角バッジ・大数字・内訳枠 2 つ・注釈
CTA（購入へ誘導する）: 斜線で挟んだ告知行と黄色の六角ボタン
注意書き（条件を断る）: グレーのボックスに小さい中央揃えの文字
サービス特長（3 つの強みを示す）: 英字見出しと白カード 3 枚。緑の POINT バッジと写真
人気メニュー（商品を具体的に見せる）: 横スクロールのカードと、緑の矢印・一時停止ボタン
利用の流れ（手順を示す）: 全幅の写真のあと、3 列に見出し・説明・線画アイコン
アプリ案内（アプリへ誘導する）: 暗くした写真の上に白文字、ストアボタンと QR コード
フッター（ナビと SNS を置く）: アコーディオン・リンク・SNS アイコンのあと、末尾に CTA

Imagery

FV は赤い地に黒い筆のかすれやスプレーの飛沫を重ね、巨大な英字を薄く敷く
特典商品は切り抜きで少し傾け、手書き風の英字を添える
料理は真上か斜め上から、器が多く並ぶ暖かい色調で撮る
家族の食卓は自然光の明るい室内で、笑顔で撮る
手順は灰色の細い線画アイコンで描く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC の FV は左に見出しと期間、右に商品写真の 2 カラム
PC の割引パネルは横長 1 段にして、内訳を右に置く
PC の特長カードは左に写真、右に文字の横並び
PC の英字見出しは左揃えにし、スライダーの操作は右上に置く
PC の手順はアイコンを上、文字を下にした 3 列
PC のフッターは 4 列のリンク一覧

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。

---
version: alpha
name: Crimson Campaign Meal Delivery LP
description: 冒頭は深紅のかすれ質感と黒い割引パネル、黄色の六角形 CTA で強く訴求する。中盤以降は淡いグレー地に白カードを並べ、緑のバッジで特長を整理した清潔な宅配食サービスのページに切り替わる。
colors:
  primary: '#BF1C3E'
  dark-section: '#091414'
  cta: '#FDDC02'
  on-cta: '#080E05'
  accent-1: '#FBE824'
  accent-2: '#C72547'
  secondary: '#438442'
  background: '#FEFEFE'
  background-alt: '#F1F5F8'
  surface: '#EDEDED'
  text: '#161719'
  text-muted: '#888888'
  on-dark: '#FFFFFF'
  line: '#EBECEB'
typography:
  display:
    fontFamily: Roboto
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 34px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Roboto
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.01em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.04em
  accent:
    fontFamily: Kalam
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.0
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  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}'
    height: 56px
  discount-panel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 280px
  slant-banner:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 40px
  burst-badge:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 100px
  point-badge:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 18px
  feature-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 460px
  menu-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.secondary}'
    typography: '{typography.note}'
    rounded: '{rounded.md}'
    height: 290px
  accordion:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 50px
---

# DESIGN.md — 深紅×黒×黄のコラボ特典付き宅配食 LP（Crimson Campaign Meal Delivery LP）

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

## Overview

- **業種**: 食品・飲料 ／ **雰囲気**: 力強い・インパクト、清潔・爽やか、情報量多め・訴求型
- **キーワード**: 深紅のグランジ・黒の割引パネル・黄色の六角 CTA・白カード・緑のバッジ・食卓写真
- **地の質感**: FV は筆のかすれ・スプレー調のグランジ質感。下部はフラットな白とグレー地。
- **形**: 見出し帯は斜め切りの平行四辺形、CTA は左右が尖った六角形。カードは小さめの角丸。
- **温度感**: FV は熱く攻撃的、本編は涼しく落ち着いた温度感。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#BF1C3E` | キャンペーン地の深紅 | 20% | 画素の主要色に補正 |
| `dark-section` | `#091414` | 割引パネルの黒 | 6% | 画素の実測 |
| `cta` | `#FDDC02` | 購入ボタンの黄 | 2% | 画素の実測 |
| `on-cta` | `#080E05` | ボタン文字 | 0% | 画素の実測 |
| `accent-1` | `#FBE824` | 「全員に」等の黄強調文字 | 0% | 画素の実測 |
| `accent-2` | `#C72547` | 見出し文字の赤・告知行 | 0% | 画素の実測 |
| `secondary` | `#438442` | POINT バッジ・矢印ボタンの緑 | 0% | 画素の実測 |
| `background` | `#FEFEFE` | カード・セクションの白地 | 32% | 画素の実測 |
| `background-alt` | `#F1F5F8` | 特長エリアの淡グレー地 | 12% | 画素の実測 |
| `surface` | `#EDEDED` | 注意書きボックス・選択肢チップ | 2% | 画素の実測 |
| `text` | `#161719` | 見出し文字 | 2% | 画素の実測 |
| `text-muted` | `#888888` | 注釈の灰色文字 | 0% | 推定 |
| `on-dark` | `#FFFFFF` | 深紅・黒上の白文字 | 2% | 画素の実測 |
| `line` | `#EBECEB` | 区切り線・カード枠 | 0% | 画素の主要色に補正 |

- FV だけ深紅のグランジ地を使い、本編は白とグレー地に戻す
- 価格訴求は黒パネルに白の大数字、強調語のみ黄色
- 黄色は CTA と強調語に限定する
- 緑はバッジ・メニュー名・スライダー操作など本編の要素に使う
- 赤い文字は CTA 上の告知行と小さなアクセントだけ
- 注釈は灰色の小さい文字で目立たせない

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | 割引額の大数字 | 欧文サンセリフ | Roboto | 700 | 64px | 1.0 | -0.02em |
| `headline-lg` | FV の特典見出し | ゴシック | Noto Sans JP | 900 | 34px | 1.3 | 0.02em |
| `headline-md` | 英字セクション見出し | 欧文サンセリフ | Roboto | 700 | 26px | 1.2 | 0.01em |
| `headline-sm` | 特長カードの見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em |
| `body-md` | 説明文（中央揃え） | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em |
| `note` | 注釈・栄養値 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 900 | 24px | 1.2 | 0.04em |
| `accent` | 背景の英字・手書き風飾り | 欧文スクリプト | Kalam | 400 | 36px | 1.0 | 0.0em |

- FV の見出しは極太ゴシックで白、行を短く切る
- 金額の数字は欧文の太字にして、単位は小さく添える
- セクション見出しは英大文字＋日本語の小さい説明 2 行
- 本文はほぼ中央揃え
- 背景の英字は薄く大きくし、地紋として扱う
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム、手順は 3 列の小カラム
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 特長は白カードを縦に並べ、カード間は約 20px
- カード内はバッジ→見出し→説明→写真の順
- メニューは横スクロールのカルーセル
- FV の割引パネルは左右に約 16px の余白を残す

## Elevation & Depth

- 白カードはごく薄い影で地から浮かせる
- メニューカードも同じ弱い影
- FV の黒パネルとボタンは影なしのフラット

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
- **写真の切り抜き**: 写真はカード幅いっぱいの角丸長方形。メニュー写真は上だけ角丸
- **セクション境界**: 直線で地の色を切り替える
- CTA は左右の端が尖った六角形にする
- FV の見出し帯は斜めに切った灰色の平行四辺形
- 当選人数バッジはギザギザの星形の黒
- POINT バッジと選択肢チップはピル型

## Components

- **六角形 CTA**（`button-primary`）: 黄色の地に黒文字と黒い縁取り。左右の端が尖る。上に赤い告知行を添える
- **割引パネル**（`discount-panel`）: 黒い地に白の大数字。内訳を白枠 2 つと赤い＋記号で示す
- **斜め見出し帯**（`slant-banner`）: 灰色の平行四辺形に黒い太字
- **星形バッジ**（`burst-badge`）: 黒いギザギザの円に白と黄色の文字で人数を示す
- **POINT バッジ**（`point-badge`）: 緑のピルに白い英字と番号
- **特長カード**（`feature-card`）: 白いカードに中央揃えの見出し・説明・写真
- **メニューカード**（`menu-card`）: 写真の下に緑の料理名と灰色の栄養値。横スクロールで並べる
- **フッターアコーディオン**（`accordion`）: 太字の項目名と、右側の丸い＋ボタン。区切り線で仕切る

## Do's and Don'ts

**Do**
- FV は深紅のグランジ質感で全面を覆う
- 割引額は黒パネルに極大の数字で見せる
- 本編はグレー地に白カードで清潔に整理する
- CTA は FV の終わりとページ末尾に置く
- 食事の写真は明るく暖かい色味で大きく使う

**Don't**
- 本編まで深紅の地を広げない
- 黄色を CTA と強調語以外に使わない
- カードの角を大きく丸めすぎない
- 緑を FV の中に持ち込まない
- 注釈を本文と同じ強さで見せない

## Page Structure

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

1. **ヘッダー**（ブランドを示す）: 白い地の中央に小さなロゴ
2. **ファーストビュー（特典）**（限定プレゼントの告知）: 深紅のグランジ地に斜め帯、極太の白見出し、商品写真、星形バッジ
3. **抽選期間**（期限を示す）: 白い細線で上下を挟み、日付を大きく、注釈を小さく
4. **割引訴求**（初回特典額を示す）: 黒パネルに六角バッジ・大数字・内訳枠 2 つ・注釈
5. **CTA**（購入へ誘導する）: 斜線で挟んだ告知行と黄色の六角ボタン
6. **注意書き**（条件を断る）: グレーのボックスに小さい中央揃えの文字
7. **サービス特長**（3 つの強みを示す）: 英字見出しと白カード 3 枚。緑の POINT バッジと写真
8. **人気メニュー**（商品を具体的に見せる）: 横スクロールのカードと、緑の矢印・一時停止ボタン
9. **利用の流れ**（手順を示す）: 全幅の写真のあと、3 列に見出し・説明・線画アイコン
10. **アプリ案内**（アプリへ誘導する）: 暗くした写真の上に白文字、ストアボタンと QR コード
11. **フッター**（ナビと SNS を置く）: アコーディオン・リンク・SNS アイコンのあと、末尾に CTA

## Imagery

- FV は赤い地に黒い筆のかすれやスプレーの飛沫を重ね、巨大な英字を薄く敷く
- 特典商品は切り抜きで少し傾け、手書き風の英字を添える
- 料理は真上か斜め上から、器が多く並ぶ暖かい色調で撮る
- 家族の食卓は自然光の明るい室内で、笑顔で撮る
- 手順は灰色の細い線画アイコンで描く
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC の FV は左に見出しと期間、右に商品写真の 2 カラム
- PC の割引パネルは横長 1 段にして、内訳を右に置く
- PC の特長カードは左に写真、右に文字の横並び
- PC の英字見出しは左揃えにし、スライダーの操作は右上に置く
- PC の手順はアイコンを上、文字を下にした 3 列
- PC のフッターは 4 列のリンク一覧

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

SOURCE

出典と注意

元の LP: https://nosh.jp/landing/SF6?utm_source=Youtuber&utm_medium=PR&utm_campaign=SF6&utm_content=20260128_press&utm_term=coupon409（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

食品・飲料木目×ミルクベージュのカフェ風紅茶 LPWarm Wood Cafe Milk Tea LP 食品・飲料はちみつ色グラデの季節ドリンク LPHoney Gradient Seasonal Drink LP 食品・飲料レモン黄×銀灰の左右分割コラボ飲料 LPLemon Yellow Split Collab Beverage LP 食品・飲料赤白テントの食品ギフトブーケ LPRed Awning Gift Bouquet Food Shop LP 食品・飲料白地×赤細線の明朝縦書き食品記念日LPRed Hairline Editorial Food Heritage LP 食品・飲料オレンジと湯気の鍋レシピ食品 LPWarm Orange Hot-Pot Food Brand LP