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

• 地は空色・クリーム・白を章ごとに切り替え、同じ地を続けない
• 見出しは紺、強調したい語だけ青に変えて読み手の目を止める
• 金額やグラフで一番目立たせたい値はオレンジにする
• 主CTAは黄、LINEは緑、電話は青地に白枠のピル。この3色を毎回同じ順で並べる
• CTAボックスは青の面に白文字を載せ、ページ内で一番濃いブロックにする
• グラフは紺・青・水色の濃淡とオレンジの4色だけで描く

Typography

• 見出しは極太で中央揃えにし、行ごとに紺の細い下線を引く
• 見出しの数字は周りの文字の約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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。