サーモンピンク地の飲食キャンペーン LP

Salmon Pink Restaurant Campaign LP

サーモンピンクの地に白い角丸パネルを大きく重ねた、ファミレス系のキーワード応募キャンペーン LP。上部にドラマ風の人物写真と大きな欧文ロゴ、パネル内に賞品・番号付きの応募手順・規約を縦に並べる。赤ピンクのピル見出しと太いゴシックで、親しみやすさと情報の読みやすさを両立している。

飲食店・レストランポップ・元気やさしい・柔らかい親しみ・手作り感情報量多め・訴求型PC

ダウンロード

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

COLORS

配色

ページ地はサーモンピンク一色にして、内容はすべて白パネルに載せる
見出しラベル・番号・強調文字は赤ピンクの1色にまとめる
サブ見出しの帯は淡いピンクで塗り、文字は黒にする
まだ使えない告知は灰色ピルにして、使える CTA と区別する
黄色はサイト共通ナビのボタンにだけ使う
規約の小見出しは赤ピンク文字で【】で囲み、本文は黒にする

TYPOGRAPHY

書体

displayキャンペーン名の大きな欧文ロゴ（白抜き・赤縁）欧文サンセリフ／ Montserrat 800 ／ 44px ／行間 1.1

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

headline-lg賞品訴求の赤ピンク太字コピーゴシック／ Zen Kaku Gothic New 700 ／ 18px ／行間 1.5

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

headline-md淡ピンク帯のサブ見出し・手順の文ゴシック／ Zen Kaku Gothic New 700 ／ 16px ／行間 1.5

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

headline-smピルラベルの白文字・規約の小見出しゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.5

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

body-md説明文・応募条件ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.8

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

note規約本文・注釈ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.7

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

accentロゴに添える手書き風の英字・商品の弧状コピー欧文スクリプト／ Caveat 400 ／ 24px ／行間 1.2

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

label-buttonボタン文字ゴシック／ Noto Sans JP 700 ／ 13px ／行間 1.4

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

本文は中央揃え、手順と規約は左揃えにする
日付の数字は大きくし、曜日は丸括弧で小さく添える
ロゴは白い文字に赤の縁取りとずらした影をつける
手書き風の英字は欧文ロゴの右下に斜めに重ねる
規約は11px程度で詰めて組み、小見出しで区切る

PAGE STRUCTURE

セクション構成

ファーストビュードラマ企画を印象づける縦長の人物写真3枚を並べ、下に白抜き・赤縁の大ロゴを重ねる
企画紹介企画の概要を伝える白い帯の見出しと、中央揃えの説明文を2段落
キャンペーンタイトル応募企画を示す白パネル上部に大ロゴと手書きの英字、淡ピンク帯のサブ見出し
賞品紹介賞品の魅力を伝える表と裏の切り抜き写真2点、説明の引き出し線と弧状コピー
応募方法手順を案内するピル見出しの下に、丸数字4ステップと端末画面
応募要項期間・賞品・条件・発表を示す小ラベルと箇条書きのブロックを縦に並べる
開始告知開始日を知らせる灰色の太いピルに大きな日付
応募規約法的な条件を示す赤ピンクの【】小見出しと小さな本文
SNS誘導公式アカウントへ送客するマーカー強調の見出しとロゴ、アカウント一覧
フッターサイト回遊とアプリ誘導黄色ボタン、3列のアイコンカード、暖色ボケ写真のアプリ帯

COMPONENTS

部品

白い角丸パネル campaign-panelピンク地の上に置く大きな白パネル。赤枠付きで中身をまとめる
赤ピンクのピル見出し pill-heading横幅いっぱいのピルに白文字を載せたセクション見出し
小ラベル label-tag応募期間や賞品などの項目名をつける小さなピル
淡ピンク帯の見出し tint-band角丸なしの淡ピンク帯に黒の太字
番号付きの手順 step-item丸数字・説明・端末画面を並べ、縦の矢印でつなぐ
開始日の告知帯 notice-pill灰色の太いピルに大きな白文字で日付を載せる
黄色のピルボタン button-primaryトップページへ戻る共通ボタン
アイコン付きリンクカード info-cardアレルギー・栄養などのアイコンとラベルを置いた白カード

