DESIGN.md — 白×鮮青のグレー線画系不動産投資 LP（Clean Blue Gray Fintech Investment LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、クール・先進的、シンプル・ミニマル、清潔・爽やか
• キーワード: フラットイラスト・グレー基調・青ワンポイント・余白多め・数字訴求・テック感
• 地の質感: グラデーションや質感のないフラットな単色面。影はカードにごく薄く付けるだけ。
• 形: 角丸は小さめ（4〜8px）。CTA は角丸の横長帯、番号は黒丸、アイコンは円形の切り抜き。
• 温度感: やや寒色寄り。白・淡水色・グレーで落ち着かせ、青で温度を上げすぎずに目を引く。

Colors

• 地は白を基本に、FV・図解・理由カードは淡い水色、口コミとメディア帯は薄グレーで区切る。
• 青は CTA・強調帯・見出し下線の左端・地図ピンなど要所だけに使う。
• イラストはグレーと紺のモノトーンで描き、青を 1 点だけ差す。
• 金額などの数字は黒の極太、強調ラベルは黒地白文字のボックスで見せる。
• 星評価だけオレンジを使い、ほかの暖色は控える。
• 注釈は薄グレーの小さい文字で、見出しのすぐ下か下端にまとめる。

Typography

• 見出しは 2 行に分け、左揃えにする。
• 見出しの下に細いグレーの線を引き、左端だけを青にする。
• 数字は単位よりひと回り大きく太くして目立たせる。
• 強調したい単語は黒地白文字のボックスに入れる。
• 本文は小さめにして行間を広く取る。
• 番号は細い欧文で大きく書き、カードの左上に重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（メリットは 2×2 グリッド）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 14px（375px 幅換算）
• 左右の余白は約 24px。
• セクションは見出し、リード文、中身の順に並べる。
• メリットはアイコン・項目名・説明の 3 段を 2 列で並べる。
• 理由は全幅の水色カードにイラストを入れ、その下にタイトルと説明を置く。
• 口コミは横スクロールのカルーセルにし、下にドットを付ける。
• 注釈はセクションの最後にまとめる。

Elevation & Depth

• カードには薄い影（0 1px 4px rgba(0,0,0,.1)）を付ける。
• FV の特典カードは白地に薄い影を付け、下向きの吹き出しの三角を付ける。
• そのほかはフラットにし、影を使わない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は横長の長方形で上の角だけ丸める。アイコンは円形の淡い面に入れる。
• セクション境界: 直線で区切り、背景色の切り替えだけで分ける。
• CTA は角丸 4px 程度の横長ボタンにする。
• 左端に白丸の小バッジ、右端に矢印を置く。
• 小ラベルは細い枠線の四角か、白地のピル型にする。
• 図解の番号は黒丸に白い数字。

Components

• 主 CTA（button-primary）: 青の全幅ボタン。左に「無料」系の白丸バッジ、右に矢印を置く。
• 特典吹き出しカード（offer-card）: 左に決済アイコン、右に特典名と大きな金額を置いた白いカード。下向きの三角で CTA につなげる。
• 下線付き見出し（heading-underline）: 左揃えの太字見出し。下にグレーの線を引き、左端だけ青にする。
• 月桂樹の実績バッジ（badge-laurel）: 黒の月桂樹で No.1 系の実績を囲むバッジ。
• 青の結論帯（highlight-band）: 図解の下に置く青い帯。白文字で、数字を大きくする。
• 番号付き理由カード（reason-card）: 水色の面にイラストを入れ、左上に白地の大きな番号を重ねる。
• 口コミカード（review-card）: 属性、タイトル、星と点数、本文、日付、「続きを読む」リンクの順に並べる。
• インタビューカード（interview-card）: 上に人物写真、下に属性と枠線ラベル、短いコメントを置く。
• 図解の番号丸（step-number）: 黒丸の白数字と矢印で、循環する図を作る。

Do's and Don'ts

Do - 青は CTA と強調だけに絞る。 - イラストはグレーのフラットなタッチで、青を 1 点だけ差す。 - 数字は大きく太くし、注釈番号を添える。 - セクションごとに白・水色・グレーの地を切り替える。 - 余白を広く取り、本文は小さめにする。

Don't - 赤や黄色の派手な煽り装飾を使わない。 - グラデーションや光沢のボタンを使わない。 - 見出しを中央揃えのリボン装飾にしない。 - 写真を多用しない。イラスト中心にする。 - 注釈を省かない。

Page Structure

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

1. ファーストビュー（少額で始められることと実績を伝える）: 淡い水色地。左上に大きな金額コピーと黒ボックスの強調語、月桂樹バッジ。右側に建物と人物のイラスト。
2. 特典と CTA（面談の特典で申込を促す）: 白い吹き出しカードに特典の金額を入れ、その下に青の全幅 CTA。続けて注釈。
3. 動画解説（短い動画で概要を伝える）: ピル型ラベルと見出し、全幅の動画サムネイル（再生ボタン付き）。
4. 仕組み（収益の流れを図で説明する）: 淡い円の上に、番号付きの 4 ステップを循環図で配置。下に青の結論帯。
5. メリット（4 つの利点を示す）: 円形アイコンを 2×2 で並べ、項目名と説明を添える。最後に注釈。
6. 選ばれる理由（サービスの強みを 3 つ示す）: 番号付きの水色イラストカードを縦に 3 枚。各カードの下に太字タイトルと説明。
7. お客様の声（評価で信頼を得る）: グレー地。総合評価の星と点数、横スクロールの口コミカード。
8. インタビュー（実際の利用者の声を伝える）: 写真付きのカードを縦に並べる。
9. メディア掲載（第三者からの評価を示す）: グレー地に掲載メディアのロゴを 4 列×2 段で並べる。
10. フッター（運営会社の情報を示す）: 白地にロゴ、リンク、会社情報、コピーライト。

Imagery

• グレー・紺・白で描くフラットな人物イラスト。くつろぐポーズで余裕を表す。
• 建物や画面は線の少ない幾何学的な形で描き、窓や画面の一部だけ青にする。
• アイコンは淡い水色の円の中に描き、下半分を黒いアーチで締める。
• データ系のイラストは青い半透明のパネルや地図ピンで先進感を出す。
• 人物写真は明るいオフィスの廊下で撮った全身の立ち姿。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左にコピー、右にイラストの 2 カラムにし、CTA は左側に置く。
• 動画・仕組みは、PC では画像と見出しを左右に並べる。
• メリットは PC で 4 列、理由とインタビューは 3 列にする。
• 口コミは PC で 4 枚を横に並べる。
• メディアロゴは PC で 1 行にまとめる。

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