--- version: alpha name: Green Trust SaaS Trial LP description: 深い緑を基調色に、オレンジの無料トライアルボタンを繰り返し配置した業務ツール向けLP。白地とごく淡いグレー・ミント・ベージュの面を交互に敷き、製品画面のスクリーンショット、ロゴの羅列、料金カード、ステップ、FAQで信頼と申込のしやすさを伝える。 colors: primary: '#1B8561' cta: '#F37101' on-cta: '#FFFFFF' secondary: '#E86F0C' background: '#FFFFFF' background-alt: '#F8F3F0' tint-1: '#EEFAF6' surface: '#F5F5F7' text: '#222222' accent-1: '#18855E' line: '#D8D0C8' tint-2: '#D6D6DB' accent-2: '#E8C85A' dark-section: '#E5E4E9' cta-accessible: '#BE5801' secondary-accessible: '#BC5A0A' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Roboto fontSize: 28px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px cta-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 220px stat-laurel: backgroundColor: '{colors.primary}' typography: '{typography.accent}' height: 50px logo-wall: backgroundColor: '{colors.background}' height: 420px case-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 260px pricing-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 300px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 130px faq-accordion: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 52px pill-toggle: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 32px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1B8561` | FV・CTA帯の地色とブランド色 | 12% | 画素の実測 | | `cta` | `#F37101` | 無料トライアルボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタンの文字 | 0% | 画素の主要色に補正 | | `secondary` | `#E86F0C` | 資料DLボタン（白地にオレンジの枠と文字） | 0% | 推定 | | `background` | `#FFFFFF` | 基本の地色 | 50% | 画素の実測 | | `background-alt` | `#F8F3F0` | 動画紹介・企業情報の淡いベージュ地 | 5% | 画素の実測 | | `tint-1` | `#EEFAF6` | 料金・流れセクションの淡いミント地 | 9% | 画素の実測 | | `surface` | `#F5F5F7` | 機能一覧ボックス・料金のアイコンパネルの淡いグレー | 7% | 画素の実測 | | `text` | `#222222` | 見出し・本文の文字 | 3% | 推定 | | `accent-1` | `#18855E` | 見出し内の強調語の緑 | 0% | 画素の主要色に補正 | | `line` | `#D8D0C8` | カード枠・区切り線 | 1% | 画素の主要色に補正 | | `tint-2` | `#D6D6DB` | 料金カード上部の灰色の帯 | 0% | 画素の実測 | | `accent-2` | `#E8C85A` | 実績表示の月桂樹とバッジの金色 | 0% | 推定 | | `dark-section` | `#E5E4E9` | フッターリンク帯のグレー | 0% | 画素の実測 | | `cta-accessible` | `#BE5801` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#BC5A0A` | AA を満たす補正値（計算） | | 計算 | - 緑は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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.02em | | `headline-lg` | セクションの見出し（中央揃え） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `headline-md` | 特長の小見出し（一部を緑で強調） | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.0em | | `headline-sm` | プラン名・ステップの題名・FAQの質問 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.0em | | `body-md` | 本文の説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.0em | | `note` | 注釈や機能のチェックリスト | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 実績の数字・料金の数字 | 欧文サンセリフ | Roboto | 700 | 28px | 1.2 | 0.0em | | `label-button` | CTAボタン（上に小さな補足、下に大きな行動語の2段組み） | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em | - 書体はゴシック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 ```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-9b734539`（元 LP の URL から採番） - **元 LP**: https://backlog.com/ja/lp-task-management01/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。