DESIGN.md — ミント緑×オレンジの清潔なSaaS機能LP（Mint Green and Orange Clean SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: ミント緑・オレンジCTA・UIスクショ・白カード・淡グレー帯・ロゴ実績
• 地の質感: フラットな単色面。カードにだけ柔らかい影
• 形: 小さめの角丸の矩形カードとボタン。ピル型は小バッジのみ
• 温度感: やや涼しめ。オレンジで温度を足す

Colors

• 地は白と淡グレーを交互にしてセクションを区切る
• ミント緑の淡い面は機能説明パネルとCTA帯に限定
• 緑は小見出し・強調語・チェックアイコン・小ボタンに使う
• オレンジは資料請求など最優先CTAだけに使う
• 副CTAは白地＋オレンジ枠線か白面＋グレー文字
• フッターのみ濃いチャコールで締める
• button-primary は文字 #FFFFFF × 背景 #EC8C46 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BB5A13、4.58:1）を使う。
• button-outline は文字 #EC8C46 × 背景 #FFFFFF のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BB5A13、4.58:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシック1行
• 強調語だけを緑の文字色にする
• 数値は大きく緑で、単位は小さく
• 本文は13px前後で行間を広めに
• 装飾書体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し→リード→カード群の順で中央揃え
• 機能は画像＋見出し＋説明の3点セット
• 横長パネルは画像と文を左右交互に
• セクション末に主CTAと副CTAを並べた帯を挟む
• 料金表は横スクロールで比較

Elevation & Depth

• カードは薄く広い影（0 2px 10px rgba(0,0,0,.08)）
• FAQ行・帯は影なしのフラット面
• UIスクショは白枠と軽い影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸小さめの横長矩形。人物写真はカード上部に全幅
• セクション境界: 直線で色面を切り替える
• ボタンは角丸4〜6pxの矩形
• 吹き出しバッジのみピル型
• アイコンは緑の単色線画

Components

• 主CTAボタン（button-primary）: オレンジ塗り・白文字・左に小アイコン
• 副CTAボタン（button-outline）: 白地にオレンジ枠と文字
• CTA上の吹き出し（badge-bubble）: 白地の小さなピル型で短い訴求を添える
• 機能カード（feature-card）: ミント面にUIスクショ、下に緑見出しと説明
• 事例カード（case-card）: 写真上部・タイトル・緑の小ボタン
• 料金カード（pricing-card）: 上に緑小ラベル、価格を大きく、オレンジボタン
• FAQアコーディオン（faq-row）: 薄グレー面に緑のQ、右端に下向き矢印
• CTA帯（cta-band）: ミント地に主CTA＋副ボタン2つを横並び
• 口コミカード（review-card）: 星評価・太字見出し・本文・属性注記

Do's and Don'ts

Do - 白と淡グレーを交互に使い区切る - オレンジは主CTAに絞る - UIスクショで機能を具体的に見せる - 強調語は緑の文字色で示す - 各セクション後にCTA帯を挿入する

Don't - 彩度の高い色面を大きく敷かない - オレンジを見出しや装飾に使わない - 大きな角丸やピル型ボタンにしない - 手書き・装飾書体を使わない - 濃い影や立体的な装飾をしない

Page Structure

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

1. ファーストビュー（価値を一言で伝え行動を促す）: 左に2行コピーとチェック付き3項目、主・副CTA縦並び、右にUI画面と人物の合成
2. 導入実績（信頼性の訴求）: 緑の大きな数値見出し＋企業ロゴを4列で敷き詰め
3. 機能紹介（主要機能の説明）: 淡グレー地に3列機能カード、続けて横長ミントパネルを2枚
4. 活用事例（使い方の具体化）: 人物写真付きカード3列と緑の小ボタン
5. 導入事例（成果の証明）: 写真＋成果見出しのカード3列、下に枠線ボタン
6. CTA帯（途中で行動を促す）: ミント帯に主CTAと副ボタン2つ
7. その他の特徴（細かな機能の網羅）: 緑アイコン＋見出し＋短文を4列グリッド
8. 料金プラン（プラン比較）: 4つの料金カードと比較表（緑の丸記号）
9. よくある質問（不安解消）: 薄グレーのアコーディオン行を縦に並べる
10. お客様の声（第三者評価）: 星評価付きの影付き白カードを縦積み
11. 問い合わせCTA（最終コンバージョン）: 淡グレー地にイラスト付き3カード、各ボタン
12. フッター（ナビと会社情報）: チャコール地に白文字の多列リンク

Imagery

• 自社UIの画面キャプチャを白枠で重ねて見せる
• オフィスで働く人物の明るい自然光写真
• アイコンは緑単色のシンプルな線・面アイコン
• 問い合わせ用はミントと緑の小さなフラットイラスト
• 背景装飾や模様は入れない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの3〜4列カードはSPで1列に縦積み
• FVはSPでコピー→画像→CTAの縦順にする
• CTA帯のボタンはSPで縦に並べ全幅に
• 料金比較表はSPで横スクロール
• ロゴ一覧はSPで2〜3列

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