DESIGN.md — 深緑×オレンジCTAの業務SaaS LP（Green Trust SaaS Trial LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 深緑・オレンジCTA・製品スクリーンショット・ロゴウォール・料金カード・淡色の面の切り替え
• 地の質感: グラデーションをほぼ使わないフラットな面に、カードの淡い影を少しだけ足す
• 形: 角丸 4〜12px の長方形カード。トグルとステップラベルはピル型
• 温度感: 落ち着いた緑で信頼感を出し、オレンジで行動をうながす中間の温度

Colors

• 緑はFVと中間CTA帯の全幅背景、見出しの強調語、ステップラベル、FAQのQアイコン、FAQの見出し帯に使う。
• オレンジは無料トライアルなど主な申込にだけ使う。ほかのボタンには使わない。
• サブCTAは白地にオレンジの枠と文字で、主CTAの真下に置く。
• 本文が入るセクションは白・淡いグレー・淡いミント・淡いベージュを交互に敷き、境界を色でわける。
• 人気プランのカードだけ枠と上部の帯を緑にし、ほかは灰色の帯にする。
• 金色は実績数字の月桂樹飾りにだけ使う。
• button-primary は文字 #FFFFFF × 背景 #F37101 のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE5801、4.58:1）を使う。
• button-secondary は文字 #E86F0C × 背景 #FFFFFF のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#BC5A0A、4.56:1）を使う。

Typography

• 書体はゴシック1種に絞り、太さだけで強弱をつける。
• セクション見出しは中央揃え、特長の見出しと本文は左揃え。
• 数字は大きく太くし、単位は小さく添える。
• CTAの文字は、小さな補足の下に大きな行動語を置く2段組みにする。
• 見出しの中の重要な語だけを緑で色替えする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴは 3 列、事例カードは 2 列、料金カードは縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• ロゴウォールはFVの直後と事例セクションの2か所に置く。
• 主CTAと資料DLのボタン2つを組にしたCTA帯を、セクションの合間に4回以上はさむ。
• 特長は見出し、本文、スクリーンショットの順に縦に並べ、3回くり返す。
• 機能一覧はアイコンと名前の縦リストにし、淡いグレーの角丸ボックスに入れる。
• 料金とステップは淡いミントの地に白い大きなパネルを敷き、その中にカードを並べる。

Elevation & Depth

• カード類は細い灰色の枠に、ごく淡い影を加える程度にする。
• 製品スクリーンショットには柔らかい影を付け、紙が浮いているように見せる。
• FAQのブロックは白地に薄い影を付ける。
• 強い影や立体的な表現は使わない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: スクリーンショットは角丸の長方形にそのまま収める。事例写真は横長の矩形に切り抜いてカードの上部に置く
• セクション境界: 直線。背景色を全幅で切り替えて区切る
• CTAボタンは角丸 4px 程度の長方形にし、右端に矢印またはダウンロードのアイコンを置く。
• 月払い/年払いの切り替えトグル、ステップのラベル、FAQの「もっと見る」ボタンはピル型にする。
• FAQのQアイコンは緑の円。開閉は右端の細い＋で示す。

Components

• 無料トライアルCTA（button-primary）: オレンジ地に白文字の2段ボタン。右端に＞を置く
• 資料ダウンロードボタン（button-secondary）: 白地にオレンジの枠と文字。右端にダウンロードのアイコンを置く
• 中間CTA帯（cta-band）: 緑の全幅の帯に白い見出しと、2つのボタンを縦に並べる
• 実績数字のバッジ（stat-laurel）: 金色の月桂樹で大きな白い数字を挟み、注釈の番号を添える
• 導入企業ロゴウォール（logo-wall）: 白地に企業ロゴを3列のグリッドで並べる
• 事例カード（case-card）: 写真、企業名、太字のタイトル、区切り線、業種と規模の順に並べた枠付きカード
• 料金プランカード（pricing-card）: 上部に色帯。プラン名、大きな金額、オレンジのボタン、チェックリストの順。人気プランは緑の枠にする
• 導入ステップカード（step-card）: 緑のピル型ラベルにSTEP番号を入れ、題名と説明を続ける。カードの間に下向き矢印を置く
• FAQアコーディオン（faq-accordion）: 緑の見出し帯の下に、Qアイコン付きの質問を線で区切って並べる。下へ行くほどフェードし、ピル型の「もっと見る」ボタンを置く
• 支払い方法の切り替えトグル（pill-toggle）: 選択中の側だけ緑地に白文字にするピル型の2択