守ること

地はサーモンピンク、内容は白パネルに分ける
強調は赤ピンクの1色にまとめる
手順には丸数字・矢印・端末画面を組み合わせる
賞品は切り抜き写真にし、手書きのコピーを弧状に添える
規約は省略せず、小見出しで区切って全文を載せる

DON'T

避けること

寒色を強調色に使わない
パネルに強いドロップシャドウをつけない
明朝体を使わない
ピンク地に長い規約を直接載せない
ボタン色を何色も混ぜない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — サーモンピンク地の飲食キャンペーン LP（Salmon Pink Restaurant Campaign LP）

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

Overview

業種: 飲食店・レストラン／ 雰囲気: ポップ・元気、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型
キーワード: サーモンピンク・白い角丸パネル・ピル見出し・番号ステップ・手書き欧文・キャンペーン規約
地の質感: フラットな単色面。写真は暖色系の店内光。影はほぼない
形: 大きな角丸パネル、ピル型ラベル、丸数字、点線の区切り
温度感: 暖かい。ピンク〜赤系で甘く親しみやすい

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#E65561`	見出し・ピルラベル・番号の赤ピンク	3%	画素の実測
`background`	`#F5B2A2`	ページ地のサーモンピンク	30%	画素の実測
`surface`	`#FFFFFF`	コンテンツ用の白パネル	45%	画素の実測
`text`	`#080707`	本文・見出しの黒	3%	画素の実測
`text-body`	`#5A3A35`	ピンク地上の本文の濃い茶	1%	推定
`tint-1`	`#F4B2A4`	パネル内のサブ見出し帯の淡いピンク	1%	画素の実測
`line`	`#DB7E80`	パネル枠・ロゴ縁取りの赤	1%	画素の実測
`secondary`	`#CCCCCC`	開始日告知の灰色ピル	2%	画素の実測
`cta`	`#FED302`	トップへ戻るボタンの黄色	0%	画素の実測
`on-cta`	`#333333`	黄色ボタン上の文字	0%	推定
`background-alt`	`#FFFFFF`	フッター付近の明るいグレー地	4%	画素の実測
`marker`	`#F5B2A3`	テキスト強調の淡ピンクマーカー	0%	画素の主要色に補正
`dark-section`	`#844139`	アプリ誘導の暖色ボケ写真帯	3%	画素の主要色に補正

ページ地はサーモンピンク一色にして、内容はすべて白パネルに載せる
見出しラベル・番号・強調文字は赤ピンクの1色にまとめる
サブ見出しの帯は淡いピンクで塗り、文字は黒にする
まだ使えない告知は灰色ピルにして、使える CTA と区別する
黄色はサイト共通ナビのボタンにだけ使う
規約の小見出しは赤ピンク文字で【】で囲み、本文は黒にする

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	キャンペーン名の大きな欧文ロゴ（白抜き・赤縁）	欧文サンセリフ	Montserrat	800	44px	1.1	0.0em
`headline-lg`	賞品訴求の赤ピンク太字コピー	ゴシック	Zen Kaku Gothic New	700	18px	1.5	0.02em
`headline-md`	淡ピンク帯のサブ見出し・手順の文	ゴシック	Zen Kaku Gothic New	700	16px	1.5	0.02em
`headline-sm`	ピルラベルの白文字・規約の小見出し	ゴシック	Noto Sans JP	700	14px	1.5	0.05em
`body-md`	説明文・応募条件	ゴシック	Noto Sans JP	500	14px	1.8	0.02em
`note`	規約本文・注釈	ゴシック	Noto Sans JP	400	11px	1.7	0.0em
`accent`	ロゴに添える手書き風の英字・商品の弧状コピー	欧文スクリプト	Caveat	400	24px	1.2	0.0em
`label-button`	ボタン文字	ゴシック	Noto Sans JP	700	13px	1.4	0.05em

