DESIGN.md — ベージュ×紺の手描き風相続相談LP（Warm Beige Navy Illustrated Inheritance Consulting LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: やさしい・柔らかい、信頼・誠実、親しみ・手作り感、情報量多め・訴求型
• キーワード: 生成りベージュ・濃紺・線画イラスト・緑の丘・角丸カード・赤い強調
• 地の質感: フラットな塗りに細い線画イラスト。紙のような温かい無地面。
• 形: 角丸カードとピル型ボタン、波打つ丘シルエット、大きな曲線の帯でセクションを区切る。
• 温度感: 暖色寄り。ベージュの温かさに紺で締まりを出す。

Colors

• 白地とベージュ帯を交互に置き、セクションの切り替えを面色で示す。
• 紺はCTA・悩み吹き出し・FAQ番号など要所のみ。
• 強調語は赤文字＋赤下線。1文に1〜2か所まで。
• 比較表は自社をからしベージュ、他社をグレーで塗り分ける。
• 緑は丘や木のイラスト限定で、UIには使わない。
• 欧文ラベル下に黄色の短いマーカー線を入れる。

Typography

• 見出しは中央揃え、上に字間広めの欧文小ラベルを置く。
• 本文は行間2.0でゆったり。
• 強調語は赤＋下線、または赤文字のみ。
• 背景に薄いベージュの巨大欧文を透かしで敷く演出あり。
• 縦書き見出しで締めのCTA前を印象づける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みカード・相談内容は SP で 1〜2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは白地とベージュ帯を交互に。
• カードは白地＋ベージュ枠で中央寄せ。
• イラストをカード上部に置き、下に説明。
• CTAはセクション末尾に繰り返し配置。
• 比較表は項目ラベル列＋自社列＋他社列の3列。

Elevation & Depth

• 影はほぼ使わずフラット。
• カードは細いベージュ線と塗り分けで区別。
• CTAボタンのみごく薄い影可。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸長方形。人物写真の背後にベージュやずらした紺の矩形を重ねる。
• セクション境界: 大きな曲線カーブと丘シルエットで区切る
• 悩み見出しは紺のピル型吹き出し。
• FAQ番号は紺の正円。
• チェックアイコンは紺の円バッジでカード上辺に乗せる。
• ベージュ帯の上下は緩い弧で切る。

Components

• 無料診断CTA（button-primary）: 紺のピル型。左に白丸の『無料』バッジ、右に再生矢印。上に小さな前置き文。
• 悩み吹き出し（worry-bubble）: 紺の角丸吹き出しに白文字で悩みを短く3行、下にイラストと白カードの結果文。
• 悩みカード（worry-card）: ベージュ地の角丸カード内に白の帯、赤字で起こりうるリスク。
• 欧文ラベル付き見出し（section-label）: 字間広い欧文小ラベル＋黄色短線＋太字和文見出し。
• 相談内容カード（service-card）: 白地紺枠カード、上辺に紺円チェック、線画イラストと太字ラベル。
• 比較表（compare-table）: 左に紺ラベル列、中央自社列をからしベージュ枠で持ち上げ、右に他社グレー列。
• 事例比較パネル（case-panel）: 上下にBAD/GOOD番号付きの比較、図解を右に配置。末尾に赤ラベルのメリット帯。
• FAQアコーディオン（faq-item）: 白地ベージュ枠、左に紺丸『Q.』、右に＋アイコン。

Do's and Don'ts

Do - 線画＋フラット塗りの人物イラストを各セクションに添える。 - 白とベージュの面を交互に使う。 - CTAは紺のピル型で統一し、何度も繰り返す。 - 強調は赤文字＋下線で要点だけ。 - 角丸を全体で統一する。

Don't - 原色の派手なグラデーションを使わない。 - 強い影や立体ボタンにしない。 - 赤を面や大見出しに多用しない。 - 写真を四角いまま無装飾で置かない。 - 冷たい寒色ベースの背景にしない。

Page Structure

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

1. ファーストビュー（相談の価値と安心感を伝える）: 左に大見出し、右に和風住宅写真、下に緑の丘と家族イラスト、白カード内にCTA。
2. 問題提起（親の家の相続を自分事化）: ベージュ帯に見出しと本文、右に高齢者写真を複数コラージュ。
3. 悩みの提起（具体的な悩みを4つ示す）: 紺吹き出し付きベージュカードを2×2で交互にずらして配置。
4. 解決策提示（無料診断へ誘導）: 白い大カードにスマホモックと人物イラスト、紺CTA。
5. 制度・リスク解説（法改正の緊急性を伝える）: 白カード内に本文と家のビフォーアフター線画、赤枠の注意ボックス。
6. メリット・データ（早めの対策の利点を示す）: 紺ピル見出し、ドーナツグラフで資産構成を図解。
7. 代表メッセージ（信頼性の担保）: 背景に巨大な薄い欧文、角丸人物写真と本文、署名。
8. サービス内容（相談できることを示す）: 紺の斜め帯に3つの相談カード、下に紺の補足バナー。
9. 比較（大手との違いを示す）: 3列比較表、自社列を持ち上げて強調。
10. 事例（具体的な効果を図解）: 他社案（グレー）と自社案（ベージュ）を上下に並べBAD/GOOD比較。
11. クロージングCTA（診断申込を後押し）: 縦書き大見出しと家族イラスト、写真、紺CTA。
12. よくある質問（不安を解消）: 枠付きアコーディオンを縦に4つ。
13. フッター（ナビと問い合わせ）: 緑の丘シルエットの下にベージュ地、ロゴ・リンク・紺ボタン。

Imagery

• 細い黒線＋ベージュ・紺・黄・赤のフラット塗り人物イラスト。
• 緑の丘・木・小さな家の牧歌的な風景イラストを区切りに使う。
• 写真は和風一軒家や高齢者の手元など温かい自然光。
• アイコンは家・お金・吹き出しの線画で統一。
• 図解は簡易な区画図をピンクと紺で塗る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約75%幅に収め、左右に余白。
• SPでは悩みカードを1列に積み、ずらし配置を解除。
• 比較表はSPで横スクロールか自社/他社を縦積み。
• FVは見出し→写真→CTAの縦並びに。
• 縦書き見出しはSPで横書きに変更も可。

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