Do's and Don'ts

Do - 主CTAは常にオレンジにし、資料DLボタンと必ず組で見せる。 - 製品画面の実物スクリーンショットを特長ごとに入れる。 - 数字（実績・料金）は大きく太く見せ、注釈で根拠を示す。 - セクションごとに淡い地色を切り替え、情報の区切りを明確にする。 - 緑の強調は見出しの語やアイコンなど小さい面に留める。

Don't - 緑以外のブランド色やビビッドな色を追加しない。 - オレンジを主CTA以外の装飾に使わない。 - 写真の上に大きな文字を重ねたイメージ主体のFVにしない。 - 重い影、グラデーションの多用、装飾的な書体は避ける。 - 角丸を大きくしすぎてポップな印象にしない。

Page Structure

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

1. ヘッダー（ロゴとナビゲーション）: 白地に左ロゴ、右ハンバーガーメニュー。PCではナビゲーションと小さなCTAを2つ置く
2. ファーストビュー（価値提案と無料トライアルへの誘導）: 緑の全幅地に白い2行の見出し、PCとスマホの画面モック、CTA2つ、月桂樹付きの実績数字、注釈
3. 導入企業ロゴ（社会的証明）: 白地に中央見出しと3列のロゴグリッド
4. サービス紹介動画（概要を短時間で理解してもらう）: 淡いベージュ地に見出し、16:9の動画、説明文
5. CTA（申込の機会を作る）: 緑の帯に白い見出しとボタン2つ
6. 特長（主な利点を3つ伝える）: 一部の語を緑にした見出し、本文、影付きのスクリーンショットを3回くり返す
7. 機能一覧・外部連携（網羅性を示す）: 淡いグレーの角丸ボックスに緑アイコンと機能名のリスト。連携サービスのアイコンを並べる
8. 導入事例（具体的な成功例を示す）: ロゴウォールと写真付きの事例カード（2列）
9. 料金プラン（価格の透明性を示す）: ミント地に白いパネル。利点のアイコン3つ、支払い方法のトグル、プランカードを縦に積む
10. 導入までの流れ（申込への不安を減らす）: STEPラベル付きのカード4枚を下向き矢印でつなぐ
11. よくある質問（疑問を解消する）: カテゴリごとに緑の帯を置き、Q付きのアコーディオンと「もっと見る」ボタンを続ける
12. 企業情報（運営元の信頼性を示す）: ベージュ地に白い角丸カード。項目名と内容を線で区切って並べる
13. フッター（規約などへの導線）: グレーの帯に小さなリンクを横に並べ、その下にコピーライトを置く

Imagery

• 主なビジュアルは実際の管理画面のスクリーンショット。ノートPCとスマホのモックに入れて斜めにせず正面から見せる。
• 画面のUIは白地に緑のサイドバー、カラフルなガントバーで構成する。
• 事例写真はオフィスで撮った人物の自然光写真を、横長に切り抜く。
• アイコンは緑の単色でシンプルな線と面で描く。料金の利点は黒線に黄色を差したイラスト。
• 実績の数字は金色の月桂樹で飾る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを左右2分割にし、左にコピーとCTA、右に画面モックを置く。
• PCのCTA帯はボタン2つを横に並べる。
• PCの特長は画像とテキストを左右に並べ、セクションごとに左右を入れ替える。
• PCのロゴは7列、事例カードは3列、料金とステップは4列で横に並べる。
• PCの機能一覧は3列のグリッド、企業情報は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 行書くと起動時に読み込まれる。