本文は中央揃え、手順と規約は左揃えにする
日付の数字は大きくし、曜日は丸括弧で小さく添える
ロゴは白い文字に赤の縁取りとずらした影をつける
手書き風の英字は欧文ロゴの右下に斜めに重ねる
規約は11px程度で詰めて組み、小見出しで区切る
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。手順だけ左にテキスト、右に端末画像の 2 分割
本文ブロックの幅: 画面幅の約 90%
余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
白パネルは画面の左右に約5%の余白を残して置く
ステップは丸数字を縦の矢印線でつなぐ
ステップ同士は点線で区切る
ラベル付きの情報ブロック（期間・賞品・条件）を24px間隔で縦に並べる
SNS 誘導はパネルの最後に点線で区切って置く

Elevation & Depth

影はほぼ使わずフラットにする
ロゴ文字だけにずらしたベタ影をつける
フッターのカードは薄いグレーの1px枠にする

Shapes

角丸: 小 6px ／中 12px ／大 32px。ボタンはピル型。
写真の切り抜き: 人物写真は上の角を丸めた縦長の長方形に。賞品は切り抜き。アプリ画面は端末の上部だけを見せる
セクション境界: 大きな角丸の白パネルとピンク地の段差、パネル内は点線
パネルは右上の角だけを大きく丸め、赤い枠線をつける
ラベルは小さな赤ピンクのピルにする
番号は赤ピンクの正円に白数字
告知帯は横幅いっぱいの太いピル

Components

白い角丸パネル（campaign-panel）: ピンク地の上に置く大きな白パネル。赤枠付きで中身をまとめる
赤ピンクのピル見出し（pill-heading）: 横幅いっぱいのピルに白文字を載せたセクション見出し
小ラベル（label-tag）: 応募期間や賞品などの項目名をつける小さなピル
淡ピンク帯の見出し（tint-band）: 角丸なしの淡ピンク帯に黒の太字
番号付きの手順（step-item）: 丸数字・説明・端末画面を並べ、縦の矢印でつなぐ
開始日の告知帯（notice-pill）: 灰色の太いピルに大きな白文字で日付を載せる
黄色のピルボタン（button-primary）: トップページへ戻る共通ボタン
アイコン付きリンクカード（info-card）: アレルギー・栄養などのアイコンとラベルを置いた白カード

Do's and Don'ts

Do - 地はサーモンピンク、内容は白パネルに分ける - 強調は赤ピンクの1色にまとめる - 手順には丸数字・矢印・端末画面を組み合わせる - 賞品は切り抜き写真にし、手書きのコピーを弧状に添える - 規約は省略せず、小見出しで区切って全文を載せる

Don't - 寒色を強調色に使わない - パネルに強いドロップシャドウをつけない - 明朝体を使わない - ピンク地に長い規約を直接載せない - ボタン色を何色も混ぜない

Page Structure

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

ファーストビュー（ドラマ企画を印象づける）: 縦長の人物写真3枚を並べ、下に白抜き・赤縁の大ロゴを重ねる
企画紹介（企画の概要を伝える）: 白い帯の見出しと、中央揃えの説明文を2段落
キャンペーンタイトル（応募企画を示す）: 白パネル上部に大ロゴと手書きの英字、淡ピンク帯のサブ見出し
賞品紹介（賞品の魅力を伝える）: 表と裏の切り抜き写真2点、説明の引き出し線と弧状コピー
応募方法（手順を案内する）: ピル見出しの下に、丸数字4ステップと端末画面
応募要項（期間・賞品・条件・発表を示す）: 小ラベルと箇条書きのブロックを縦に並べる
開始告知（開始日を知らせる）: 灰色の太いピルに大きな日付
応募規約（法的な条件を示す）: 赤ピンクの【】小見出しと小さな本文
SNS誘導（公式アカウントへ送客する）: マーカー強調の見出しとロゴ、アカウント一覧
フッター（サイト回遊とアプリ誘導）: 黄色ボタン、3列のアイコンカード、暖色ボケ写真のアプリ帯

