--- version: alpha name: Fresh Green Process SaaS LP description: 白と薄グレーの地に、深い緑のピル型ボタンと淡い若葉色の英字見出しを置いた業務ワークフローSaaSのLP。主CTAだけを紫〜マゼンタのグラデーションにして目立たせる。機能を英単語見出しで順番に並べ、事例は線囲みのカードでまとめる誠実な構成。 colors: primary: '#3B843D' secondary: '#87AD83' cta: '#8C3C7D' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F5F5F5' tint-1: '#A4D593' text: '#464646' text-body: '#52494B' line: '#E6E8E5' accent-1: '#2272B8' accent-2: '#739DEC' accent-3: '#DB6A6A' dark-section: '#333333' on-dark: '#E6E6E6' typography: display: fontFamily: Playfair Display fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Montserrat fontSize: 34px fontWeight: 300 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.04em accent: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px section-heading-en: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 90px check-list: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 90px recipe-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1800px label-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 32px support-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 370px logo-grid: backgroundColor: '{colors.background}' height: 230px footer-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 550px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3B843D` | ピル型ボタンとラベルの深緑 | 2% | 画素の実測 | | `secondary` | `#87AD83` | 英字セクション見出しの若葉色 | 0% | 画素の実測 | | `cta` | `#8C3C7D` | 主CTA（紫→マゼンタのグラデーション） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAとボタン上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白い地 | 46% | 画素の実測 | | `background-alt` | `#F5F5F5` | 交互に入れるライトグレーのセクション地 | 14% | 画素の実測 | | `tint-1` | `#A4D593` | ヒーローの淡い若葉色の帯 | 4% | 画素の実測 | | `text` | `#464646` | 見出しの濃いグレー | 2% | 画素の実測 | | `text-body` | `#52494B` | 本文の濃いグレー | 3% | 画素の主要色に補正 | | `line` | `#E6E8E5` | 見出しの下線とカードの枠線 | 0% | 画素の主要色に補正 | | `accent-1` | `#2272B8` | サポートカードの青い枠と青い見出し | 0% | 推定 | | `accent-2` | `#739DEC` | プランを示すタグの青紫 | 0% | 画素の実測 | | `accent-3` | `#DB6A6A` | プランを示すタグのコーラル赤 | 0% | 画素の実測 | | `dark-section` | `#333333` | フッターの墨色 | 5% | 画素の実測 | | `on-dark` | `#E6E6E6` | フッター上の白文字 | 0% | 画素の実測 | - 地は白とライトグレー（#F5F5F5）をセクションごとに交互に使う - 緑は深緑と若葉色の2段階だけ。ボタンとラベルは深緑、英字見出しは若葉色にする - 紫〜マゼンタのグラデーションは無料体験などの主CTAだけに使う - サポート関連では、青の枠とプラン別の色タグ（黄・赤・青）を補助色として使ってよい - フッターは墨色、文字は白 - 見出し下の区切り線はグレー。右端の短い部分だけ若葉色にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローの英字キャッチ | 欧文セリフ | Playfair Display | 700 | 26px | 1.3 | 0.02em | | `headline-lg` | 機能ごとの英字セクション見出し（細め） | 欧文サンセリフ | Montserrat | 300 | 34px | 1.1 | 0.0em | | `headline-md` | 日本語の見出し（下線付き） | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `headline-sm` | カード見出しと事例タイトル | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.04em | | `accent` | 英字見出し横に添える日本語の小見出し（▶付き） | ゴシック | Noto Sans JP | 500 | 11px | 1.4 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.03em | | `note` | 「記事を読む」などのテキストリンクと注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | - 機能セクションは、細い若葉色の英単語見出しと「▶ 日本語の小見出し」を横に並べる - 日本語の見出しは太字ゴシックにし、下にグレーの線を引く - 本文は小さめにして行間を広く取り、読みやすくする - 本文中の強調は太字だけにし、色は変えない - 汎用セクションの見出しは中央揃えの普通の太さにし、説明文を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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-61afc2b3`（元 LP の URL から採番） - **元 LP**: https://questetra.com/ja/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。