--- version: alpha name: Bright Green Yellow Mascot Solar Energy Local Shop LP description: 緑と黄色を主役に、オレンジの CTA と水色の補助色を合わせた、明るく親しみやすい地域密着型の住宅設備 LP。マスコットキャラのイラスト、点線入りの見出し帯、ギザギザのセクション境界、吹き出しで悩みを並べる構成を使い、わかりやすさと安心感を出している。 colors: primary: '#51B133' secondary: '#FDD201' cta: '#F18700' on-cta: '#FEFAEF' background: '#FFFFFF' background-alt: '#F9F9F9' tint-1: '#FDE674' accent-1: '#5AC4F2' accent-2: '#015BAB' accent-3: '#E30201' text: '#181A1C' text-muted: '#777777' line: '#F9F9F9' dark-section: '#1A1A1A' cta-accessible: '#AC6000' primary-accessible: '#3C8326' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.03em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 20px fontWeight: 800 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px button-sub: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px heading-stitch-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px tel-banner: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.display}' rounded: '{rounded.md}' height: 110px worry-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 70px strength-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 380px stat-row: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 60px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 46px form-row: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 140px --- # DESIGN.md — 緑×黄の元気なマスコット付き太陽光専門店 LP（Bright Green Yellow Mascot Solar Energy Local Shop LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: ポップ・元気、親しみ・手作り感、信頼・誠実、情報量多め・訴求型 - **キーワード**: 地域密着・マスコット・緑と黄色・点線ステッチ帯・吹き出し・無料相談 - **地の質感**: フラットな単色の面にイラストと実写写真を組み合わせる。見出し帯の内側に白い点線を入れ、ワッペンのような手作り感を出す - **形**: 角丸 8〜16px の枠付きカード、ピル型 CTA、円形のアイコン台、ギザギザと家形（三角屋根）のセクション境界 - **温度感**: 暖かく明るい。晴れた日の屋外の空気感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#51B133` | ブランドの緑（悩みセクションの地・ボタン・枠線） | | 画素の実測 | | `secondary` | `#FDD201` | 黄色（見出し帯・実績パネル・フォームのラベル） | | 画素の実測 | | `cta` | `#F18700` | オレンジ（主 CTA・強みの見出し帯・アイコン円） | | 画素の実測 | | `on-cta` | `#FEFAEF` | CTA の上の白い文字 | | 画素の実測 | | `background` | `#FFFFFF` | ページの地の白 | | 画素の実測 | | `background-alt` | `#F9F9F9` | フッターの淡いグレーの地 | | 画素の実測 | | `tint-1` | `#FDE674` | 商品紹介セクションの淡い黄色の地 | | 画素の実測 | | `accent-1` | `#5AC4F2` | 水色（予約制のお知らせ帯・注意の枠線） | | 画素の実測 | | `accent-2` | `#015BAB` | よくある質問の濃い青い帯とボタン | | 画素の実測 | | `accent-3` | `#E30201` | Q マークとキャッチコピーの強調に使う赤 | | 画素の実測 | | `text` | `#181A1C` | 見出しと本文の黒 | | 画素の実測 | | `text-muted` | `#777777` | 日付・注釈のグレー | | 画素の実測 | | `line` | `#F9F9F9` | リストの区切り線 | | 画素の主要色に補正 | | `dark-section` | `#1A1A1A` | 黒いボタン | | 画素の実測 | | `cta-accessible` | `#AC6000` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#3C8326` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にする。悩みのセクションだけ緑一色の面にし、文字は白にする - 見出し帯は黄色かオレンジの面にし、内側に白い点線を入れる - 購入・相談などの主 CTA はオレンジのピル型にする。小さな一覧ボタンは緑にする - 強み 01〜03 はオレンジ、04〜07 は緑の帯と黄色の円にして、交互に色を変える - 水色はお知らせ帯や注意の枠など、補助的な情報だけに使う - 赤は強調語と Q マークだけに使い、広い面には使わない - `button-primary` は文字 `#FEFAEF` × 背景 `#F18700` のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AC6000`、4.55:1）を使う。 - `button-sub` は文字 `#FEFAEF` × 背景 `#51B133` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3C8326`、4.51:1）を使う。 - `tel-banner` は文字 `#F18700` × 背景 `#FFFFFF` のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AC6000`、4.51:1）を使う。 - `stat-row` は文字 `#FEFAEF` × 背景 `#51B133` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#3C8326`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの太いキャッチコピー | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.25 | 0.02em | | `headline-lg` | セクションの大見出し | ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.35 | 0.03em | | `headline-md` | 緑の地の上に置く白抜きの見出し | ゴシック | Zen Kaku Gothic New | 700 | 21px | 1.4 | 0.03em | | `headline-sm` | 帯の中の見出し・記事タイトル | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.03em | | `note` | 日付と注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 英字のセクションラベル（施工事例などの英語見出し） | 欧文サンセリフ | Montserrat | 800 | 20px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | - 見出しは太字にし、中央揃えで 2〜3 行に改行する - 本文の重要な語は太字にする。緑の地の上では白い太字にする - 強みの番号（01 など）は緑の大きな太い数字にする - 英字ラベルの後に、日本語の小さな見出しを並べる - 本文は 12px 前後、行間は 1.8 を目安にし、長い文も読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。強み 04〜07 と商品紹介は 2 カラム - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - コンテンツは左右 12px 前後の余白でほぼ全幅に置く - 大きな枠（黄色や緑）で、関連するまとまりを囲む - 電話 CTA のバナーを、セクションの区切りごとに繰り返し置く - 悩みの吹き出しは、左寄せと右寄せを交互に並べる - 記事リストは、左に写真のサムネイル、右にタイトルと日付を置く ## Elevation & Depth - 基本はフラットにし、影は使わない - 口コミカードとボタンだけに、薄い影（0 2px 8px rgba(0,0,0,.1)）をつける - 主 CTA のピル型ボタンには、下に軽い影をつけて立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は四角か角丸 16px で切り抜く。人物は白背景の切り抜きにする - **セクション境界**: 緑のセクションの上下はギザギザの波線にする。黄色のセクションは上辺を三角屋根の形にする - 枠付きカードは、太さ 3px の緑か黄色の線と角丸 16px にする - 見出し帯は角丸 4px にし、内側に白い点線を入れる - アイコンは円形の色面の上に白い線画で置く - 吹き出しは白の角丸にし、話す人の横に小さな丸を 2 つ添える ## Components - **主 CTA ピルボタン**（`button-primary`）: オレンジのピル型ボタン。左にメールのアイコン、右に丸い矢印を置く - **一覧ボタン**（`button-sub`）: 緑の小さな角丸ボタン。右に丸い矢印アイコンを置く - **点線ステッチ見出し帯**（`heading-stitch-band`）: 黄色かオレンジの帯。内側に白い点線を入れ、白い太字の見出しを中央に置く - **電話相談バナー**（`tel-banner`）: 緑の枠のバナー。無料を示すバッジ、大きなオレンジのフリーダイヤル番号、マスコットを組み合わせる - **悩みの吹き出し**（`worry-bubble`）: 緑の地の上に置く白い角丸の吹き出し。横に人物のイラストを添える - **強みカード**（`strength-card`）: 緑の枠のカード。家のアイコンと番号の見出し、オレンジの帯、円形アイコン、説明文で作る - **相談件数の行**（`stat-row`）: 左が緑の月ラベル、右が白い面に大きな件数。黄色のパネルの中に並べる - **FAQ アコーディオン**（`faq-item`）: 赤い丸の Q マーク、太字の質問、右端の V 字の開閉マーク、下に区切り線を置く - **フォームの項目**（`form-row`）: 黄色のラベル行に、緑の「必須」バッジかグレーの「任意」バッジを置き、下の白い行に入力欄を置く ## Do's and Don'ts **Do** - マスコットキャラを各セクションの見出しの横に添えて、親しみを出す - 見出し帯には必ず白い点線を入れる - 電話の CTA バナーを 3〜4 回繰り返し置く - アイコンは円形の色面に白い線画で統一する - 地域名や実績の数字を目立つように見せて、地域密着の安心感を出す **Don't** - 暗い背景や高級感を狙った配色にしない - 細い明朝体の見出しを使わない - 緑・黄・オレンジ以外の色を主役の色にしない - 影の強いリッチなカードにしない - 余白を広く取りすぎた、ミニマルな構成にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みに共感し、無料相談へ誘導する）: 青空と住宅の写真の上に、太いキャッチコピー、マスコット、特長バッジ 3 つ、オレンジのピル型 CTA を置く 2. **バナースライダー**（信頼できるメーカーや導入ガイドを案内する）: イラスト入りの横長バナーを、左右の矢印で切り替える 3. **相談実績**（人気と実績を示す）: 黄色のパネルに、月ごとの件数の行を 3 つ並べる 4. **電話 CTA**（すぐに電話してもらう）: 緑の枠のバナーに、フリーダイヤルの番号とマスコットを置く 5. **悩みの提起**（読み手が抱える不安を言葉にする）: 緑の面に、悩みの吹き出しを 5 つ左右交互に並べ、雲形の吹き出しで共感を示した後に解決の文章を続ける 6. **お客様の声**（第三者の評価を見せる）: 黄色の見出し帯の下に、星評価付きの白いカードと「もっと見る」ボタンを置く 7. **補助金・記事一覧**（補助金の情報と更新の多さを見せる）: 黄色の大きな枠の中に、告知画像、本文、施工事例・お知らせ・アドバイスの記事リストを入れる 8. **強み**（選ばれる理由を 7 つ示す）: 店舗の写真と説明の後に、強みカードを置く。上位 3 つは大きなカード、残り 4 つは 2 カラムで並べる 9. **取扱商品**（商品の種類を案内する）: 三角屋根の形をした淡い黄色の地に、写真と円形アイコンのタイルを 2×2 で並べる 10. **問い合わせフォーム**（Web からの相談を受け付ける）: 黄色の枠の中に、水色のお知らせ帯、黄色のラベル付きの項目、緑の送信ボタン、約束事を書いた枠を置く 11. **よくある質問**（不安を解消する）: マスコットと青い帯の見出しの下に、Q マーク付きのアコーディオンを並べる 12. **代表紹介**（顔を見せて信頼してもらう）: 黄色の見出し帯、白背景の人物写真、長めの本文、オレンジのボタンを置く 13. **フッター**（サイト内を案内する）: グレーの地に、黄色の帯の見出しとリンクのリスト、ロゴ、コピーライトを置く ## Imagery - ヘルメットをかぶった動物のマスコットを、太い輪郭線のアニメ調で描く。ソーラーパネルを持たせる - 悩みを話す人物は、黄色い服の簡単な線画にする - 写真は晴天の下の屋根とソーラーパネルの施工写真、店舗の外観にする - アイコンは太陽・家・電球・握手などを白い線画で描き、円形の色面に置く - 電球や家形の見出しイラストを、英字の見出しや番号の見出しに添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では、口コミ・記事・強み・商品紹介を 3〜4 カラムに広げる - PC ではグローバルナビを上部に横並びで置く - PC ではバナーを 3 つ横に並べる - PC の補助金・代表紹介・店舗紹介は、画像を左、文章を右の 2 カラムにする - PC のコンテンツ幅は 1000px 前後で中央揃えにし、背景の色面だけ全幅にする ## 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-cd82b8c5`（元 LP の URL から採番） - **元 LP**: https://ecohouse.osaka.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。