Imagery

人物写真は明るい店内で、食事しながら笑う自然なシーン
写真の端にはパステルカラーの細い縁を重ねる
賞品は白背景で切り抜き、少し傾けて2点を重ねる
手書き風の点線とテキストで引き出し線を描く
アプリ画面は赤茶の端末フレームに入れ、上部だけを見せる
フッターは店内の暖色の照明をぼかした写真
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC でも中央に約480〜960px幅の1カラムで組む
SP では人物写真3枚を横スクロールか縮小で並べる
手順の端末画像は SP では幅40%程度にする
フッターのカード3列は SP では縦に積むか、小さい3列にする
規約の文字は SP でも11px以上を保つ

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: Salmon Pink Restaurant Campaign LP
description: サーモンピンクの地に白い角丸パネルを大きく重ねた、ファミレス系のキーワード応募キャンペーン LP。上部にドラマ風の人物写真と大きな欧文ロゴ、パネル内に賞品・番号付きの応募手順・規約を縦に並べる。赤ピンクのピル見出しと太いゴシックで、親しみやすさと情報の読みやすさを両立している。
colors:
  primary: '#E65561'
  background: '#F5B2A2'
  surface: '#FFFFFF'
  text: '#080707'
  text-body: '#5A3A35'
  tint-1: '#F4B2A4'
  line: '#DB7E80'
  secondary: '#CCCCCC'
  cta: '#FED302'
  on-cta: '#333333'
  background-alt: '#FFFFFF'
  marker: '#F5B2A3'
  dark-section: '#844139'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.1
  headline-lg:
    fontFamily: Zen Kaku Gothic New
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.7
  accent:
    fontFamily: Caveat
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
rounded:
  sm: 6px
  md: 12px
  lg: 32px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 40px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  campaign-panel:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 2400px
  pill-heading:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 40px
  label-tag:
    backgroundColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 22px
  tint-band:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 44px
  step-item:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 110px
  notice-pill:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.full}'
    height: 56px
  button-primary:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 40px
  info-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.note}'
    rounded: '{rounded.sm}'
    height: 64px
---

# DESIGN.md — サーモンピンク地の飲食キャンペーン LP（Salmon Pink Restaurant Campaign LP）

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

## Overview

- **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型
- **キーワード**: サーモンピンク・白い角丸パネル・ピル見出し・番号ステップ・手書き欧文・キャンペーン規約
- **地の質感**: フラットな単色面。写真は暖色系の店内光。影はほぼない
- **形**: 大きな角丸パネル、ピル型ラベル、丸数字、点線の区切り
- **温度感**: 暖かい。ピンク〜赤系で甘く親しみやすい

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#E65561` | 見出し・ピルラベル・番号の赤ピンク | 3% | 画素の実測 |
| `background` | `#F5B2A2` | ページ地のサーモンピンク | 30% | 画素の実測 |
| `surface` | `#FFFFFF` | コンテンツ用の白パネル | 45% | 画素の実測 |
| `text` | `#080707` | 本文・見出しの黒 | 3% | 画素の実測 |
| `text-body` | `#5A3A35` | ピンク地上の本文の濃い茶 | 1% | 推定 |
| `tint-1` | `#F4B2A4` | パネル内のサブ見出し帯の淡いピンク | 1% | 画素の実測 |
| `line` | `#DB7E80` | パネル枠・ロゴ縁取りの赤 | 1% | 画素の実測 |
| `secondary` | `#CCCCCC` | 開始日告知の灰色ピル | 2% | 画素の実測 |
| `cta` | `#FED302` | トップへ戻るボタンの黄色 | 0% | 画素の実測 |
| `on-cta` | `#333333` | 黄色ボタン上の文字 | 0% | 推定 |
| `background-alt` | `#FFFFFF` | フッター付近の明るいグレー地 | 4% | 画素の実測 |
| `marker` | `#F5B2A3` | テキスト強調の淡ピンクマーカー | 0% | 画素の主要色に補正 |
| `dark-section` | `#844139` | アプリ誘導の暖色ボケ写真帯 | 3% | 画素の主要色に補正 |

