DESIGN.md — 生成り×線画イラストの不動産投資 LP（Warm Ivory Hand-Drawn Real Estate Investment LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、信頼・誠実、ナチュラル
• キーワード: 生成り・線画イラスト・手書き吹き出し・黄色マーカー・朱赤CTA・2カラム特長
• 地の質感: 紙のようなマットな生成り地。影は少なく、線画と細い枠線で平面的にまとめる
• 形: 斜めに切ったセクション境界、手描きの楕円吹き出し、角丸の吹き出しカード
• 温度感: 暖かく柔らかい。金融なのに堅すぎない

Colors

• 地は生成りとアイボリーを交互に使い、セクションを区切る
• 大見出しはティール文字で、下に黄色のマーカー帯を斜めに敷く
• 特長と声の小見出しはサーモン赤で太字にする
• 朱赤は CTA ボタンとキャンペーン強調だけに使う
• イラストはティール・サーモン・薄ピンクの3色に絞る
• ヘッダーとフッターはミントティールの帯で挟む
• button-primary は文字 #FFF0E8 × 背景 #E43B24 のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D2301A、4.52:1）を使う。
• campaign-box は文字 #E43B24 × 背景 #FEFEFE のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D2301A、4.56:1）を使う。

Typography

• 見出しは太いゴシックで、字間を少し広げる
• 本文は 12px 前後で行間 1.8 と広めにとる
• 数字実績は大きく太く、単位は小さくする
• セクション導入語は手書き体で吹き出しに入れる
• 注釈は※付きの小さいグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は特長が 2 カラムグリッド、声は人物＋吹き出しの横並び。PC は 3〜4 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• メリット・強みはイラスト→赤見出し→本文の縦積みを 2 列で並べる
• 声は左に人物イラストと属性、右に吹き出しカード
• 見出しは中央揃え、本文は左揃え
• セクション上部の左上に手書き吹き出しを置く

Elevation & Depth

• 影はほぼ使わずフラット
• CTA ボックスにだけ薄い影を付ける
• カードは影ではなく細い濃グレー枠で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜き、人物写真は角丸なしの矩形
• セクション境界: 斜めに切った面の切り替えと、雲・街並みの線画シルエット
• CTA は角丸 8px の横長バー
• 吹き出しカードは左向きの三角しっぽ付き
• 導入語は手描きの楕円線で囲む
• 見出しマーカーは平行四辺形

Components

• 資料請求CTA（button-primary）: 朱赤の横長バー。左に白枠の『無料』ラベル、右端に矢印
• キャンペーン告知ボックス（campaign-box）: 白カードに赤ラベルと赤大数字。下向きのしっぽで CTA につなげる
• 月桂樹の実績バッジ（laurel-badge）: 金色の月桂樹で数字を囲み、3つを横に並べる
• 手書き吹き出し（handwritten-bubble）: 黒い手描き線の楕円に手書き体の導入語を入れる
• マーカー見出し（marker-heading）: ティール太字の下に黄色の斜めマーカーを敷く
• イラスト特長タイル（feature-tile）: 線画イラスト、赤い中央見出し、本文、※注釈を縦に積む
• 声の吹き出しカード（voice-card）: 白地に濃グレー枠の角丸カード。赤見出しと本文、人物イラストの横に置く
• ティールフッター帯（site-footer）: ミントティール帯に白のコピーライト

Do's and Don'ts

Do - 線画イラストで堅いテーマを親しみやすくする - 生成りとアイボリーを交互にしてセクションを区切る - 各セクションに手書き吹き出しの導入語＋マーカー見出しを置く - 数字実績は月桂樹バッジで権威付けする - CTA の前にキャンペーン特典ボックスを置く

Don't - 写真を多用しない（人物写真は締めの1枚だけ） - 濃色の背景セクションを入れない - 朱赤を見出しや装飾に乱用しない - 強い影やグラデーションを付けない - ピル型ボタンにしない

Page Structure

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

1. ヘッダー（ブランド表示）: ミントティールのグラデ帯に白ロゴを置く
2. ファーストビュー（立地の強みを一言で伝える）: 白箱2つに大キーワードを入れ×でつなぐ。下に都市の線画イラスト
3. 実績バッジ（数字で信頼を示す）: 金の月桂樹バッジを3つ並べ、下に注釈
4. キャンペーン＋CTA（資料請求へ誘導）: 白い特典ボックスと朱赤のバーボタン、細かい注釈
5. 特典紹介（資料ダウンロードの価値を見せる）: 冊子の表紙3冊を傾けて横に並べる
6. メリット（投資の利点を説明）: 2列×2のイラストタイル。赤見出しと本文
7. 強み（他社との違いを示す）: 斜め境界の生成り地に6つのイラストタイル
8. 相談者の声（相談の安心感を伝える）: 人物イラストと属性、右に枠線吹き出しカード
9. オーナーの声（購入者の実感を示す）: 年齢・年収・目的付きの人物と吹き出し。下に街並み線画
10. クロージングCTA（相談への後押し）: 左にコンサルタント写真、右に大きな黒見出し、下に全幅の朱赤バー
11. 問い合わせ・フッター（電話窓口と会社情報）: 灰色ラベル、フリーダイヤル大数字、ロゴ、ティール帯

Imagery

• 人物や都市を細い黒線で描き、ティール・サーモン・薄ピンクで部分的に塗る
• 人物は会社員風の上半身イラストで表情は控えめ
• 雲や街並みのシルエットを薄い線でセクション境界に置く
• 人物写真はスーツの担当者を観葉植物のある明るい室内で撮る
• 冊子モックは少し傾けて薄い影を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左テキスト・右イラストの 2 カラムにする
• PC では特長タイルを 3〜4 列に並べる
• PC の声カードは左右交互に人物を置き、横長にする
• PC でも中央 960px 程度に収め、生成り地を全幅に敷く
• フッターの電話とロゴを PC では横一列にする

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