DESIGN.md — ミント緑×オレンジの吹き出しSaaS LP（Mint Speech-Bubble SaaS Survey LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ミントグリーン・吹き出しモチーフ・角丸カード・オレンジCTA・UIモックアップ・フラットイラスト
• 地の質感: 影の少ないフラットな面。薄いミントの地に白いカードを重ねる
• 形: 大きな角丸カード、ピル型ボタン、円形と吹き出しの装飾
• 温度感: 爽やかで少しだけ温かい。オレンジで親しみを足す

Colors

• 白と薄いミントを交互に敷き、セクションの区切りにする
• FVとCTA帯はミントグリーン一色で塗り、白文字をのせる
• オレンジはCTAと詳細リンクボタンだけに使う
• 番号バッジとフッターにはチャコールを使い、画面を引き締める
• 強調語は緑の文字にし、ピンクのマーカーを下に敷く
• 悩みセクションだけグレーの地にして、課題感を出す
• button-primary は文字 #FFFFFF × 背景 #FC531D のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB3703、4.61:1）を使う。
• button-link は文字 #FC531D × 背景 #FEFEFE のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB3703、4.57:1）を使う。
• number-tab は文字 #E6EEF4 × 背景 #2BCCA3 のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#197860、4.59:1）を使う。

Typography

• 見出しは太いゴシックで、ほぼ中央揃えにする
• 見出しの中の強調語だけ字を大きくする
• 小見出しは黒の前置き1行と緑の大きい本題2行の2段で組む
• 本文は左揃えにし、要点は太字にする
• セクション見出しの下に短い緑の線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2〜3 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 特長は大きな白い角丸パネルで囲み、パネルは薄いミントの地に浮かせる
• 悩みとメリットは3列の小さなカードで並べる（余りは中央に置く）
• 流れは矢印形の横並びステップで見せる
• 機能一覧は2列のピル型リンクで並べる
• CTA帯は途中に1回、FAQの前後に1回ずつ置く

Elevation & Depth

• 影はほとんど付けず、色の面の差で層を作る
• 白カードには、ごく薄い影か淡いミントの枠を付ける
• CTAボタンには、下にずらした濃いオレンジの縁を付けて立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: UIのスクショは角丸の枠に入れ、ノートPCのモックアップに収める
• セクション境界: 直線で区切る。大きな吹き出しや円の装飾を境界にはみ出させる
• 吹き出し形（尾の付いた角丸・円）をロゴの台座や装飾に使う
• 番号バッジは片側だけ角丸のチャコールのタブにし、緑の帯と繋げる
• 理由の3項目は尾の付いた円い吹き出しで見せる

Components

• 主CTAボタン（button-primary）: オレンジのピル型。左に白いアイコン、2行の文字（メイン＋補足）、下に濃い縁
• 資料請求ボタン（button-secondary）: 白地にオレンジの枠と文字のピル型。主CTAと並べる
• 詳細リンクボタン（button-link）: 白地にオレンジの細い枠のピル型。右端にオレンジの丸い矢印
• 吹き出し見出し（speech-bubble-title）: チャコールまたは白の尾付きピルの中にロゴや言葉を置く
• 番号付き特長見出し（number-tab）: チャコールの番号タブと緑の帯をつなげ、右にイラストを重ねる
• 悩みカード（worry-card）: 白い角丸カード。上にグレーの丸アイコン、下に2行の文字
• メリットカード（merit-card）: 上端に緑のラベル帯、白地に太字の2行、下に線画のアイコン
• 機能一覧ピル（feature-pill）: 白地に緑の枠のピル型。右に緑の丸い矢印
• 矢印ステップ（step-flow）: シェブロン形の面を横に連ね、課金がかかる段階だけ濃い緑にする。上にラベルを付ける
• FAQアコーディオン（faq-item）: 白い角丸の帯。左に緑の丸いQアイコン、右に緑の下向き矢印

Do's and Don'ts

Do - 地は白と薄いミントの2色を基本にする - CTAは必ず2つ並べる（オレンジの塗りと白地のオレンジ枠） - 吹き出しや円の装飾を背景に大きく散らす - 製品のUIはノートPCのモックアップや角丸の枠に入れて見せる - 番号付きの特長は、小見出し・本文・画像・詳細リンクの順で繰り返す

Don't - オレンジをCTA以外の大きな面に使わない - 濃い影やグラデーションを多く使わない - 角の尖ったボタンやカードを使わない - 写真の人物を多く使わない（イラストと画面を主役にする） - 緑とオレンジ以外の鮮やかな色を足さない

Page Structure

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

1. ファーストビュー（サービスの種類と価値を一目で伝える）: 緑の地に、吹き出しのロゴ台座、ノートPCのモックアップ、白い太字のキャッチ、CTA2つを置く
2. サービス概要（サービスが何かを定義する）: チャコールの吹き出し見出しの下に、マーカー付きのリード文と、×でつないだ2つの価値カードを置く
3. 悩みの提起（対象者の課題を共有する）: グレーの角丸パネルにイラストを添え、悩みカードを4つ置く
4. 解決提示（悩みから解決への橋渡し）: 白い吹き出しで解決を宣言し、緑の強調文とメリットカード4枚を続ける
5. 選ばれる理由（3つの強みを要約する）: ミントの地に、番号付きの緑の円吹き出しを3つ置く
6. 特長詳細（各強みの根拠を説明する）: 白い大きなパネルを番号ごとに並べ、小見出し・本文・UI画像・リンクで組む
7. 機能一覧（その他の機能を網羅する）: ミントの角丸ボックスに2列のピルリンクを並べる
8. 中間CTA（行動を促す）: 緑の角丸ブロックに、モックアップ、白い見出し、説明文、CTA2つを置く
9. 利用の流れ（導入の手順を示す）: 矢印ステップを横に並べ、注釈とリンクボタンを付ける
10. 料金（料金体系をわかりやすく示す）: ミントの枠の白カードに、掛け算式で項目を並べた料金を載せる
11. CTA（申込を後押しする）: 緑の帯に白い見出しを置き、CTAを縦に2つ並べてモックアップを添える
12. よくある質問（不安を解消する）: 薄いミントの地にFAQアコーディオンを縦に並べる
13. フッター（ナビゲーションと最終CTA）: チャコールの地に、白いロゴ、リンク一覧、CTA、ログインボタンを置く

Imagery

• 製品のダッシュボード画面をノートPCのモックアップで見せる
• UIのスクショは複数を重ね、背後に薄いミントの角丸の面を敷く
• 人物はフラットなベクターイラストにする（グレー・オレンジ・緑の配色で、落ち着いたトーン）
• アイコンは緑の細い線画で、ところどころ塗りを入れる
• 背景には大きな円や吹き出しを薄い緑で重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はFVを左にコピー、右にモックアップの2カラムにする
• PC にはヘッダーナビとCTAボタンを常に表示する
• 特長詳細はPCでテキストを左、画像を右の2カラムにする
• 悩みとメリットのカードはPCで4列1行にする
• 機能ピルはPCで4列にする
• CTA帯はPCでコピーとボタンを左、モックアップを右に置き、フッターは横並びにする

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