- ページ地はサーモンピンク一色にして、内容はすべて白パネルに載せる
- 見出しラベル・番号・強調文字は赤ピンクの1色にまとめる
- サブ見出しの帯は淡いピンクで塗り、文字は黒にする
- まだ使えない告知は灰色ピルにして、使える CTA と区別する
- 黄色はサイト共通ナビのボタンにだけ使う
- 規約の小見出しは赤ピンク文字で【】で囲み、本文は黒にする

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | キャンペーン名の大きな欧文ロゴ（白抜き・赤縁） | 欧文サンセリフ | Montserrat | 800 | 44px | 1.1 | 0.0em |
| `headline-lg` | 賞品訴求の赤ピンク太字コピー | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.02em |
| `headline-md` | 淡ピンク帯のサブ見出し・手順の文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.5 | 0.02em |
| `headline-sm` | ピルラベルの白文字・規約の小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.05em |
| `body-md` | 説明文・応募条件 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.02em |
| `note` | 規約本文・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em |
| `accent` | ロゴに添える手書き風の英字・商品の弧状コピー | 欧文スクリプト | Caveat | 400 | 24px | 1.2 | 0.0em |
| `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em |

- 本文は中央揃え、手順と規約は左揃えにする
- 日付の数字は大きくし、曜日は丸括弧で小さく添える
- ロゴは白い文字に赤の縁取りとずらした影をつける
- 手書き風の英字は欧文ロゴの右下に斜めに重ねる
- 規約は11px程度で詰めて組み、小見出しで区切る
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。手順だけ左にテキスト、右に端末画像の 2 分割
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
- 白パネルは画面の左右に約5%の余白を残して置く
- ステップは丸数字を縦の矢印線でつなぐ
- ステップ同士は点線で区切る
- ラベル付きの情報ブロック（期間・賞品・条件）を24px間隔で縦に並べる
- SNS 誘導はパネルの最後に点線で区切って置く

## Elevation & Depth

- 影はほぼ使わずフラットにする
- ロゴ文字だけにずらしたベタ影をつける
- フッターのカードは薄いグレーの1px枠にする

## Shapes

- **角丸**: 小 6px ／ 中 12px ／ 大 32px。ボタンはピル型。
- **写真の切り抜き**: 人物写真は上の角を丸めた縦長の長方形に。賞品は切り抜き。アプリ画面は端末の上部だけを見せる
- **セクション境界**: 大きな角丸の白パネルとピンク地の段差、パネル内は点線
- パネルは右上の角だけを大きく丸め、赤い枠線をつける
- ラベルは小さな赤ピンクのピルにする
- 番号は赤ピンクの正円に白数字
- 告知帯は横幅いっぱいの太いピル

## Components

- **白い角丸パネル**（`campaign-panel`）: ピンク地の上に置く大きな白パネル。赤枠付きで中身をまとめる
- **赤ピンクのピル見出し**（`pill-heading`）: 横幅いっぱいのピルに白文字を載せたセクション見出し
- **小ラベル**（`label-tag`）: 応募期間や賞品などの項目名をつける小さなピル
- **淡ピンク帯の見出し**（`tint-band`）: 角丸なしの淡ピンク帯に黒の太字
- **番号付きの手順**（`step-item`）: 丸数字・説明・端末画面を並べ、縦の矢印でつなぐ
- **開始日の告知帯**（`notice-pill`）: 灰色の太いピルに大きな白文字で日付を載せる
- **黄色のピルボタン**（`button-primary`）: トップページへ戻る共通ボタン
- **アイコン付きリンクカード**（`info-card`）: アレルギー・栄養などのアイコンとラベルを置いた白カード

## Do's and Don'ts

**Do**
- 地はサーモンピンク、内容は白パネルに分ける
- 強調は赤ピンクの1色にまとめる
- 手順には丸数字・矢印・端末画面を組み合わせる
- 賞品は切り抜き写真にし、手書きのコピーを弧状に添える
- 規約は省略せず、小見出しで区切って全文を載せる

**Don't**
- 寒色を強調色に使わない
- パネルに強いドロップシャドウをつけない
- 明朝体を使わない
- ピンク地に長い規約を直接載せない
- ボタン色を何色も混ぜない

## Page Structure

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

1. **ファーストビュー**（ドラマ企画を印象づける）: 縦長の人物写真3枚を並べ、下に白抜き・赤縁の大ロゴを重ねる
2. **企画紹介**（企画の概要を伝える）: 白い帯の見出しと、中央揃えの説明文を2段落
3. **キャンペーンタイトル**（応募企画を示す）: 白パネル上部に大ロゴと手書きの英字、淡ピンク帯のサブ見出し
4. **賞品紹介**（賞品の魅力を伝える）: 表と裏の切り抜き写真2点、説明の引き出し線と弧状コピー
5. **応募方法**（手順を案内する）: ピル見出しの下に、丸数字4ステップと端末画面
6. **応募要項**（期間・賞品・条件・発表を示す）: 小ラベルと箇条書きのブロックを縦に並べる
7. **開始告知**（開始日を知らせる）: 灰色の太いピルに大きな日付
8. **応募規約**（法的な条件を示す）: 赤ピンクの【】小見出しと小さな本文
9. **SNS誘導**（公式アカウントへ送客する）: マーカー強調の見出しとロゴ、アカウント一覧
10. **フッター**（サイト回遊とアプリ誘導）: 黄色ボタン、3列のアイコンカード、暖色ボケ写真のアプリ帯

## Imagery

- 人物写真は明るい店内で、食事しながら笑う自然なシーン
- 写真の端にはパステルカラーの細い縁を重ねる
- 賞品は白背景で切り抜き、少し傾けて2点を重ねる
- 手書き風の点線とテキストで引き出し線を描く
- アプリ画面は赤茶の端末フレームに入れ、上部だけを見せる
- フッターは店内の暖色の照明をぼかした写真
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC でも中央に約480〜960px幅の1カラムで組む
- SP では人物写真3枚を横スクロールか縮小で並べる
- 手順の端末画像は SP では幅40%程度にする
- フッターのカード3列は SP では縦に積むか、小さい3列にする
- 規約の文字は SP でも11px以上を保つ

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

SOURCE

出典と注意

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

似た LP の design.md

飲食店・レストランクラフト紙×ワインレッドの街の洋食堂 LPWarm Kraft Paper Trattoria LP 飲食店・レストラン焦げ茶と金の大人向け肉バル LPDark Wood Meat Bar LP 飲食店・レストラン生成りグレージュ×焼き色写真のベーカリー店舗LPWarm Greige Editorial Bakery Shop Page 飲食店・レストラングレージュ和紙×朱橙の大人ビストロ LPWarm Greige Bistro French LP 飲食店・レストラン生成り×深緑×木目のレトロ焼肉店 LPRetro Editorial Yakiniku Restaurant LP 飲食店・レストラン白地と炭火写真の和モダン焼鳥店 LPMonochrome Smoke Japanese Grill Corporate LP