DESIGN.md — 黄緑×白のクリーンなEC運用SaaS LP（Fresh Lime Green Ecommerce SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、ナチュラル
• キーワード: 黄緑・角丸カード・英字ラベル・フラットイラスト・インタラクティブ・余白多め
• 地の質感: フラットな単色面。影は柔らかく薄い。FV に半透明の斜め光の帯を重ねる
• 形: 大きめ角丸のカード、ピル型ボタンとラベル、悩みセクションだけ斜めに切り替える
• 温度感: 明るく爽やかでややあたたかい

Colors

• 地は白・薄グレー・淡い黄緑をセクションごとに交互に使う
• 黄緑の全面帯は FV・悩み 1 番・体験フォームなど要所だけに使う
• 数字・キーワード・ボタンは黄緑で強調する
• 最初の申込 CTA だけオレンジにして、補色のように目立たせる
• 資料ダウンロードは黒ピル、詳細リンクは白地にグレー枠のピルにする
• 人気プランは黄緑の枠と黄緑の帯ラベルで区別する
• button-primary は文字 #FFFFFF × 背景 #FD5201 のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D44501、4.52:1）を使う。
• button-green は文字 #FFFFFF × 背景 #9FBE3D のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6A7E29、4.54:1）を使う。
• section-label は文字 #9FBE3D × 背景 #EEF4DB のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6A7E29、4.55:1）を使う。
• url-form は文字 #FFFFFF × 背景 #8BA832 のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#697F26、4.5:1）を使う。

Typography

• 見出しは太めのゴシックで中央揃えにする
• 見出しの上に、大文字の英字ラベルを淡い黄緑のピルに入れて置く
• 見出し内のキーワードや数字だけ黄緑にし、数字は一回り大きくする
• 価格は数字を大きく、¥ や /月 は小さくする
• 本文はグレー寄りの色で、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（実績はカルーセル）
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション上下に 60〜90px の余白をとる
• カードは左右 20px の余白で、ほぼ画面幅いっぱいに置く
• ラベル・見出し・リード文は中央揃えで縦に積む
• セクションの最後に中央寄せのピル型ボタンを 1 つ置く

Elevation & Depth

• カードは白地に薄い枠線と、広く柔らかい影
• スライダー・試算カードは影をやや強めて浮かせる
• 主 CTA には同系色のぼかし影をつける
• FAQ 行は影なしの薄グレー面

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カード上部に角丸の横長写真（約 4:3）
• セクション境界: 基本は直線で切り替える。悩みセクションのみ斜めの境界
• ボタン・ラベル・タグはピル型にする
• 番号バッジは角丸の正方形にする
• ロゴは白い角丸のタイルに並べる

Components

• オレンジの主 CTA（button-primary）: FV の無料トライアル申込。ピル型で影つき
• 黄緑のピルボタン（button-green）: セクション末の誘導。右矢印つき
• 英字ラベル（section-label）: 見出し上の小さな大文字英字。淡い黄緑のピルに入れる
• 番号つき特長アコーディオン（accordion-feature）: 開いた項目は黄緑のヘッダー帯で、閉じた項目は白地に＋アイコン
• 導入事例カード（case-card）: 写真＋業種タグ＋店名。薄い枠線の角丸カード
• 料金プランカード（pricing-card）: プラン名・大きな価格・チェックリスト・枠線ボタン。人気プランは黄緑の枠と帯
• FAQ 行（faq-item）: 黄緑の角丸 Q バッジ＋質問＋右端の＋
• URL 入力フォーム（url-form）: 白の入力欄と濃い黄緑のボタンを縦につなげた一体型
• 実績カード（result-card）: 円アイコン、指標名、BEFORE→AFTER、黄緑の％UP ピル

Do's and Don'ts

Do - 地色を白・薄グレー・淡い黄緑で交互に変えて区切る - 各セクションは英字ラベル＋日本語見出しの型で始める - 数値は黄緑の大きな太字で見せる - 試算スライダーやタブ切替など、触れる UI を入れる - 人物のフラットイラストで親しみを出す

Don't - オレンジを主 CTA 以外に多用しない - 黄緑以外の鮮やかな色を増やさない - 角の立った四角いカードにしない - 濃い背景を連続させない - 本文を純黒で詰めて組まない

Page Structure

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

1. ファーストビュー（価値を一言で伝え、無料トライアルへ誘導する）: 黄緑の全面地に斜めの光の帯。白の大見出し、丸い吹き出しバッジ、イラスト、オレンジのピル CTA
2. 導入実績数（利用店舗数で信頼を示す）: 黄緑の巨大数字の下に、ロゴタイルを 4 列グリッドで並べる
3. 動画（1 分でサービスの概要を伝える）: ラベル・見出しの下に、角丸の動画埋め込み
4. 悩みの提起（ターゲットの課題に共感する）: 1 番目は黄緑帯にイラストと説明。2・3 番目はグレー帯に番号と矢印。境界は斜め
5. 効果体験（導入前後の画面を比較できるようにする）: タブ切替カード、スマホ枠のモック、チェックアイコン付きの機能リスト
6. 解決策・試算（自動化による時間削減を実感させる）: 淡い黄緑の地に白い試算カード。スライダーと黄緑の大きな数字
7. 特長（3 つの強みを示す）: 番号つきアコーディオン。開いた項目にイラスト、本文、タグピル
8. デモ体験（URL 入力でプレビューさせる）: 黄緑の全面帯に白見出しと一体型の入力フォーム
9. お客様の声（導入事例で安心感を与える）: 写真付きの角丸カードを縦に積み、業種タグを付ける
10. 導入実績（改善数値を示す）: BEFORE→AFTER と ％UP ピルのカードを横スクロールで並べる
11. 料金プラン（プランを比較させ、申込へつなげる）: 淡い黄緑の地に 4 枚のプランカード。人気プランは強調し、最後に黒の資料 DL ボタン
12. よくある質問（不安を解消する）: Q バッジ付きの薄グレーのアコーディオン行と、一覧へのリンクボタン

Imagery

• 人物入りのフラットなベクターイラスト。黄緑・青・オレンジ系の配色
• 事例写真は店舗外観や店主の自然な笑顔。明るく写す
• 線画のアイコンを、薄い円背景に入れる
• スマホ画面の UI モックをワイヤー風に描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV のイラストと見出しを横に広げる
• ロゴグリッドは PC で 10 列以上に増やす
• 悩みは PC で 3 列横並びにし、斜めの境界で分ける
• 体験・解決・特長セクションは PC で左テキスト＋右 UI の 2 カラムにする
• 事例は PC で 3 列、実績は 4 列、料金は 4 列にする

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