DESIGN.md — 橙×生成りのやさしい太陽光・住宅設備 LP（Warm Orange Friendly Solar Service LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: やさしい・柔らかい、信頼・誠実、親しみ・手作り感、情報量多め・訴求型
• キーワード: オレンジグラデーション・生成り地・線画イラスト・角丸カード・実績バッジ・点線区切り
• 地の質感: フラットな塗りが中心。背景に薄い円や斜めストライプを淡く敷き、CTA 帯だけオレンジのグラデーションにする。
• 形: 角丸 16〜24px のカード、ピル型ボタン、円形の番号バッジ、下向き三角の矢印。
• 温度感: 暖色寄り。オレンジとベージュで温かく、白地で清潔感を保つ。

Colors

• 地は白と生成り（#FAF4EA）をセクションごとに交互にする。
• 見出しは濃い茶寄りの墨色にし、強調する語だけ primary のオレンジにする。
• CTA 帯は黄橙からオレンジへの斜めグラデーションにし、中に白い角丸パネルを置く。
• 商品カードと声カードの見出し帯は secondary の黄橙で塗り、文字は白にする。
• 区切りは primary の点線、枠は淡いオレンジの細線を使う。
• 赤は動画ボタンにだけ使い、ほかには使わない。
• button-primary は文字 #FFFFFF × 背景 #F38C0C のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AD6309、4.6:1）を使う。
• badge-achievement は文字 #FFFFFF × 背景 #D46215 のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BF5813、4.54:1）を使う。

Typography

• 見出しの上には小さなオレンジの英字ラベルを中央揃えで置く。
• 見出しの強調語はオレンジにし、一回り大きくする。
• 番号（01、STEP など）は欧文サンセリフの太字で大きく扱う。
• 本文は行間を 1.8 前後とり、カード内では左揃えにする。
• 実績の数字は特大の太字オレンジにし、単位は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積む。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 22px（375px 幅換算）
• セクション見出しは中央揃え（英字ラベル＋和文見出し＋短いリード文）。
• カードの左右余白は 20px 前後で、カードどうしの間隔は 24px。
• 流れのステップは枠付きカードの間に下向き三角を挟んでつなぐ。
• CTA 帯はコンテンツの区切りに 3 回ほど繰り返し入れる。

Elevation & Depth

• 影はほぼ使わず、塗り分けと細い枠線で面を分ける。
• 実績カードにだけ、ごく薄い影を落とす。
• ヘッダーは白いピル型のバーにして、うっすら影をつける。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カード内の写真は角丸 8px の横長長方形。ファーストビューは斜めのカットで写真をコラージュする。
• セクション境界: 基本は直線で区切る。ファーストビューの下だけ緩い曲線にする。
• ボタンとラベルはピル型にする。
• 番号・Q/A・実績バッジは円形にする。
• 前後比較や吹き出しの区切りには下向き三角を使う。
• 情報カードは角丸 16〜24px で統一する。

Components

• 相談 CTA ボタン（button-primary）: オレンジのグラデーションのピル型。右端に白い円とメールアイコンを入れる。
• CTA 帯（cta-band）: オレンジのグラデーション帯に白い角丸パネルを置く。パネル内は「\ 一言 /」とボタン。下端から人物イラストが手を差し出す。
• 実績バッジ（badge-achievement）: オレンジの星形の縁取りメダル。中に小ラベル・大きな数字・単位を入れる。
• 悩みチェックリスト（card-problem）: オレンジ枠のカードにイラストを置き、その下にチェックアイコン付きの行を点線で区切って並べる。下端には三角を付ける。
• 特長カード（card-feature）: 生成り地に写真を置き、POINT と番号、オレンジの見出し、点線、本文を順に並べる。
• 商品・価格カード（card-product）: 黄橙の見出し帯に白い円アイコンを付ける。本文は写真・ピル型の項目ラベル・値・太字の価格を並べる。
• 項目ラベル（label-spec）: 淡いベージュ地にオレンジの細枠を付けた小さなピル型。
• 流れのステップ（step-card）: オレンジ枠のカード。上部に STEP 番号の濃いオレンジの円を置き、線画イラスト・見出し・説明を続ける。
• Q&A カード（faq-item）: 白いカードに、塗りつぶしのオレンジ円の Q と質問を置く。点線を挟み、白抜きのオレンジ円の A と回答を続ける。
• お客様の声カード（voice-card）: 黄橙の帯に VOICE と番号を入れる。ハッシュタグのピル、BEFORE/AFTER の写真と三角矢印、感想文を続ける。

