青×赤の年末キャンペーン型ハウスクリーニングLP

Blue and Red Seasonal Cleaning Campaign LP

濃い青を基調に、赤の価格表示とカートボタンで目を引くキャンペーンLP。ベージュ地の中にセットプランのカードを並べ、作業内容・オプション・数量選択までページ内で完結させる。情報量が多いEC寄りの作りで、最後にお客様の声とよくある質問で安心感を補う。

その他情報量多め・訴求型ポップ・元気信頼・誠実清潔・爽やかPC

ダウンロード

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

COLORS

配色

青は見出し帯・プラン名・FV周辺に使い、ブランドの軸にする
赤は価格とカートボタンだけに使う。購入の動線が一目で分かるようにする
ベージュ地の上に白カードを重ね、プランの中身をまとまりで見せる
水色はオプションのアイコン地や補足の帯に使い、清潔感を出す
お客様の声だけはクリームと金色にして、温かい印象に切り替える
黄色は青地の上の強調見出しにだけ使う

TYPOGRAPHY

書体

displayFVのキャンペーン名ロゴ装飾・ディスプレイ／ Dela Gothic One 900 ／ 44px ／行間 1.1

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

headline-lgセクション見出しゴシック／ Noto Sans JP 900 ／ 24px ／行間 1.3

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

headline-mdプラン名の帯見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.4

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

headline-sm作業項目・オプション名ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.4

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

accent価格の大きな数字欧文サンセリフ／ Montserrat 800 ／ 30px ／行間 1.1

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

body-md本文・作業範囲・口コミゴシック／ Noto Sans JP 400 ／ 13px ／行間 1.7

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

note注釈・税込表記ゴシック／ Noto Sans JP 400 ／ 10px ／行間 1.5

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

label-buttonカートボタンなどの文字ゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.0

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

価格の数字は特大にし、税込表記と割引額は小さく添える
見出しは極太ゴシックで、白抜きか青文字にする
作業内容の項目名は青い●の付いた小見出しにする
注釈は10px程度のグレー文字で、価格の近くに置く
FVのロゴは傾けた極太文字に白フチと影を付ける

PAGE STRUCTURE

セクション構成

告知バーキャンペーン名をすぐ伝える赤い全幅の帯に白文字を中央に置く
ファーストビュー季節キャンペーンと最大割引額を伝える青い放射線の背景に極太ロゴ。下に割引の説明、作業写真4枚、申込期間のラベル
おすすめセット一覧セットと価格をひと目で比べてもらう青地に黄色の見出し。クリーム色のカードを3+2のグリッドで並べる
追加割引の告知時期をずらすとさらに安くなることを知らせる水色の角丸バナーに見出しと詳細ボタン
セットプラン詳細作業内容・オプションを選んでカートに入れてもらう青帯→価格→数量とカートボタン→ベージュ地の作業内容とオプション。2カラムで繰り返す
追加割引の説明割引の条件を説明する水色の地に左は説明文、右は月ごとのスケジュール図
お客様の声満足度と体験談で安心してもらう金色の満足度バッジと見出し。クリーム色の口コミカードを縦に積む
よくある質問支払い方法や追加料金の不安をなくす淡い青の地に白いアコーディオン行。最後に青いピル型ボタン

COMPONENTS

部品

カートに入れるボタン button-cart赤地に白い太字。右に白い丸の矢印を付ける
プラン名帯 plan-header青地に白文字の横長帯。キャッチ文を併記する
価格表示 price-block赤いキャンペーン価格ラベル＋割引額＋赤の特大数字
数量セレクター qty-stepper−（グレー）・数値欄・＋（青）を横に並べる
オプション行 option-card水色の正方形にイラストアイコン、右に名前・赤字の価格・説明・数量
おすすめセットカード set-cardクリーム地のカードに名前・写真・赤い価格帯・詳細リンク。斜めのバッジを付ける
注意事項・もっと見る帯 accordion-noteグレーや淡い青の帯。右端に＋を付けて開閉させる
口コミカード review-cardクリーム地に金色の星、本文、右下に年代と性別
FAQ行 faq-row白い行に青いQ、質問文、右端に＋

