DESIGN.md — ピンク×水色吹き出しの賃貸キャンペーンLP（Pop Pink Pastel Rental Campaign LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型、親しみ・手作り感
• キーワード: パステルピンク・吹き出し見出し・黄色マーカー・線画イラスト・白カード・キャンペーン
• 地の質感: ピンク地に白い丸や三角の淡い模様を散らし、見出しは水色に白ドット柄。全体はフラットで影は控えめ。
• 形: 角丸カード、黒フチの吹き出し、右端が矢羽状に尖ったボタン、丸い番号バッジ。
• 温度感: 暖かく明るい。ピンクと黄色が主で、水色が爽やかさを足す。

Colors

• 地はピンク、内容は白カードに載せる。
• 見出しは必ず水色ドット吹き出し＋黒フチで統一。
• 強調数字は黄色マーカーを下半分に敷く。
• 最重要CTAだけ赤面に白文字、サブ導線は黄色矢羽ボタン。
• 注意事項は薄ピンク面に赤ピンクの丸箇条。
• 登録訴求セクションだけ地を黄色に切り替える。
• heading-bubble は文字 #5D5B52 × 背景 #82D4FE のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#99DCFE、4.55:1）を使う。

Typography

• 見出しは太いゴシックで角を立てずに明るく。
• 金額・日付の数字は周りの文字より大きくする。
• スラッシュで挟む前置きを見出しの上に置く。
• 注釈は※付き12pxで頭を揃える。
• FVだけ極太ディスプレイ書体を使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メリットは 2 列カード＋中央 1 枚。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右 12px 前後の余白で画面いっぱいに置く。
• 見出し吹き出しはカード幅と揃える。
• 物件カードはカルーセルにして、ページ数表示と前後の丸ボタンを付ける。
• セクション間は 56〜72px 空ける。

Elevation & Depth

• カードは影なしか、ごく薄い影にとどめる。
• 吹き出し見出しは右下にずらした水色の影を付ける。
• 黄色ボタンに淡い黄色のぼかし影を付ける。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 物件写真は角丸なしの長方形。下にサムネイル列を並べる。
• セクション境界: 直線で地色を切り替える。FVは雲形の白い面で囲む。
• サブボタンは左側がピル型、右端が矢羽で尖った形。
• 見出しは黒フチ2px＋下向き三角しっぽの吹き出し。
• 番号は黄色の丸に黒フチ。
• 時系列図は下向き矢印の縦帯にする。

Components

• 吹き出し見出し（heading-bubble）: 水色に白ドット、黒フチ、下中央に三角しっぽ。上にピル型ラベルを重ねることもある。
• 登録CTAバナー（button-primary）: 赤い角丸面に前置き小見出しと大見出し、線画イラスト、右下に黄色い丸矢印。
• 黄色矢羽ボタン（button-arrow）: 左側が丸く右端が尖る黄色ボタン。濃い文字で詳細・遷移に使う。
• 番号付きメリットカード（merit-card）: 白い角丸カードの上辺に黄色の番号丸。線画イラストの下に黄色マーカー付きの短い見出し。
• チェックリスト（check-list）: 丸囲みチェックアイコンに大きめの項目文字。金額には黄色マーカー。
• 物件カード（property-card）: 黒フチの白カード。右上に水色の斜め切りラベル、写真とサムネイル、色分けしたピル型タグで項目を並べる。
• 条件注意ボックス（notice-box）: 薄ピンク面にピンクの丸箇条で条件を列挙する。
• アイコン付き横長ピル（feature-pill）: 左に色付き丸アイコン、右に白いピル型の帯と説明文。

Do's and Don'ts

Do - 見出しは全部同じ吹き出し形式にする。 - 金額・期間などの数字は黄色マーカーで目立たせる。 - 人物や物は黒い線画に黄色や赤をワンポイントで塗る。 - 注釈は省かず、薄い面にまとめて置く。 - 主CTAはページ中に2回以上置く。

Don't - 暗い背景やくすんだ色を広く使わない。 - 明朝体や細い書体を見出しに使わない。 - 赤のCTAを何か所も乱発しない。 - 写真に強いフィルターや角丸をかけない。 - 影を濃くして立体的にしない。

Page Structure

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

1. ファーストビュー（特典と期間を一目で伝える）: 雲形の白面に線画の街並み、濃い赤の極太特典文字、黄色い丸の飾り、青い丸バッジ、日付を大きく入れる。
2. キャンペーン概要（条件の要点を示す）: クリップ飾り付きの白カードにロゴ・本文・注釈を入れ、仕切り線で分ける。
3. メリット（利用する利点を3つ示す）: 吹き出し見出しの下に番号付きカードを2列＋1枚で置き、その下に補足の白カード。
4. 初期費用のイメージ（費用の安さを具体的に見せる）: チェックリストに黄色マーカーの金額、喜ぶ人物の線画を添える。
5. 対象物件（物件を紹介する）: 物件カードのカルーセル、ページ数表示、黄色い丸の矢印ボタン。
6. CTA（登録へ誘導する）: 赤い登録バナー。
7. キャンペーン条件（適用条件を詳しく示す）: 白地にピンクの小見出し、縦矢印の時系列図、薄ピンクの条件リスト。
8. サブ導線（別の契約形態へ案内する）: 水色の矢羽ボタンにマスコットを添える。
9. 会員登録の訴求（サービス登録のメリットを示す）: 黄色地にスラッシュ前置きの見出し、濃色の説明ボックス、アイコン付きピル3つ、赤CTA。
10. 関連リンク（サイト内の回遊へつなぐ）: 白地に吹き出し見出しと黄色矢羽ボタンを2つ縦に並べる。

Imagery

• 人物は黒線の線画で、服や髪に赤や黄色を一部だけ塗る。
• アイコンは太い黒線に黄色を塗ったシンプルな線画。
• 建物写真は晴天で、正面から明るく撮る。
• 背景はピンク地に白い円・三角・四角を淡く散らす。
• マスコットは黄緑の丸いキャラクターを差し色に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約900px幅に収め、左右はピンク地を見せる。
• メリットカードはPCで3列に並べる。
• 物件カードはPCで写真を左、情報を右に置き、左右の隣カードを少し見せる。
• 時系列図はPCで横向きの矢印帯にする。
• 登録訴求はPCで説明ボックスを左、ピルを右に並べる2列にする。

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