DESIGN.md — 赤×紺×金の新春住宅キャンペーンLP（Bold Red Navy Gold New Year Housing Campaign LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、和風、信頼・誠実
• キーワード: 新春・紅白・金・巨大数字・宣言・キャンペーン・性能訴求
• 地の質感: 赤と紺の面に紙や布のようなざらつきテクスチャ、白地に麻の葉文様を薄く敷く
• 形: 直角の帯と枠が中心。数字横に金色のギザギザ円バッジ
• 温度感: 暖色の赤と金が主役で熱量が高く、紺で引き締める

Colors

• 前半は赤と紺を左右・上下で交互に配置しキャンペーン感を出す
• 見出しと賞金数字は赤・紺地の上で金色にする
• 金額の主数字は白の極太セリフで最大に
• 後半の性能説明は白地にし、色帯見出しで章を分ける
• 章帯は赤・青・青緑・金とテーマごとに色を変える
• 注釈は小さなグレーで目立たせない
• banner-cta は文字 #FEFCEC × 背景 #D48D02 のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#9C6801、4.63:1）を使う。
• badge-burst は文字 #FEFCEC × 背景 #D58C01 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A06901、4.51:1）を使う。
• condition-box は文字 #D58C01 × 背景 #1B4573 のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 金額は数字を巨大に、単位の万円は数字の1/3程度で右下に添える
• 見出しは極太で詰め気味に組む
• 感嘆符を重ねた勢いのある見出しの型を使う
• 英字ラベルは見出しの上に小さく置く
• 本文は中央揃えの短い行で2〜3行にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、写真と比較カードは2列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の色面で切り替える
• 後半の章頭は全幅に近い色帯に英字タイトルと日本語サブを左右に配置
• 特典は番号＋名称を横並びにし、下に巨大金額
• 等級別賞金は2列・3列のグリッド
• 比較表は年数の矢印タイムラインで横に並べる

Elevation & Depth

• 影はほぼ使わずフラット
• 立体感は色面とテクスチャで出す
• カードは細い枠線で区切る

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形、写真は横並びで隙間なく配置
• セクション境界: 直線の色面切替と点線区切り
• 金色のギザギザ円バッジで等級や現金を示す
• 帯・ラベルは直角の長方形
• 吹き出しは角丸小の白枠
• 比較表は矢印型の見出しセル

Components

• 応募誘導バナー（banner-cta）: 左にビジュアル、右に金色面で応募を促す大型横長バナー
• 巨大金額表示（prize-number）: 白い極太セリフ数字と単位、左に金色ギザ円バッジ
• ギザギザ円バッジ（badge-burst）: 金色の星形円に白文字で等級・現金を表示
• キャンペーン番号見出し（campaign-number）: 英字ラベル＋大きな2桁番号、縦線を挟んで特典名
• 章タイトル帯（section-band）: 色帯の左に英字大文字、右に日本語サブ
• 条件点線枠（condition-box）: 紺地に金の点線枠で条件を一文表示
• 限定タグ（limit-tag）: 赤帯と白帯を左右連結した限定告知
• 構造カード（feature-card）: 黒帯見出しの下に枠線カード2枚、図と説明

Do's and Don'ts

Do - 金額と特典名は画面幅いっぱいに大きく見せる - 赤と紺をペアで使い紅白・新春感を出す - 金色を見出しと装飾に統一して使う - 後半は白地と色帯で情報を整理する - 応募バナーは中盤と末尾に繰り返す

Don't - パステルや淡い色を主役にしない - 細い明朝で見出しを組まない - 金額を小さく本文中に埋めない - 角丸の大きいピル型ボタンにしない - 赤・紺地に黒文字を置かない

Page Structure

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

1. ファーストビュー（キャンペーンの宣言と注目獲得）: 赤紺の分割地に人物写真と金の極太コピー、ロゴ風タイトル
2. 特典サマリー（2つの特典額を即提示）: 白地に麻の葉文様、左右2分割で金額を赤と紺で表示
3. 開催期間（期間の告知）: 金色全幅帯に白文字で日付と開始告知
4. コンセプト（キャンペーンの想い）: 左右赤紺の地に家写真、タイトルロゴ、中央揃えの短文
5. 特典1詳細（賞金の等級を説明）: 赤地に番号見出し、巨大金額、等級グリッド
6. 特典2詳細（現金特典と条件）: 紺地に巨大金額、用途写真3枚、点線条件枠、限定タグ
7. CTAバナー（応募誘導）: 横長バナーで右に金色の応募面
8. 品質紹介（住宅の価値訴求）: 英字ラベル、内観写真コラージュ、中央揃えリード
9. 外壁の特長（長期コストの優位性）: 赤帯見出し、年数タイムライン比較表、比較写真
10. 構造（耐震性の訴求）: 青帯見出し、構造図、黒帯付き2カード
11. 設備（空気・水の設備紹介）: 青緑帯見出し、縦線で区切る2列
12. 仕様と保証（細部品質と保証）: 金帯見出し、5列の写真アイコン、紺の保証バナー
13. 再掲CTA・応募要項（最終誘導と規約）: 特典サマリー再掲、応募バナー、小さな要項文

Imagery

• 人物は正装で身振りのある宣言ポーズ、切り抜きで地に重ねる
• 住宅外観は白い箱型をすっきり切り抜く
• 内観は明るい自然光の広角写真を複数連結
• 家族の笑顔写真を角なし長方形で並べ金のラベルを添える
• 赤紺の地は和紙や布のざらつきテクスチャ
• 白地には麻の葉などの和柄を極薄で敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央の狭い固定幅で縦積み、SPは同構成で全幅
• SPでは特典サマリーの左右2分割を上下に積む
• 等級グリッドはSPで2列に
• 比較表はSPで横スクロールか縦積み
• 巨大数字はSPで64〜72px程度に縮める

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 行書くと起動時に読み込まれる。