DESIGN.md — 紺×オレンジの信頼系不動産投資セミナー LP（Navy and Orange Trustworthy Investment Seminar LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 濃紺見出し・オレンジ強調・フラットイラスト・数値訴求・セミナー集客・淡いブルーグレー地
• 地の質感: フラットな単色面。影はカードにごく薄く付く程度で、質感はない
• 形: 角丸小さめの白カード、ピル型のチェックリスト行、角丸小の横長 CTA バー
• 温度感: やや寒色寄り。紺と青灰の地に、暖色のオレンジで熱を足す

Colors

• 地は白と淡いブルーグレーをセクションごとに交互に使う
• 見出し・数値・ラベル帯は濃紺で統一する
• オレンジは英字ラベル・強調語・番号枠・グラフ・人物の丸枠だけに使う
• 主 CTA は赤→オレンジの横グラデーション。左端に赤の「無料」バッジを付ける
• 中間 CTA は暗い写真帯の上に置き、白文字で目立たせる
• 表ヘッダーは薄ピーチ、数値ラベル帯は濃紺地に白文字にする
• button-primary は文字 #FFFFFF × 背景 #E43C0B のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DA390B、4.59:1）を使う。

Typography

• 見出しは極太ゴシックの濃紺で、中央揃えの 2 行にする
• 見出しの上にオレンジの小さな英字ラベルを必ず置く
• 本文中のキーワードは太字にし、特に重要な語はオレンジにする
• 数値は大きく、単位は 40% ほどの小さいサイズにする
• 強調したい語は「"」で囲み、オレンジにする
• 注釈は ※番号付きの灰色小文字でまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。声・講師カードは 3 枚を横に並べ、数値カードは 3＋1 枚のグリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 56px、基本単位 8px、カード内 14px（375px 幅換算）
• セクションは上下 48〜64px の余白を取り、地色の切り替えで区切る
• 悩み・提案リストは左寄せのピル行を 4〜5 本縦に並べ、右下にイラストを重ねる
• メリットは大きなイラスト面に番号付き白帯を重ね、その下に本文を置く
• 事例は横スライダー。左右に次のカードを少しはみ出させる
• 概要と会社情報は 2 列の表組みにする

Elevation & Depth

• カードとピル行はごく薄い影か影なしで、白と淡灰の差で浮かせる
• 事例スライダーのカードには柔らかい影を付ける
• ヘッダーは白地で固定し、下に薄い影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは角丸小の矩形面に置く。人物写真は細いオレンジ枠の正円で切り抜く
• セクション境界: 直線で区切り、地色を切り替える
• CTA は角丸小の横長バーで、右端に白丸の矢印アイコンを付ける
• チェックリスト行はピル型の白帯にする
• 番号は白地にオレンジの細枠の正方形で囲む
• 数値ラベルは濃紺の矩形帯を上に付けた白カードにする

Components

• 主 CTA バー（button-primary）: 赤→オレンジのグラデーション。左に赤い「無料」バッジ、右に丸矢印を付ける
• 無料バッジ（badge-free）: 白地に赤文字、または赤地に白文字の小さな矩形バッジ
• 英字ラベル＋見出し（section-label）: オレンジの小さな英字を濃紺の極太見出しの上に置き、中央揃えにする
• チェックリスト行（check-pill）: 白いピル帯の左にチェックアイコンを置き、一部の語を太字にする
• 番号付きメリット帯（number-card）: イラスト下端に重なる白帯。オレンジ枠の番号と太字の見出しを入れる
• 実績数値カード（stat-card）: 濃紺のラベル帯の下に大きな数字を置く白カード
• 写真帯の中間 CTA（photo-cta-band）: 暗い写真の上に、資料画像・白見出し・主 CTA を重ねた帯
• 事例カードスライダー（case-slider）: 丸い人物アイコン、属性タグ、薄ピーチ見出しの比較表を入れる。左右にオレンジの矢印ボタンを置く
• Q&A 行（faq-item）: オレンジの Q, と A, を頭に付け、細い線で区切る

Do's and Don'ts

Do - 見出しは必ず濃紺の極太ゴシックにする - 英字ラベルとオレンジの強調語をセットで使う - 実績・金利・手数料などの数値は大きく見せ、※注釈を付ける - CTA は 3〜4 回、同じデザインで繰り返す - フラットなビジネスマンのイラストで、手軽さを表現する

Don't - オレンジを本文や広い面に使わない - 見出しを明朝や細字にしない - 写真を多用して重たい印象にしない - CTA の色をセクションごとに変えない - 角丸を大きくしすぎてかわいい印象にしない

Page Structure

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

1. ファーストビュー（手軽さと実績を一目で伝える）: 2 行の大見出し（1 行目にオレンジの強調）、月桂冠付きの実績バッジ 3 つ、アイソメ風のイラスト、下に主 CTA と注釈を置く
2. 悩みの提起（読者の悩みに共感する）: 淡灰の箱に、チェック付きピル行を 4 本並べる。最後に太字の誘導文を置き、右下にイラストを添える
3. シミュレーション（少額で始められる根拠を示す）: 本文、アイコン付きの比較 2 行、折れ線グラフ、オレンジ強調のまとめ文を順に並べる
4. メリット（利点を 3 つ伝える）: 大きな青灰イラスト面に番号付き白帯を重ね、その下に本文を置く
5. 中間 CTA（特典を付けて申込を促す）: 暗い写真帯の上に、資料画像・白見出し・主 CTA を重ねる
6. 利用者層と事例（自分にもできると思わせる）: オレンジ系の円グラフ 2 つと、事例カードの横スライダーを置く
7. 選ばれる理由（数値で信頼を示す）: 濃紺ラベル付きの数値カード 4 枚と、オレンジ強調の一文を置く
8. 始め方の提案（セミナーで得られる内容を示す）: チェック付きピル行を 5 本並べ、イラストを添える
9. お客様の声（参加者の体験で安心させる）: 丸枠の人物写真、属性見出し、本文を入れた白カードを 3 列に並べる
10. よくある質問（不安を解消する）: オレンジの Q,/A, 付きの行を線で区切る
11. セミナー概要・講師（開催の詳細と講師を伝える）: 淡灰の見出し列を持つ 2 列表と、講師カードを 3 列に並べる
12. 運営会社・フッター（会社の信頼性を示す）: 太字ラベルと値を縦に並べ、淡灰のフッターにロゴと電話番号を置く

Imagery

• 青・紺・黄で描いたフラットなビジネスマンのイラスト。くつろぐ姿や上昇矢印で「楽に増える」を表現する
• 札束・コイン・ビルをアイソメトリックで描いた FV イラスト
• 人物写真はスーツ姿のバストアップで、オレンジの細枠の円に収める
• 中間 CTA の背景は、家の模型やルーペを写した暗めの写真
• グラフと円グラフはオレンジの濃淡で統一する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 960px 幅。FV は左にコピーと CTA、右にイラストを置く
• メリットは PC で左にイラスト、右に番号見出しと本文の横並びにする
• 数値カードは PC で 4 枚を横 1 列に並べる
• 中間 CTA は PC で、見出しと CTA ボタンを横並びの細い帯にする
• 運営会社情報は PC で 2 列に分ける
• PC のヘッダーはロゴと右端の CTA ボタンだけにする

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