--- version: alpha name: Sky Blue Friendly Character Home Energy LP description: 水色の空とクリーム色の地を交互に敷き、家の形のキャラクターと吹き出しで親しみやすさを出した地域密着型の住宅設備相談LP。紺の太ゴシック見出しに下線を引き、POINT番号付きの白カードの中でグラフや数字を使って節約効果を説明する。黄色（メール）と緑（LINE）のピル型ボタンで相談予約へつなげる。 colors: primary: '#14B4D4' secondary: '#0B5394' background: '#FEFEFE' background-alt: '#FEF9DB' tint-1: '#C8F0FC' tint-2: '#EAFBFD' accent-1: '#4CC6EF' cta: '#FED924' on-cta: '#333333' accent-2: '#2BD133' accent-3: '#E59B13' text: '#333333' surface: '#F2F6F9' marker: '#FFF7D2' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em 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.6 accent: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 56px 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.label-button}' rounded: '{rounded.full}' height: 44px button-line: backgroundColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-tel: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 52px cta-box: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 340px point-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 44px point-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 900px summary-box: backgroundColor: '{colors.marker}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 200px faq-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 150px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 150px form-field: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 48px --- # DESIGN.md — 水色×クリームのキャラ入り省エネ住宅相談LP（Sky Blue Friendly Character Home Energy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: 親しみ・手作り感、清潔・爽やか、情報量多め・訴求型、信頼・誠実 - **キーワード**: 水色の空・家型キャラクター・吹き出し・POINT番号・グラフで数字訴求・ピル型CTA - **地の質感**: フラットな塗りが中心。背景に大きな家の屋根形のシェイプをうっすら重ね、紙吹雪や雲のイラストを散らす - **形**: 角丸カード、紺の細い枠線カード、ピル型ボタン、尾の付いた丸い吹き出し、屋根形（山形）のセクション境界 - **温度感**: 明るく爽やかな寒色が主。クリームと黄色で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#14B4D4` | CTAボックス・帯・番号バッジの青 | 8% | 画素の実測 | | `secondary` | `#0B5394` | 見出し文字・枠線の紺 | 3% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 22% | 画素の実測 | | `background-alt` | `#FEF9DB` | POINTセクションのクリーム地 | 14% | 画素の実測 | | `tint-1` | `#C8F0FC` | 空色の背景・グラフ地 | 18% | 画素の実測 | | `tint-2` | `#EAFBFD` | カード内の淡い水色ボックス | 4% | 画素の実測 | | `accent-1` | `#4CC6EF` | よくある相談セクションの濃い空色 | 5% | 画素の実測 | | `cta` | `#FED924` | メール予約・送信ボタンの黄 | 1% | 画素の実測 | | `on-cta` | `#333333` | 黄ボタン上の文字 | 0% | 推定 | | `accent-2` | `#2BD133` | LINE予約ボタンの緑 | 1% | 画素の実測 | | `accent-3` | `#E59B13` | 金額強調のオレンジ | 0% | 画素の実測 | | `text` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `surface` | `#F2F6F9` | フォーム地の淡グレー | 6% | 画素の実測 | | `marker` | `#FFF7D2` | まとめボックスの黄色地 | 2% | 画素の実測 | - 地は空色・クリーム・白を章ごとに切り替え、同じ地を続けない - 見出しは紺、強調したい語だけ青に変えて読み手の目を止める - 金額やグラフで一番目立たせたい値はオレンジにする - 主CTAは黄、LINEは緑、電話は青地に白枠のピル。この3色を毎回同じ順で並べる - CTAボックスは青の面に白文字を載せ、ページ内で一番濃いブロックにする - グラフは紺・青・水色の濃淡とオレンジの4色だけで描く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | POINT見出しの大きな数字 | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（紺・下線付き） | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.5 | 0.08em | | `headline-md` | カード内のリード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `headline-sm` | 小見出し・吹き出し内の文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.03em | | `note` | ※注釈・出典 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 英字の飾りラベルと薄い大きな英字 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.0 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.2 | 0.08em | - 見出しは極太で中央揃えにし、行ごとに紺の細い下線を引く - 見出しの数字は周りの文字の約1.7倍に大きくし、単位（%・円）は小さくする - 見出しの上に小さな丸ドットを並べたり、英字の小ラベルを置いたりする - セクションの角に、白の半透明で大きな英字を透かしとして置く - 本文は小さめにして行間を広くとり、左揃えにする - 注釈は※から始め、出典はカードの下に小さく書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。相談カードは 2 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - POINTの章ごとに、番号バッジ→見出し→紺枠の白カードの順で縦に並べる - カードの中では、リード見出し→本文→淡い水色のグラフボックスの順にする - 結論はオレンジ寄りの黄色ラベル付きのまとめボックスで締める - CTAボックスは章の区切りごとに差し込む（ファーストビュー直下と中盤） - キャラクターはカードの角からはみ出させて置く ## Elevation & Depth - CTAボックスとお客様の声のカードには、ごく弱いぼかし影をつける - POINTカードは影をつけず、紺の2px枠で囲む - 相談カードは紺の枠に、下へずらしたオフセット影をつける - ピルボタンには下側に薄い影をつける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸10〜12pxの長方形。人物写真は背景を切り抜いて腰から上を使う - **セクション境界**: 家の屋根のような山形の淡いシェイプを重ねる。直線で色を切り替える境界も併用する - 吹き出しは尾の付いた楕円か角丸にし、紺の線で描く - 番号は青い丸に白い数字で、白の二重縁をつける - ラベルは傾けた黄色の吹き出しにする - まとめボックスは水色枠の中に黄色地を入れた二重構造にする ## Components - **メール予約ボタン**（`button-primary`）: 黄色のピル型。封筒アイコンと右向き矢印付き - **LINE予約ボタン**（`button-line`）: 緑のピル型に白文字。黄ボタンのすぐ下に置く - **電話ボタン**（`button-tel`）: 青地の上に白線で囲んだピル。番号を大きく、受付時間を小さく書く - **CTAボックス**（`cta-box`）: 青の角丸ボックス。白文字の見出しに下線を引き、ボタンを3つ縦に並べる - **POINT番号バッジ**（`point-badge`）: 小さな英字POINTの下に、青丸と白抜きの数字を置く - **POINTカード**（`point-card`）: 白地を紺の2px枠で囲む。内側にグラフ用の水色ボックスを入れる - **まとめボックス**（`summary-box`）: 黄色地に紺の大きな数字を置き、左上に傾けた吹き出しラベルを付ける - **相談カード**（`faq-card`）: 白カードに紺枠をつけ、上にキャラクター、下に問いかけを書く。下端に丸いシェブロンを付ける - **お客様の声カード**（`voice-card`）: 白カードに地域と商品を小さく書き、年間の削減額をオレンジの大きな数字で示す。月額の変化は水色のボックスに入れる - **フォーム入力欄**（`form-field`）: 淡いグレーの地に白い入力欄を置き、赤の必須ラベルを付ける ## Do's and Don'ts **Do** - どの章にも家型キャラクターを1体以上置き、吹き出しでひと言しゃべらせる - 効果は円グラフ・棒グラフ・折れ線グラフで見せる - 数字は大きく、単位は小さく書き分ける - CTAは黄・緑・電話の3つをセットで繰り返す - 地色を空色・クリーム・白の順に交互に切り替える **Don't** - 黒や濃いグレーの重たい面は使わない - 見出しを明朝体にしない - 写真の角を尖ったまま使わない - 赤は必須ラベル以外に使わない - 本文を中央揃えで長く続けない - キャラクターを写真のように描かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（地域と専門性を示し、親しみを持たせる）: 空色の背景に雲と家並みを描く。中央の大きな吹き出しにロゴ風タイトルを入れ、周りにキャラクターと悩みの吹き出しを3つ置く 2. **CTA**（すぐ相談したい人を受け止める）: 青のCTAボックスに電話・メール・LINEの順でボタンを並べる 3. **お知らせ**（活動している店だと伝える）: 日付と青いラベルを置き、1行のリストを罫線で区切る 4. **店舗・相談会の紹介**（対面で相談できる安心感を出す）: スタッフの切り抜き写真と吹き出しを置き、角丸の写真とリード見出し・本文を交互に並べる 5. **コンセプト**（顧客目線の姿勢を示す）: 水色の地に人物写真を置き、行ごとに下線を引いた大見出しを添える。角に薄い英字を透かす 6. **動画チャンネル誘導**（情報発信で信頼を得る）: 市松模様のバナーを置き、青いピル型のサブボタンをつける 7. **よくある相談**（疑問を4つに整理して見せる）: 濃い空色の地に、2×2の相談カードと大きなはてなマークを置く 8. **特長POINT1〜4**（節約効果・電気契約・工事期間・災害時の強さを順に説明する）: クリーム地の上に番号バッジ・下線見出し・紺枠のカードを置く。グラフと黄色のまとめボックスを入れる 9. **お客様の声**（実績の数字で裏付ける）: 空色の地に白カードを縦に並べ、削減額をオレンジの数字で示す。実績件数のバッジも置く 10. **中間CTA**（説明を読んだ後に行動を促す）: キャラクターを乗せた青のボックスに3つのボタンを並べる 11. **会社・取り扱いサービス**（サービスの幅を見せる）: 山形の背景を敷く。白い大枠の中に、番号付きの水色カードと写真を縦に並べる 12. **料金シミュレーション**（組み合わせによる節約額を見せる）: 紙吹雪とキャラクターを散らす。施工前と後を横棒グラフで比べ、削減率を強調する 13. **店舗情報**（来店先を案内する）: 白地に写真と店名を置き、罫線で区切った情報表を並べる 14. **相談予約フォーム**（予約を完了させる）: 青の帯見出しの下を淡いグレーの地にし、白い入力欄・ラジオボタン・チェックボックスを並べる。黄色の送信ボタンで締める ## Imagery - 家の形をした丸っこいキャラクターを使う。屋根は赤・青・緑・オレンジで色違いにし、手足と表情を付ける - スタッフ写真は作業着の人物を白背景から切り抜き、ガッツポーズや笑顔の姿を使う - 設備写真は明るく清潔な住宅の屋外や室内を、角丸で切り抜く - 雲・小さな家並み・紙吹雪・きらめきの線を、フラットなイラストで散らす - グラフは太めの線と塗りにし、ラベルは図の中に直接書く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約900pxの幅でまとめ、左右に地色と紙吹雪の装飾を見せる - PCのCTAは電話・メール・LINEを横1列に並べる - PCの相談カードは4列、サービスカードは2列、施工の3ステップは横並びにする - PCでは番号バッジを見出しの左に置き、見出しを左揃えにする - PCでは写真と本文を左右交互の2カラムにする ## 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-81e77cc0`（元 LP の URL から採番） - **元 LP**: https://n-ecoservice.co.jp/ecocute/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。