DESIGN.md — クリーム地にオレンジ×青の相見積もりサービスLP（Friendly Orange Blue Estimate Service LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 親しみ・手作り感、信頼・誠実、情報量多め・訴求型、ポップ・元気
• キーワード: 相見積もり・フラットイラスト・吹き出し・オレンジCTA・クリーム地・フォーム完結
• 地の質感: 淡いクリームの斜めストライプと紙吹雪の装飾。それ以外はフラットな単色面
• 形: ピル型ボタン、丸い吹き出し、角丸カード、円形の番号バッジ
• 温度感: 暖色寄り。オレンジとクリームの温かさに、青で信頼感を足す

Colors

• 白地とクリーム地を大きなセクション単位で交互に使う
• オレンジは主CTA・見出し下線・強調語・STEP番号に限る
• 青は区切り帯・サブCTA・下部の案内エリアに使い、信頼感を出す
• 黄色は無料バッジやCTA内の小ラベルなど、目を引かせたい点だけに使う
• クリーム地の上には白い角丸カードを置いて内容をまとめる
• 必須ラベルは赤、入力例は濃い青の小さい文字で示す
• button-primary は文字 #FFFFFF × 背景 #EC8403 のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B06202、4.57:1）を使う。
• badge-free は文字 #186EB7 × 背景 #FDEB02 のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#176BB2、4.51:1）を使う。
• feature-label は文字 #FFFFFF × 背景 #2BA3A8 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#228285、4.57:1）を使う。
• section-tag は文字 #F28301 × 背景 #FEFFFF のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B36101、4.53:1）を使う。
• step-number は文字 #FFFFFF × 背景 #F28301 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B36101、4.54:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシック。下にオレンジの短い線を引く
• 強調したい語だけオレンジの太字にする
• CTAの上には左右に斜線を付けた一行の訴求文を置く
• 注釈は※で始め、小さいグレー文字にする
• FVのコピーは極太で、要の語を最大サイズのオレンジにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は画像とテキストの 2 分割行、施工カテゴリは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• クリーム地のセクションには白い角丸カードを入れ子にする
• 各ブロックの最後に毎回CTAを置く
• 特長は丸いイラストとラベルの吹き出しを左に、説明文を右に置く
• STEPは左に番号の円、右に説明文とイラスト。間に下向きの三角を置く
• フォームはラベルと入力欄を縦に積み、細い線で項目を区切る

Elevation & Depth

• CTAボタンには濃いオレンジの下影を付け、少し立体的に見せる
• 白カードは影をほぼ付けず、淡い枠線で区切る
• ポイントカードはごく弱い影を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 施工写真は角丸の四角。人物イラストは淡黄の円の中に配置する
• セクション境界: 直線で切り替える。青帯や橙帯の下端に下向き三角の切り欠きを付ける
• 吹き出しは楕円か円にし、しっぽを付ける
• 番号バッジは真円で塗りつぶす
• ポイントカードの左上にはオレンジの三角コーナーを付ける

Components

• 主CTAピルボタン（button-primary）: オレンジのピル型ボタン。左に黄色の小ラベル、右に下向きシェブロンを付ける
• 青のサブボタン（button-secondary）: 青いピル型ボタン。右矢印付きで相談などの導線に使う
• 無料円バッジ（badge-free）: FVの右上に置く黄色の円。中に2行の太字を入れる
• 悩み・特長の吹き出し（speech-bubble）: 白または淡黄の楕円。黒文字の中にオレンジの強調語を入れる
• 特長ラベル吹き出し（feature-label）: ティール・黄・オレンジの円に白い2文字程度の短い言葉を入れ、イラスト円に重ねる
• 見出し上タグ（section-tag）: オレンジ枠の白い吹き出しタグ。オレンジ文字で見出しの前置きを書く
• STEP番号（step-number）: オレンジの円の中に、小さいSTEPの文字と大きい数字を白で入れる
• 比較ポイント枠（compare-callout）: 淡黄地にオレンジ枠のカード。A/B/Cの丸番号付きで、点線で図とつなぐ
• フォーム項目（form-field）: 赤い必須ラベルと太字のラベル、グレー枠の入力欄、青い入力例の順に並べる
• 青の案内エリア（info-band）: 青地に白カードを縦に並べ、イラストとサービス名で次の行動を案内する

Do's and Don'ts

Do - 人物は肌色・紺・オレンジ系のフラットイラストで統一する - CTAはセクションごとに繰り返し、訴求文を斜線で挟んで添える - クリーム地のセクションには白カードを入れ子にする - 強調語はオレンジの太字にして短く区切る - 手軽さはSTEPと下向き三角で視覚化する

Don't - 暗い背景やラグジュアリーな配色を使わない - 明朝体や細い書体を見出しに使わない - 写真に強い影や過度な加工を加えない - オレンジと青以外の強い色を広い面に使わない - CTAを角張った四角にしない

Page Structure

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

1. ファーストビュー（サービスの内容と無料であることを一目で伝える）: クリームの斜めストライプ地に紙吹雪を散らす。極太コピー、無料の円バッジ、左右の吹き出し、中央のPCイラスト、ピルCTAを置く
2. 悩みの提起（対象者の悩みに共感する）: 白地に、悩みの吹き出し2つと困った人物のイラストを置く
3. 解決の提示（サービスを解決策として示す）: 青帯に下向き三角を付け、中央に大見出しを置く
4. 特長3点（手軽さ・利便性・安心感を伝える）: 色違いのラベル吹き出しと円形イラストを付けた行を縦に3つ並べ、最後にCTA
5. 比較表の紹介（成果物のイメージを示す）: クリーム地に白カードを置く。ポイント説明、画面キャプチャ、A/B/Cの解説枠、CTAの順
6. 対応項目（対応できる工事の幅を示す）: 角丸写真を2列グリッドに並べ、キャプションを付ける。最後にCTAと青のサブボタン
7. 利用の流れ（手順の簡単さを伝える）: STEP番号の円、説明文、イラストを三角でつないで3段に並べ、最後に注釈
8. 申込フォーム（見積もり依頼を受け付ける）: オレンジ帯の見出しに三角を付け、その下に必須ラベル付きの縦並びフォームと黄色の送信ボタン
9. 関連案内（検討中の人の受け皿をつくる）: 青地に白カード3枚、相談ボタン、電話番号を置く
10. フッター（会社情報とリンク）: 白地にパンくず、ロゴ、グレーと黄の線、小さいリンク群

Imagery

• 人物とモノはフラットなベクターイラストで描く。輪郭線は使わず、紺・オレンジ・グレー・ティールで塗る
• イラストは淡黄や淡青の円・楕円の台座に乗せる
• 施工写真は明るい自然光の手元や設備のアップで、白っぽいトーンにする
• FVには四角い色紙の紙吹雪（黄・橙・青・赤）を散らす
• UI図はスクリーンショット風にし、点線とアルファベットの丸番号で注釈する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではヘッダーの下に5分割のグローバルナビを置き、右端の項目をオレンジにする
• PCでは特長3点を横3列にする
• PCでは対応項目の写真を4列グリッドにする
• PCのSTEPは番号・文章・小さいイラストを横一列に並べる
• PCのフォームはラベル左・入力欄右の2列にする
• PCの青い案内エリアはカード3枚を横に並べ、右側に相談と電話の情報を置く

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