DESIGN.md — 白×金×焦げ茶の上品な家事代行サービスLP（Warm Gold Premium Housekeeping Service LP）

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

Overview

• 業種: その他 ／ 雰囲気: 上品・高級、信頼・誠実、やさしい・柔らかい
• キーワード: 白地・金のライン・焦げ茶の明朝・山吹色CTA・円形写真・額縁キャンペーン
• 地の質感: フラットな白地に金色グラデのライン・月桂樹エンブレムで高級感を足す。背景写真は白く霞ませて使う。
• 形: 円形写真、細い金の短線、ピル型ボタン、額縁＋斜めリボンの矩形ボックス。
• 温度感: 暖色寄り。生成りと金で温かく、焦げ茶で締める。

Colors

• 地は白が基本。料金・FAQなど情報の塊は生成り地で区切る。
• 見出しと額縁は焦げ茶、装飾線とアイコンは金で統一する。
• 行動を促すボタンだけ山吹色の塗りに白文字。
• 価格の数字のみオレンジで最大級に強調する。
• CTA帯は写真を白く霞ませたグレー地に焦げ茶の大コピーを重ねる。
• フッターは山吹色ベタに白ロゴ・白文字。
• button-primary は文字 #FFFFFF × 背景 #ECBE01 のコントラスト比が 1.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8E7201、4.61:1）を使う。
• button-wide は文字 #FFFFFF × 背景 #ECBE01 のコントラスト比が 1.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8E7201、4.61:1）を使う。

Typography

• 見出しは明朝で字間を広く取り、上品さを出す。
• 小見出しと本文はゴシック。小見出しは太字で字間を広げる。
• 悩み・強みは細い前置き1行と太字の結論1行の2段構成。
• 価格は数字を大きくし、単位と税込表記は小さく添える。
• STEP番号は金色グラデのセリフ数字。
• 本文は行間を広め（1.9前後）にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。仕事内容アイコンのみ 2 カラム。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは中央揃え、下に金の短線か左右の金短線を添える。
• 悩み・強みは円形写真＋2行テキストを縦に積む。
• 事例カードは白地に薄い影、写真は中央に配置。
• CTA帯は主要セクションの間に4〜5回繰り返す。
• 本文は左揃え、導入文と注釈は中央揃え。

Elevation & Depth

• 事例カードとアイコンタイルにごく薄いぼかし影。
• それ以外はフラットで影を使わない。
• スクロール案内は半透明の黒い角丸パネル。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 悩み・強み・お客様の声は円形（金の細縁）、ターゲット・安心の写真は角丸、理由・STEPは四角。
• セクション境界: 直線の切り替え。セクションの境界は地色の変化だけで示す。
• キャンペーンボックスは焦げ茶の格子地＋白い二重枠＋左上・右下の斜め金リボン。
• FAQは金の細い枠線の矩形、角丸なし。
• 条件タグは灰色細枠のピル。
• 時間配分バーは濃淡グレーをつなげた角丸の帯。

Components

• 申込みピルボタン（button-primary）: 山吹色の塗り、白い太字、右に「>」。中幅で中央に置く。
• 全幅の問い合わせボタン（button-wide）: 画面幅いっぱいの山吹色ピル、右端に矢印。
• 額縁キャンペーンボックス（campaign-frame）: 焦げ茶の格子枠に白い二重罫の中枠、斜めの金リボン。期間・限定数と大きな価格を中央に配置。
• 金線付き見出し（heading-gold-line）: 明朝の中央見出しの左右に金の短線、または下に金の短線。
• 月桂樹の実績エンブレム（laurel-badge）: 金色の月桂冠の中に実績を明朝で3行。FVに3つ並べる。
• 円形写真＋2行コピー（circle-photo-item）: 金の細縁付き円形写真の下に、小さな前置きと太字の結論を置く。
• 利用事例カード（case-card）: 白カードに写真、条件ラベル、見出し、依頼内容の箇条書き、時間配分バー、ピルタグ。
• 業務アイコンタイル（icon-tile）: 白い角丸タイルに山吹色の線画アイコン、下にラベル。
• FAQアコーディオン（faq-item）: 白地に金の細枠。左に明朝の「Q」、右に下向きの山矢印。
• 金のチェックリスト（check-list）: 金の円内にチェックマークを入れた行頭付きの箇条書き。

