--- version: alpha name: Bright Green Yellow Estate Clearance Service LP description: 鮮やかな緑を主色に、黄色の帯とピンクの数値バッジで安さと実績を強く訴求する生活サービス系LP。作業着姿のイラスト人物、ビフォーアフター写真、料金表、アコーディオン形式の流れ・FAQ・フォームを縦に積み、情報量の多さで安心感を出す構成。 colors: primary: '#3AB54B' secondary: '#7DC242' accent-1: '#FAED22' accent-2: '#FA5371' accent-3: '#F5911E' background: '#FDFDFD' background-alt: '#F4F5CB' tint-1: '#FCE7C8' tint-2: '#BDE3F9' surface: '#FCFBCD' cta: '#39B24A' on-cta: '#F3FEF5' marker: '#F06A3C' text: '#333333' line: '#F2B04A' accent-2-accessible: '#E8072F' marker-accessible: '#CD4010' cta-accessible: '#2A8437' primary-accessible: '#2A8336' accent-3-accessible: '#AD6008' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.03em accent: fontFamily: Roboto fontSize: 40px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' stat-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.display}' rounded: '{rounded.full}' height: 90px appeal-box: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 220px price-row-card: backgroundColor: '{colors.surface}' textColor: '{colors.marker}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px before-after-card: backgroundColor: '{colors.background}' textColor: '{colors.marker}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 440px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 80px tel-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 80px step-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 70px speech-bubble: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 44px --- # DESIGN.md — 緑×黄の明るい遺品整理サービスLP（Bright Green Yellow Estate Clearance Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: その他 ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、親しみ・手作り感、信頼・誠実 - **キーワード**: 鮮やかな緑・黄色マーカー帯・ピンクの円形実績バッジ・ビフォーアフター・料金相場表・作業着イラスト - **地の質感**: フラットな単色面に、淡い街並みイラストを背景に薄く敷く。文字に白フチや影をつけた立体的なPOP見出しが多い - **形**: 角丸8〜12pxのカード、円形のアイコンと数値バッジ、白い丸囲みアイコン、下向き三角の流れ矢印 - **温度感**: 明るく暖かい。緑と黄で清潔感と元気さ、ピンク・オレンジで価格の強調 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3AB54B` | ブランド緑（ヘッダー・帯見出し・流れのステップ） | 7% | 画素の実測 | | `secondary` | `#7DC242` | 黄緑のサービス内容背景 | 4% | 推定 | | `accent-1` | `#FAED22` | 黄色の帯・料金表ヘッダー・訴求ボックス | 6% | 画素の実測 | | `accent-2` | `#FA5371` | ピンクの数値バッジ・POINT見出し帯 | 3% | 画素の実測 | | `accent-3` | `#F5911E` | オレンジ（お客様の声・フォーム見出し・ラベル） | 2% | 画素の実測 | | `background` | `#FDFDFD` | 基本の白地 | 33% | 画素の実測 | | `background-alt` | `#F4F5CB` | 淡い黄緑のセクション地（流れ・FAQ・基本サービス） | 8% | 画素の実測 | | `tint-1` | `#FCE7C8` | 薄いベージュ（フォーム・お客様の声の地） | 11% | 画素の実測 | | `tint-2` | `#BDE3F9` | 薄水色（対応エリアの地） | 4% | 画素の実測 | | `surface` | `#FCFBCD` | 料金表の淡黄行 | 3% | 画素の実測 | | `cta` | `#39B24A` | メール問い合わせボタン | 1% | 画素の実測 | | `on-cta` | `#F3FEF5` | ボタン上の白文字 | 0% | 画素の実測 | | `marker` | `#F06A3C` | 料金・電話番号の強調文字 | 0% | 推定 | | `text` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `line` | `#F2B04A` | 料金カードのオレンジ枠線 | 0% | 推定 | | `accent-2-accessible` | `#E8072F` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#CD4010` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#2A8437` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#2A8336` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#AD6008` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡い黄緑・ベージュ・水色をセクションごとに切り替え、区切りを色で示す - 緑は見出し帯・ステップ・アイコン・主ボタンに使うブランド色 - 黄色は帯マーカーと料金表ヘッダー、訴求ボックスに限定する - ピンクは実績の数値バッジとPOINT見出し、電話番号に使う - 金額はオレンジ〜赤の大きな太字で強調する - お客様の声とフォームはオレンジ系でまとめ、温かさを出す - `stat-badge` は文字 `#F3FEF5` × 背景 `#FA5371` のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E8072F`、4.51:1）を使う。 - `price-row-card` は文字 `#F06A3C` × 背景 `#FCFBCD` のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#CD4010`、4.57:1）を使う。 - `before-after-card` は文字 `#F06A3C` × 背景 `#FDFDFD` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#CD4010`、4.5:1）を使う。 - `button-primary` は文字 `#F3FEF5` × 背景 `#39B24A` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2A8437`、4.56:1）を使う。 - `tel-box` は文字 `#FA5371` × 背景 `#FDFDFD` のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E8072F`、4.52:1）を使う。 - `step-bar` は文字 `#F3FEF5` × 背景 `#3AB54B` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2A8336`、4.62:1）を使う。 - `faq-item` は文字 `#3AB54B` × 背景 `#FDFDFD` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2A8336`、4.57:1）を使う。 - `speech-bubble` は文字 `#F3FEF5` × 背景 `#F5911E` のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#AD6008`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出しと強調語 | ゴシック | M PLUS Rounded 1c | 900 | 30px | 1.3 | 0.05em | | `headline-lg` | セクション見出し（白フチ・影付き） | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.3 | 0.05em | | `headline-md` | POINT帯見出し・料金カード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | FAQの質問・声の見出し・ステップ名 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.75 | 0.03em | | `accent` | 金額・電話番号の大数字 | 欧文サンセリフ | Roboto | 700 | 40px | 1.1 | 0em | | `note` | 受付時間・注記・ラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.3 | 0.05em | - 見出しは太い丸ゴシックで、白フチや落ち影をつけPOP感を出す - 強調語は黄色マーカー帯の上に置くか、色を変えて一段大きくする - 金額は数字を大きく、円は小さく添える - 本文は14px前後の太めゴシックで行間広め - ラベルは色付き小箱に白文字で載せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。アイコンは 3 列、写真グリッドは 2 列 - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右12px程度の余白で画面幅いっぱいに近く置く - サービスアイコンは円形白地に緑ピクトを3列グリッドで並べる - 流れはバー状カードを縦に並べ、間に黄緑の下向き三角を挟む - 料金表は黄色ヘッダー+白行+淡黄行の3段カードを繰り返す - セクション見出しの横に作業着イラストの人物を添える ## Elevation & Depth - 白カードに薄いドロップシャドウ（0 2px 8px rgba(0,0,0,.1)） - 数値バッジ・訴求ボックスは白フチ+軽い影で浮かせる - 見出し文字に白フチと落ち影 ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸8px程度の四角。ビフォーアフターは色枠の円形切り抜きも使う - **セクション境界**: 直線で背景色を切り替える。区切り部に淡い街並みイラストを敷く - サービスアイコン・数値バッジは正円 - 主ボタンは角丸8〜10pxの長方形、サブ情報は内側の白ピル - 対応エリアや声はピル寄りの角丸カード - POINT番号は黄緑の円形バッジ ## Components - **実績数値バッジ**（`stat-badge`）: ピンクの円に白フチ、小ラベルと大きな数字を入れて2つ並べる - **訴求3ボックス**（`appeal-box`）: 黄色地の四角に濃色の小見出しとピンクの強調語を入れて3つ横並び - **POINTカード**（`point-card`）: 左上に黄緑の円形番号、ピンク帯の見出し、白地本文の角丸カード - **料金相場カード**（`price-row-card`）: 黄色ヘッダーに間取り、白行に人数と時間、淡黄行に金額 - **ビフォーアフター料金カード**（`before-after-card`）: オレンジ枠内に重なる写真2枚と矢印、緑帯見出し、差引計算と大きな支払額 - **メール問い合わせボタン**（`button-primary`）: 緑地に封筒アイコンと白太字、下に白ピルで受付時間 - **電話番号ボックス**（`tel-box`）: 白地にグレーまたはオレンジ枠、ピンクの大きな番号と受付時間 - **流れステップバー**（`step-bar`）: 緑のバーに白四角の番号、白文字、右端に開閉アイコン - **FAQ項目**（`faq-item`）: 白カードに緑丸のQ、緑太字の質問、右に開閉アイコン - **吹き出し見出し**（`speech-bubble`）: イラスト人物の横にオレンジやピンクの角丸吹き出しで一言 ## Do's and Don'ts **Do** - 主色の緑・黄・ピンクを繰り返し使い、全体の統一感を保つ - 実績や価格は数字を大きくし、バッジやボックスで囲む - 見出しには作業着のイラスト人物を添えて親しみを出す - セクションごとに淡い地色を変えて区切る - 電話とメールの問い合わせ導線を中盤と終盤に置く **Don't** - 暗い背景や黒基調にしない - 細い明朝体で見出しを書かない - 強調色を4色以上同時に1ブロックへ入れない - 料金を小さな文字で埋もれさせない - 写真を角ばった全面裁ち落としだけで並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（最安と実績を一目で伝える）: 水色の空と街並みイラストの上に、黄マーカーの大見出し、円形バッジ2つ、黄色訴求ボックス3つ、右にスーツ人物 2. **作業写真**（現場の実感を出す）: 角丸写真3枚の横並び 3. **サービス内容**（対応範囲を示す）: 黄緑地に白円の緑アイコンを3列グリッド 4. **選ばれる理由**（他社との違いを示す）: 認定証画像と、POINT番号付きカードを3つ。3つ目に料金表を内包 5. **料金事例**（実際の支払額を具体化）: ビフォーアフター写真と差引計算のカードを縦に3つ 6. **高価買取**（買取で費用が下がる点を伝える）: 黄ピル見出しと黄地の店舗写真2列グリッド 7. **対応エリア**（対応地域を示す）: 水色地にトラック型見出し、白ピルの地域アコーディオン 8. **中間CTA**（問い合わせを促す）: 写真地に実績バッジ再掲、電話ボックスと緑のメールボタン 9. **基本サービス内容**（料金に含まれる作業を示す）: 吹き出し見出しと、緑見出し付き写真カードの2列グリッド 10. **サービスの流れ**（手順を示す）: 緑ステップバー10個を三角矢印でつなぐ 11. **特殊清掃**（対応範囲を広げる）: 円形のビフォーアフター写真2枚と説明カード 12. **お客様の声**（信頼を補強）: ベージュ地に似顔絵イラストとオレンジ文字の声カード 13. **よくある質問**（不安を解消）: 淡黄緑地にQ付きアコーディオン 14. **問い合わせフォーム・会社概要**（申込と信頼の担保）: オレンジ見出しのベージュ地フォーム、緑ラベルの会社情報表、自社設備の写真 ## Imagery - 作業着姿のスタッフを描いた、輪郭線のあるやさしいイラスト人物を見出しに添える - 背景には淡い緑の街並みと人物シルエットのイラストを薄く敷く - 写真は実際の作業現場・部屋のビフォーアフター・店舗を明るく撮る - ビフォーアフター写真の角に緑とピンクの斜め帯ラベルを付ける - アイコンは緑の単色の太いピクトを白い円に入れる - お客様の声は手描き風の似顔絵イラストを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約900px幅の 1 カラムで、背景色は全幅に伸ばす - PC のサービスアイコンは 1 行に 9 個並べる - PC の料金表は 1 行横並びの表形式に変える - PC の料金事例カードは写真左・計算右の横並び - PC の電話ボックスとメールボタンは横 2 列 - PC の基本サービス写真カードは 3 列、ヘッダーにはナビを横並びで表示 ## 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-aedc4340`（元 LP の URL から採番） - **元 LP**: https://seikatsuhonpo.com/ihinseiri/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-15、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。