DESIGN.md — 若草色×オレンジの親しみ系業務SaaS LP（Fresh Green Friendly BtoB SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 親しみ・手作り感、信頼・誠実、情報量多め・訴求型、ナチュラル
• キーワード: 若草色・オレンジCTA・キャラクター・画面キャプチャ・斜め色面・白カード
• 地の質感: 基本は平らな塗り。濃色セクションだけ紙のような粒子と大きな円の影を薄く重ねる
• 形: 角丸の大きい白カード、ピル型ボタン、円形の特長バッジ、斜めに重なる色面
• 温度感: やや暖かい。緑で落ち着かせ、オレンジで温度を上げる

Colors

• 地は白・淡いグリーン・薄グレーを交互に並べ、セクションの区切りにする
• 主CTAは必ずオレンジのピル型。緑はサブの相談ボタンに使う
• CTA帯は若草色と濃い緑の斜めの色面を重ね、白文字を置く
• 料金と会社概要は濃いオリーブ黒の地に白文字で締める
• 強調語はオレンジ文字か、淡い黄のマーカー下線で示す
• アイコンはオレンジ単色か、淡い緑の丸の中にオレンジで描く
• button-primary は文字 #FFFFFF × 背景 #FF6F1E のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4A00、4.56:1）を使う。
• cta-band は文字 #FFFFFF × 背景 #C6C262 のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#7C782D、4.58:1）を使う。
• required-label は文字 #FFFFFF × 背景 #E8202A のコントラスト比が 4.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#E81E28、4.52:1）を使う。

Typography

• 全体を太めのゴシック1書体でまとめる
• セクション見出しは中央揃えで大きく、装飾は付けない
• カード見出しは中央揃えにし、強調語に淡い黄のマーカーを引く
• 本文は小さめにして行間を広く取る
• ロゴだけ筆文字風にして和の親しみを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は1カラム。基本機能・流れは2〜3列のグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約4%の余白を取って横幅いっぱいに並べる
• 悩みのカードは縦長の大きい角丸で中央に縦積みする
• できることは番号付きの白カードに画面キャプチャを全幅で入れる
• CTA帯は約200pxの高さで、キャッチとボタンを中央に置く
• フォームは左にラベル、右に入力欄の2列にする

Elevation & Depth

• 白カードには薄く大きい影（0 4px 16px rgba(0,0,0,.06)）を付ける
• CTAボタンに軽い影を付けて浮かせる
• 濃色セクションはテクスチャで奥行きを出し、影は使わない

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 画面キャプチャは四角のまま。人物写真は四角か背景を切り抜く
• セクション境界: 境界はまっすぐ。CTA帯の中だけ斜めや円弧の色面を重ねる
• 悩みカードは角丸40pxの大きいカプセル型
• 特長は円形のバッジに入れる
• 流れのステップは角丸の正方形カードの中に円形アイコンを置く
• POINTカードは角丸を付けず、緑の見出し帯を付ける

Components

• 主CTAボタン（button-primary）: オレンジのピル型。右端に白丸の中の»を付けた版もある
• 相談ボタン（button-secondary）: 緑のピル型。主CTAの下に置く
• 特長の丸バッジ（feature-badge）: 淡い黄の円に緑の細い枠線。短い特長を3行で入れ、4つ横に並べる
• 悩みカード（problem-card）: 大きい角丸の白カード。上に線画アイコン、見出し、箇条書き2点
• 番号付き機能カード（numbered-card）: オレンジ丸に2桁の番号と見出し、説明文、画面キャプチャを入れる
• POINTカード（point-card）: 緑の帯にPOINTと番号。オレンジのアイコンと、マーカー付きの見出しを置く
• 斜め色面のCTA帯（cta-band）: 若草色と緑の斜めの色面の上に、白い太字のキャッチとオレンジのボタン
• 料金カード（price-card）: 濃色地の上に白カードを2枚置き、間を＋でつなぐ
• FAQ行（faq-item）: 緑のQ.、質問文、右端に▼。下に罫線を引く
• 必須ラベル（required-label）: 赤い小さな四角に白文字

Do's and Don'ts

Do - 主CTAはオレンジのピル型で統一し、CTA帯ごとに置く - 地の色は白・淡いグリーン・グレーを交互にしてセクションの切れ目をはっきりさせる - 機能説明には実際の画面キャプチャを入れ、赤枠や吹き出しで要点を示す - マスコットキャラで親しみを出す - アイコンはオレンジのフラットなシルエットでそろえる

Don't - CTAを緑だけにしない（オレンジの主CTAを残す） - 原色の青や紫をアクセントに使わない - 濃色セクションを増やしすぎない（締めの2か所程度にとどめる） - 明朝体や細い書体を見出しに使わない - カードの角丸をそろえずにバラバラにしない

Page Structure

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

1. ファーストビュー（対象と価値を伝え、資料請求へ誘導する）: 補助金の帯ラベル、太字の大見出し、丸バッジ4つ、PCとキャラのイラスト、資料DLのフォームカード。右上に斜めの若草色の面
2. 悩みの提起（現場の課題を3つ示す）: 薄グレーの地に、角丸の大きい白カードを縦に3枚並べる
3. 解決の宣言（課題から解決へ場面を切り替える）: 濃いオリーブ黒の帯に、白い太字と左右のきらめき装飾
4. サービス概要（何のシステムかを説明する）: 淡いグリーンの地に、見出し、キャラ、リード文、業務フロー図
5. できること（主要な機能を具体的に見せる）: 番号付きの白カードを3枚。画面キャプチャと吹き出しを入れる
6. CTA（相談への誘導）: 斜め色面の帯に、白文字キャッチとオレンジボタン
7. 基本機能（機能を一覧で見せる）: 2列の白カード。淡い緑の丸アイコンと機能リスト
8. 選ばれる理由（差別化のポイントを示す）: 緑の帯付きのPOINTカード3枚。オレンジのアイコンを大きく置く
9. 他社との比較（優位性を表で示す）: 自社列を緑の枠で囲む比較表。記号は○◎△×
10. お客様の声（導入事例で信頼を高める）: 白カードに社名、写真、緑とオレンジの成果見出し、引用文
11. 料金（費用を明示する）: 濃色地に白カードを2枚置き、＋でつなぐ
12. 導入の流れ（手順を示す）: 灰緑の地に角丸カードを3列×2段。緑の»でつなぐ
13. よくある質問（不安を解消する）: 白カードの中にQ.付きのアコーディオンを並べる
14. 問い合わせフォーム・会社概要（申込を受け付け、会社情報を示す）: グレー地の2列フォームとオレンジの送信ボタン。濃色地の会社概要表と、くすんだ緑のフッター

Imagery

• 太い輪郭線で描くゆるいマスコット（作務衣の老人、困り顔のトラなど）で課題を擬人化する
• 実際の管理画面キャプチャに赤枠・黄色の吹き出し・爆発型の吹き出しで注釈を付ける
• アイコンはオレンジ単色のフラットなシルエット
• 業務フローはグレーの縦書きボックスと矢印で描き、自社部分を緑の破線で囲む
• 導入事例は明るいオフィスで撮った人物写真
• FVの背景には食品パッケージの小さなイラストを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは左に見出しとイラスト、右に資料DLのフォームカードを固定配置する
• PCの悩みカードは3列、基本機能は4列、POINTは3列、お客様の声は2列にする
• PCは右側に追従するサイドナビ（目次と相談ボタン）を出す
• PCの料金カードは横並びにして＋でつなぐ
• 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 行書くと起動時に読み込まれる。