DESIGN.md — 紺×水色の清潔な産業機械 BtoB LP（Clean Navy Industrial Equipment Upgrade LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺ブロック・淡い水色の地・数値訴求・グラフ・比較表・線画イラスト・フォームで完結
• 地の質感: ほぼフラット。淡い水色やグレージュの地にごく薄いドット柄を敷く
• 形: 角丸 16〜24px のカード、細い枠線のピル型ラベル、見出し下に斜線の切れ目が入った横線
• 温度感: やや寒色寄り。誠実で落ち着いた印象

Colors

• 地は白・淡水色・グレージュの3色を、セクションごとに順番に切り替える
• 濃紺は解決策の提示ブロックとピックアップカードの面に使う
• 赤は削減率などの数値と主 CTA だけに使い、多用しない
• 見出しの文字は水色か濃紺。本文はダークグレー
• グラフで他社のバーは薄グレー、自社のバーは濃紺にして対比させる
• フォームの必須バッジは青地に白文字
• button-primary は文字 #FFFFFF × 背景 #EA415A のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E6213E、4.51:1）を使う。

Typography

• 見出しは中央揃えで2行に収め、太字にする
• 数値は欧文太字で大きくし、単位は小さく添える
• 本文は左揃え。字間は少し広めにとる
• 英字の製品名・ラベルは斜体の太字にする
• 強調したい語だけ赤か水色マーカーにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。表は 4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しの下に、斜線の切れ目が入った水色の横線を置く
• 製品カードは左右に余白をとった白い面にする
• 比較グラフは1項目ずつ縦に並べる
• フォームは1カラムで、ラベルを入力欄の上に置く
• サポートのフローは左にイラスト、右に縦帯の工程を並べる

Elevation & Depth

• 影はほぼ使わずフラットにする
• カードは地色との差と枠線で区切る
• 吹き出しは淡い青の面と紺の細線で表す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品写真は白背景の切り抜き、加工部の写真は四角に切り抜く
• セクション境界: 直線で背景色を切り替える。濃紺ブロックの上には下向き三角の切り欠きを入れる
• CTA は角丸 12px 程度の横長ボタンにする
• ラベルは細い紺枠で角丸にする
• 番号付きの見出しは角丸の枠線で囲み、上辺に見出しを重ねる
• 工程の円形バッジは正円にする

Components

• 主 CTA ボタン（button-primary）: ピンク寄りの赤地に白文字。右端に丸い下向き矢印を付け、上に斜線で挟んだ前置き文を添える
• 斜線入り見出し下線（heading-slash-line）: 水色の見出しの下に、左寄りの位置で斜線が切れ目を作る横線を置く
• 濃紺の解決ブロック（solution-block）: 悩みのチェックリストを載せた白いカードの下に続く濃紺の面。白文字と強調ピンク文字を使う
• ピックアップカード（pickup-card）: 濃紺のカード。左に白いピル型ラベル・説明・区切り線とスペック、右に写真を置く
• 削減率グラフ（stat-chart）: 角丸の枠で囲んだ見出しと棒グラフ。比較対象のバーは薄グレー、自社のバーは濃紺。矢印の横に赤で大きく削減率を示す
• 比較表（compare-table）: 見出し行は淡い青。差分の列だけ濃紺のグラデーションに白文字
• 吹き出し（speech-bubble）: 淡い青の円形吹き出しを紺の細線で縁取り、線画の人物イラストの横に置く
• 申込ステップカード（step-card）: 淡い水色の地に置く白いカード。番号付きの見出し、グレーの線、グレーのアイコン、説明の順に並べ、カード間に下向きの山形を入れる
• 概要の項目バー（spec-bar）: 濃いグレーの帯に白文字で項目名を書き、下に本文を置く
• フォームと必須バッジ（form-field）: 太字のラベルに青い必須バッジを付ける。入力欄はグレー枠で角丸。送信ボタンは濃紺の四角

Do's and Don'ts

Do - 数値は必ずグラフか表で根拠と一緒に示す - 注釈は小さいグレー文字で図の直下に置く - セクションごとに地色を切り替えて区切る - 人物やアイコンは単色の線画イラストにする - 製品写真は白い背景で清潔に見せる

Don't - 赤を見出しや面に広く使わない - 濃い影や立体的な装飾を付けない - 手書き風やポップな書体を使わない - グラフで自社以外のバーに色を付けない - 写真に過度なフィルターをかけない

Page Structure

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

1. ファーストビュー（プラン名と設備更新の訴求）: 白〜淡グレーの地。上下を線で挟んだリード文、大きな細ゴシックのプラン名（一部を赤）、旧機種→矢印→新機種の写真、その下に主 CTA
2. 悩みの提起（維持コストの悩みに共感する）: 淡い水色の地。人物の線画と、チェックアイコン付きで悩みを3つ並べた白カード。下に濃紺の解決ブロックを置く
3. 製品ラインアップ・補助金（選択肢の広さと補助金の併用を伝える）: 上下を線で挟んだ紺の見出し、製品写真を横一列に並べる、ティールのピル型ラベル、注釈
4. ピックアップ（代表的な強みを2つ示す）: 斜体の英字見出し。濃紺のカードを縦に2枚並べ、右に写真を置く
5. 導入メリット（削減効果を数値で証明する）: 白い地。3種類の削減率を角丸見出し付きの棒グラフと図解で示す。囲み枠のまとめ文を添える
6. 試算例（具体的な年間削減額を示す）: 淡い水色の角丸パネルに比較表、算出条件のラベル付きリスト、部品写真を入れる
7. おすすめ製品（機種ごとに特長を紹介する）: グレージュの地に白いカード。枠線ラベル・斜体の製品名・左に縦線の入った説明・写真・動画埋め込みパネルの順に並べる
8. サポート体制（購入後の安心を伝える）: 番号付きの枠見出し。吹き出しとイラストを添え、受付から復旧までを縦帯のフローで示す。最後に時間を強調した囲み
9. 申込の流れ（手続きの手軽さを示す）: 淡い水色の地に白いステップカードを3枚縦に並べ、カード間に山形の矢印を入れる
10. プラン概要（条件と注意事項を明示する）: グレーの帯見出しの下に本文と箇条書きを置く。重要な部分は赤い太字
11. 申込フォーム（そのまま申し込んでもらう）: 1カラムの入力欄に必須バッジを付ける。住所欄は小見出しで区切る。濃紺の確認ボタン
12. フッター（企業サイトへ誘導する）: 黒い帯、リンク群、ロゴ、コピーライトを並べる

Imagery

• 製品は白背景で斜め前から撮り、切り抜く
• 加工部は暗い背景のクローズアップ写真にし、寸法線を白文字で重ねる
• 人物はグレーの丸を背景にした線画イラスト。服は青系で塗る
• アイコンはグレー単色のフラットな形にする
• 地には薄いドット柄をうっすら敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せで、コンテンツ幅を約 1000px にする
• PC ではピックアップカードを2枚横に並べる
• PC では削減率グラフを3列に並べる
• PC では申込ステップを横3列にし、間に矢印を入れる
• PC ではサポートのフローを横向きの工程帯にする
• フォームは PC でも1カラムのまま、幅だけ広げる

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