守ること

赤はカートボタンと価格だけに絞って使う
どのプランにも価格・数量・カートボタンを必ずセットで置く
作業範囲は／区切りで細かく書き、情報の多さで信頼感を出す
オプションは同じ形のカードで揃えて繰り返す
FVは放射線・紙吹雪・極太ロゴでお祭り感を出す

DON'T

避けること

価格以外の文字を赤にしない
淡いトーンや明朝体で上品にまとめすぎない
プランごとにカードの形をバラバラにしない
写真に暗いフィルターをかけない
余白を広げすぎて情報の密度を下げない

DESIGN.MD

design.md 全文

読みやすい形で表示する

DESIGN.md — 青×赤の年末キャンペーン型ハウスクリーニングLP（Blue and Red Seasonal Cleaning Campaign LP）

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

Overview

業種: その他／ 雰囲気: 情報量多め・訴求型、ポップ・元気、信頼・誠実、清潔・爽やか
キーワード: キャンペーン・セット価格・青×赤・カート型・清潔感・季節イベント
地の質感: フラットな塗り面が中心。FVだけ放射線と紙吹雪で祭り感を出す
形: 角丸小さめの四角カード、赤い横長ボタン、丸い数量ボタン
温度感: やや寒色寄り。赤と黄で熱量を足す

Colors

Token	HEX	役割	面積の目安	値の出どころ
`primary`	`#025AAA`	ブランド青・見出し帯・セクション地	8%	画素の実測
`cta`	`#E51343`	カートに入れるボタン	3%	画素の実測
`on-cta`	`#FFFFFF`	ボタン上の文字	0%	画素の主要色に補正
`background`	`#FFFFFF`	ページの地	37%	画素の実測
`background-alt`	`#EDEBDF`	セット内容エリアの地	11%	画素の実測
`secondary`	`#C13D54`	価格の赤文字・バッジ	2%	画素の主要色に補正
`accent-1`	`#85CEF2`	水色の補助帯・オプションアイコン地	6%	画素の実測
`tint-1`	`#E3F1FC`	よくある質問の地・もっと見る帯	5%	画素の実測
`tint-2`	`#FEF3E3`	お客様の声カード	4%	画素の実測
`accent-2`	`#B8913A`	満足度バッジ・星の金色	1%	推定
`marker`	`#FFE14A`	見出しの黄色文字	0%	推定
`line`	`#BBBBBB`	注意事項のグレー帯	2%	画素の実測
`text`	`#222222`	本文・見出し文字	2%	推定
`surface`	`#EDEBDF`	セット内の白カード	10%	画素の実測

青は見出し帯・プラン名・FV周辺に使い、ブランドの軸にする
赤は価格とカートボタンだけに使う。購入の動線が一目で分かるようにする
ベージュ地の上に白カードを重ね、プランの中身をまとまりで見せる
水色はオプションのアイコン地や補足の帯に使い、清潔感を出す
お客様の声だけはクリームと金色にして、温かい印象に切り替える
黄色は青地の上の強調見出しにだけ使う

Typography

Token	用途	書体の分類	代替 Web フォント	ウェイト	サイズ（375px 幅）	行間	字間
`display`	FVのキャンペーン名ロゴ	装飾・ディスプレイ	Dela Gothic One	900	44px	1.1	0.0em
`headline-lg`	セクション見出し	ゴシック	Noto Sans JP	900	24px	1.3	0.02em
`headline-md`	プラン名の帯見出し	ゴシック	Noto Sans JP	700	17px	1.4	0.02em
`headline-sm`	作業項目・オプション名	ゴシック	Noto Sans JP	700	15px	1.4	0.0em
`accent`	価格の大きな数字	欧文サンセリフ	Montserrat	800	30px	1.1	-0.01em
`body-md`	本文・作業範囲・口コミ	ゴシック	Noto Sans JP	400	13px	1.7	0.02em
`note`	注釈・税込表記	ゴシック	Noto Sans JP	400	10px	1.5	0.0em
`label-button`	カートボタンなどの文字	ゴシック	Noto Sans JP	700	14px	1.0	0.05em

