DESIGN.md — 若葉グリーン×紫CTAの業務SaaS LP（Fresh Green Process SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、ナチュラル、シンプル・ミニマル
• キーワード: 若葉グリーン・白とライトグレーの交互・細い英字見出し・画面キャプチャ中心・線囲みカード
• 地の質感: フラットな単色面が基本。ヒーローと最終CTAの帯だけ、淡い緑の曲線グラデーションを背景に敷く
• 形: ボタンは深緑のピル型。カードは細い線で囲んだ角丸。見出しの下にグレーの線を引き、右端だけ緑にする
• 温度感: やや涼しく爽やか。緑で落ち着いた信頼感を出す

Colors

• 地は白とライトグレー（#F5F5F5）をセクションごとに交互に使う
• 緑は深緑と若葉色の2段階だけ。ボタンとラベルは深緑、英字見出しは若葉色にする
• 紫〜マゼンタのグラデーションは無料体験などの主CTAだけに使う
• サポート関連では、青の枠とプラン別の色タグ（黄・赤・青）を補助色として使ってよい
• フッターは墨色、文字は白
• 見出し下の区切り線はグレー。右端の短い部分だけ若葉色にする

Typography

• 機能セクションは、細い若葉色の英単語見出しと「▶ 日本語の小見出し」を横に並べる
• 日本語の見出しは太字ゴシックにし、下にグレーの線を引く
• 本文は小さめにして行間を広く取り、読みやすくする
• 本文中の強調は太字だけにし、色は変えない
• 汎用セクションの見出しは中央揃えの普通の太さにし、説明文を1行添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴ一覧は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックの左右余白は約15px
• 各機能は「英字見出し → 日本語見出し → 本文 → 画面キャプチャか動画 → 中央寄せのピル型ボタン」の順に並べる
• 事例は大きな線囲みカードにまとめ、カードの左上から見出しラベルをはみ出させる
• セクションの区切りは背景色の切り替えで表す

Elevation & Depth

• ピル型ボタンには弱い影を付ける
• カードは影を付けず、細い線で囲む
• 画面キャプチャと事例画像には淡い影と角丸を付けてよい

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 画面キャプチャは横長の角丸長方形。事例画像は左にフロー図、右に人物イラストを斜めの境界で合成する
• セクション境界: 直線で背景色を切り替える。ヒーローと最終CTAだけ、緑の曲線グラデーションを使う
• 主CTAは角丸の小さい横長の帯（ピル型にしない）
• サブボタンは深緑のピル型にし、右端に白丸の矢印アイコンを付ける
• カードは1pxの濃いグレーの線と角丸14px程度にする

Components

• 無料体験の主CTA（button-cta）: 紫からマゼンタへの横グラデーションを敷いた幅広の帯ボタン。白文字を中央に置く
• 詳しく見るボタン（button-pill）: 深緑のピル型。右端に白丸の矢印を付け、中央に寄せる
• 英字見出し＋小見出し（section-heading-en）: 細い若葉色の英単語の横に「▶ 日本語の動詞」を小さく添える。その下に日本語見出しと、右端だけ緑の下線を置く
• チェックリスト（check-list）: ヒーローの若葉色の帯の上に、チェック記号付きの特長を3行並べる
• 事例をまとめる線囲みカード（recipe-card）: 細い線で囲んだ角丸カード。左上に深緑のラベルをはみ出させ、中に説明文と事例画像、見出し、本文、右寄せのテキストリンクを並べる
• カテゴリラベル（label-tag）: 深緑の長方形に白の太字を載せたラベル
• サポート紹介カード（support-card）: 青い太枠の白いカード。青い見出し、プラン別の色タグ、フラットなイラスト、短い説明文を並べる
• 導入企業のロゴ一覧（logo-grid）: 白い地に企業ロゴを3列で均等に並べる
• 墨色のフッター（footer-dark）: ロゴ、SNSアイコン、3列のリンク、ピル型の検索フォームを置く

Do's and Don'ts

Do - 主CTAのグラデーションは、ファーストビューと最終CTAの2箇所だけに使う - 機能説明は英単語見出しで統一し、同じ型を繰り返す - 画面キャプチャや動画を大きく載せ、製品が実際に動く様子を見せる - セクションごとに白とライトグレーを交互にする - 細部ボタンはすべて深緑のピル型＋矢印アイコンにそろえる

Don't - 紫を主CTA以外のボタンや見出しに使わない - 英字見出しを太字にしない（細さで軽さを出す） - カードに濃い影を付けない - 緑を3色以上使い分けない - 背景に派手な写真を全面に敷かない

Page Structure

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

1. ヘッダー（ブランドを示し、メニューを開けるようにする）: 白い地に、左にロゴ、右にハンバーガーメニューを置く
2. ファーストビュー（価値を宣言し、無料体験へ誘導する）: セリフ体の英字キャッチと1行の説明、和文の見出し、ロゴを置く。続く若葉色の帯にチェックリストを3行並べ、紫のCTAを置く
3. 導入企業ロゴ（実績を示して信頼してもらう）: 白い地に、ロゴを3列×3行で並べる
4. 製品の概要（製品の考え方を説明する）: グレーの地に、本文、太字のリード文、紹介動画を並べる
5. 機能紹介（4つの段階）（業務改善サイクルの各段階を説明する）: 英字見出し、日本語見出し、本文、画面キャプチャ（スライダー）、ピル型ボタンの並びを段階ごとに繰り返す
6. 活用事例（レシピ）（具体的な改善例を見せる）: グレーの地に線囲みのカードを置き、カテゴリラベル付きで事例を3件ずつ並べる
7. お客様の事例（導入企業の声で信頼してもらう）: 中央揃えの見出しの下に、ロゴ、短い文、社名、ボタンを入れた大きな角丸カードを置く
8. サポート体制（導入後の安心感を伝える）: 青枠のカードに、イラストとプラン別の色タグを入れて縦に並べる。最後に価格ページへのボタンを置く
9. 最終CTA（無料体験を促す）: 緑の曲線の背景に、紫グラデーションの帯ボタンを置く
10. フッター（サイト内の各ページへ案内する）: 墨色の地に、アイコン、3列のリンク、検索フォームを置く

Imagery

• 製品の画面キャプチャを主役にし、黒い斜めの帯に白文字で見出しを重ねる
• 事例画像は、左にフロー図（強調部分を赤い破線で囲む）、右に業務で悩む人や喜ぶ人の写実的なイラストを並べ、斜めの境界で合成する
• サポートには、青・緑・薄紫のフラットな線画イラスト（PCやヘッドセットを使う人物）を使う
• ヒーローとCTAの背景には、若葉色の曲線が重なった抽象的なグラデーションを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、ヒーローを左テキスト・右ノートPCのモックアップの2カラムにし、上部に横並びのメニューを置く
• PC では、導入企業ロゴを1行に横並びにする
• PC では、レシピの事例を左に画像、右に文章のリスト型にする
• PC では、サポートカードを3列に並べる
• PC では、コンテンツ幅を約85%にし、中央に寄せる

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