DESIGN.md — 黄×青ポップイラストの住宅ローン相談 LP（Pop Yellow Blue Illustrated Housing Loan LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、情報量多め・訴求型、力強い・インパクト、親しみ・手作り感
• キーワード: 黄×青の強コントラスト・線画イラスト・黒フチの影付きボタン・波線アンダーライン・明朝の事例カード・ドット・斜線の装飾
• 地の質感: ベタ塗りの平面に白ドットや斜線ストライプ、方眼紙柄を重ねる。事例部分だけ写真の切り抜きで実在感を出す。
• 形: 黒い太枠と右下にずらした黒い影のカード・ボタン。円形の黄色い大きな丸、波形のセクション境界、雲型の吹き出し。
• 温度感: 明るく暖かい。前向きで親しみやすく、背中を押す空気。

Colors

• 地は黄・薄黄・青・白をセクションごとに切り替え、同じ色を連続させない。
• CTA帯は必ずビビッド黄地に青と赤橙の2ボタンを縦に並べる。
• 青地の上では見出しは白、キーワードだけ黄色にする。
• 事例セクションはベージュと若草色を交互に使い、価格は深紅で大きく出す。
• 特典だけ黒茶×金グラデで特別感を出し、他では金を使わない。
• 強調語は赤文字・黄色マーカー・下線の3種で使い分ける。
• button-primary は文字 #FEFBF6 × 背景 #E54325 のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D7371A、4.57:1）を使う。
• button-secondary は文字 #FEFBF6 × 背景 #1C8BD3 のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1879B8、4.56:1）を使う。

Typography

• ポップな訴求部は極太のディスプレイ書体で、一部の文字だけ青にして跳ねさせる。
• 事例・プラン紹介の数字は明朝体で大きく、単位は小さくする。
• 見出し下に青い波線を引いてリズムを出す。
• 本文は行間2.0でゆったり、左揃え。
• 英字ラベルは太いサンセリフで日本語小見出しを下に添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。プラン紹介は大きな丸を左右交互にずらして配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約88%で中央配置。
• ケースカードはタブ型ラベルとアバター丸を左右交互に配置。
• CTA帯は約3セクションごとに挿入する。
• イラストはカードからはみ出させて動きを出す。
• 本文ブロックは左右に約20pxの余白。

Elevation & Depth

• CTAボタンは黒い太枠＋右下に6px程度ずらした黒のベタ影。
• ケースカードは黒枠のみで影なし。
• お客様の声カードは薄い水色地に淡い枠線。
• フォーム選択肢は白地に影なし、少し角丸。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は背景を切り抜き、カードからはみ出して配置。アバターは青い円で囲む。
• セクション境界: 波形カーブ・V字の斜め切り替え・直線を混在させる
• ボタンは角丸12px前後の長方形で、右端に白丸のシェブロンアイコン。
• 吹き出しは雲型・角丸の2種。
• 装飾の円は画面幅の半分以上の大きな黄色丸。
• ケースのラベルは上辺に乗せたタブ型。

Components

• 主CTAボタン（button-primary）: 赤橙地に白太字、黒枠と黒ベタ影、右に白丸の下向き矢印。
• サブCTAボタン（button-secondary）: 青地で上に小さな前置きコピー、下に大きな文言。主CTAと同じ枠・影。
• ケースカード（case-card）: 白地に黒枠、上辺に青のCASE番号タブ、横に青丸のアバターイラスト、タイトル下に波線。
• 事例プランカード（plan-card）: ベージュ/若草色の地に年収→プラン→価格を明朝で縦に並べ、白い吹き出しに月々額と感想。手書き風のCASE番号を縦書き。
• お客様の声（voice-card）: 水色地の角丸カードに丸写真と吹き出し見出し、手書きアンケート画像と要約文。
• 雲型バッジ（cloud-badge）: 見出し左上に置く小さな雲形の吹き出しラベル。
• 悩みチェックリスト（worry-list）: 白地黒枠の中に家アイコン付きの1行項目を点線で区切って4つ並べる。
• フォーム選択ボタン（form-choice）: 灰地に白の2列選択肢、ラベル横に赤の必須バッジ、黒の送信ボタン。

Do's and Don'ts

Do - 黄と青のセクションを交互に入れ、明るい勢いを保つ。 - 人物は線画イラストで悩み・喜びを表情で示す。 - CTAは2種のボタンを常にセットで繰り返し表示する。 - 数字（年収・価格・月々額）は大きく強調する。 - 見出しに波線・ドット線・マーカーを添える。

Don't - 淡いパステルだけで構成しない。 - ボタンを影なしのフラットにしない。 - 事例部分にポップ書体を混ぜて明朝の落ち着きを崩さない。 - 金色を特典以外で使わない。 - 長文を詰めて行間を狭くしない。

Page Structure

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

1. ファーストビュー（対象者と結論を一目で伝える）: 薄黄地に放射線、青帯の前置き、極太の大見出し、悩みラベル付き人物イラスト4人。
2. 共感リスト（読者の状況に当てはめる）: 青ストライプ地のV字面に白見出し、白枠のチェックリスト4項目。
3. CTA（早期の申込導線）: 黄地に青・赤橙の影付きボタン2つ。
4. 悩みの提起（不安を言語化する）: 薄黄地に明朝見出しと赤下線、考え込む写真と縦書き吹き出し。
5. ケース紹介（難しい条件でも対応可能と示す）: 黄地にドット・斜線装飾、CASEタブ付き黒枠カード4枚。
6. 解決策（選べるプランを提示）: 青地に白見出し、黄色の大きな丸にプラン名、喜ぶ人物イラスト。
7. お客様の声（実体験で信頼を得る）: 白地、水色角丸カードに写真・吹き出し・手書きアンケート。
8. 事例プラン（具体的な価格と月々額を示す）: 写真ヘッダー＋タグ、ベージュ/若草色カードを左右交互、明朝の深紅価格。
9. 資料プレゼント（資料請求で接点を作る）: 青枠に方眼紙柄、黄色の袋文字英字、青リボン、資料画像、黒ボタン。
10. 成約特典（特典で後押し）: 黒茶地に金の飾り枠と金グラデ文字、白ボタン。
11. 相談会案内（相談予約へ誘導）: 青地に黄枠の吹き出し見出し、イラスト、赤ボタン。
12. 会社紹介（運営元の信頼性）: 方眼地、黄色帯の縦書きコピー、オフィスの線画、代表メッセージ。
13. 問い合わせフォーム（申込完了）: 灰地に2列ボタン式選択肢と黒の送信ボタン、黒フッター。

Imagery

• 黒の主線に青・黄・白のベタ塗りの人物線画イラスト。
• 悩む・喜ぶ・跳ねる等、感情が大きいポーズ。
• 事例は自然光の家族・人物写真を白背景で切り抜く。
• 装飾は白ドット、斜線、三角、電球、太い矢印。
• 背景に方眼紙柄や放射線を薄く敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約480〜750px幅のコンテンツを置き、左右は同色の地で埋める。
• ケースカード・事例は2カラムに並べてもよい。
• CTAボタンは横並び2つにし最大幅を制限する。
• FVイラストは横に広げ、見出しは左寄せ配置も可。

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