DESIGN.md — オレンジ×青のレトロポップ不動産キャンペーンLP（Retro Pop Duotone Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、レトロ、親しみ・手作り感、力強い・インパクト
• キーワード: 2色刷り風人物・方眼紙カード・レトロ太欧文・パステル地・関西弁の語りかけ・立体ピルボタン
• 地の質感: 方眼紙のグリッド柄と、オレンジ／青に色分解したリソグラフ風の写真。
• 形: 大きめ角丸のカード、ネジ留め風の角の丸点、ギザギザバッジ、吹き出し。
• 温度感: 明るく暖かい。オレンジの熱量と水色の爽やかさを同居させる。

Colors

• セクションごとに地色をパステル黄・水色・ミントで交互に切り替える。
• 画面左端にオレンジ、右端に青の細い縦帯を入れ2色の世界観を保つ。
• 人物写真は片方をオレンジ、片方を青の単色で色分解する。
• 主ボタンは淡オレンジ地に濃いオレンジの下影で立体感を出す。
• 見出し欧文はオレンジ、日本語ラベルは青のピル帯に白文字。
• 本文は白カード上の濃いグレー、語りかけ文は青文字。
• burst-badge は文字 #F4F9F9 × 背景 #FC8549 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4603、4.5:1）を使う。
• speech-bubble は文字 #F4F9F9 × 背景 #359FE0 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1B77B0、4.58:1）を使う。
• notice-bar は文字 #F4F9F9 × 背景 #A69CE3 のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#7060D2、4.6:1）を使う。

Typography

• 英字見出しは2行で大きく組み、中央に日本語ラベルのピル帯を重ねる。
• 語りかけ文は手書き風フォントで中央揃え・行間広め。
• ステップ番号は斜体気味の太いレトロ欧文で緑系に。
• 本文は太めゴシックで短く改行する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、選択肢ボタンのみ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 白い方眼カードを地色の上に5%余白で浮かせる。
• 人物切り抜きはカードの端からはみ出させる。
• ステップは左右交互に人物とテキストを配置し、間を下向き矢印でつなぐ。
• 枠セクションは四辺に英字ロゴを回転させて並べる。

Elevation & Depth

• ボタンは影ぼかしなしの4px下ずらしの濃色ベタ影。
• カードは影なしのフラットで、角に小さなネジ風の丸点。
• クリップボード風の金具をカード上部に乗せる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は輪郭で切り抜いた2色刷り、賞品は淡色の丸い面の上に配置。
• セクション境界: 直線で地色を切り替え、一部は斜めのタブ形状。
• 抽選数はギザギザ星形バッジで示す。
• 吹き出しはギザギザと角丸の2種を使い分ける。
• 区切りに波線を使う。

Components

• 立体ピルボタン（button-primary）: 淡オレンジ地、右端に黒丸矢印、下にオレンジのベタ影。
• SNSフォローボタン（button-sns）: 黒地白文字のピル、ロゴと矢印付き。
• レトロ英字見出し（heading-retro）: オレンジの極太英字2行に青ピルの日本語ラベルを重ねる。
• 方眼カード（grid-card）: 白地に淡い方眼、角丸、四隅に丸点。
• ステップ番号（step-label）: カード左上にはみ出す緑のレトロ欧文番号。
• 抽選数バッジ（burst-badge）: ギザギザ星形に人数を大きく。
• キャラ吹き出し（speech-bubble）: オレンジのギザギザ型と青の角丸型、手書き風白文字。
• 診断選択肢（choice-button）: 2列に並ぶ立体ピル、左寄せ文字と矢印。
• 告知帯（notice-bar）: ラベンダー地の全幅帯に白文字の一行告知。

Do's and Don'ts

Do - 人物写真は必ずオレンジか青の単色で色分解する。 - 見出しは英字と日本語ラベルの2段重ねにする。 - カードには方眼柄を敷く。 - ボタンはベタ影付きの立体ピルにする。 - 語りかけ文は口語で短く改行する。

Don't - ぼかしの強いドロップシャドウを使わない。 - 写真をフルカラーのまま載せない。 - モノトーンやダークな地色を主役にしない。 - 細い明朝体を使わない。 - 色数をオレンジ・青・パステル以外に増やさない。

Page Structure

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

1. ファーストビュー（キャンペーンの主旨と出演者を印象付ける）: 紙が舞う青背景に2人の誇張表情、中央に家形ロゴ、下に白ピルで概要。
2. あいさつ（キャラ口調で親しみを作る）: ミント枠に回転英字、方眼カード中央に青い手書き文、左右下に人物。
3. 応募方法（参加手順を3ステップで示す）: 黄地、レトロ見出し、ステップカードを人物と交互配置し矢印で接続。
4. 診断（質問に答えて提案を受ける体験へ誘導）: 水色地にクリップボード風カード、吹き出し付きの顔、波線、質問と2列選択肢。
5. キャンペーン賞品（賞品と期間を伝える）: 告知帯→黄地見出し→期間ピル→賞ごとの方眼カードに賞品画像と星形バッジ。
6. 次回予告（第2弾への期待を作る）: オレンジのタブ形状に薄い英字の予告。
7. 応募規約（規約を提示）: 水色地に白カード、折りたたみ表示ボタン、下にCTAと問い合わせ枠。
8. サービス紹介（本サービスの価値を伝える）: 黄地に青い吹き出し見出しとアイコン付き白カード。
9. 動画（スペシャル動画で興味を深める）: レトロ見出しと角丸の動画サムネイル。
10. 応援・いいね（エンゲージメント）: ミント枠の方眼カードに肩を組む2人と立体ボタン。
11. 導入企業ロゴ（信頼性）: 白地に企業ロゴを横並び。
12. お問い合わせ・フッター（事業者向け導線）: 水色地の方眼カードに見出しと青い三角、ピルボタン。紺フッター。

Imagery

• 人物は明るい背景で誇張表情を撮影し、切り抜いてオレンジ／青の2色刷りに加工。
• 網点やざらつきのあるリソグラフ風質感を加える。
• アイコンは太線のフラットイラストで水色とオレンジ。
• 賞品は物撮り切り抜きを淡色の丸い面に配置。
• 紙幣や書類が舞うコラージュで勢いを演出。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央にSP幅のカラムを固定表示。
• 左側はオレンジ、右側は青の地に舞う紙のコラージュ柄を敷く。
• 左余白にロゴ、右余白に番号付きメニューカードを固定配置。
• 本文レイアウトはSPと同一で拡大しない。

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