DESIGN.md — 緑×黄色のフラットな電話AI SaaS LP（Green Yellow Flat SaaS Lead-Gen LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、情報量多め・訴求型
• キーワード: フラット・緑ベタ面・黄色CTA・線画イラスト・図解パネル・資料請求
• 地の質感: グラデーションも影もほぼないフラットな面構成
• 形: 角丸12〜20pxのカードとボタン。吹き出しは丸みが強い
• 温度感: やや爽やかで中立。緑が誠実さを、黄色が行動を促す

Colors

• 緑のベタ面はFV・資料DLセクション・料金ヘッダーだけに使う
• 黄色は資料DLの主CTAだけに使う
• サブCTAは白地に黄色の枠線を付け、主CTAとセットで縦に並べる
• 図解や写真の背景は淡いミントのパネルに統一する
• 悩みブロックはグレーの角丸面で囲み、白い地と分ける
• 比較グラフは従来の方法を青緑、自社をブランド緑で描き分ける
• price-card は文字 #FFFFFF × 背景 #09975C のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#088652、4.62:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシックにする
• 本文は左揃えにし、小さめの灰色文字で控えめにする
• 見出しの上に小見出し（リード）を小さい太字で添える
• 実績の数字は欧文の極太書体で大きく見せ、単位と注釈番号は小さくする
• 注釈は※番号付きで、ブロック直下に極小サイズで置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。事例だけ横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約14pxで、本文ブロックは画面幅いっぱいに近く取る
• 各セクションの後にCTAを2段（黄・白枠）で入れる
• 特長は見出し→本文→ミントの図解パネルの順に縦に積む
• ステップは番号付きの見出し＋図解パネル＋説明文を繰り返す
• 資料セクションは緑の帯の中に白いカードを入れ子にする

Elevation & Depth

• 基本は影なしのフラット
• 資料の画像だけに薄いドロップシャドウを付けて紙らしく見せる
• カードは影ではなく面の色の差で区切る

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の長方形。図解は角丸なしのミントの矩形パネルに中央配置
• セクション境界: 直線で切り替え。グレーの角丸ブロックや緑の帯で区切る
• CTAは角丸約8pxの全幅ボタンにする
• 吹き出しやバッジは丸みを強くする
• 無料バッジはギザギザの円形スタンプにする

Components

• 資料DLボタン（button-primary）: 全幅の黄色ボタン。濃い文字で（無料）と添える
• 相談予約ボタン（button-secondary）: 白地に黄色の2px枠を付けた全幅ボタン。主CTAの直下に置く
• CTA上の吹き出し（cta-bubble）: 白いピル型の吹き出しに、ひとこと訴求を書く
• 月桂樹の実績バッジ（badge-laurel）: 金の月桂樹で大きな数字を挟む。白カードに3つ縦に並べる
• 悩みの連鎖ブロック（problem-block）: グレーの角丸面に、線画の人物・悩み・下向きの矢印・解決の太字を繰り返し並べる
• 図解パネル（diagram-panel）: 淡いミントの矩形の中に、線画アイコンや比較グラフを置く
• 事例カード（case-card）: 角丸の写真の下にタイトル2行と社名を小さく入れる。横スクロールで見せる
• 料金カード（price-card）: 緑のヘッダーにスタンプ型の無料バッジを置き、白い本体に価格を太字で書く
• 一覧・DLの小ボタン（button-ghost）: 白地に灰色の細枠を付けた中央寄せの小ボタン

Do's and Don'ts

Do - 黄色の主CTAと白枠のサブCTAを、セクションごとに必ずセットで置く - イラストは黒の線画に緑の服や塗りでアクセントを付ける - 数字（削減率・料金・実績）を見出しで大きく打ち出す - 図解は淡いミントのパネルにまとめ、余白を広く取る - FVではサービスの流れを白い円アイコンと矢印のフロー図で見せる

Don't - 黄色をCTA以外の大きな面に使わない - グラデーションや強い影を使わない - 写真を全面に敷いたヒーローにしない - 見出しに明朝体や装飾書体を使わない - 本文を中央揃えの長文にしない

Page Structure

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

1. ファーストビュー（対象・価値・実績を一度に伝え、資料DLへ誘導する）: 緑のベタ面に、白い実績ラベル・太字のコピー・CTA2段・フロー図・月桂樹の実績カードを並べる
2. 悩みの提起（担当者の悩みに共感し、解決策を示す）: グレーの角丸ブロックに、悩み→矢印→解決を3回繰り返す
3. CTA（資料DLと相談予約）: 黄と白枠のボタンを縦に2段並べる
4. 導入ステップ（仕組みを3段階で理解させる）: 番号付きの見出し＋ミントの図解パネル＋短い説明文を3回繰り返す
5. 従来との違い（特長）（競合と比べた優位点を示す）: 大きな2行見出し・本文・図解を、特長ごとに交互に積む
6. コスト比較（価格の安さを視覚で伝える）: ミントのパネルに棒グラフを置き、従来を青緑、自社を緑で描く
7. 導入事例（社会的証明）: 写真カードを横スクロールで並べ、下に一覧ボタンを置く
8. 料金（価格を明示する）: 緑のヘッダーにスタンプバッジを置き、白い本体に月額を書く
9. 資料ダウンロード（資料DLへの最終誘導）: 緑の帯に、チェックリスト・黄色ボタン・資料の画像・マスコットを置き、白いカード内にその他の資料を並べる
10. フッター（サイト内の回遊）: グレーの地にロゴを置き、カテゴリ別のテキストリンクを並べる

Imagery

• 人物はビジネス服の線画イラストにし、服やネクタイを緑で塗る
• アイコンは灰色の細い線画で、ロボットや電話などをシンプルに描く
• ロボットのマスコットは白い本体に黄色のアンテナを付け、親しみやすくする
• 事例写真は明るいオフィスで人物が立つ実写にし、角丸で切り抜く
• 資料はスライド画像を重ねて斜めに置き、ボリュームを見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央約800px幅のコンテナにする
• FVはPCで左にコピー、右にフロー図の2カラムにする
• 悩みとステップはPCで3カラム横並びにする
• 特長はPCで文章と図を左右交互に並べる
• CTAはPCで2つのボタンを横並びにし、幅を小さくする
• 事例は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 行書くと起動時に読み込まれる。