DESIGN.md — オレンジ×ミントの一括見積もり比較LP（Bold Orange & Mint Comparison Quote LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 力強い・インパクト、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 一括見積もり・比較・ミントのイラスト・朱オレンジCTA・斜めのセクション境界・フォーム直結
• 地の質感: フラットな単色面。写真はFVのみで、他はフラットイラストとアイコン。
• 形: 角丸8px前後のカード、斜めにカットしたセクション境界、ピルではない角丸ボタン。
• 温度感: グレー青の冷たい地に、朱オレンジと黄色で温度を足した中間的な温度感。

Colors

• 地は白→青みグレー→薄グレーを交互にしてセクションを区切る。
• 朱オレンジはCTA・英字ラベル・強調数字だけに使う。
• ミントはイラスト背景・声カード・フォーム選択肢に使う。
• 黄色はFV見出しの帯とイラストのアクセントだけに使う。
• カード見出し帯とステップラベルは濃いスレートグレーで締める。
• 選ばれた項目・最安値はオレンジで強調し、その他は黒ラベルにする。
• button-primary は文字 #FEF3E6 × 背景 #FD5C24 のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D03702、4.53:1）を使う。
• required-badge は文字 #FEF3E6 × 背景 #FD5C24 のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D03702、4.53:1）を使う。
• highlight-label は文字 #FD5C24 × 背景 #FEFFFE のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D03702、4.57:1）を使う。

Typography

• 見出しは英字ラベル（オレンジ）と和文見出し（黒）の2段にする。
• 見出し中の数字はオレンジで1.5倍ほど大きくする。
• FVのコピーは斜体の極太ゴシックにし、キーワードに黄色の帯を敷く。
• 金額の数字は極太で大きく、単位は小さくする。
• 本文は12px前後で、詰めすぎず行間1.7をとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。フォームの選択肢は4列タイル
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約11%の余白をとった中央寄せにする。
• 特長は帯付きカードを縦に3枚並べる。
• ステップカードは左にテキスト、右に円形イラストを置き、間に▼をはさむ。
• お客様の声はスライダーにして、ドットで送る。
• フォームは全幅で、見出し帯を上下の黒線ではさむ。

Elevation & Depth

• カードには薄い影（0 2px 4px rgba(0,0,0,0.08)）をつける。
• CTAの下に濃い朱色の厚み（4px）をつけて立体的なボタンにする。
• それ以外はフラットにし、強い影は使わない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: FVは全幅の写真で下端を斜めにカット。イラストは円形のミント背景に入れる。
• セクション境界: 斜めのジグザグ（くの字）カットで地の色を切り替える。
• CTAは角丸8px程度の横長ボタンにし、中にピル型の白い無料バッジを入れる。
• 声カードは角丸20pxの大きめの角丸にする。
• ステップラベルはピル型にする。

Components

• 無料見積もりCTA（button-primary）: 朱オレンジの横長ボタンで、下に濃い色の厚みをつける。左に白いピル型の無料バッジを置く。
• 英字ラベル付き見出し（section-heading）: オレンジの英字ラベルの下に黒の和文見出しを置き、数字だけオレンジで大きくする。
• 帯付き特長カード（point-card）: 上部にスレートグレーの帯で番号を出し、白地にイラスト・小見出し・本文を入れる。
• 金額比較付きの声カード（voice-card）: ミント地のカード上部に円形の人物アイコンを重ねる。3社の金額タイルで最安値をオレンジにして王冠をつけ、差額を大きく出す。
• ステップカード（step-card）: 白カードの左上にグレーのピル型STEPラベル、右にミントの円形イラストを置き、カード間に▼をはさむ。
• ギザ円バッジ（fv-badge）: FV右上のミントのギザギザ円バッジ。中にオレンジの強調語を入れる。
• フォーム選択タイル（form-choice）: ミント線で囲んだ白タイルにアイコンとラベルを入れる。ラジオボタンはミントの丸にする。
• 必須バッジ（required-badge）: オレンジのピル型の小バッジに白文字を入れる。
• 白座布団の強調語（highlight-label）: 白い矩形の上にオレンジ太字で受付条件を並べる。上の行はスラッシュではさむ。

Do's and Don'ts

Do - CTAはFV・特長の後・フォームの後に繰り返し置く。 - 比較は金額タイルを3つ並べ、最安値をオレンジにして視覚化する。 - イラストはミント・黄色・黒線の3色に統一する。 - セクション境界は斜めカットで動きを出す。 - 見出しは英字ラベルと和文の2段構成を守る。

Don't - オレンジをCTA・強調以外の広い面に使わない。 - FV以外に実写写真を多用しない。 - ミントと黄色以外のアクセント色を足さない。 - グラデーションや強い影を使わない。 - 明朝体や丸ゴシックを混ぜない。

Page Structure

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

1. ファーストビュー（疑問提起と価値の即時提示）: 作業現場の写真に白枠の吹き出し・黄色帯の斜体コピー・ギザ円バッジ・CTAを重ね、下端を斜めにカットする。
2. サービス紹介（サービスの概要説明）: 白地の中央にロゴ風の見出しと2行の説明文を置く。
3. 特長（選ぶ理由を3つ提示）: 青みグレーの地に帯付きの白カードを3枚並べ、各カードにイラストを入れる。最後にCTAを置く。
4. お客様の声（節約効果の実例）: 白地にミントの声カードをスライダーで並べ、3社の金額比較と差額を大きく出す。
5. 利用の流れ（手軽さを3ステップで示す）: 薄グレーの地に横長の白カードを縦に3枚並べ、▼でつなぐ。
6. 見積もりフォーム（その場で入力を開始させる）: 受付条件を白座布団の強調語で見せ、黒線で区切った設問にアイコンタイルとラジオを並べる。
7. CTA・安心注記（送信と不安解消）: CTAボタンの下に鍵アイコン付きのプライバシー注記を置く。
8. フッター（運営情報）: くすみ青緑の地にロゴ・認証マーク・罫線区切りのリンク表・コピーライトを置く。

Imagery

• FVは重機が作業する現場の写真を使い、粉塵と青空で迫力を出す。
• イラストは黒の細線に、ミント・黄色のフラット塗りを合わせる。
• 人物はヘルメット姿の作業員3人を笑顔で描く。
• スマホ・封筒・棒グラフなどの手続きアイコンをミントの円に入れる。
• フォームのアイコンはオレンジと茶色のピクトで建物と作業を表す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約960pxにし、中央寄せにする。
• 特長カードとステップカードはPCで3列に並べ、ステップのイラストは上に置く。
• PCでは声カードを3枚以上並べて表示し、横にスライドさせる。
• PCのフォームは左に設問名、右に選択肢を置く2列の表にする。
• FVは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 行書くと起動時に読み込まれる。