DESIGN.md — 紺×ライムの防災浄水設備 BtoB LP（Navy and Lime Disaster-Prep Water System LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、力強い・インパクト、情報量多め・訴求型
• キーワード: 濃紺・ライムグリーン・水滴・泡・防災・図解・太字ゴシック
• 地の質感: フラットな単色面に、写実的な水泡・水しぶきの画像を重ねて透明感を出す
• 形: 角丸は控えめ。番号は上半分の弧線、ポイント枠は角を斜めに切った線囲み、工程は下向き五角形
• 温度感: 寒色中心でクール。ライムと黄マーカーで要所だけ熱を加える

Colors

• 地は白・薄グレー・濃紺を交互に切り替え、製品説明パートは長い濃紺ブロックにまとめる
• 濃紺地の小見出し・番号はライム、本文・大見出しは白
• 白地の大見出しは明るい青で太く組む
• ライムは主 CTA と送信ボタンに限定して目立たせる
• 黄色はマーカー線やギザ丸で、危機を示す語の強調だけに使う
• タグは淡いグレー・ベージュ・薄紫で分類ごとに色を分ける

Typography

• 見出しは極太ゴシックで、2行程度に収める
• 製品名だけ欧文イタリック極太でライム色にする
• 本文は行間 1.9 前後でゆったり組む
• セクション上に小さな黒の英語なしラベルを置き、その下に青の大見出し
• 数値は大きく太く、単位は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、施設・事例は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右余白は約 18px
• 濃紺地の中に白いカードを置いて図解・検査データをまとめる
• 比較表は横スクロールで見せる
• 工程は縦に積んだ下向き五角形で流れを示す
• ポイントは 1〜5 の番号付きで縦に並べる

Elevation & Depth

• 基本はフラットで影を使わない
• FV 直下の資料請求カードだけ薄い影を付ける
• バナーにも軽い影を付けて浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 対象施設は線付きの円形切り抜き、その他は角丸なしの矩形
• セクション境界: FV は斜めカットで写真と紺面を分ける。他は直線で切り替える
• 主 CTA とサブボタンはピル型
• 番号は上半分だけの弧線で囲む
• 吹き出し見出しは角丸の帯に下向きの三角
• フォームの入力欄は角丸なしの白い矩形

Components

• ライム主 CTA（button-primary）: ライム地のピル型ボタン。上に小さなアイコンを置く
• 白枠サブボタン（button-outline）: 白地に青の線と青文字のピル型
• 資料請求カード（doc-request-card）: 対象と製品名を左に、縦線で区切って右に行動ラベルとアイコンを置く横長カード
• 吹き出し見出し（speech-heading）: 青い角丸帯に白文字。下に三角のしっぽ
• マーカー強調見出し（marker-heading）: 上下に線を引き、語の背後に黄色のギザ丸や太線を敷く
• 番号付きポイント（point-number）: 弧線で囲んだライムの数字と、ライムの小見出し・白の大見出しを組む
• 工程ボックス（step-chevron）: 白の細線で描いた下向き五角形に、工程名と下線・説明を中央揃え
• 分類タグ（tag-chip）: 淡色面の角丸チップを2列に並べる
• 円形写真カード（circle-photo）: 青い線の円形写真の下に、青の見出しと小さな説明
• フォーム入力欄（form-field）: 紺地に白ラベルと細い下線、白い矩形入力欄

Do's and Don'ts

Do - 濃紺とライムの組み合わせを全体の軸にする - 数値や比較は表・グラフ・図解で見せて信頼感を出す - 紺地の背景に水泡や水しぶきを散らして水らしさを出す - CTA はページ中盤と末尾にまとめて置く - 危機を示す語は黄色マーカーで強調する

Don't - ライムを本文や広い背景に使わない - 暖色や彩度の高い赤を主要色にしない - 細い明朝体で見出しを組まない - 大きな角丸カードや強い影を多用しない - 紺地の上に青文字を置かない

Page Structure

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

1. ファーストビュー（防災ニーズと製品カテゴリを一目で伝える）: 上下の写真に斜めカットの紺面を挟む。バッジ、大コピー、製品写真と2つの効果、ライムの製品名、丸い CTA
2. 資料請求導線（対象別にすぐ行動させる）: ライムと白の横長カードを2段で並べる
3. 問題提起（災害時の断水リスクを示す）: 白地に青の大見出しと本文
4. 悩みの提起（対策しない場合の損失を列挙）: 薄グレー地に吹き出し見出し、マーカー見出し、箇条書き、写真カード
5. データ比較（断水の復旧が遅いことを示す）: 黄色マーカーの黒い大見出しと、横スクロールの比較表
6. 対象施設（必要な施設を示す）: 青帯の見出しに円形写真を2×2で並べる
7. 製品概要（製品の能力を紹介）: 紺地に白文字、動画、円形写真と説明の横並び
8. 仕組み・効果（浄水の原理と除去対象を示す）: 紺地の上の白カードに写真、分類タグ、グラフ、検査書
9. 適合施設・悩み（規模感と課題の解決を示す）: 横に流す写真列と、角を切った線枠にライム帯の見出し
10. 5つのポイント（特長を詳しく説明）: 番号付きの見出し、本文、写真。途中に工程ボックスと比較の黒帯
11. 相談 CTA（問い合わせを促す）: チェック付きの質問リストと人物写真。水色帯にピル型ボタン3つと電話
12. 構成図・活用例（システム構成と用途を示す）: 横スクロールの図解、番号リスト、写真グリッド
13. 導入事例・費用（実績と見積もり方針を示す）: 写真の下に太字の事例名と説明。費用の説明とバナー
14. 問い合わせフォーム（問い合わせを受け付ける）: 紺地に泡の装飾、白い入力欄、ライムの送信ボタン

Imagery

• 透明感のある水泡・水しぶきの写真素材を紺地の端に散らす
• 被災した道路など危機を伝える報道写真風の画像を FV に使う
• 施設・学校・病院は明るく自然光の写真を円形に切り抜く
• 製品は白背景の実機写真に寸法線を入れて図示する
• 人物はスーツの案内役や子どもが水を飲む写真で安心感を出す
• 構成図は細線と点線の配管図に色分けの枠を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにナビと電話番号を横に並べる
• PC の FV は左右の写真の間に中央の紺台形を置く
• 資料請求カードや悩みの2項目は PC で横並びにする
• 対象施設やポイントは PC で4列、またはテキストと画像の2カラムにする
• 工程ボックスは PC で横4列の矢印型に並べる
• フォームは 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 行書くと起動時に読み込まれる。