Do's and Don'ts

Do - 強調語だけをオレンジにして、見出しの大半は墨色に保つ。 - 人物と機器は、線画に黄橙の塗りを加えたフラットイラストで統一する。 - 実績の数字は月桂樹や王冠の装飾と組み合わせて大きく見せる。 - 白と生成りの地をセクションごとに交互に切り替える。 - CTA 帯は同じデザインで複数回繰り返す。

Don't - 青や緑など寒色の大きな面を使わない（点検の図解の淡い色だけは例外）。 - 角の立った四角いボタンにしない。 - 強い影やグラデーションを CTA 帯以外に多用しない。 - 本文を中央揃えの長文にしない。 - 黒い地をフッター以外に使わない。

Page Structure

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

1. ファーストビュー（安心感と実績を一目で伝える）: 小さなリード文と強調タグ、大きな 2 行のコピーを置く。斜めに切った写真のコラージュに、メダル 3 つと人物イラストを重ね、CTA を添える。
2. 悩みの提起（読み手の不安を言語化する）: 生成り地にオレンジ枠のカードを置き、イラストとチェック付きの悩みを 5 行並べる。
3. 解決の提示（悩みから解決へつなぐ）: 下向き三角の下に、強調色を入れた 2 行の見出しを中央に置く。
4. 選ばれる理由（特長を 4 つ示す）: 写真・番号・見出し・本文の生成りカードを縦に 4 枚並べ、動画ボタンを添える。
5. CTA（相談を促す）: オレンジのグラデーション帯に白パネルとボタン、両脇に人物イラストを置く。
6. 商品ラインナップ・価格（具体的な価格を示す）: 黄橙の見出し帯の商品カードを 4 枚並べる。中身は項目ラベルと値、価格。
7. アフター点検（導入後のサポートを訴求する）: 吹き出し枠のキャッチ、3 色の重なる円の図解、人物付きの吹き出し、放射状の円グラフ型の図解で構成する。
8. 提携企業（信頼性を補強する）: 白地にロゴを 2 列で並べる。
9. 実績（数字で信頼を示す）: 写真の下に、月桂樹とピル型のラベル、大きな数字を置いたカードを 4 枚並べる。
10. お客様の声（体験談で共感を得る）: VOICE 帯、タグ、BEFORE/AFTER の写真、感想文で構成した白カードを生成り地に並べる。
11. 導入までの流れ（手順の不安をなくす）: STEP の円とイラスト付きの枠カードを 6 枚、三角でつなぐ。
12. よくある質問（疑問を解消する）: 生成り地に Q&A の白カードを縦に並べる。
13. CTA・フッター（最後のひと押しをする）: CTA 帯を置き、その下はこげ茶地のフッターにロゴとリンクを並べる。

Imagery

• 写真は明るい日中の屋外が中心。屋根の上のパネルや住宅に置いた設備を、晴天の青空とともに写す。
• スタッフは作業着とヘルメット姿で、笑顔の集合写真や点検中の場面を使う。
• イラストは黒い細線と黄橙・オレンジのフラット塗りで、スーツ姿の男女が手を差し出すポーズにする。
• アイコンは淡い色の円の中に線画で描く。
• 背景には薄いオレンジの円や斜めストライプを、ごく淡く装飾として敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 760px 前後の幅にまとめ、背景の装飾を左右に広げる。
• 特長カードと実績カードは PC で 2 列のグリッドにする。
• 商品カードと声カードは PC で写真を左、情報を右に置く横並びにする。
• 流れのステップは PC で番号・イラスト・テキストの横並びカードにする。
• PC のヘッダーはナビを横並びにし、右端にピル型の CTA を置く。

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