価格の数字は特大にし、税込表記と割引額は小さく添える
見出しは極太ゴシックで、白抜きか青文字にする
作業内容の項目名は青い●の付いた小見出しにする
注釈は10px程度のグレー文字で、価格の近くに置く
FVのロゴは傾けた極太文字に白フチと影を付ける
書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

カラム: SP は 1 カラム。PC はプランを 2 カラム、セット紹介は 3+2 のグリッド
本文ブロックの幅: 画面幅の約 92%
余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
プランごとに、青帯の見出し→価格→数量とカートボタン→ベージュ地のセット内容、の順で縦に並べる
作業項目は左に写真、右に作業時間と範囲を置く
オプションは左に正方形のアイコン、右に名前・価格・数量を置く
口コミは中央寄せで幅を狭めたカードを縦に積む
よくある質問は全幅の白い行を罫線で区切る

Elevation & Depth

カードは影をほとんど付けず、色の面の違いで区切る
セット紹介カードにだけ薄い影を付ける
FVのロゴには濃い影と白フチを付けて立体的に見せる

Shapes

角丸: 小 4px ／中 8px ／大 12px。ボタンは角丸の長方形。
写真の切り抜き: 四角形の切り抜き。オプションのアイコンは角丸の正方形
セクション境界: 直線で区切り、地の色を全幅で切り替える
カートボタンは角丸小さめの横長にし、右端に丸い矢印を付ける
数量の＋ボタンは青い四角、−ボタンはグレーの四角にする
見出しの帯は角丸4px程度の青い長方形にする
FAQトップへのボタンだけピル型にする

Components

カートに入れるボタン（button-cart）: 赤地に白い太字。右に白い丸の矢印を付ける
プラン名帯（plan-header）: 青地に白文字の横長帯。キャッチ文を併記する
価格表示（price-block）: 赤いキャンペーン価格ラベル＋割引額＋赤の特大数字
数量セレクター（qty-stepper）: −（グレー）・数値欄・＋（青）を横に並べる
オプション行（option-card）: 水色の正方形にイラストアイコン、右に名前・赤字の価格・説明・数量
おすすめセットカード（set-card）: クリーム地のカードに名前・写真・赤い価格帯・詳細リンク。斜めのバッジを付ける
注意事項・もっと見る帯（accordion-note）: グレーや淡い青の帯。右端に＋を付けて開閉させる
口コミカード（review-card）: クリーム地に金色の星、本文、右下に年代と性別
FAQ行（faq-row）: 白い行に青いQ、質問文、右端に＋

Do's and Don'ts

Do - 赤はカートボタンと価格だけに絞って使う - どのプランにも価格・数量・カートボタンを必ずセットで置く - 作業範囲は／区切りで細かく書き、情報の多さで信頼感を出す - オプションは同じ形のカードで揃えて繰り返す - FVは放射線・紙吹雪・極太ロゴでお祭り感を出す

Don't - 価格以外の文字を赤にしない - 淡いトーンや明朝体で上品にまとめすぎない - プランごとにカードの形をバラバラにしない - 写真に暗いフィルターをかけない - 余白を広げすぎて情報の密度を下げない

Page Structure

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

