DESIGN.md — 青×水色の清潔感ある設備工事会社 LP（Clean Water Blue Infrastructure Service LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: 水・清潔・地域密着・青のグラデーション・白カード・波形区切り
• 地の質感: フラットな面に淡いグラデーションと水しぶきの写真を合わせる。カードには柔らかい影
• 形: 角丸は小さめ。白カードは角を少し丸めるだけ。セクション境界は緩やかな波形やカーブ
• 温度感: 寒色中心で涼しく清潔。黄色のアクセントで温かみを少し足す

Colors

• 地は白と淡い水色を交互に使い、要所に濃い青の帯を入れる
• 濃い青は「解決」と「問い合わせ」の帯だけに使う
• 主ボタンはティール色で揃え、青い帯の上では白ボタンに青文字
• 黄色は見出しの一語だけに使う。面には使わない
• 赤はチェックアイコンと注意語に限る
• 文字は黒ではなく濃紺で、寒色のトーンを保つ
• button-primary は文字 #FFFFFF × 背景 #12ACC4 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0D8193、4.59:1）を使う。
• pill-tag は文字 #FFFFFF × 背景 #12ACC4 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#0D8193、4.59:1）を使う。

Typography

• 見出しは英字を大きく置き、その下に小さな和文ラベルを添える
• キャッチは2行。強調語だけ青やティールに色を変える
• 本文は小さめにし、行間を広くとる
• 電話番号は欧文の太字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカード 3 列、または左に図版・右にリスト
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは英字見出しを中央寄せで始める
• 白カードを色帯にまたがせて重ね、奥行きを出す
• 施工事例は写真付きのカードを3枚並べ、その下に一覧へのボタンを置く
• 会社紹介は横長の風景写真の上に白パネルを重ねる
• フッターは青地の上に白いサイトマップカードを置く

Elevation & Depth

• 白カードには薄い影（0 4px 16px rgba(0,60,120,.08)）
• ボタンは影なしのフラット
• FV のテキストパネルは半透明の白で、写真の上に浮かせる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしか小さな角丸の長方形。FV は写真タイルのグリッド
• セクション境界: 緩やかな波形やカーブ、斜めの区切りで青帯へ移る
• タグはピル型の小さなラベルにする
• ボタンは角丸4px程度の長方形にし、右に矢印を付ける
• FV の地域バッジは青い円形

Components

• ティール色のボタン（button-primary）: 一覧や会社概要へ誘導する長方形ボタン。右に矢印を付ける
• メール問い合わせボタン（button-contact-white）: 青帯の上に置く白いボタン。文字とアイコンは青
• 英字＋和文の見出し（section-heading）: 中央に青の英字見出しを置き、下に小さな和文を添える
• 悩みの見出しタグ（pill-tag）: ティール色のピル型ラベル。白文字でカードの上辺に重ねる
• 悩みのチェックリスト（check-list）: 赤いチェックの後に短い悩みを4つ並べる。キーワードは青で強調
• サービスカード（service-card）: 白カードの左に見出しと短い説明、右に作業写真を置く
• 施工事例カード（works-card）: 写真の下にカテゴリタグ、タイトル、地域ピンを置く
• 対応エリアの円バッジ（region-badge）: FV に置く青い円。白文字で対応地域を示す
• ヘッダーの電話番号（fixed-tel）: ヘッダー右端の青いブロック。電話番号と受付時間を入れる

Do's and Don'ts

Do - 淡い水色と白の交互配置で清潔感を保つ - 青い帯は解決と問い合わせの山場だけに使う - 作業現場の実写を多く使い、信頼感を出す - 見出しは英字と和文の2段で統一する - 白カードを帯にまたがせて立体感を出す

Don't - 暖色の大きな面を使わない - ボタンを強いピル型やグラデーションにしない - 黒い文字を使わない（濃紺にする） - 装飾的な書体や手書き書体を入れない - 影を強くしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ナビゲーションと電話の導線）: 白地の左にロゴ、中央にメニュー、右端に青い電話ブロック
2. ファーストビュー（事業内容と実績年数を伝える）: 水しぶきと生活シーンの写真グリッドに、半透明の白パネルでキャッチを載せる。円バッジと問い合わせのイラストも置く
3. お知らせ（最新情報を出す）: 淡いシアンの帯に、英字ラベルと短いテキストを横並びで置く
4. 悩みの提起（トラブル例で共感を得る）: 白カードの上にピル型タグ。左に写真、右に4項目のチェックリスト
5. 解決の提示（自社が解決できると示す）: 濃い青の帯を中央に置き、白文字の見出しと短い説明を入れる
6. サービス（事業内容を3つ見せる）: 左に家の断面イラスト、右に写真付きのサービスカードを3枚縦に並べる
7. 補助金案内（費用の不安を和らげる）: 横長の白カードにラベルと説明、電卓のイラスト
8. 施工事例（実績で信頼を得る）: 淡い水色の帯の上に写真カード3枚とティール色の一覧ボタン
9. 会社紹介（理念を伝える）: 山並みの風景写真の上に白パネルを重ね、文章・写真・ボタン2つを置く
10. ブログ（更新情報）: 淡いシアン地に英字見出しと記事リスト
11. 問い合わせ（電話とメールへ誘導する）: 波形で区切った青のグラデーション帯に、電話番号と白いメールボタンを並べる
12. フッター（サイトマップと会社情報）: 白いカードにリンクを並べ、下に白地のロゴと住所

Imagery

• 水しぶきや透明な水の写真を、青白く明るいトーンで使う
• 作業員が設備を点検・施工する現場の実写を使う
• 家族の生活シーンは明るい室内で撮る
• 家の断面図は青系のアイソメトリックなイラストにする
• 人物イラストはフラットな線画風にし、青とティールで塗る
• 地域を表す広い風景写真は空を多めに入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像のみ。SP ではカード3列を1列に縦積みする
• FV の写真グリッドは SP で上下に分け、キャッチのパネルを写真の下に置く
• サービスはイラストを上、カードを下に縦に並べる
• ヘッダーの電話は SP で固定の下部ボタンにする
• 見出しは SP で 22〜24px 程度にする

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 行書くと起動時に読み込まれる。