--- version: alpha name: Fresh Green Wood Floor Coating Service LP description: 鮮やかな緑の帯と、白・生成りベージュの面を交互に置く住宅サービス系LP。木の床の写真を大きく使い、オレンジのグラデーションのピル型CTAを何度も繰り返す。見出しの一部を緑の箱に白抜きにし、背後に薄い英字の透かしを敷く訴求型の構成。 colors: primary: '#24A65C' secondary: '#13A93C' background: '#FEFEFE' background-alt: '#F2E9E0' surface: '#FEFEFE' tint-1: '#EBF6F0' tint-2: '#FAF6F3' cta: '#F7901E' on-cta: '#FFFFFF' text: '#383530' text-body: '#555555' accent-1: '#CCFE20' accent-2: '#795F49' line: '#4FA25B' cta-accessible: '#B36106' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 44px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.full}' height: 52px heading-boxed: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 36px watermark-label: textColor: '{colors.tint-1}' typography: '{typography.accent}' height: 44px feature-tile: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 140px worry-card: backgroundColor: '{colors.accent-2}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px flow-step: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 90px faq-item: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 44px voice-bubble: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 70px area-pill: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#24A65C` | ブランドの緑・セクション帯 | 22% | 画素の実測 | | `secondary` | `#13A93C` | 濃い緑・FAQの見出しバー | 8% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 24% | 画素の実測 | | `background-alt` | `#F2E9E0` | 生成りベージュ地（種類・エリア） | 9% | 画素の実測 | | `surface` | `#FEFEFE` | カード面 | 6% | 画素の実測 | | `tint-1` | `#EBF6F0` | 淡い緑の地（理由・お客様の声） | 6% | 画素の実測 | | `tint-2` | `#FAF6F3` | オフホワイト地 | 8% | 画素の実測 | | `cta` | `#F7901E` | 主CTAのオレンジ | 2% | 推定 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#383530` | 見出しの濃いグレー | 2% | 画素の実測 | | `text-body` | `#555555` | 本文グレー | 2% | 推定 | | `accent-1` | `#CCFE20` | 黄緑の強調文字（緑地上） | 0% | 画素の実測 | | `accent-2` | `#795F49` | 悩みカードのブラウン | 2% | 画素の主要色に補正 | | `line` | `#4FA25B` | 声カードの緑枠線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#B36106` | AA を満たす補正値（計算） | | 計算 | - 緑の帯セクションと、白・ベージュ・淡い緑のセクションを交互に置いてリズムをつくる - CTAだけをオレンジのグラデーションにして、緑の中でも目立たせる - 緑地の上の見出しは白にし、キーワードを白い箱に緑文字で抜くか、黄緑の文字で強調する - 白地の見出しは濃いグレーにし、キーワードだけ緑にする - エリア表示などのラベルは地域ごとに多色のピルで分ける - 本文は中間グレーにして、真っ黒は使わない - `button-primary` は文字 `#FFFFFF` × 背景 `#F7901E` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B36106`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・大見出しの強調語 | ゴシック | Noto Sans JP | 900 | 30px | 1.3 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.06em | | `headline-md` | カード見出し・理由タイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.04em | | `headline-sm` | 特長タイル名・FAQ質問 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 見出し背後の英字透かし・商品名ロゴ風の文字 | 欧文サンセリフ | Montserrat | 800 | 44px | 1.0 | 0.05em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.08em | - 見出しは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 ```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-6ba5c1e6`（元 LP の URL から採番） - **元 LP**: https://www.jeb.bz/lp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。