DESIGN.md — 鮮やか緑×木目ベージュの床コーティングLP（Fresh Green Wood Floor Coating Service LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、ナチュラル
• キーワード: 鮮やかな緑・木目フローリング・オレンジCTA・白抜き強調・英字透かし・葉っぱの装飾
• 地の質感: フラットな単色の面に、斜めの薄いグラデーションや光の差し込みを重ねる。写真は明るく暖かい木の色。
• 形: 角丸8px前後のカード、ピル型ボタン、斜めのスラッシュ記号、吹き出し型のラベル。
• 温度感: 爽やかな緑と木の暖色を合わせた、明るく親しみのある温度感。

Colors

• 緑の帯セクションと、白・ベージュ・淡い緑のセクションを交互に置いてリズムをつくる
• CTAだけをオレンジのグラデーションにして、緑の中でも目立たせる
• 緑地の上の見出しは白にし、キーワードを白い箱に緑文字で抜くか、黄緑の文字で強調する
• 白地の見出しは濃いグレーにし、キーワードだけ緑にする
• エリア表示などのラベルは地域ごとに多色のピルで分ける
• 本文は中間グレーにして、真っ黒は使わない
• button-primary は文字 #FFFFFF × 背景 #F7901E のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B36106、4.54:1）を使う。

Typography

• 見出しは2行に分け、1行目を小さい導入、2行目を大きい結論にする
• 強調語は文字を大きくして緑にするか、緑の箱に白抜きにする
• 見出しの背後に、淡い色の大きな英字をセクション名として敷く
• 強調語の上に傍点の丸を添えることがある
• 本文は14px前後・行間1.8で短く区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。特長タイル・オプションカードは2列グリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは「英字透かし＋2行の見出し」から始める
• 主要なセクションの後ろにCTAブロックを毎回挟む
• CTAの上に、斜めのスラッシュで挟んだ短い一言を置く
• 特長はアイコン写真付きの小タイルを4×2で並べる（SPは2列）
• 流れのステップは縦の点線でつなぐカードで並べる

Elevation & Depth

• カードには白地に弱い影（0 2px 8px rgba(0,0,0,0.08)）をつける
• CTAボタンは下方向に少し濃い影をつけて、浮いて見せる
• 緑地の上の白カードは影を控えめにし、面の差で分ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸8pxの矩形。カードの上半分に写真、下に文字を置く
• セクション境界: 直線で色を切り替える。帯の中には斜めの光のグラデーションを入れる
• CTAとエリアラベルはピル型にする
• 理由カードの写真の左下に、緑の帯ラベルを重ねる
• お客様の声の見出しは、しっぽ付きの緑の吹き出しにする
• ステップ番号は左上の斜めカットの台形に入れる

Components

• 主CTAボタン（button-primary）: オレンジのグラデーションのピル型。左端に白丸の「無料」バッジ、右端に矢印を置く
• 白抜き強調見出し（heading-boxed）: キーワードを緑の箱（緑地の上では白い箱）に入れた見出し
• 英字透かし（watermark-label）: 見出しの背後に置く、淡い大きな英字のセクション名
• 特長タイル（feature-tile）: 写真の下に緑の太字の見出しと短い説明を置く白い小カード
• 悩みカード（worry-card）: ブラウンの地に人物イラストと白文字の悩みを置き、下に写真を敷く
• 流れのステップカード（flow-step）: 緑地の上の白カード。斜めカットの番号、線画のアイコン、緑の見出しを並べる
• FAQアコーディオン（faq-item）: 緑のバーに白い「Q」と質問文、右端にシェブロン。開くと白地に回答を出す
• 声の吹き出し（voice-bubble）: 緑の吹き出しに白文字で感想の要約。横に施工前・後の写真と施工内容の表を置く
• エリアラベル（area-pill）: 地域ごとに色を変えたピル型ラベル。下に県名を中央揃えで並べる

Do's and Don'ts

Do - 緑の帯と明るい地を交互に置き、各ブロックの後にオレンジのCTAを入れる - 見出しは2行構成にし、キーワードを緑か白抜きの箱で強調する - 床や住まいは、明るく自然光の入った写真で見せる - 葉っぱのイラストを見出しの横に小さく散らす - 実績の数字や第三者評価は、月桂冠付きの大きな数字で見せる

Don't - CTAを緑や青にしない（オレンジで固定する） - 暗い写真や、寒色の強い写真を使わない - 本文を真っ黒の太字にしない - 角のとがったカードや、強すぎる影を使わない - 見出しを1行の平坦な文で済ませない

Page Structure

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

1. ファーストビュー（実績と品質を一目で伝える）: 左は斜めに切った緑の面にコピー・実績の数字・No.1バッジ3つ、右は木の床とくつろぐ人の写真。下にCTAを置く
2. 注釈（No.1表記の根拠を示す）: 灰色の地に小さな注釈文
3. 悩みの提起（床の悩みに共感する）: 英字透かし付きの見出しと、ブラウンの悩みカード3枚。下に担当者写真と解決の一言の帯
4. 特長（耐久性と保護力を訴求する）: 緑地に白抜きの強調見出し、写真と説明の2カラム、特長タイル4×2
5. CTA（問い合わせへ誘導する）: 白地に斜線で挟んだ一言とオレンジのピル型ボタン
6. 選ばれる理由（差別化を伝える）: 淡い緑の地に、写真と緑の帯ラベル付きのカード4枚（2×2）
7. サービスの種類（プランを比較させる）: ベージュの地に白い商品カード、施工前後のスライダー
8. オプション（まとめて施工を提案する）: 緑地に家のイラストと見出し、白いカード3×2、最後にCTA
9. お客様の声（実例で信頼を得る）: 緑の吹き出しの要約、施工前後の写真、緑枠の施工内容の表
10. 施工の流れ（申込みの不安をなくす）: 緑地に5つのステップカードを縦に並べ、最初のステップ内にCTA
11. よくある質問（疑問を解消する）: 緑のバーのアコーディオンを5つ
12. 対応エリア（施工できる地域を示す）: オフホワイトの地に、色分けした日本地図と地域ごとのピルラベル
13. 最終CTA（最後に背中を押す）: ぼかした緑の背景に白い質問の吹き出し2つとCTA
14. 会社情報・フッター（運営元を示す）: 白地にロゴと会社概要の表、緑の帯にコピーライト

Imagery

• 明るい自然光で撮った木目フローリングの写真を主役にする
• 子ども・ペット・家族が床でくつろぐ生活シーンを入れる
• 施工前・後は同じ構図で並べ、くすみと艶の差を見せる
• 人物はフラットな線画イラスト（吹き出し・悩みカード用）にする
• 緑の葉っぱのイラストを見出しの周りに散らす
• アイコンは緑の線画で単色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約800pxに収め、緑の帯は画面幅いっぱいに広げる
• SPのFVは写真を上、コピーとバッジを下に縦積みにする
• 特長タイルはPC4列→SP2列、オプションカードはPC3列→SP2列にする
• 理由カード・商品カードはPC2列→SP1列にする
• お客様の声の写真と表はSPで縦に積む
• CTAボタンはSPで幅90%にする

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