Do's and Don'ts

Do - 見出しは明朝で焦げ茶、字間を広く取る。 - 金色は細い線・縁・アイコンに限って使う。 - CTAは山吹色のピルに統一し、キャンペーン枠の直下に置く。 - 人物写真は明るい白背景で、スタッフは黄色いエプロンで統一感を出す。 - 余白を広く取り、1ブロック1メッセージにする。

Don't - 原色の赤や青を強調色に使わない。 - 見出しを太いゴシックにしない。 - 金を広い面積のベタ塗りにしない（フッター・CTAの山吹色は例外）。 - 影を強くしない。 - 円形写真に太い縁を付けない。

Page Structure

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

1. ファーストビュー（サービスの価値と信頼を一目で伝える）: 明るい背景にスタッフ写真、焦げ茶明朝の大コピー3行、金の月桂樹エンブレムを3つ。
2. サービス紹介＋キャンペーン（提供元の説明と初回特典の提示）: 金線付き見出し、ロゴ、本文、額縁キャンペーンボックス、ピルCTA。
3. 悩みの提起（利用者の悩みに共感する）: 円形写真＋2行コピーを3つ縦に並べ、下に金の二重山形矢印。
4. 解決提案（サービスで悩みが解決することを示す）: 明朝見出し、作業中スタッフの写真、金チェックリスト3行。
5. 強み（選ぶ理由を簡潔に示す）: 円形写真＋2行コピーを3つ。
6. 利用者像（自分ごと化を促す）: 角丸写真、属性の注釈、太字見出し、本文を4件。
7. CTA帯（申込みを繰り返し促す）: 霞ませた写真の上に大コピー、額縁ボックス、ピルボタン。
8. 事例（具体的な利用イメージを示す）: 白カードに写真、依頼内容、時間配分バー、タグ。
9. 仕事内容（対応業務を一覧で示す）: 山吹色の線画アイコンタイルを2列。下に対応外業務の注記。
10. 選ばれる理由（根拠を詳しく伝える）: 金のセリフ数字を重ねた四角い写真、太字見出し、本文。
11. お客様の声（実体験で後押しする）: 円形写真、属性、2行の太字見出し、鍵括弧付きの本文。
12. 安心・安全（不安を解消する）: 角丸写真と金チェック付きの見出し・本文を3項目。
13. 利用の流れ・料金・エリア（手順と費用と対応範囲を明示する）: STEP番号＋写真、生成り地の横スクロール料金表、黄色の濃淡で塗り分けた地図。
14. FAQ・会社概要・フッター（疑問解消と運営元の提示）: 生成り地に金枠のアコーディオン、罫線区切りの会社情報表、山吹色ベタのフッター。

Imagery

• 自然光の明るい室内で、白〜ベージュの背景の人物写真を使う。
• スタッフは白いシャツに黄色いエプロンで統一する。
• 悩みのカットは困った表情、声のカットは笑顔の家族や親子。
• CTA帯の背景は家事シーンの写真を白く70%ほど霞ませる。
• アイコンは山吹色の単色線画にきらめき装飾を添える。
• 地図などの図版は黄色〜黄土の濃淡で塗り分ける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約960pxに絞り、中央に寄せる。
• 悩み・強み・お客様の声はPCで3列に並べる。
• 利用者像はPCで2×2のグリッドにする。
• CTA帯はPCで左にコピー、右に額縁ボックスの横並び。
• PCはヘッダーに横並びのナビを置き、仕事内容アイコンは5列にする。
• 事例カードは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 行書くと起動時に読み込まれる。