告知バー（キャンペーン名をすぐ伝える）: 赤い全幅の帯に白文字を中央に置く
ファーストビュー（季節キャンペーンと最大割引額を伝える）: 青い放射線の背景に極太ロゴ。下に割引の説明、作業写真4枚、申込期間のラベル
おすすめセット一覧（セットと価格をひと目で比べてもらう）: 青地に黄色の見出し。クリーム色のカードを3+2のグリッドで並べる
追加割引の告知（時期をずらすとさらに安くなることを知らせる）: 水色の角丸バナーに見出しと詳細ボタン
セットプラン詳細（作業内容・オプションを選んでカートに入れてもらう）: 青帯→価格→数量とカートボタン→ベージュ地の作業内容とオプション。2カラムで繰り返す
追加割引の説明（割引の条件を説明する）: 水色の地に左は説明文、右は月ごとのスケジュール図
お客様の声（満足度と体験談で安心してもらう）: 金色の満足度バッジと見出し。クリーム色の口コミカードを縦に積む
よくある質問（支払い方法や追加料金の不安をなくす）: 淡い青の地に白いアコーディオン行。最後に青いピル型ボタン

Imagery

作業着姿のスタッフが浴室やキッチンを掃除している明るい写真
背景は白か明るい住まい。清潔でハイキーなトーン
オプションは水色の地にフラットなイラストと黄色のキラキラ
FVは放射線・雲・紙吹雪の装飾で賑やかにする
満足度は月桂樹や王冠の付いた金色のバッジで表す
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

SPではプランの2カラムを1カラムにして縦に並べる
おすすめセットのグリッドはSPで1列か2列にする
追加割引の説明は、説明文の下にスケジュール図を置く縦積みにする
カートボタンはSPで全幅にし、数量欄はその上に置く
PCのコンテンツ幅は約1000px。口コミとFAQは約640pxに絞る

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: Blue and Red Seasonal Cleaning Campaign LP
description: 濃い青を基調に、赤の価格表示とカートボタンで目を引くキャンペーンLP。ベージュ地の中にセットプランのカードを並べ、作業内容・オプション・数量選択までページ内で完結させる。情報量が多いEC寄りの作りで、最後にお客様の声とよくある質問で安心感を補う。
colors:
  primary: '#025AAA'
  cta: '#E51343'
  on-cta: '#FFFFFF'
  background: '#FFFFFF'
  background-alt: '#EDEBDF'
  secondary: '#C13D54'
  accent-1: '#85CEF2'
  tint-1: '#E3F1FC'
  tint-2: '#FEF3E3'
  accent-2: '#B8913A'
  marker: '#FFE14A'
  line: '#BBBBBB'
  text: '#222222'
  surface: '#EDEBDF'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.4
  accent:
    fontFamily: Montserrat
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.01em
  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.5
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 999px
spacing:
  unit: 8px
  card: 12px
  section: 48px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-cart:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 44px
  plan-header:
    backgroundColor: '{colors.primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 40px
  price-block:
    textColor: '{colors.secondary}'
    typography: '{typography.accent}'
    height: 50px
  qty-stepper:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 28px
  option-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.md}'
    height: 110px
  set-card:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 160px
  accordion-note:
    backgroundColor: '{colors.line}'
    typography: '{typography.body-md}'
    height: 32px
  review-card:
    backgroundColor: '{colors.tint-2}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 90px
  faq-row:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 48px
---

# DESIGN.md — 青×赤の年末キャンペーン型ハウスクリーニングLP（Blue and Red Seasonal Cleaning Campaign LP）

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

## Overview

