--- version: alpha name: Mint Speech-Bubble SaaS Survey LP description: ミントグリーンを地色にし、オレンジのピル型CTAと濃いチャコールの番号バッジを組み合わせたBtoB SaaSのLP。吹き出し形の装飾、白い角丸カード、PC画面のモックアップで「気軽さ」と「信頼感」を両立させている。 colors: primary: '#02BA9A' secondary: '#2BCCA3' background: '#FEFEFE' background-alt: '#FFFFFF' tint-1: '#DBF5EF' tint-2: '#CFD8DF' dark-section: '#3A4652' on-dark: '#E6EEF4' cta: '#FC531D' on-cta: '#FFFFFF' text: '#3A424B' accent-1: '#02B999' marker: '#FBD3C5' text-muted: '#6B7378' cta-accessible: '#DB3703' secondary-accessible: '#197860' typography: display: fontFamily: Noto Sans JP fontSize: 36px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 22px fontWeight: 700 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 64px 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.full}' height: 48px button-secondary: textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-link: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px speech-bubble-title: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 64px number-tab: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 52px worry-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 100px merit-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 130px feature-pill: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px step-flow: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 70px faq-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#02BA9A` | ブランドのミントグリーン（FV・CTA帯の地色） | 13% | 画素の実測 | | `secondary` | `#2BCCA3` | 明るいグリーン（装飾の円・見出しの帯） | 4% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白い地 | 37% | 画素の実測 | | `background-alt` | `#FFFFFF` | 薄いミントの地（セクション背景） | 12% | 画素の実測 | | `tint-1` | `#DBF5EF` | やや濃いミント（ラベルの地・フローの面） | 8% | 画素の実測 | | `tint-2` | `#CFD8DF` | 悩みセクションのグレーの地 | 6% | 画素の実測 | | `dark-section` | `#3A4652` | チャコール（番号バッジ・フッター） | 6% | 画素の実測 | | `on-dark` | `#E6EEF4` | 暗い面の上の白文字 | 1% | 画素の実測 | | `cta` | `#FC531D` | 主CTAのオレンジ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#3A424B` | 見出し・本文の濃いチャコール文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#02B999` | 強調見出しの緑文字 | 0% | 画素の主要色に補正 | | `marker` | `#FBD3C5` | 強調語の下に敷くピンクのマーカー | 0% | 推定 | | `text-muted` | `#6B7378` | 注釈のグレー文字 | 0% | 推定 | | `cta-accessible` | `#DB3703` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#197860` | AA を満たす補正値（計算） | | 計算 | - 白と薄いミントを交互に敷き、セクションの区切りにする - 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ | ゴシック | Noto Sans JP | 900 | 36px | 1.4 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.04em | | `headline-md` | 特長の小見出し（緑） | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.02em | | `headline-sm` | カード見出し・リード文 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.02em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 番号バッジ・料金の数字 | 欧文サンセリフ | Montserrat | 700 | 22px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.04em | - 見出しは太いゴシックで、ほぼ中央揃えにする - 見出しの中の強調語だけ字を大きくする - 小見出しは黒の前置き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 ```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-9d824fb4`（元 LP の URL から採番） - **元 LP**: https://quespix.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。