--- version: alpha name: Bold Orange & Mint Comparison Quote LP description: 工事現場写真のFVに黄色帯の斜体見出しを重ね、グレー青の地にミント色のイラストと朱オレンジのCTAで、無料一括見積もりへ誘導するポータル型LP。 colors: primary: '#546366' cta: '#FD5C24' on-cta: '#FEF3E6' background: '#FEFFFE' background-alt: '#DBE3E6' surface: '#F0EEEF' accent-1: '#9BF4C8' accent-2: '#FECD2A' dark-section: '#BDCFD2' text: '#090A0E' text-muted: '#4A5254' line: '#A3F4CD' cta-accessible: '#D03702' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em accent: fontFamily: Source Sans 3 fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Source Sans 3 fontSize: 17px fontWeight: 700 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 8px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 44px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 330px voice-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 290px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 135px fv-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px form-choice: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 85px required-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 16px highlight-label: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.headline-lg}' height: 34px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#546366` | 見出し帯・ラベルの濃いスレートグレー | 4% | 画素の実測 | | `cta` | `#FD5C24` | 主CTAボタン・英字ラベル・強調数字 | 2% | 画素の実測 | | `on-cta` | `#FEF3E6` | CTAボタン上の文字 | 0% | 画素の実測 | | `background` | `#FEFFFE` | 基本の地色 | 32% | 画素の実測 | | `background-alt` | `#DBE3E6` | 特長・CTAセクションの青みグレー地 | 17% | 画素の実測 | | `surface` | `#F0EEEF` | ステップ・フォームの薄いグレー地 | 10% | 画素の実測 | | `accent-1` | `#9BF4C8` | お客様の声カード・イラストのミント | 6% | 画素の実測 | | `accent-2` | `#FECD2A` | FV見出し帯・イラストの黄色 | 2% | 画素の実測 | | `dark-section` | `#BDCFD2` | フッターのくすみ青緑 | 4% | 画素の実測 | | `text` | `#090A0E` | 見出し・本文の黒 | 2% | 画素の実測 | | `text-muted` | `#4A5254` | カード内小見出しのグレー | 0% | 画素の実測 | | `line` | `#A3F4CD` | フォーム選択肢枠のミント線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#D03702` | AA を満たす補正値（計算） | | 計算 | - 地は白→青みグレー→薄グレーを交互にしてセクションを区切る。 - 朱オレンジは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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの斜体メインコピー（黄色帯付き） | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（強調数字だけオレンジで大きく） | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Source Sans 3 | 700 | 16px | 1.2 | 0.02em | | `headline-md` | カード帯の英字見出し | 欧文サンセリフ | Source Sans 3 | 700 | 17px | 1.2 | 0.0em | | `headline-sm` | カード・ステップの小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.02em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.03em | | `note` | 注記・フッターリンク | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | - 見出しは英字ラベル（オレンジ）と和文見出し（黒）の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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-3e3f9319`（元 LP の URL から採番） - **元 LP**: https://kaitaisodan.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。