- **業種**: その他 ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、信頼・誠実、清潔・爽やか
- **キーワード**: キャンペーン・セット価格・青×赤・カート型・清潔感・季節イベント
- **地の質感**: フラットな塗り面が中心。FVだけ放射線と紙吹雪で祭り感を出す
- **形**: 角丸小さめの四角カード、赤い横長ボタン、丸い数量ボタン
- **温度感**: やや寒色寄り。赤と黄で熱量を足す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#025AAA` | ブランド青・見出し帯・セクション地 | 8% | 画素の実測 |
| `cta` | `#E51343` | カートに入れるボタン | 3% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 |
| `background` | `#FFFFFF` | ページの地 | 37% | 画素の実測 |
| `background-alt` | `#EDEBDF` | セット内容エリアの地 | 11% | 画素の実測 |
| `secondary` | `#C13D54` | 価格の赤文字・バッジ | 2% | 画素の主要色に補正 |
| `accent-1` | `#85CEF2` | 水色の補助帯・オプションアイコン地 | 6% | 画素の実測 |
| `tint-1` | `#E3F1FC` | よくある質問の地・もっと見る帯 | 5% | 画素の実測 |
| `tint-2` | `#FEF3E3` | お客様の声カード | 4% | 画素の実測 |
| `accent-2` | `#B8913A` | 満足度バッジ・星の金色 | 1% | 推定 |
| `marker` | `#FFE14A` | 見出しの黄色文字 | 0% | 推定 |
| `line` | `#BBBBBB` | 注意事項のグレー帯 | 2% | 画素の実測 |
| `text` | `#222222` | 本文・見出し文字 | 2% | 推定 |
| `surface` | `#EDEBDF` | セット内の白カード | 10% | 画素の実測 |

- 青は見出し帯・プラン名・FV周辺に使い、ブランドの軸にする
- 赤は価格とカートボタンだけに使う。購入の動線が一目で分かるようにする
- ベージュ地の上に白カードを重ね、プランの中身をまとまりで見せる
- 水色はオプションのアイコン地や補足の帯に使い、清潔感を出す
- お客様の声だけはクリームと金色にして、温かい印象に切り替える
- 黄色は青地の上の強調見出しにだけ使う

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVのキャンペーン名ロゴ | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em |
| `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.02em |
| `headline-md` | プラン名の帯見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em |
| `headline-sm` | 作業項目・オプション名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em |
| `accent` | 価格の大きな数字 | 欧文サンセリフ | Montserrat | 800 | 30px | 1.1 | -0.01em |
| `body-md` | 本文・作業範囲・口コミ | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em |
| `note` | 注釈・税込表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em |
| `label-button` | カートボタンなどの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em |

- 価格の数字は特大にし、税込表記と割引額は小さく添える
- 見出しは極太ゴシックで、白抜きか青文字にする
- 作業内容の項目名は青い●の付いた小見出しにする
- 注釈は10px程度のグレー文字で、価格の近くに置く
- FVのロゴは傾けた極太文字に白フチと影を付ける
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC はプランを 2 カラム、セット紹介は 3+2 のグリッド
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
- プランごとに、青帯の見出し→価格→数量とカートボタン→ベージュ地のセット内容、の順で縦に並べる
- 作業項目は左に写真、右に作業時間と範囲を置く
- オプションは左に正方形のアイコン、右に名前・価格・数量を置く
- 口コミは中央寄せで幅を狭めたカードを縦に積む
- よくある質問は全幅の白い行を罫線で区切る

## Elevation & Depth

- カードは影をほとんど付けず、色の面の違いで区切る
- セット紹介カードにだけ薄い影を付ける
- FVのロゴには濃い影と白フチを付けて立体的に見せる

## Shapes

- **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
- **写真の切り抜き**: 四角形の切り抜き。オプションのアイコンは角丸の正方形
- **セクション境界**: 直線で区切り、地の色を全幅で切り替える
- カートボタンは角丸小さめの横長にし、右端に丸い矢印を付ける
- 数量の＋ボタンは青い四角、−ボタンはグレーの四角にする
- 見出しの帯は角丸4px程度の青い長方形にする
- FAQトップへのボタンだけピル型にする

## Components

- **カートに入れるボタン**（`button-cart`）: 赤地に白い太字。右に白い丸の矢印を付ける
- **プラン名帯**（`plan-header`）: 青地に白文字の横長帯。キャッチ文を併記する
- **価格表示**（`price-block`）: 赤いキャンペーン価格ラベル＋割引額＋赤の特大数字
- **数量セレクター**（`qty-stepper`）: −（グレー）・数値欄・＋（青）を横に並べる
- **オプション行**（`option-card`）: 水色の正方形にイラストアイコン、右に名前・赤字の価格・説明・数量
- **おすすめセットカード**（`set-card`）: クリーム地のカードに名前・写真・赤い価格帯・詳細リンク。斜めのバッジを付ける
- **注意事項・もっと見る帯**（`accordion-note`）: グレーや淡い青の帯。右端に＋を付けて開閉させる
- **口コミカード**（`review-card`）: クリーム地に金色の星、本文、右下に年代と性別
- **FAQ行**（`faq-row`）: 白い行に青いQ、質問文、右端に＋

## Do's and Don'ts

**Do**
- 赤はカートボタンと価格だけに絞って使う
- どのプランにも価格・数量・カートボタンを必ずセットで置く
- 作業範囲は／区切りで細かく書き、情報の多さで信頼感を出す
- オプションは同じ形のカードで揃えて繰り返す
- FVは放射線・紙吹雪・極太ロゴでお祭り感を出す

**Don't**
- 価格以外の文字を赤にしない
- 淡いトーンや明朝体で上品にまとめすぎない
- プランごとにカードの形をバラバラにしない
- 写真に暗いフィルターをかけない
- 余白を広げすぎて情報の密度を下げない

## Page Structure

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

1. **告知バー**（キャンペーン名をすぐ伝える）: 赤い全幅の帯に白文字を中央に置く
2. **ファーストビュー**（季節キャンペーンと最大割引額を伝える）: 青い放射線の背景に極太ロゴ。下に割引の説明、作業写真4枚、申込期間のラベル
3. **おすすめセット一覧**（セットと価格をひと目で比べてもらう）: 青地に黄色の見出し。クリーム色のカードを3+2のグリッドで並べる
4. **追加割引の告知**（時期をずらすとさらに安くなることを知らせる）: 水色の角丸バナーに見出しと詳細ボタン
5. **セットプラン詳細**（作業内容・オプションを選んでカートに入れてもらう）: 青帯→価格→数量とカートボタン→ベージュ地の作業内容とオプション。2カラムで繰り返す
6. **追加割引の説明**（割引の条件を説明する）: 水色の地に左は説明文、右は月ごとのスケジュール図
7. **お客様の声**（満足度と体験談で安心してもらう）: 金色の満足度バッジと見出し。クリーム色の口コミカードを縦に積む
8. **よくある質問**（支払い方法や追加料金の不安をなくす）: 淡い青の地に白いアコーディオン行。最後に青いピル型ボタン

## Imagery

- 作業着姿のスタッフが浴室やキッチンを掃除している明るい写真
- 背景は白か明るい住まい。清潔でハイキーなトーン
- オプションは水色の地にフラットなイラストと黄色のキラキラ
- FVは放射線・雲・紙吹雪の装飾で賑やかにする
- 満足度は月桂樹や王冠の付いた金色のバッジで表す
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SPではプランの2カラムを1カラムにして縦に並べる
- おすすめセットのグリッドはSPで1列か2列にする
- 追加割引の説明は、説明文の下にスケジュール図を置く縦積みにする
- カートボタンはSPで全幅にし、数量欄はその上に置く
- PCのコンテンツ幅は約1000px。口コミとFAQは約640pxに絞る

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

SOURCE

出典と注意

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

似た LP の design.md

その他山吹×焦げ茶の秋の商業施設イベントLPAutumn Mustard Seasonal Mall Event LP その他郵便赤×紺のギフト体験ショップ LPPostal Red and Navy Gift Shop LP その他紺×金の明朝で魅せる眼鏡専門店サービス LPNavy and Gold Craftsman Optical Service LP その他青×水色×クリームの交通系モバイルサービスLPBright Blue Mobile Transit Service LP その他赤×紺×黄の手書き風ポップ店舗キャンペーン LPBold Red Navy Yellow Pop Retail Campaign LP その他白×金×焦げ茶の上品な家事代行サービスLPWarm Gold Premium Housekeeping Service LP